/* ============================================================
   WinFactory Design System — v1.0
   Shared tokens + components for all pages.
   Load BEFORE each page's own <style> block so page-specific
   rules keep precedence during the phased migration.

   Conventions:
   - All layout uses CSS logical properties (inline-start/end)
     so dir="rtl" (Arabic) flips automatically.
   - Legacy variable names (--acc, --r, --t2 …) are preserved so
     existing per-page CSS keeps working after its :root block
     is removed.
   - New components are prefixed .ds-* unless they intentionally
     replace a legacy class.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand & surfaces — refined warm palette */
  --bg:        #f0ede8;   /* app background (warm linen) */
  --panel:     #ffffff;   /* cards, panels */
  --panel2:    #f8f6f3;   /* subtle inset surfaces, inputs */
  --panel3:    #f2efea;   /* deeper inset, table headers */
  --border:    #e2dfd9;   /* default hairline */
  --border2:   #ccc8c0;   /* stronger hairline / input borders */

  /* Text */
  --text:      #1c1a18;   /* primary */
  --t2:        #6e6a65;   /* secondary (was #706c68) */
  --t3:        #94908b;   /* tertiary — darkened from #a8a4a0 for contrast */

  /* Accent (brand blue) */
  --acc:       #1a5fff;
  --acc2:      #0040e0;
  --acc-bg:    #eef2ff;
  --acc-border:#c0d0ff;

  /* Semantic — each tone has base / bg / border */
  --grn:        #15803d;  --grn-bg:  #effaf3;  --grn-border: #b9e5c9;
  --amb:        #b06800;  --amb-bg:  #fff6e6;  --amb-border: #ecd6a4;
  --red:        #c02020;  --red-bg:  #fdf0ef;  --red-border: #f0c5c0;
  --org:        #d9570f;  --org-bg:  #fff3ea;  --org-border: #f5cfae;  /* unifies #f97316/#c04800 */
  --purple:     #7c3aed;  --purple-bg:#f5f0ff; --purple-border:#ddd0f5;
  --pur: #7c3aed;  --pur-bg: #f5f0ff;   /* legacy aliases (production_app) */

  /* Typography */
  --font: 'Segoe UI', system-ui, -apple-system, 'Tahoma', sans-serif; /* Segoe/Tahoma both ship Arabic glyphs */
  --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;   /* body default */
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;  --s8: 48px;

  /* Radius (legacy aliases --r/--r2/--r3 preserved) */
  --r:  10px;      /* md — cards, panels */
  --r2: 6px;       /* sm — inputs, buttons */
  --r3: 20px;      /* pill */
  --r-lg: 14px;    /* large surfaces, sheets */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(28,26,24,.06);
  --shadow:    0 1px 4px rgba(28,26,24,.08);
  --shadow-md: 0 4px 14px rgba(28,26,24,.10);
  --shadow-lg: 0 18px 50px rgba(28,26,24,.22);

  /* Z-index scale (toast in api.js is 9999 — stay below it) */
  --z-sticky: 90;
  --z-nav:    100;
  --z-drawer: 900;
  --z-modal:  1000;
  --z-sheet:  1100;

  /* Touch */
  --tap: 40px;             /* min interactive size, desktop */
}
@media (pointer: coarse) {
  :root { --tap: 46px; }   /* fingers on the factory floor */
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-md);
  line-height: 1.45;
}
[dir="rtl"] body { letter-spacing: 0; }

/* Keep digits/measurements aligned everywhere */
.num, .mono, td.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Accessible focus ring — applies app-wide */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--acc-bg); }

/* Scrollbars: visible but tidy (webkit) */
.ds-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 8px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  background: var(--panel);
  color: var(--text);
  font: 600 var(--fs-sm)/1.2 var(--font);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .05s;
}
.ds-btn:hover  { background: var(--panel2); border-color: var(--border2); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ds-btn-primary {
  background: var(--acc); border-color: var(--acc); color: #fff;
}
.ds-btn-primary:hover { background: var(--acc2); border-color: var(--acc2); }

.ds-btn-danger {
  background: var(--panel); border-color: var(--red-border); color: var(--red);
}
.ds-btn-danger:hover { background: var(--red-bg); }

.ds-btn-ghost { border-color: transparent; background: transparent; }
.ds-btn-ghost:hover { background: var(--panel3); }

.ds-btn-sm { min-height: 30px; padding: 4px 10px; font-size: var(--fs-xs); }
.ds-btn-lg { min-height: 48px; padding: 12px 20px; font-size: var(--fs-md); }

.ds-btn-icon {
  padding: 8px; min-width: var(--tap);
}

/* ------------------------------------------------------------
   4. FIELDS & INPUTS
   ------------------------------------------------------------ */
.ds-field { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.ds-field > label, .ds-field > span:first-child {
  font: 600 var(--fs-xs)/1.2 var(--font);
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .4px;
}
[dir="rtl"] .ds-field > label, [dir="rtl"] .ds-field > span:first-child { letter-spacing: 0; }
.ds-field .req { color: var(--red); }

.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  background: var(--panel);
  color: var(--text);
  font: 400 var(--fs-md)/1.3 var(--font);
  transition: border-color .12s, box-shadow .12s;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-bg);
  outline: none;
}
.ds-input::placeholder { color: var(--t3); }
.ds-input[aria-invalid="true"], .ds-select[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}
.ds-field .ds-error {
  color: var(--red); font-size: var(--fs-xs); display: none;
}
.ds-field .ds-error.show { display: block; }
.ds-field .ds-help { color: var(--t3); font-size: var(--fs-xs); }

