/* ============================================================
   FINAEstate — redesign layer (branch alisbranch-redesign)
   Loaded after styles.css. Every rule is scoped under html.rd (one extra class of specificity)
   so it wins over styles.css and over the <style> tags that modules inject at runtime,
   without editing styles.css (many UI tests read that file as text).
   Everything sits inside @media screen: print/PDF styles (styles.css @media print,
   report/print.css, report/unified.css) are never touched.
   Theme contract: html[data-theme] holds ONE value — a colour theme (blue, violet, …) or "dark".
   Brand colours are set here only for the default theme (no attribute), so the theme picker keeps working.
   ============================================================ */
@media screen {

/* ---------- 1. tokens ---------- */
html.rd:not([data-theme="dark"]) {
  --bg: #F4F6F8; --bg-grad-1: #F4F6F8; --bg-grad-2: #F4F6F8;
  --paper: #FFFFFF; --card: #FFFFFF; --paper-2: #FAFBFC; --soft: #F1F3F6; --softer: #F8F9FB;
  --ink: #101828; --ink2: #344054; --ink-2: #344054; --muted: #667085; --ink3: #667085; --faint: #98A2B3;
  --line: #E4E7EC; --line-2: #EEF0F3; --line-strong: #D0D5DD;
  --good: #067647; --good-bg: #ECFDF3; --good-line: #ABEFC6;
  --warn: #B54708; --warn-bg: #FFFAEB; --warn-line: #FEDF89;
  --bad: #B42318; --bad-bg: #FEF3F2; --bad-line: #FECDCA;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --shadow-lg: 0 20px 24px -4px rgba(16,24,40,.10), 0 8px 8px -4px rgba(16,24,40,.04);
  --topbar-bg: rgba(255,255,255,.86);
  --scrim: rgba(16,24,40,.45);
}
/* default theme = refined logo teal-green + logo orange accent */
html.rd:not([data-theme]) {
  --brand: #0B6B63; --brand-ink: #08534D; --brand-2: #365F5B; --brand-3: #11867C;
  --brand-soft: #E7F3F1; --brand-soft-2: #EFF6F5; --accent: #E08A2E;
  --shadow-brand: 0 1px 2px rgba(11,107,99,.30);
  --glow-1: transparent; --glow-2: transparent;
}
html.rd[data-theme="dark"] {
  --bg: #0B1117; --bg-grad-1: #0B1117; --bg-grad-2: #0B1117;
  --paper: #111820; --card: #111820; --paper-2: #141C25; --soft: #1A232E; --softer: #151D27;
  --ink: #E6EAF0; --ink2: #B5BFCC; --ink-2: #B5BFCC; --muted: #8894A5; --ink3: #8894A5; --faint: #667085;
  --line: #232D3A; --line-2: #1D2631; --line-strong: #2E3A49;
  --brand: #2BB3A6; --brand-ink: #7EDDD3; --brand-2: #5C8A85; --brand-3: #3CC4B7;
  --brand-soft: #0F2A28; --brand-soft-2: #122624; --accent: #F0A04B;
  --good: #47CD89; --good-bg: #0E2A1D; --good-line: #1F5A3C;
  --warn: #F5B546; --warn-bg: #2D2410; --warn-line: #5C4816;
  --bad: #F97066; --bad-bg: #2F1614; --bad-line: #6A2A24;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.55);
  --shadow-brand: none; --glow-1: transparent; --glow-2: transparent;
  --topbar-bg: rgba(17,24,32,.86);
  --scrim: rgba(0,0,0,.6);
}
html.rd {
  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --radius-lg: 16px;
  --topbar-h: 60px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  /* names used across the modules but never defined in styles.css — mapped to tokens so dark mode follows */
  --green-1: var(--brand); --green-2: var(--brand-ink); --green-soft: var(--brand-soft);
  --blue: var(--basedate); --line2: var(--line-2); --danger: var(--bad);
  --panel: var(--paper); --panel2: var(--softer); --surface: var(--paper); --bg-2: var(--softer); --text: var(--ink);
}

/* ---------- 2. base ---------- */
html.rd body { background: var(--bg); color: var(--ink); font-size: 13.5px; line-height: 1.7; }
html.rd ::selection { background: color-mix(in srgb, var(--brand) 18%, transparent); }
html.rd ::-webkit-scrollbar { width: 10px; height: 10px; }
html.rd ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
html.rd ::-webkit-scrollbar-thumb:hover { background-color: var(--faint); }
html.rd h1, html.rd h2, html.rd h3, html.rd h4 { font-weight: 700; letter-spacing: -.01em; }
html.rd h4 { color: var(--ink); }
html.rd a { color: var(--brand); }
html.rd button:focus-visible, html.rd a:focus-visible, html.rd [role="button"]:focus-visible, html.rd [tabindex]:focus-visible, html.rd summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- 3. panels, cards, page header ---------- */
html.rd .panel, html.rd .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
html.rd .panel { padding: 24px; box-shadow: var(--shadow-xs); margin-bottom: 20px; }
html.rd .card { padding: 20px; box-shadow: none; margin-bottom: 16px; }
html.rd .panel .card { background: var(--paper); border-color: var(--line-2); }
html.rd .panel-title { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); align-items: center; }
html.rd .panel-title h3:before { display: none; }
html.rd .panel-title h3 { font-size: 1.1rem; font-weight: 700; }
html.rd .panel-title h4 { font-size: .95rem; font-weight: 700; }
html.rd .panel-title p { color: var(--muted); font-size: .84rem; }

