@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/figtree.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("/static/fonts/tajawal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --l-r-ctl: 8px;
  --l-r-card: 16px;

  /* Brand colors */
  --brand: #6ea391;
  --brand-d: #477062;
  --brand-50: #e4ede9;
  --brand-100: #c0d5ca;

  /* Lintel variables - light theme */
  --l-bg: #f7f9f6;
  --l-solid: #ffffff;
  --l-float: #ffffff;
  --l-text: #182923;
  --l-muted: #586e63;
  --l-faint: #687e73;
  --l-line: #dce5de;
  --l-line2: #c8d7cc;
  --l-cobalt: #477062;
  --l-on-cobalt: #ffffff;
  --l-cobalt-soft: #e1eee6;
  --l-mint: #6ea391;
  --l-pill: #e1eee6;
  --l-on-pill: #355648;
  --l-font: "Figtree", "Tajawal", sans-serif;
  --l-mesh-a: #e4ede9;
  --l-mesh-b: #f7f9f6;
  --l-mesh-c: #c0d5ca;

  /* Semantic aliases */
  --bg: var(--l-bg);
  --surface: var(--l-solid);
  --ink: var(--l-text);
  --ink2: var(--l-muted);
  --muted: var(--l-muted);
  --line: var(--l-line);
  --radius: var(--l-r-ctl);

  /* Button radius adaptation */
  --button-radius: 8px;
}

:root[data-theme="dark"] {
  --l-bg: #101b16;
  --l-solid: #19261f;
  --l-float: #19261f;
  --l-text: #edf4ef;
  --l-muted: #a6bdae;
  --l-faint: #a6bdae;
  --l-line: #354c3f;
  --l-line-2: #496354;
  --l-glass: rgba(49, 74, 64, 0.3);
  --l-glass-2: rgba(49, 74, 64, 0.15);
  --l-glass-3: rgba(49, 74, 64, 0.4);
  --l-well: #22352b;
  --l-rim: #354c3f;
  --l-cobalt: #91c7ae;
  --l-on-cobalt: #10261b;
  --l-cobalt-soft: #2a4637;
  --l-mint: #91c7ae;
  --l-mint-soft: #2a4637;
  --l-pill: #477062;
  --l-on-pill: #edf4ef;
  --l-mesh-a: #19261f;
  --l-mesh-b: #101b16;
  --l-mesh-c: #354c3f;
  --bg: var(--l-bg);
  --surface: var(--l-solid);
  --ink: var(--l-text);
  --ink2: var(--l-muted);
  --muted: var(--l-muted);
  --line: var(--l-line);
  --brand: var(--l-cobalt);
  --brand-d: #b4dcc7;
  --brand-50: #1d392a;
  --brand-100: #2a4637;
  color-scheme: dark;
}

:root[dir="rtl"] {
  --l-font: "Tajawal", "Figtree", sans-serif;
}

html {
  color-scheme: light;
  font-family: var(--l-font);
  color: var(--ink);
  background-color: var(--bg);
}

body {
  font-family: var(--l-font);
  background-color: var(--bg);
  color: var(--ink);
}

/* Scoped intrinsic sizing and table scrolling; no body clipping. */
main,
#main,
#m {
  min-width: 0;
}
#main > .card:has(> table),
#m > .card:has(> table),
main > .card:has(> table) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 760px) {
  #main td[style*="white-space:nowrap"] {
    white-space: normal !important;
  }
  #main select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}