/* ============================================================
   WatFill — Base layer: reset, typography, app shell layout
   All spacing uses CSS logical properties so the same rules
   serve RTL (default) and LTR without mirrored stylesheets.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--wf-font);
  background: var(--wf-background);
  color: var(--wf-on-surface);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
  min-block-size: 100vh;
  overflow-x: hidden;
}

img, svg { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; inline-size: 100%; }
[hidden] { display: none !important; }

/* Latin technical strings (CSS tokens, error ids, plate refs) must not
   be reordered by the RTL paragraph direction. */
code {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  font-family: var(--wf-font-num); word-break: break-word;
}

/* Numerals stay legible and aligned inside Arabic text */
.num, td.num, .wf-metric__value, .wf-table td[data-num] {
  font-family: var(--wf-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------- Type scale (MD3) ---------- */
.t-display-l { font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.5px; }
.t-display-s { font-size: 32px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.3px; }
.t-headline  { font-size: 24px; line-height: 1.3;  font-weight: 700; letter-spacing: -0.2px; }
.t-title-l   { font-size: 20px; line-height: 1.35; font-weight: 700; }
.t-title-m   { font-size: 16px; line-height: 1.4;  font-weight: 600; }
.t-title-s   { font-size: 14px; line-height: 1.45; font-weight: 600; }
.t-body-l    { font-size: 15px; line-height: 1.65; font-weight: 400; }
.t-body-m    { font-size: 14px; line-height: 1.6;  font-weight: 400; }
.t-body-s    { font-size: 13px; line-height: 1.55; font-weight: 400; }
.t-label-l   { font-size: 13px; line-height: 1.4;  font-weight: 600; }
.t-label-m   { font-size: 12px; line-height: 1.35; font-weight: 600; }
.t-label-s   { font-size: 11px; line-height: 1.3;  font-weight: 600; letter-spacing: .2px; }

.muted   { color: var(--wf-on-surface-variant); }
.faint   { color: var(--wf-outline); }
.tnum    { font-variant-numeric: tabular-nums; }
.trunc   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center  { text-align: center; }
.grow    { flex: 1 1 auto; min-inline-size: 0; }

/* ---------- Focus: single visible, accessible ring ---------- */
:focus-visible {
  outline: 2px solid var(--wf-primary);
  outline-offset: 2px;
  border-radius: var(--wf-r-xs);
}

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--wf-primary); color: var(--wf-on-primary);
  padding: var(--wf-3) var(--wf-5); border-radius: 0 0 var(--wf-r-md) var(--wf-r-md);
  z-index: 999; font-weight: 600;
  transition: inset-block-start var(--wf-dur-med) var(--wf-ease-decel);
}
.skip-link:focus { inset-block-start: 0; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--wf-outline-variant) transparent; }
*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--wf-outline-variant);
  border-radius: var(--wf-r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--wf-outline); background-clip: content-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.wf-app {
  display: grid;
  grid-template-columns: var(--wf-sidebar-w) 1fr;
  min-block-size: 100vh;
  transition: grid-template-columns var(--wf-dur-med) var(--wf-ease-emphasized);
}
.wf-app[data-rail="true"] { grid-template-columns: var(--wf-sidebar-w-rail) 1fr; }

.wf-main {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}

.wf-content {
  flex: 1;
  inline-size: 100%;
  max-inline-size: var(--wf-content-max);
  margin-inline: auto;
  padding: var(--wf-6) var(--wf-7) var(--wf-10);
}

/* ---------- Page header ---------- */
.wf-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--wf-5); flex-wrap: wrap;
  margin-block-end: var(--wf-6);
}
.wf-page-head__actions { display: flex; gap: var(--wf-2); flex-wrap: wrap; align-items: center; }
.wf-breadcrumb { display: flex; align-items: center; gap: var(--wf-1); margin-block-end: var(--wf-2); }
.wf-breadcrumb a { color: var(--wf-on-surface-variant); border-radius: var(--wf-r-xs); }
.wf-breadcrumb a:hover { color: var(--wf-primary); }
.wf-breadcrumb svg { inline-size: 14px; block-size: 14px; color: var(--wf-outline); }
[dir="rtl"] .wf-breadcrumb svg { transform: scaleX(-1); }

/* ---------- Generic layout helpers ---------- */
.row  { display: flex; align-items: center; gap: var(--wf-3); }
.row-b{ display: flex; align-items: center; justify-content: space-between; gap: var(--wf-3); }
.col  { display: flex; flex-direction: column; gap: var(--wf-3); }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--wf-1); } .gap-2 { gap: var(--wf-2); }
.gap-4 { gap: var(--wf-4); } .gap-6 { gap: var(--wf-6); }

.grid { display: grid; gap: var(--wf-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.span-2 { grid-column: span 2; }

/* Asymmetric layouts — as classes, never inline styles, so the
   breakpoints below can actually collapse them. */
.g-wide     { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }  /* chart + side panel */
.g-main     { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }  /* detail + rail      */
.g-detail   { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }  /* record + meta      */
.g-ops      { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } /* table + map        */
.g-settings { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }

/* ============================================================
   RESPONSIVE — desktop → tablet → mobile
   ============================================================ */
@media (max-width: 1400px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: sidebar collapses to an icon rail, asymmetric grids stack */
@media (max-width: 1180px) {
  .wf-app { grid-template-columns: var(--wf-sidebar-w-rail) 1fr; }
  .wf-content { padding: var(--wf-5) var(--wf-5) var(--wf-9); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-wide, .g-main, .g-detail, .g-ops { grid-template-columns: minmax(0, 1fr); }
  .g-settings { grid-template-columns: 220px minmax(0, 1fr); }
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 860px) {
  .wf-app, .wf-app[data-rail="true"] { grid-template-columns: 1fr; }
  .wf-content { padding: var(--wf-4) var(--wf-4) var(--wf-11); }
  .g-2, .g-3, .g-4, .g-auto,
  .g-wide, .g-main, .g-detail, .g-ops, .g-settings { grid-template-columns: minmax(0, 1fr); }
  .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: span 1; }
  .wf-page-head { margin-block-end: var(--wf-5); }
  .t-display-s { font-size: 26px; }
  .t-headline { font-size: 21px; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 861px) { .only-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Clickable cards rendered as <button> (stat strips, report presets) */
button.wf-card { font: inherit; color: inherit; inline-size: 100%; }

/* Print: strip chrome, keep the data */
@media print {
  .wf-sidebar, .wf-header, .wf-fab, .wf-bottomnav, .wf-page-head__actions, .wf-filters,
  .wf-pagination, .bulk-bar, .toast-stack, .scrim, .cell-actions, .no-print { display: none !important; }
  .wf-app { grid-template-columns: 1fr; }
  .wf-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}