/* ---------- 4. buttons ---------- */
html.rd .btn { border-radius: var(--radius-sm); padding: 8px 14px; min-height: 36px; font-weight: 600; font-size: .86rem; line-height: 1.4; border: 1px solid transparent; box-shadow: none; transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s; }
html.rd .btn:active { transform: none; }
html.rd .btn-sm { padding: 4px 10px; min-height: 30px; font-size: .8rem; border-radius: 7px; }
html.rd .btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-brand); }
html.rd .btn-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); transform: none; box-shadow: var(--shadow-brand); }
html.rd[data-theme="dark"] .btn-primary { color: #06201D; }
html.rd[data-theme="dark"] .btn-primary:hover { background: var(--brand-3); border-color: var(--brand-3); }
html.rd .btn-secondary { background: var(--paper); color: var(--ink-2); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
html.rd .btn-secondary:hover { background: var(--softer); color: var(--ink); border-color: var(--line-strong); transform: none; }
html.rd .btn-soft { background: var(--soft); color: var(--ink-2); border-color: transparent; }
html.rd .btn-soft:hover { background: var(--line-2); color: var(--ink); }
html.rd .btn-danger { background: var(--paper); color: var(--bad); border-color: var(--bad-line); }
html.rd .btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
html.rd .btn-good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
html.rd .btn-good:hover { background: var(--good-bg); border-color: var(--good); }
html.rd .btn-purple { background: var(--brand-2); color: #fff; }
html.rd .btn:disabled, html.rd .btn:disabled:hover { background: var(--soft); color: var(--faint); border-color: var(--line-2); box-shadow: none; }

/* ---------- 5. form controls ---------- */
html.rd .field { gap: 6px; }
html.rd .field label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
html.rd input, html.rd select, html.rd textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); padding: 8px 11px; font-size: .9rem; box-shadow: var(--shadow-xs); }
html.rd input:hover, html.rd select:hover, html.rd textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--muted)); }
html.rd input:focus, html.rd select:focus, html.rd textarea:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
html.rd input[type="checkbox"], html.rd input[type="radio"] { box-shadow: none; accent-color: var(--brand); }
html.rd input:disabled, html.rd select:disabled, html.rd textarea:disabled, html.rd input[readonly] { background: var(--softer); color: var(--muted); }
html.rd td input, html.rd td select { padding: 5px 8px; border-radius: 6px; box-shadow: none; }

/* ---------- 5b. one field system (every page) ----------
   One height, text size, radius and label style for every text field and dropdown, so inputs, selects,
   read-only/locked values and «موضوعیت ندارد» boxes line up in any row. Inside a cascade layer so its
   !important sizing wins over the older per-page !important rules in styles.css and over inline sizes
   (_BIS, CS.inp) without editing them; colours, widths and horizontal padding stay with each page. */