/* ------------------------------------------------------------
   5. CARDS
   ------------------------------------------------------------ */
.ds-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.ds-card-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-block-end: 1px solid var(--border);
  font: 600 var(--fs-sm)/1.3 var(--font);
}
.ds-card-body { padding: var(--s4); }

/* ------------------------------------------------------------
   6. BADGES & TAGS
   ------------------------------------------------------------ */
.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r3);
  font: 600 var(--fs-2xs)/1.5 var(--font);
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--t2);
  white-space: nowrap;
}
.ds-badge-acc  { background: var(--acc-bg);  border-color: var(--acc-border); color: var(--acc2); }
.ds-badge-grn  { background: var(--grn-bg);  border-color: var(--grn-border); color: var(--grn); }
.ds-badge-amb  { background: var(--amb-bg);  border-color: var(--amb-border); color: var(--amb); }
.ds-badge-red  { background: var(--red-bg);  border-color: var(--red-border); color: var(--red); }
.ds-badge-org  { background: var(--org-bg);  border-color: var(--org-border); color: var(--org); }

/* ------------------------------------------------------------
   7. TABLES
   ------------------------------------------------------------ */
.ds-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ds-table th {
  position: sticky; inset-block-start: 0;
  background: var(--panel3);
  color: var(--t2);
  font: 600 var(--fs-2xs)/1.4 var(--font);
  text-transform: uppercase; letter-spacing: .4px;
  text-align: start;
  padding: 8px 10px;
  border-block-end: 1px solid var(--border);
  z-index: 1;
}
[dir="rtl"] .ds-table th { letter-spacing: 0; }
.ds-table td {
  padding: 9px 10px;
  border-block-end: 1px solid var(--border);
  text-align: start;
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-block-end: none; }
.ds-table tbody tr:hover { background: var(--panel2); }
.ds-table .num { text-align: end; }

/* Sortable tables (opt-in: <table class="ds-sortable">) */
table.ds-sortable thead th { cursor: pointer; user-select: none; }
table.ds-sortable thead th:hover { color: var(--text); }
table.ds-sortable thead th[aria-sort]::after {
  content: ' ▲'; font-size: 8px; color: var(--acc);
}
table.ds-sortable thead th[aria-sort="descending"]::after { content: ' ▼'; }

/* Mobile card view (opt-in: <table class="ds-cardify">).
   Screen-only — print always keeps the real table. */
@media screen and (max-width: 640px) {
  table.ds-cardify { border-collapse: separate; border-spacing: 0; }
  table.ds-cardify thead { display: none; }
  table.ds-cardify tbody { display: block; }
  table.ds-cardify tbody tr {
    display: block;
    border: 1px solid var(--border) !important;
    border-radius: var(--r2);
    margin-block-end: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--panel);
  }
  table.ds-cardify tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3);
    padding: 3px 0 !important;
    border: none !important;
    text-align: end;
  }
  table.ds-cardify tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--t2);
    text-align: start;
    flex: none;
  }
  [dir="rtl"] table.ds-cardify tbody td::before { letter-spacing: 0; }
  table.ds-cardify tbody td:not([data-label])::before { content: none; }
  table.ds-cardify tbody td[colspan] { display: block; text-align: center; }
  table.ds-cardify tfoot { display: block; }
  table.ds-cardify tfoot tr { display: block; }
}

/* ------------------------------------------------------------
   8. MODALS, SHEETS & DRAWERS
   ------------------------------------------------------------ */
.ds-modal-back {
  position: fixed; inset: 0;
  background: rgba(28,26,24,.45);
  display: none; align-items: center; justify-content: center;
  padding: var(--s4);
  z-index: var(--z-modal);
}
.ds-modal-back.open { display: flex; }
.ds-modal {
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(480px, 100%);
  max-height: min(85vh, 720px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ds-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--border);
  font: 600 var(--fs-lg)/1.3 var(--font);
}
.ds-modal-body { padding: var(--s5); overflow-y: auto; }
.ds-modal-foot {
  display: flex; gap: var(--s2); justify-content: flex-end;
  padding: var(--s3) var(--s5);
  border-block-start: 1px solid var(--border);
  background: var(--panel2);
}

