/* ========== GLOBAL (header + carousel lives outside page namespace) ========== */
/* Header nav active badge (minimal underline style; overridden later for .badge pill) */
nav a.badge{ position:relative; font-weight:700 }
nav a.badge::after{
  content:""; position:absolute; inset-inline-end:0; inset-block-end:-6px;
  width:100%; height:3px; background:#7cc5ff; border-radius:2px
}

/* Carousel (in header) */
.vf-carousel-wrap{
  overflow:hidden;
  background:linear-gradient(90deg,#0c1627,#0e1a2f);
  border-block:1px solid #243655;
}
.vf-carousel{
  display:flex; gap:18px; align-items:center; padding:10px 12px;
  white-space:nowrap;
  animation:vf-marquee var(--vf-speed,28s) linear infinite;
  will-change:transform;
}
.vf-item{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:#13223a; border:1px solid #243655;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  font-size:14px; line-height:1; white-space:nowrap;
}
.vf-item a{ color:#e9eef9; text-decoration:none }
.vf-item a:hover{ text-decoration:underline }
@keyframes vf-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width:520px){
  .vf-carousel{ gap:12px; padding:8px 10px }
  .vf-item{ padding:6px 9px; font-size:13px }
}

/* ========== PAGE NAMESPACE (#dlp) ========== */
#dlp{
  --bg:#0b1220; --card:#121a2b; --ink:#e9eef9; --muted:#b9c8dd; --accent:#7cc5ff;
  --ok:#42e6a0; --warn:#ffd166; --bad:#ff8fa3; --border:#243655;
  --shadow:0 10px 24px rgba(0,0,0,.28); --radius:16px; --maxw:1100px;
}
#dlp{ color:var(--ink); background:var(--bg); font-family:"Tajawal","Cairo","Segoe UI",Roboto,Arial,sans-serif; line-height:1.8 }
#dlp a{ color:var(--accent); text-decoration:none } #dlp a:hover{text-decoration:underline}
#dlp *{ box-sizing:border-box }

/* Layout */
#dlp .container{ max-width:var(--maxw); margin:0 auto; padding:14px }
#dlp .page-wrap{ padding-top:6px }
#dlp .main-grid{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start }
@media (min-width:992px){
  #dlp .container{ padding:20px }
  #dlp .main-grid{ grid-template-columns:minmax(0,1fr) 300px; gap:20px }
}

/* Cards */
#dlp .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }
#dlp .article{ padding:18px; min-height:200px }
#dlp header h1{ margin:.2em 0 .4em; font-size:clamp(20px,3.2vw,28px); line-height:1.35 }
#dlp .muted{ color:var(--muted); font-size:.95em }

/* Headings/Text rhythm */
#dlp h2{ margin:1.1em 0 .55em; font-size:clamp(18px,2.5vw,22px); line-height:1.35 }
#dlp h3{ margin:1em 0 .45em; font-size:clamp(16px,2.2vw,19px) }
#dlp p{ margin:.6em 0 } #dlp ul{ margin:.5em 0; padding:0 1em } #dlp li{ margin:.25em 0 }
#dlp u{ text-underline-offset:2px } #dlp em{ font-style:normal; color:#b8d7ff } #dlp strong{ color:#00bf63 }

/* ===== BASE TABLE LOOK (centered text) ===== */
#dlp .table-wrap{
  border-radius:12px; border:1px solid var(--border);
  position:relative; max-width:100%;
  overflow-x:auto;                 /* scrolls ONLY when it overflows */
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;

  /* Firefox scrollbar (white thumb on dark track) */
  scrollbar-color:#ffffff #1b2a44;
  scrollbar-width:auto;
}
#dlp table.table{
  width:100%; border-collapse:collapse; background:transparent;
  /* no min-width on small screens → no forced scroll */
  min-width:unset;
}
#dlp .table th,#dlp .table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  text-align:center;               /* center all cell text */
}
#dlp .table thead th{ background:#18243a; color:#dfe9f9; white-space:nowrap }
#dlp .table tbody tr:nth-child(odd){ background:#0e182b }
#dlp .table tbody tr:nth-child(even){ background:#0f1a2f }

/* On wider screens, give big tables some breathing room without hurting mobile */
@media (min-width:700px){
  #dlp table.table{ min-width:640px }
}

/* WebKit scrollbar (Chrome/Safari/Edge) — CLEAR WHITE */
#dlp .table-wrap::-webkit-scrollbar{ height:14px }
#dlp .table-wrap::-webkit-scrollbar-track{ background:#1b2a44; border-radius:999px }
#dlp .table-wrap::-webkit-scrollbar-thumb{
  background:#ffffff; border-radius:999px; border:2px solid #1b2a44;
}
#dlp .table-wrap::-webkit-scrollbar-thumb:hover{ background:#f5f5f5 }
#dlp .table-wrap::-webkit-scrollbar-corner{ background:#1b2a44 }

/* Fade hint — stop above the scrollbar so it never covers it */
#dlp .table-wrap::after{
  content:""; position:absolute; inset-inline-end:0; inset-block-start:0; inset-block-end:14px;
  width:28px; pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,.35), transparent);
  border-radius:inherit;
}