@layer fs-fields {
  html.rd { --f-h: 40px; --f-h-td: 32px; --f-fs: .9rem; --f-fs-td: .85rem; --f-r: 8px; --f-r-td: 6px; --f-lbl: .8rem; --f-gap: 6px; }
  html.rd input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not(.rd-pal-search *),
  html.rd select:not([multiple]):not([size]) {
    box-sizing: border-box !important; height: var(--f-h) !important; min-height: var(--f-h) !important;
    padding-top: 0 !important; padding-bottom: 0 !important; font-size: var(--f-fs) !important; line-height: 1.3 !important;
    border-width: 1px !important; border-radius: var(--f-r) !important;
  }
  html.rd textarea { box-sizing: border-box !important; padding-top: 8px !important; padding-bottom: 8px !important; font-size: var(--f-fs) !important;
    line-height: 1.7 !important; border-width: 1px !important; border-radius: var(--f-r) !important; }
  /* inside tables: one compact size */
  html.rd td input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not(.rd-pal-search *),
  html.rd th input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not(.rd-pal-search *),
  html.rd td select:not([multiple]):not([size]):not(.rd-pal-search *),
  html.rd th select:not([multiple]):not([size]):not(.rd-pal-search *) {
    height: var(--f-h-td) !important; min-height: var(--f-h-td) !important; font-size: var(--f-fs-td) !important; border-radius: var(--f-r-td) !important;
  }
  /* read-only value boxes that mirror a field (RO_BOX_FORM / RO_BOX_TD / RO_VAL_* in app.js): same size as the field beside them */
  html.rd [style*="padding:7px 11px;font-size:.82rem;border:1.5px solid var(--line-strong)"] {
    box-sizing: border-box !important; height: var(--f-h) !important; min-height: var(--f-h) !important; padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: var(--f-fs) !important; border-width: 1px !important; border-radius: var(--f-r) !important;
  }
  html.rd td [style*="padding:7px 11px;font-size:.82rem;border:1.5px solid var(--line-strong)"],
  html.rd th [style*="padding:7px 11px;font-size:.82rem;border:1.5px solid var(--line-strong)"] {
    height: var(--f-h-td) !important; min-height: var(--f-h-td) !important; font-size: var(--f-fs-td) !important; border-radius: var(--f-r-td) !important;
  }
  /* labels above fields: one size, weight and gap */
  html.rd .field > label,
  html.rd .fld > label,
  html.rd .mc-label,
  html.rd .tenant-field-heading label,
  html.rd .jdp-span label,
  html.rd .ymp-span > label,
  html.rd .ik-field > label,
  html.rd .team-edit-grid .field > span {
    font-size: var(--f-lbl) !important; font-weight: 600 !important; color: var(--ink-2) !important; line-height: 1.5 !important;
  }
  html.rd .fld > label { display: block; margin-bottom: var(--f-gap) !important; }
  html.rd .field { gap: var(--f-gap) !important; }
  /* units (میلیون ریال، ٪، متر…) sit beside the field at its end — never on top of the typed value */
  html.rd .suffix { display: flex !important; align-items: center; gap: 6px; position: static !important; min-width: 0; }
  html.rd .suffix > .u { position: static !important; transform: none !important; order: 2; flex: none; font-size: .78rem !important; color: var(--muted); white-space: nowrap; }
  html.rd .suffix > input { flex: 1 1 0; min-width: 0; width: auto !important; padding-inline: 11px !important; }
}