/* Bottom sheet (mobile "More" menu etc.) */
.ds-sheet-back {
  position: fixed; inset: 0;
  background: rgba(28,26,24,.45);
  display: none; align-items: flex-end; justify-content: center;
  z-index: var(--z-sheet);
}
.ds-sheet-back.open { display: flex; }
.ds-sheet {
  background: var(--panel);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px;
  max-height: 75vh;
  overflow-y: auto;
  padding: var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  animation: ds-sheet-up .18s ease-out;
}
@keyframes ds-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.ds-sheet-grab {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border2); margin: 6px auto 10px;
}

/* ------------------------------------------------------------
   9. APP SHELL — topbar, sidebar (desktop), bottom nav (mobile)
   ------------------------------------------------------------ */
.ds-topbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4);
  background: var(--panel);
  border-block-end: 1px solid var(--border);
  position: sticky; inset-block-start: 0;
  z-index: var(--z-nav);
  min-height: 54px;
}
.ds-topbar h1, .ds-topbar h2 {
  font: 600 var(--fs-lg)/1.2 var(--font);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-topbar .spacer { flex: 1; }

.ds-sidenav { display: flex; flex-direction: column; gap: 2px; }
.ds-sidenav .ds-nav-sec {
  font: 700 var(--fs-2xs)/1.4 var(--font);
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--t3);
  padding: var(--s3) var(--s3) var(--s1);
}
[dir="rtl"] .ds-sidenav .ds-nav-sec { letter-spacing: 0; }
.ds-nav-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s3);
  min-height: 36px;
  border: none; background: none;
  border-radius: var(--r2);
  color: var(--t2);
  font: 500 var(--fs-sm)/1.2 var(--font);
  cursor: pointer;
  text-align: start;
  width: 100%;
  transition: background .1s, color .1s;
}
.ds-nav-item:hover { background: var(--panel3); color: var(--text); }
.ds-nav-item.active {
  background: var(--acc-bg); color: var(--acc2); font-weight: 600;
}
.ds-nav-item .ico { width: 18px; text-align: center; flex: none; }

/* Bottom tab bar — mobile only */
.ds-bottomnav {
  display: none;
  position: fixed; inset-inline: 0; inset-block-end: 0;
  background: var(--panel);
  border-block-start: 1px solid var(--border);
  z-index: var(--z-nav);
  padding-block-end: env(safe-area-inset-bottom);
}
.ds-bottomnav .ds-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px;
  min-height: 52px;
  border: none; background: none;
  color: var(--t2);
  font: 500 10.5px/1.2 var(--font);
  cursor: pointer;
}
.ds-bottomnav .ds-tab .ico { font-size: 19px; line-height: 1; }
.ds-bottomnav .ds-tab.active { color: var(--acc2); font-weight: 700; }

/* ------------------------------------------------------------
   10. STATES — loading, empty, skeleton
   ------------------------------------------------------------ */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s7) var(--s4);
  color: var(--t3);
  text-align: center;
  font-size: var(--fs-sm);
}
.ds-empty .ico { font-size: 28px; opacity: .5; }

.ds-skeleton {
  border-radius: var(--r2);
  background: linear-gradient(90deg, var(--panel3) 25%, var(--panel2) 45%, var(--panel3) 65%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.2s infinite linear;
  color: transparent !important;
  min-height: 14px;
}
@keyframes ds-shimmer { to { background-position: -200% 0; } }

.ds-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border2);
  border-block-start-color: var(--acc);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
  display: inline-block;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   11. UTILITIES
   ------------------------------------------------------------ */
.ds-row { display: flex; align-items: center; gap: var(--s2); }
.ds-wrap { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ds-grow { flex: 1; min-inline-size: 0; }
.ds-hide { display: none !important; }
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Show/hide by breakpoint */
@media (max-width: 899px) {
  .ds-desktop-only { display: none !important; }
  .ds-bottomnav { display: flex; }
  /* Give scrolling content room above the bottom bar */
  .ds-has-bottomnav { padding-block-end: 72px !important; }
}
@media (min-width: 900px) {
  .ds-mobile-only { display: none !important; }
}

/* Language toggle */
.ds-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border2);
  border-radius: var(--r3);
  overflow: hidden;
  flex: none;
}
.ds-lang-toggle button {
  border: none; background: none;
  padding: 5px 12px;
  min-height: 30px;
  font: 600 var(--fs-xs)/1.2 var(--font);
  color: var(--t2);
  cursor: pointer;
}
.ds-lang-toggle button.active { background: var(--text); color: var(--panel); }

/* ------------------------------------------------------------
   12. PRINT
   ------------------------------------------------------------ */
@media print {
  .ds-bottomnav, .ds-topbar, .ds-sidenav, .ds-lang-toggle,
  .ds-modal-back, .ds-sheet-back { display: none !important; }
  body { background: #fff; }
}