/* Details / callouts */
#dlp details{ background:#0f1a2f; border:1px solid var(--border); border-radius:12px; padding:10px 12px }
#dlp details+details{ margin-top:10px } #dlp details.ok{ border-color:#2a8463 }
#dlp details summary{ cursor:pointer; font-weight:700 }
#dlp .example{ border:1px dashed var(--border); border-radius:12px; padding:10px 12px; background:#0f1a2f }

/* LTR German isolation (keep direction but center inside table stacks) */
#dlp .de,[lang="de"]{
  direction:ltr; unicode-bidi:isolate; text-align:left;
  font-family:system-ui,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif; letter-spacing:.2px
}
#dlp .de-block{
  direction:ltr; unicode-bidi:isolate; text-align:left; margin:.6em 0;
  background:#0f1a2f; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  font-family:system-ui,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif
}
#dlp .table td .de, #dlp .table td [lang="de"]{ display:inline-block }

/* Sidebar card inside our namespace only */
#dlp aside .card{ padding:12px }

/* Prevent external CSS from hiding main area */
#dlp main{ display:block }
#dlp .main-grid > main{ min-width:0 }
#dlp .main-grid > aside{ min-width:0 }
#dlp [data-include]{ display:block }

/* Mobile tighter */
@media (max-width:480px){
  #dlp .article{ padding:14px }
  #dlp .table th,#dlp .table td{ padding:8px 10px }
  #dlp h2{ margin:1em 0 .5em }
}

/* ===== Compact stacked table ===== */
#dlp table.table.compact{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:unset }
#dlp .table.compact th,#dlp .table.compact td{
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle; word-break:break-word; text-align:center;
}
#dlp .table.compact thead th{
  background:#e11d2e; color:#fff; font-weight:800; text-align:center;
  border-bottom:2px solid rgba(255,255,255,.15);
}

/* ===== Two-column compact table (preferred style) ===== */
#dlp table.table.two-col{
  width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  direction:rtl; min-width:unset;
}
#dlp .table.two-col th,#dlp .table.two-col td{
  padding:12px 14px; vertical-align:middle; word-break:break-word;
  border-bottom:1px solid rgba(0,0,0,.25); text-align:center;
}
#dlp .table.two-col thead th{
  background:#e11d2e; color:#fff; font-weight:800; text-align:center;
  border-bottom:2px solid rgba(255,255,255,.15);
}
#dlp .table.two-col thead th:first-child{ border-top-right-radius:12px }
#dlp .table.two-col thead th:last-child{ border-top-left-radius:12px }

/* Stripes */
#dlp .table.two-col tbody tr:nth-child(odd) td{ background:#ffd84d; color:#111 }
#dlp .table.two-col tbody tr:nth-child(even) td{ background:#000; color:#fff }
#dlp .table.two-col tbody tr:nth-child(odd) a{ color:#111 }
#dlp .table.two-col tbody tr:nth-child(even) a{ color:#fff }

/* Stacked lines inside a cell (centered) */
#dlp .stack{ display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center }
#dlp .stack .de{
  direction:ltr; unicode-bidi:isolate; text-align:center;
  font-weight:700; letter-spacing:.15px;
  font-family:system-ui,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
}
#dlp .stack .ar{ direction:rtl; text-align:center; font-weight:500; opacity:.95 }

/* Column widths */
#dlp .table.two-col col.prep{ width:30% }
#dlp .table.two-col col.ex{ width:70% }

/* Only add minimum widths on wider screens (prevents forced scroll on phones) */
@media (min-width:700px){
  #dlp table.table.two-col{ min-width:520px }
}

/* ===== Header (red, centered, white text) ===== */
header.site{
  background:#e11d2e; color:#fff; border-bottom:1px solid #b70f1f; position:relative; z-index:10;
}
header.site .site-top{ max-width:1100px; margin:0 auto; padding:10px 16px }
header.site nav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
header.site nav a{
  color:#fff; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:999px;
}
header.site nav a:hover, header.site nav a:focus{ background:rgba(255,255,255,.15); outline:none }

/* Active link as a pill */
nav a.badge{ background:#fff; color:#b70f1f !important; border-radius:999px }
nav a.badge::after{ display:none !important }

/* ===== Footer (yellow, centered, black text) ===== */
.site-footer, footer.site-footer{
  background:#ffd84d; color:#111; border-top:1px solid #e6c23f;
}
.site-footer .container{ max-width:1100px; margin:0 auto; padding:16px; text-align:center }
.site-footer a{ color:#111; font-weight:600; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }
.site-footer nav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:6px }
div[data-include="/components/footer.html"] footer{
  background:#ffd84d; color:#111; border-top:1px solid #e6c23f;
}
div[data-include="/components/footer.html"] footer .container{
  max-width:1100px; margin:0 auto; padding:16px; text-align:center;
}
div[data-include="/components/footer.html"] footer a{ color:#111 }
div[data-include="/components/footer.html"] footer nav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap }

/* Mobile tightening */
@media (max-width:520px){
  header.site nav a{ padding:7px 10px }
  .site-footer .container{ padding:14px }
}

/* Edge-to-edge scroll area inside cards */
#dlp .card .table-wrap{ margin-inline:-12px; padding-inline:12px }