/* ---------- 6. chips, pills, alerts, empty ---------- */
html.rd .chip { background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; padding: 3px 10px; }
html.rd .pill { background: var(--soft); color: var(--ink-2); font-weight: 600; padding: 2px 9px; }
html.rd .pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
html.rd .alert, html.rd .hint { border-radius: 10px; padding: 12px 14px; }
html.rd .hint { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--brand-ink); }
html.rd .alert.good { color: var(--good); }
html.rd .alert.warn { color: var(--warn); }
html.rd .alert.bad { color: var(--bad); }
html.rd .empty, html.rd .readonly-note { background: var(--softer); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
html.rd .empty { padding: 40px 20px; }
html.rd .empty strong { color: var(--ink); font-weight: 700; }
html.rd .row-item { border-radius: 10px; }
html.rd .row-item:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); transform: none; box-shadow: var(--shadow-xs); }
html.rd .row-item.selected { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- 7. tables ---------- */
html.rd .table-wrap { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; background: var(--paper); }
html.rd thead th { background: var(--softer); color: var(--muted); font-weight: 600; font-size: .76rem; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; }
html.rd .modal-backdrop .table-wrap thead th:not(:first-child), html.rd .cost-tbl thead th { text-align: center; }
html.rd tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
html.rd tbody tr:hover { background: var(--softer); }
html.rd tfoot td { background: var(--softer); border-top: 1px solid var(--line); }
html.rd .total-cell { background: var(--brand-soft); color: var(--brand-ink); }
html.rd[data-theme="dark"] thead th { background: var(--soft); }

/* ---------- 8. tab bars (.subtabs) → underline tabs ---------- */
html.rd .subtabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 2px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
html.rd .subtabs button { position: relative; flex: 0 0 auto; background: transparent; color: var(--muted); font-weight: 600; font-size: .86rem; padding: 10px 12px; border-radius: 0; border: 0; box-shadow: none; white-space: nowrap; transition: color .14s; }
html.rd .subtabs button::after { content: ""; position: absolute; inset-inline: 8px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background .14s; }
html.rd .subtabs button:hover { color: var(--ink); background: transparent; }
html.rd .subtabs button.active { color: var(--brand-ink); background: transparent; box-shadow: none; }
html.rd .subtabs button.active::after { background: var(--brand); }
html.rd[data-theme="dark"] .subtabs button.active { color: var(--brand-ink); }
html.rd .subtabs button.subtab-off { color: var(--faint); cursor: not-allowed; }
html.rd .subtabs button.fin-tab-custom, html.rd .subtabs button.fin-tab-debt { background: transparent; box-shadow: none; }
html.rd .subtabs button.fin-tab-custom { color: #7A3E9D; }
html.rd .subtabs button.fin-tab-custom.active::after { background: #7A3E9D; }
html.rd .subtabs button.fin-tab-debt { color: var(--basedate); }
html.rd .subtabs button.fin-tab-debt.active::after { background: var(--basedate); }
html.rd .subtabs .subtab-add { border-radius: 50%; margin-inline: 6px; }
html.rd .subtabs .subtab-add::after { display: none; }

/* ---------- 9. KPI tiles ---------- */
html.rd .kpi, html.rd .mini-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
html.rd .kpi:before { display: none; }
html.rd .kpi:hover, html.rd .mini-stat:hover { transform: none; box-shadow: var(--shadow-sm); }
html.rd .kpi .label, html.rd .mini-stat .label { color: var(--muted); font-weight: 600; font-size: .78rem; }
html.rd .kpi .value { font-weight: 700; letter-spacing: -.01em; }
html.rd .kpi .hint { background: var(--softer); border: 0; border-radius: 8px; color: var(--muted); padding: 6px 9px; }

/* ---------- 10. modal, dialogs, toast ---------- */
html.rd .modal-backdrop { background: var(--scrim); backdrop-filter: blur(4px); padding: 6vh 20px 40px; }
html.rd .modal-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 24px; }
html.rd .modal-box > .panel-title:first-child { position: sticky; top: -24px; z-index: 3; background: var(--paper); margin: -24px -24px 18px; padding: 18px 24px 14px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
html.rd dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--paper); color: var(--ink); }
html.rd dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
html.rd .toast { border-radius: 10px; font-weight: 500; padding: 11px 18px; box-shadow: var(--shadow-lg); }

/* ---------- 11. warnings centre ---------- */
html.rd .warn-btn { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-sm); padding: 5px 10px; min-height: 34px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-xs); }
html.rd .warn-btn:hover { transform: none; border-color: var(--line-strong); background: var(--softer); }
html.rd .warn-btn.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
html.rd .warn-btn.bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
html.rd .warn-pop { border-radius: 12px; box-shadow: var(--shadow-lg); border-color: var(--line); inset-inline-end: 0; left: auto; }

/* ---------- 12. live KPI bar ---------- */
html.rd .lb-inner { background: var(--paper); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 9px 16px; }
html.rd .lb-inner:hover { border-color: var(--line-strong); border-inline-start-color: var(--brand); }
html.rd .lb-l { font-weight: 600; }
html.rd .lb-v { font-weight: 700; }
html.rd .lbf-hero { border-radius: 10px; }
html.rd .lbf-hero.good { background: var(--good-bg); }
html.rd .lbf-hero.bad { background: var(--bad-bg); }
html.rd .lbf-alert { background: var(--bad-bg); border-color: var(--bad-line); }
html.rd .lbf-cta { border-radius: var(--radius-sm); font-weight: 600; }

/* ---------- 13. misc components ---------- */
html.rd .chart { border-radius: var(--radius); box-shadow: none; }
html.rd details.facacc > summary { background: var(--softer); color: var(--ink); }
html.rd details.facacc[open] { border-color: var(--line-strong); }
html.rd .danger-zone { border-radius: var(--radius); }


/* ---------- 14. icons (Lucide sprite; a <use> copy does not inherit the sprite's own attributes) ---------- */
html.rd .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- 15. shell: sidebar ---------- */
html.rd .sidebar { background: var(--paper); border-inline-end: 1px solid var(--line); padding: 10px 10px 12px; scrollbar-width: thin; }
html.rd .sidebar > * { flex-shrink: 0; } /* taller than the screen → the sidebar scrolls; sections never get squashed */
html.rd .side-brand { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; min-height: 0; padding: 6px 4px 12px; margin: 0 0 4px; gap: 10px; }
html.rd .logo-mark.brand-tile { width: 34px; height: 34px; }
html.rd #brandText strong { font-size: .9rem; font-weight: 700; -webkit-line-clamp: 1; line-height: 1.5; }
html.rd #brandText .small { font-size: .74rem; -webkit-line-clamp: 1; margin-top: 0; }
html.rd .side-collapse-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); box-shadow: none; }
html.rd .side-collapse-btn:hover { background: var(--soft); color: var(--ink); border-color: transparent; }
html.rd[dir="ltr"] .side-collapse-btn .ic { transform: scaleX(-1); }
html.rd .nav { gap: 1px; margin-top: 4px; }
html.rd .nav-group { border-top: 0; margin-top: 14px; padding: 4px 10px 2px; font-size: .7rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
html.rd .nav-group:first-child { margin-top: 4px; }
html.rd .nav button { min-height: 36px; padding: 6px 10px; border-radius: 8px; font-weight: 500; font-size: .87rem; color: var(--ink-2); gap: 10px; text-align: start; }
html.rd .nav button span:first-child { width: 20px; height: 20px; min-width: 20px; flex: 0 0 20px; background: transparent; border: 0; border-radius: 0; font-size: 15px; color: var(--muted); overflow: visible; }
html.rd .nav button:hover span:first-child, html.rd .nav button.active span:first-child { background: transparent; border: 0; color: inherit; }
html.rd .nav button:hover { background: var(--soft); color: var(--ink); }
html.rd .nav button.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; box-shadow: none; }
html.rd .nav button.active:before { right: auto; inset-inline-start: -10px; width: 3px; height: 20px; border-radius: 3px; background: var(--brand); }
html.rd .side-footer { background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 10px 8px 0; margin-top: auto; font-size: .7rem; line-height: 1.6; }
html.rd .side-footer strong { font-weight: 600; color: var(--ink-2); }

/* ---------- 16. shell: top bar ---------- */
html.rd .topbar { height: var(--topbar-h); padding: 0 24px; gap: 14px; flex-wrap: nowrap; background: var(--topbar-bg); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
html.rd .tb-start { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
html.rd .tb-titles { min-width: 0; }
html.rd .topbar h2 { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.rd .crumbs { margin-top: 1px; gap: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; align-items: center; white-space: nowrap; }
html.rd .crumbs::-webkit-scrollbar { display: none; }
html.rd #crumbs .pill { background: transparent; color: var(--muted); font-weight: 500; font-size: .78rem; padding: 1px 6px; border-radius: 6px; white-space: nowrap; transition: background .12s, color .12s; }
html.rd #crumbs .pill [data-notr] { color: var(--ink-2); font-weight: 600; }
html.rd #crumbs .pill:hover { background: var(--soft); color: var(--ink); }
html.rd #crumbs > .pill + .pill { margin-inline-start: 16px; position: relative; }
html.rd #crumbs > .pill + .pill::before { content: "‹"; position: absolute; inset-inline-start: -13px; color: var(--faint); font-weight: 400; pointer-events: none; }
html.rd[dir="ltr"] #crumbs > .pill + .pill::before { content: "›"; }
html.rd #crumbs .crumb-fin { background: var(--brand-soft); color: var(--brand-ink); }
html.rd #crumbs .crumb-x { box-shadow: none; background: transparent; }
html.rd #crumbs .btn { min-height: 24px; padding: 0 8px; font-size: .74rem; font-weight: 600 !important; background: transparent; color: var(--brand); }
html.rd #crumbs .btn:hover { background: var(--brand-soft); }
html.rd .tb-end { flex: 0 0 auto; gap: 8px; flex-wrap: nowrap; }
html.rd .tb-icon { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; flex: none; }
html.rd .tb-icon:hover { background: var(--soft); }
html.rd .tb-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; min-width: 210px; border: 1px solid var(--line); border-radius: 8px; background: var(--softer); color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; transition: border-color .14s, background .14s; }
html.rd .tb-search:hover { border-color: var(--line-strong); background: var(--paper); color: var(--ink-2); }
html.rd .tb-search .ic { width: 16px; height: 16px; }
html.rd kbd { font-family: var(--font); font-size: .68rem; line-height: 1.5; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--paper); color: var(--muted); direction: ltr; white-space: nowrap; }
html.rd .tb-search kbd { margin-inline-start: auto; }
html.rd .topbar #saveState { background: transparent; border: 0; color: var(--muted); font-weight: 500; padding: 0 2px; font-size: .76rem; }
html.rd .tb-user { gap: 8px; flex-wrap: nowrap; padding-inline-start: 12px; margin-inline-start: 2px; border-inline-start: 1px solid var(--line); }
html.rd .tb-user .tb-unit { font-size: .72rem; color: var(--muted); background: var(--softer); }
html.rd .tb-user .tb-person { border: 0; background: transparent; padding: 0; gap: 8px; color: var(--ink); font-weight: 600; font-size: .82rem; white-space: nowrap; }
html.rd .tb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
html.rd .tb-user .tb-logout { background: transparent; color: var(--muted); }
html.rd .tb-user .tb-logout:hover { background: var(--bad-bg); color: var(--bad); }
@media (max-width: 1320px) { html.rd .tb-search { min-width: 0; } html.rd .tb-search-l, html.rd .tb-search kbd, html.rd .tb-user .tb-unit { display: none; } }
@media (max-width: 1120px) { html.rd .tb-user .tb-person > [data-notr], html.rd .tb-user .tb-person > .tb-role { display: none; } }

/* ---------- 17. page body + live bar ---------- */
html.rd #appBody { padding: 24px 28px 40px; }
html.rd .live-bar.show { top: var(--topbar-h); padding: 0 28px; margin: 14px 0 0; }

/* ---------- 18. command palette ---------- */
html.rd .rd-palette { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: var(--scrim); backdrop-filter: blur(3px); }
html.rd .rd-palette[hidden] { display: none; }
html.rd .rd-pal-box { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); animation: rdPalIn .14s ease-out; }
html.rd.rd-pal-open body { overflow: hidden; } /* the page behind the palette does not scroll */
@keyframes rdPalIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
html.rd .rd-pal-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
html.rd .rd-pal-search input { border: 0; box-shadow: none; background: transparent; padding: 16px 0; font-size: 1rem; }
html.rd .rd-pal-search input:focus { box-shadow: none; }
html.rd .rd-pal-list { overflow-y: auto; padding: 6px; }
html.rd .rd-pal-group { font-size: .72rem; font-weight: 600; color: var(--faint); padding: 10px 10px 4px; }
html.rd .rd-pal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: .88rem; min-width: 0; }
html.rd .rd-pal-item .ic { color: var(--muted); }
html.rd .rd-pal-item.active { background: var(--brand-soft); color: var(--brand-ink); }
html.rd .rd-pal-item.active .ic { color: var(--brand); }
html.rd .rd-pal-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.rd .rd-pal-item.is-current .rd-pal-label { font-weight: 700; }
html.rd .rd-pal-hint { color: var(--faint); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
html.rd .rd-pal-kind { margin-inline-start: auto; flex: none; font-size: .7rem; color: var(--muted); background: var(--soft); border-radius: 5px; padding: 0 7px; }
html.rd .rd-pal-empty { padding: 32px 16px; text-align: center; color: var(--muted); }
html.rd .rd-pal-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--softer); color: var(--muted); font-size: .72rem; }
html.rd .rd-pal-foot kbd { margin-inline-end: 3px; }

/* ---------- 18b. workspaces: scenario / financing step rail ---------- */
html.rd .rd-work { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
html.rd .rd-work-main { min-width: 0; }
html.rd .rd-work-main table.cost-tbl { min-width: 980px; } /* many narrow columns: scroll inside .table-wrap instead of squeezing the inputs */
html.rd .rd-work-rail { position: sticky; top: calc(var(--topbar-h) + var(--livebar-h, 0px) + 16px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--topbar-h) - var(--livebar-h, 0px) - 32px); overflow-y: auto; scrollbar-width: thin; }
html.rd .subtabs.step-rail { flex-direction: column; flex-wrap: nowrap; overflow: visible; margin: 0 !important; padding: 8px; gap: 2px; background: var(--softer); border: 1px solid var(--line-2); border-radius: 12px; counter-reset: rdstep; }
html.rd .subtabs.step-rail > button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; white-space: normal; line-height: 1.45; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: .85rem; }
html.rd .subtabs.step-rail > button::after { display: none; }
html.rd .subtabs.step-rail > button:not(.subtab-add)::before { counter-increment: rdstep; content: counter(rdstep, persian); flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; line-height: 1; background: var(--paper); border: 1px solid var(--line-strong); color: var(--muted); }
html.rd[lang="en"] .subtabs.step-rail > button:not(.subtab-add)::before { content: counter(rdstep); }
html.rd .subtabs.step-rail > button:hover { background: var(--paper); color: var(--ink); }
html.rd .subtabs.step-rail > button.active { background: var(--paper); color: var(--brand-ink); font-weight: 600; box-shadow: var(--shadow-xs); }
html.rd .subtabs.step-rail > button.active::before { background: var(--brand); border-color: var(--brand); color: #fff; }
html.rd[data-theme="dark"] .subtabs.step-rail > button.active::before { color: #06201D; }
html.rd .subtabs.step-rail > button.subtab-off { color: var(--faint); }
html.rd .subtabs.step-rail > button.subtab-off::before { border-style: dashed; }
html.rd .subtabs.step-rail > button.fin-tab-debt.active::before { background: var(--basedate); border-color: var(--basedate); }
html.rd .subtabs.step-rail > button.fin-tab-custom.active::before { background: #7A3E9D; border-color: #7A3E9D; }
html.rd .subtabs.step-rail > button > span[data-action] { margin-inline-start: auto !important; }
html.rd .subtabs.step-rail .subtab-add { align-self: flex-start; margin: 4px 8px; }
html.rd .rd-rail-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
html.rd .rd-work-rail > span { margin-inline-start: 0 !important; padding: 0 2px; }
html.rd .rd-step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
html.rd .rd-step-nav .rd-prev::before { content: "→"; }
html.rd .rd-step-nav .rd-next::after { content: "←"; }
html.rd[dir="ltr"] .rd-step-nav .rd-prev::before { content: "←"; }
html.rd[dir="ltr"] .rd-step-nav .rd-next::after { content: "→"; }
/* scenario switcher (project page) + finance-model switcher: pill row instead of a second tab bar */
html.rd .subtabs.projtabs, html.rd .subtabs:has(> button[data-action="financing-select-tab"]) { border-bottom: 0 !important; gap: 6px; flex-wrap: wrap; overflow: visible; margin: 4px 0 18px !important; }
html.rd .subtabs.projtabs > button, html.rd .subtabs > button[data-action="financing-select-tab"] { border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; background: var(--paper); color: var(--ink-2); font-weight: 500 !important; }
html.rd .subtabs.projtabs > button::after, html.rd .subtabs > button[data-action="financing-select-tab"]::after { display: none; }
html.rd .subtabs.projtabs > button:hover, html.rd .subtabs > button[data-action="financing-select-tab"]:hover { border-color: var(--line-strong); background: var(--softer); }
html.rd .subtabs.projtabs > button.active, html.rd .subtabs > button[data-action="financing-select-tab"].active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-ink); font-weight: 600 !important; }
@media (max-width: 1100px) {
  html.rd .rd-work { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax(0,…): a wide nowrap rail must scroll inside itself, not widen the page */
  html.rd .rd-work-rail { position: static; max-height: none; overflow: visible; }
  html.rd .subtabs.step-rail { flex-direction: row; overflow-x: auto; }
  html.rd .subtabs.step-rail > button { width: auto; white-space: nowrap; flex: none; }
}

/* ---------- 18c. login ---------- */
html.rd .rd-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--bg); }
html.rd .rd-login-brand { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 56px; color: #fff; background: linear-gradient(155deg, var(--brand-3) 0%, var(--brand) 45%, var(--brand-ink) 100%); }
html.rd .rd-login-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 75%); }
html.rd .rd-login-brand::after { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -140px; top: -120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); opacity: .55; }
html.rd .rd-login-brand-in { position: relative; z-index: 1; }
html.rd .rd-login-mark { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
html.rd .rd-login-name { margin-top: 20px; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; direction: ltr; text-align: end; }
html.rd[dir="ltr"] .rd-login-name { text-align: start; }
html.rd .rd-login-tag { margin-top: 4px; font-size: 1rem; opacity: .85; }
html.rd .rd-login-main { display: grid; place-items: center; padding: 32px 24px; }
html.rd .rd-login-card { width: 100%; max-width: 400px; padding: 36px; border-radius: 16px; box-shadow: var(--shadow-md); }
html.rd .rd-login-head { text-align: center; margin-bottom: 22px; }
html.rd .rd-login-logo { width: 100%; max-width: 260px; height: auto; }
html.rd .rd-login-card .btn-primary { min-height: 42px; margin-top: 6px; }
@media (max-width: 880px) { html.rd .rd-login { grid-template-columns: 1fr; } html.rd .rd-login-brand { display: none; } }

/* ---------- 19. mobile: sidebar becomes a drawer ---------- */
html.rd .rd-scrim { display: none; }
@media (max-width: 880px) {
  html.rd .app, html.rd #appView { grid-template-columns: 1fr; }
  html.rd .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); height: 100dvh; z-index: 210; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  html.rd[dir="ltr"] .sidebar { transform: translateX(-100%); }
  html.rd.rd-drawer-open .sidebar { transform: none; }
  html.rd .rd-scrim { display: block; position: fixed; inset: 0; z-index: 205; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.rd.rd-drawer-open .rd-scrim { opacity: 1; pointer-events: auto; }
  html.rd .side-collapse-btn { display: none; }
  html.rd .tb-icon { display: inline-flex; }
  html.rd .topbar { height: auto; min-height: 56px; padding: 8px 12px; flex-wrap: wrap; row-gap: 6px; }
  html.rd .tb-start { flex: 1 1 100%; }
  html.rd .tb-end { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; overflow: visible; } /* wrap, never a hidden scroller: the warnings popup and logout must stay reachable */
  html.rd .warn-pop { position: fixed; top: 112px; inset-inline: 8px; width: auto; max-width: none; max-height: 70vh; }
  html.rd .tb-search { width: 36px; height: 34px; padding: 0; justify-content: center; }
  html.rd .tb-user { margin-inline-start: auto; }
  html.rd .tb-end > * { flex: none; }
  html.rd .topbar #saveState { white-space: nowrap; }
  html.rd .tb-user .tb-person { font-size: 0; gap: 0; } /* phone: avatar only (name + role stay in the DOM for screen readers) */
  html.rd .tb-user .tb-person .tb-avatar { font-size: .8rem; }
  html.rd #appBody { padding: 16px 12px 32px; }
  html.rd .live-bar.show { position: static; padding: 0 12px; }
  html.rd .panel { padding: 16px; }
}

} /* @media screen */