/* ==========================================================================
   Salian Accounting — design system (RTL / Persian)
   Sections: 1 tokens · 2 base · 3 shell · 4 components · 5 tables · 6 forms
             7 states (alerts, skeleton, spinner, toast) · 8 feature widgets
             9 auth/error pages · 10 voucher · 11 responsive · 12 print
   Breakpoints: 480 / 768 / 1024 / 1280 (max-width).
   Logical properties only (margin-inline-*, inset-inline-*, border-inline-*).
   ========================================================================== */

/* --- Font -----------------------------------------------------------------
   No downloads/CDN. Installed fonts are used if present. To ship a font file
   later, copy it to public/accounting/fonts/ and uncomment:

   @font-face{
     font-family:"Vazirmatn";
     src:url("fonts/Vazirmatn-Regular.woff2") format("woff2");
     font-weight:400; font-style:normal; font-display:swap;
   }
   @font-face{
     font-family:"Vazirmatn";
     src:url("fonts/Vazirmatn-Bold.woff2") format("woff2");
     font-weight:700; font-style:normal; font-display:swap;
   }
   ------------------------------------------------------------------------ */
@font-face{font-family:Salian;src:local("Vazirmatn"),local("Vazirmatn UI"),local("IRANSans"),local("IRANSansX");font-display:swap}

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --font:Salian,"Vazirmatn","IRANSans",Tahoma,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  --ink:#172b2e;
  --muted:#52666a;            /* 5.9:1 on white, 5.4:1 on --bg (WCAG AA) */
  --line:#dfe8e7;
  --line-strong:#cddbd9;
  --bg:#f4f7f6;
  --card:#fff;
  --surface-2:#f8faf9;        /* table heads, subtle panels */
  --surface-3:#fbfcfc;
  --brand:#123f45;
  --brand2:#1e6b69;
  --accent:#d8a557;
  --danger:#b44141;
  --warn:#8a5d0f;
  --ok:#1f6f50;
  --link:#1e6b69;
  --btn-bg:#1e6b69;
  --btn-bg-hover:#123f45;
  --btn-ink:#fff;
  --tint:#e7f1ef;             /* secondary button / avatar background */
  --tint-line:#cae0dd;
  --tint-soft:#f1f8f7;
  --hover:#edf3f2;
  --ok-bg:#e3f3ec;
  --warn-bg:#fff2d8;
  --danger-bg:#fbe5e5;
  --info-bg:#e6f0f7;
  --info:#1d557d;
  --neutral-bg:#edf1f1;
  --neutral:#475b5e;
  --warn-line:#f0d7a8;
  --danger-line:#e9b9b9;
  --ok-line:#b9dfcc;
  --focus:#84bab5;
  --sidebar-from:#103b41;
  --sidebar-to:#092d32;
  --sidebar-ink:#c8d8d7;
  --sidebar-muted:#a9bfbf;
  --sidebar-active-bg:#fff;
  --sidebar-active-ink:#123f45;
  --chart-a:#5ba39d;
  --chart-b:#1f6f6c;
  --grid:#edf2f1;
  --radius:14px;
  --shadow:0 3px 18px rgba(18,63,69,.07);
  --shadow-up:0 -6px 22px rgba(18,63,69,.08);
  --overlay:rgba(9,29,32,.55);
  --sidebar-w:260px;
  --tap:44px;
}
/* Dark palette. Defined twice on purpose: automatic (OS) and explicit toggle. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#e4eeed;--muted:#a3b7b7;--line:#27393c;--bg:#0e1a1c;--card:#152326;
    --surface-2:#1a2b2e;--surface-3:#172629;--brand:#9fd9d3;--brand2:#5fb5ae;--accent:#e0b366;
    --danger:#f08f8f;--warn:#e8b95e;--ok:#6fd1a5;--link:#7cccc5;--btn-bg:#23807c;--btn-bg-hover:#2a948f;--btn-ink:#fff;
    --tint:#1d3639;--tint-line:#2f5256;--tint-soft:#18302f;--hover:#1f3235;
    --ok-bg:#15332a;--warn-bg:#3a2d12;--danger-bg:#3b1d20;--info-bg:#162e40;--info:#8cc4ee;--neutral-bg:#223033;--neutral:#b4c6c6;
    --warn-line:#5e4a1d;--danger-line:#6b3338;--ok-line:#24523f;--focus:#3f8a85;
    --sidebar-from:#0b2024;--sidebar-to:#071619;--sidebar-active-bg:#1d3639;--sidebar-active-ink:#d8f0ed;
    --chart-a:#4a9690;--chart-b:#2e8581;--grid:#1f3033;
    --shadow:0 3px 18px rgba(0,0,0,.35);--shadow-up:0 -6px 22px rgba(0,0,0,.45);--overlay:rgba(0,0,0,.65);
    --line-strong:#375053;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e4eeed;--muted:#a3b7b7;--line:#27393c;--line-strong:#375053;--bg:#0e1a1c;--card:#152326;
  --surface-2:#1a2b2e;--surface-3:#172629;--brand:#9fd9d3;--brand2:#5fb5ae;--accent:#e0b366;
  --danger:#f08f8f;--warn:#e8b95e;--ok:#6fd1a5;--link:#7cccc5;--btn-bg:#23807c;--btn-bg-hover:#2a948f;--btn-ink:#fff;
  --tint:#1d3639;--tint-line:#2f5256;--tint-soft:#18302f;--hover:#1f3235;
  --ok-bg:#15332a;--warn-bg:#3a2d12;--danger-bg:#3b1d20;--info-bg:#162e40;--info:#8cc4ee;--neutral-bg:#223033;--neutral:#b4c6c6;
  --warn-line:#5e4a1d;--danger-line:#6b3338;--ok-line:#24523f;--focus:#3f8a85;
  --sidebar-from:#0b2024;--sidebar-to:#071619;--sidebar-active-bg:#1d3639;--sidebar-active-ink:#d8f0ed;
  --chart-a:#4a9690;--chart-b:#2e8581;--grid:#1f3033;
  --shadow:0 3px 18px rgba(0,0,0,.35);--shadow-up:0 -6px 22px rgba(0,0,0,.45);--overlay:rgba(0,0,0,.65);
}

/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-size:14px;line-height:1.8;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body.nav-lock{overflow:hidden}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{line-height:1.5}
a{color:var(--link)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.print-only{display:none}
.skip-link{position:fixed;top:-60px;inset-inline-start:16px;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:300;box-shadow:var(--shadow)}
.skip-link:focus{top:10px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 3. SHELL ----------------------------------------------------------------- */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--sidebar-from),var(--sidebar-to));color:var(--sidebar-ink);padding:24px 16px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px 24px;border-block-end:1px solid #ffffff1a;color:#fff}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:#183336;font-size:23px;font-weight:900;flex:none}
.brand-logo{width:42px;height:42px;border-radius:12px;object-fit:contain;background:#fff;padding:3px;flex:none}
.brand strong,.brand small{display:block}
.brand small{color:var(--sidebar-muted);font-size:12px;margin-block-start:4px}
.nav-list{display:grid;gap:5px;margin-block-start:22px}
.nav-item{display:flex;align-items:center;gap:11px;min-height:var(--tap);text-decoration:none;color:var(--sidebar-ink);padding:8px 12px;border-radius:10px}
.nav-item:hover,.nav-item:focus-visible{background:#ffffff14;color:#fff}
.nav-item.is-active{background:var(--sidebar-active-bg);color:var(--sidebar-active-ink);font-weight:700}
.nav-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#ffffff12;flex:none}
.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-active .nav-icon{background:#0000000f}
.sidebar-footer{margin-block-start:auto;padding:14px 8px;border-block-start:1px solid #ffffff1a;display:flex;gap:9px;align-items:center}
.sidebar-footer strong,.sidebar-footer small{display:block}
.sidebar-footer small{color:var(--sidebar-muted);font-size:12px}
.status-dot{width:9px;height:9px;border-radius:50%;background:#61c991;flex:none}
.nav-backdrop{display:none}
.workspace{min-width:0}
.topbar{min-height:74px;background:var(--card);border-block-end:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 28px;position:sticky;top:0;z-index:20}
.topbar-title{min-width:0}
.topbar-title strong,.topbar-title small,.user-chip strong,.user-chip small{display:block}
.topbar-title small,.user-chip small{color:var(--muted);font-size:12px;margin-block-start:3px}
.topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.user-chip{display:flex;gap:9px;align-items:center}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--tint);color:var(--brand);display:grid;place-items:center;font-weight:800;flex:none}
.icon-button{border:0;background:transparent;color:var(--ink);min-width:40px;height:40px;border-radius:9px;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.icon-button:hover{background:var(--hover)}
.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-button{display:none}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}
.content{padding:30px;max-width:1600px;margin:auto}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-block-end:22px}
.page-heading h1{font-size:25px;margin:5px 0}
.page-heading p,.card-header p{margin:4px 0;color:var(--muted)}

/* 4. COMPONENTS ------------------------------------------------------------ */
.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:9px;border:1px solid transparent;padding:10px 15px;text-decoration:none;cursor:pointer;font-weight:700;position:relative;line-height:1.5}
.button-primary{background:var(--btn-bg);color:var(--btn-ink)}
.button-primary:hover{background:var(--btn-bg-hover)}
.button-secondary{background:var(--tint);color:var(--brand);border-color:var(--tint-line)}
.button-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.button-ghost:hover{background:var(--hover)}
.button-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.button-block{display:flex;width:100%}
.button[disabled],.button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.button-row{display:flex;gap:8px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-block-end:18px}
.metric-card,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.metric-card{padding:18px;border-block-start:3px solid var(--line-strong)}
.metric-card.highlight{border-block-start-color:var(--ok)}
.metric-label{display:block;color:var(--muted)}
.metric-value{display:block;font-size:23px;margin:12px 0 7px;font-variant-numeric:tabular-nums}
.metric-card>div{display:flex;justify-content:space-between}
.pill{display:inline-flex;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;line-height:1.7}
.pill.positive,.attention-icon.positive{background:var(--ok-bg);color:var(--ok)}
.pill.warning,.attention-icon.warning{background:var(--warn-bg);color:var(--warn)}
.pill.danger,.attention-icon.danger{background:var(--danger-bg);color:var(--danger)}
.pill.neutral{background:var(--neutral-bg);color:var(--neutral)}
.pill.info{background:var(--info-bg);color:var(--info)}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:20px}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-all{grid-column:1/-1}
.card-header{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-block-end:18px}
.card-header h2{font-size:17px;margin:0}
.chart{height:250px;display:flex;flex-direction:column}
.chart-bars{flex:1;display:flex;gap:8%;align-items:end;border-block-end:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 24%,var(--grid) 25%)}
.chart-bars span{height:var(--h);flex:1;background:linear-gradient(var(--chart-a),var(--chart-b));border-start-start-radius:7px;border-start-end-radius:7px}
.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding-block-start:9px}
.attention-list{list-style:none;margin:0;padding:0}
.attention-list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-block-end:1px solid var(--line)}
.attention-list small{display:block;color:var(--muted);margin-block-start:4px}
.attention-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-weight:900;flex:none}
.text-link,.back-link{color:var(--link);text-decoration:none;font-weight:700}
.text-link:hover,.back-link:hover{text-decoration:underline}
.positive-text{color:var(--ok)}
.danger-text{color:var(--danger)}
.narrow{max-width:980px;margin:auto}
.summary-list div{display:flex;justify-content:space-between;padding:14px 0;border-block-end:1px solid var(--line)}
.summary-list dd{font-weight:800}
.progress{height:9px;border-radius:10px;background:var(--neutral-bg);overflow:hidden}
.progress span{display:block;height:100%;background:var(--brand2)}
.block-muted{padding:16px;background:var(--surface-2);border-radius:9px;color:var(--muted)}
.plain-list{list-style:none;padding:0}
.plain-list li{padding:10px 0;border-block-end:1px solid var(--line)}
.plain-list small{display:block;color:var(--muted);margin-block-start:5px}
.workflow-help{margin-block-start:14px;padding:14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px}
.workflow-help p{color:var(--muted);line-height:1.8}
.workflow-help code{display:block;direction:ltr;text-align:start;background:var(--card);padding:8px;border-radius:7px;color:var(--brand)}
.timeline{display:grid;gap:0}
.timeline article{position:relative;padding:12px 0;padding-inline-start:18px;border-inline-start:3px solid var(--tint-line)}
.timeline article::before{content:"";position:absolute;inset-inline-start:-7px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--brand2)}
.timeline article span,.timeline article p{display:block;color:var(--muted);margin-block-start:5px}

/* 5. TABLES ---------------------------------------------------------------- */
.table-wrap{overflow:auto;max-height:min(78vh,1000px);-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:720px}
th,td{text-align:start;padding:13px 11px;border-block-end:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);background:var(--surface-2);font-weight:700}
.table-wrap th{position:sticky;top:0;z-index:2}
tbody tr:hover td{background:var(--tint-soft)}
tfoot td,tfoot th{position:static;font-weight:800;color:var(--ink);background:var(--surface-2);border-block-start:2px solid var(--line-strong)}
.money{font-variant-numeric:tabular-nums;font-weight:700}
.num{text-align:end;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
th.num{direction:rtl;unicode-bidi:normal}
.neg{color:var(--danger)}
.entry-table input,.entry-table select{min-width:100px}
.entry-table input{padding:8px}
.table-wrap .entry-table th{position:static}
/* Opt-in mobile card layout: <table class="table-cards"> with <td data-label="..."> */
@media (max-width:768px){
  .table-cards{min-width:0;border-collapse:collapse}
  .table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .table-cards,.table-cards tbody,.table-cards tfoot,.table-cards tr,.table-cards td{display:block;width:100%}
  .table-cards tr{border:1px solid var(--line);border-radius:12px;margin-block-end:10px;background:var(--card);overflow:hidden}
  .table-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:normal;text-align:start;border-block-end:1px dashed var(--line)}
  .table-cards td:last-child{border-block-end:0}
  .table-cards td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700;flex:none}
  .table-cards td.num{text-align:end}
  .table-cards tfoot tr{background:var(--surface-2)}
  .table-wrap:has(.table-cards){max-height:none;overflow:visible}
}

/* 6. FORMS ----------------------------------------------------------------- */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end;margin-block-end:20px}
.filters.filters-5{grid-template-columns:2fr 1fr 1fr 1fr auto}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.form-stack{display:grid;gap:18px}
label>span{display:block;font-weight:700;margin-block-end:7px}
label b{color:var(--danger)}
input,select,textarea{width:100%;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);padding:10px 11px;color:var(--ink);min-height:40px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);border-color:var(--brand2)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
input[aria-invalid="true"],.is-invalid{border-color:var(--danger)}
.amount-input{direction:ltr;text-align:end;font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
.field-help{display:block;color:var(--muted);margin-block-start:5px;font-size:13px}
.field-error{display:block;color:var(--danger);margin-block-start:5px;font-size:13px}
.input-suffix{display:flex}
.input-suffix input{border-start-end-radius:0;border-end-end-radius:0}
.input-suffix span{display:grid;place-items:center;padding:0 12px;background:var(--neutral-bg);border:1px solid var(--line-strong);border-inline-start:0;border-start-end-radius:8px;border-end-end-radius:8px}
.stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:25px 0}
.stepper li{display:flex;gap:9px;align-items:center;color:var(--muted);position:relative}
.stepper li::after{content:"";height:2px;background:var(--line);position:absolute;inset-inline-start:45px;inset-inline-end:10px;top:18px;z-index:-1}
.stepper li:last-child::after{display:none}
.stepper li>span{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:var(--bg);font-weight:800}
.stepper strong,.stepper small{display:block;overflow-wrap:anywhere}
.stepper li>div{min-width:0}
.stepper small{font-size:12px}
.stepper .is-active{color:var(--brand2)}
.stepper .is-active>span{background:var(--brand2);border-color:var(--brand2);color:#fff}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-end:20px}
.choice{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:15px;border-radius:11px;cursor:pointer}
.choice:has(input:checked){border-color:var(--brand2);background:var(--tint-soft)}
.choice input{width:auto;min-height:0}
.choice small{display:block;color:var(--muted)}
.choice-mark{font-size:26px;color:var(--brand2)}
.upload-box{position:relative;margin-block-start:20px;border:2px dashed var(--line-strong);border-radius:11px;padding:30px;text-align:center;cursor:pointer}
.upload-box input{position:absolute;opacity:0;width:1px}
.upload-box span,.upload-box strong,.upload-box small{display:block}
.upload-box span{font-size:26px}
.upload-box small{color:var(--muted);margin-block-start:5px}
.wizard-actions{display:flex;justify-content:flex-end;gap:9px;margin-block-start:22px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.empty-review{text-align:center;padding:45px 15px}
.empty-review>span{display:grid;place-items:center;width:60px;height:60px;margin:auto;background:var(--ok-bg);color:var(--ok);border-radius:50%;font-size:26px}
.optional-section{border-block-start:1px solid var(--line);margin-block-start:18px;padding-block-start:3px}
.optional-section>summary,.line-details>summary{cursor:pointer;color:var(--link);font-weight:800;padding:13px 2px;list-style:none}
.optional-section>summary::-webkit-details-marker,.line-details>summary::-webkit-details-marker{display:none}
.optional-section>summary::before,.line-details>summary::before{content:"+‌ ";font-size:18px}
.optional-section[open]>summary::before,.line-details[open]>summary::before{content:"−‌ "}
.optional-section summary small,.line-details summary small,.attachment-section summary small{color:var(--muted);font-weight:400;margin-inline-start:7px}
.optional-content{padding-block-start:12px}
.attachment-section{margin-block-start:0;padding-block-start:12px}
.attachment-section>summary span,.attachment-section>summary strong,.attachment-section>summary small{display:block}
.attachment-section>summary small{margin:6px 0 0}

/* 7. STATES: alerts, empty, skeleton, spinner, loading buttons, toasts ------ */
.alert{padding:13px 16px;border-radius:10px;margin-block-end:16px;border:1px solid transparent;border-inline-start-width:4px}
.alert ul{margin:0;padding-inline-start:20px}
.alert-success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.alert-danger,.alert-error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.alert-warning{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.alert-info{background:var(--info-bg);color:var(--info);border-color:var(--tint-line)}
.empty-inline{padding:22px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface-3)}
.skeleton{display:block;min-height:1em;border-radius:8px;background:linear-gradient(90deg,var(--neutral-bg) 25%,var(--surface-2) 50%,var(--neutral-bg) 75%);background-size:200% 100%;animation:skeleton 1.3s linear infinite;color:transparent!important;pointer-events:none;user-select:none}
.skeleton *{visibility:hidden}
@keyframes skeleton{to{background-position:-200% 0}}
.spinner{display:inline-block;width:1.1em;height:1.1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;vertical-align:-.2em;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.button.is-loading{pointer-events:none;opacity:.85}
.button.is-loading::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.toast-region{position:fixed;inset-block-end:calc(16px + env(safe-area-inset-bottom));inset-inline-start:16px;z-index:400;display:grid;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;padding:12px 16px;border-radius:10px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow);animation:toast-in .2s ease}
.toast.is-success{background:var(--ok);color:#fff}
.toast.is-error{background:var(--danger);color:#fff}
:root[data-theme="dark"] .toast.is-success,:root[data-theme="dark"] .toast.is-error{color:#0e1a1c}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
.balance-bar{display:flex;align-items:center;gap:9px;margin-block-start:15px;border-radius:9px;padding:11px;background:var(--ok-bg);color:var(--ok)}
.balance-bar small{margin-inline-start:auto}
.balance-bar:not(.is-balanced){background:var(--danger-bg);color:var(--danger)}

/* 8. FEATURE WIDGETS ------------------------------------------------------- */
.journal-lines{display:grid;gap:12px}
.journal-line{position:relative;border:1px solid var(--line);border-radius:12px;padding:16px 14px 12px;padding-inline-start:52px;background:var(--surface-3)}
.line-number{position:absolute;inset-inline-start:14px;top:18px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--tint);color:var(--brand);font-weight:900}
.line-main{display:grid;grid-template-columns:minmax(250px,2fr) minmax(160px,1fr) minmax(135px,.8fr) minmax(135px,.8fr) 38px;gap:11px;align-items:end}
.line-main label>span{font-size:12px}
.line-remove{margin-block-end:1px}
.line-details{border-block-start:1px dashed var(--line-strong);margin-block-start:13px}
.dimension-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px 0}
.line-error{margin:10px 0 0;padding:8px 10px;border-radius:7px;background:var(--danger-bg);color:var(--danger)}
.journal-line.line-invalid{border-color:var(--danger);background:var(--danger-bg)}
.balance-pulse{animation:balance-pulse .85s ease}
@keyframes balance-pulse{50%{transform:scale(1.015);box-shadow:0 0 0 4px #b4414122}}
.sticky-actions{position:sticky;bottom:0;z-index:10;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-up)}
.save-hint{color:var(--muted);margin-inline-end:auto}
.workflow-stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-block-end:18px}
.workflow-step{padding:10px 8px;border-radius:9px;background:var(--surface-2);color:var(--muted);text-align:center;font-size:12px}
.workflow-step.is-done{background:var(--ok-bg);color:var(--ok)}
.workflow-step.is-current{background:var(--btn-bg);color:#fff;font-weight:800}
.next-action-card{border:2px solid var(--tint-line);background:var(--tint-soft)}
.next-action-title{font-size:19px;margin:0 0 7px}
.next-action-copy{line-height:1.9;color:var(--muted)}
.report-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-block-end:18px}
.report-choice{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px}
.report-choice strong,.report-choice small{display:block}
.report-choice small{color:var(--muted);margin-block-start:5px}
.report-choice:hover,.report-choice.is-active{border-color:var(--brand2);background:var(--tint-soft)}
.report-choice.is-active{box-shadow:inset 0 0 0 1px var(--brand2)}
.report-filters{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:12px;align-items:end;margin-block-end:18px}
.report-summary{grid-template-columns:repeat(3,1fr)}
.organization-brand-grid{display:grid;grid-template-columns:230px 1fr;gap:24px}
.logo-editor{display:grid;align-content:start;gap:14px}
.logo-editor>img,.logo-placeholder{width:150px;height:150px;border:1px solid var(--line);border-radius:18px;object-fit:contain;background:#fff}
.logo-placeholder{display:grid;place-items:center;background:var(--tint);color:var(--brand);font-size:56px;font-weight:900}
.logo-editor .choice{padding:9px}

/* 9. AUTH / ERROR / PUBLIC PAGES ------------------------------------------- */
.auth-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px;background:var(--bg)}
.auth-card{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{color:var(--brand);margin:0 0 8px;font-size:24px}
.auth-card>p{color:var(--muted);margin:0 0 24px}
.auth-card label{display:block;margin-block-start:16px;color:var(--ink)}
.auth-card label>span{margin-block-end:7px}
.auth-card .button-block{margin-block-start:24px;min-height:48px}
.auth-card .error{background:var(--danger-bg);color:var(--danger);border-radius:8px;padding:10px 12px;margin-block-end:15px}
.auth-card .info{background:var(--info-bg);color:var(--info);border-radius:8px;padding:10px 12px;margin-block-end:15px}
.error-page .auth-brand{justify-content:center}
.auth-brand{display:flex;align-items:center;gap:10px;margin-block-end:20px;color:var(--brand);font-weight:800}
.auth-brand .brand-mark{width:38px;height:38px;font-size:20px}
.error-page{max-width:520px;text-align:center}
.error-code{font-size:64px;font-weight:900;line-height:1.2;color:var(--brand2);margin:0;font-variant-numeric:tabular-nums}
.error-page h1{margin:6px 0 10px}
.error-page>p{color:var(--muted);margin:0 0 24px}
.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.public-shell{max-width:1080px;margin:0 auto;padding:72px 24px}
.public-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:var(--shadow)}
.public-card h1{font-size:34px;margin:22px 0 10px}
.public-card p{color:var(--muted);line-height:2}
.badge{display:inline-block;background:var(--ok-bg);color:var(--ok);padding:6px 14px;border-radius:999px;font-weight:700}
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-block-start:28px}
.module{padding:18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;list-style:none;padding:0;margin:20px 0}
.pagination a,.pagination span.page{display:inline-grid;place-items:center;min-width:var(--tap);min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);text-decoration:none}
.pagination a:hover{background:var(--hover)}
.pagination .is-current{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff;font-weight:800}
.pagination .is-disabled{opacity:.5}
.pagination-summary{text-align:center;color:var(--muted);font-size:13px}

/* 10. VOUCHER (printable document layout — adopt via <article class="voucher">)
   <header class="voucher-header"> <div class="voucher-title">…</div> <div>logo/number</div> </header>
   <div class="voucher-meta"><div><span>برچسب</span><strong>مقدار</strong></div> … </div>
   <div class="voucher-lines"><table>…</table></div>
   <div class="voucher-signatures"><div>امضا ۱</div><div>امضا ۲</div><div>امضا ۳</div></div> */
.voucher{max-width:190mm;margin:0 auto;padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.voucher-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block-end:12px;border-block-end:2px solid var(--ink)}
.voucher-title{font-size:20px;font-weight:800;margin:0}
.voucher-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px;margin:14px 0}
.voucher-meta>div{display:flex;gap:6px;align-items:baseline}
.voucher-meta span{color:var(--muted)}
.voucher-lines table{min-width:0;font-size:13px}
.voucher-lines th,.voucher-lines td{border:1px solid var(--line-strong);padding:7px 8px;white-space:normal}
.voucher-lines th{position:static}
.voucher-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:36px}
.voucher-signatures>div{border:1px solid var(--line-strong);min-height:90px;padding:8px;text-align:center;color:var(--muted)}

/* 11. RESPONSIVE ----------------------------------------------------------- */
@media (max-width:1280px){
  .line-main{grid-template-columns:1.5fr 1fr 1fr 1fr 38px}
  .dimension-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .span-3{grid-column:span 2}
  .filters,.filters.filters-5{grid-template-columns:1fr 1fr}
  .user-chip div{display:none}
  .report-picker{grid-template-columns:repeat(2,1fr)}
  .report-filters{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .app-shell{display:block}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:calc(-1 * (var(--sidebar-w) + 30px));width:var(--sidebar-w);max-width:86vw;height:100%;z-index:60;visibility:hidden;transition:inset-inline-start .2s ease,visibility 0s linear .2s;padding-block-end:calc(24px + env(safe-area-inset-bottom))}
  .app-shell.nav-open .sidebar{inset-inline-start:0;visibility:visible;transition:inset-inline-start .2s ease}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--overlay);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
  .app-shell.nav-open .nav-backdrop{opacity:1;visibility:visible;transition:opacity .2s ease}
  .menu-button{display:inline-grid}
  .topbar{padding:0 14px}
  .content{padding:18px 13px}
  .metric-grid,.dashboard-grid,.form-grid,.choice-grid{grid-template-columns:1fr}
  .span-2,.span-3{grid-column:auto}
  .page-heading{align-items:stretch;flex-direction:column}
  .filters,.filters.filters-5{grid-template-columns:1fr}
  .stepper li div{display:none}
  .contract-metrics{grid-template-columns:1fr 1fr}
  .button-row{flex-wrap:wrap}
  .journal-line{padding:52px 12px 12px}
  .line-number{inset-inline-start:13px;top:13px}
  .line-main,.dimension-grid{grid-template-columns:1fr}
  .line-remove{position:absolute;inset-inline-end:12px;top:10px}
  .optional-section summary small,.line-details summary small{display:block;margin:5px 0 0}
  .sticky-actions{bottom:0;padding-bottom:calc(13px + env(safe-area-inset-bottom));margin-inline:-13px;border-radius:12px 12px 0 0;flex-wrap:wrap}
  .save-hint{width:100%;margin:0}
  .wizard-actions{flex-wrap:wrap}
  .report-picker,.report-filters,.report-summary{grid-template-columns:1fr}
  .organization-brand-grid{grid-template-columns:1fr}
  .logo-editor>img,.logo-placeholder{width:110px;height:110px}
  .voucher-meta,.voucher-signatures{grid-template-columns:1fr}
  .public-shell{padding:32px 16px}
  .public-card{padding:24px}
}
/* Touch targets >= 44px on touch / small screens */
@media (pointer:coarse),(max-width:768px){
  .button,.icon-button,input:not([type="checkbox"]):not([type="radio"]),select,.report-choice{min-height:var(--tap)}
  .icon-button{min-width:var(--tap)}
  .text-link,.back-link{display:inline-block;padding-block:10px}
}
@media (max-width:480px){
  .topbar-title small{display:none}
  .topbar-actions{gap:4px}
  .card{padding:16px}
  .contract-metrics{grid-template-columns:1fr}
  .auth-card{padding:24px 20px}
  .error-code{font-size:48px}
  .toast-region{inset-inline:12px;width:auto}
}

/* 12. PRINT ---------------------------------------------------------------- */
@page{size:A4;margin:12mm}
@media print{
  :root:root:root:root{color-scheme:light;--ink:#000;--muted:#333;--line:#999;--line-strong:#777;--bg:#fff;--card:#fff;--surface-2:#f2f2f2;--surface-3:#fff;--brand:#000;--brand2:#000;--link:#000;--danger:#000;--ok:#000;--warn:#000;--tint-soft:#fff;--shadow:none;--shadow-up:none}
  html,body{background:#fff!important;color:#000;font-size:11pt}
  .sidebar,.topbar,.nav-backdrop,.toast-region,.skip-link,.sticky-actions,.button,.button-row,.icon-button,.back-link,.no-print,.report-picker,.report-filters,.wizard-actions{display:none!important}
  .print-only{display:block}
  .app-shell{display:block}
  .content{padding:0;max-width:none}
  .card,.metric-card,.voucher{box-shadow:none;border:1px solid #999;background:#fff;break-inside:avoid}
  .report-table{padding:0;border:0}
  .report-summary{grid-template-columns:repeat(3,1fr)}
  .pill,.alert{background:none!important;color:#000!important;border:1px solid #777}
  .neg{color:#000;font-weight:800}
  a{color:#000;text-decoration:none}
  .table-wrap{overflow:visible;max-height:none}
  table{min-width:0;font-size:10pt;border-collapse:collapse}
  th,td{padding:5px 4px;white-space:normal;border:1px solid #999;background:none}
  th,.table-wrap th{position:static;background:#eee;color:#000}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
  tr{break-inside:avoid}
  tfoot td,tfoot th{background:#eee;border-block-start:2px solid #000}
  .voucher{border:0;padding:0;max-width:none}
  .voucher-signatures>div{border:1px solid #000;color:#000}
}

/* Two-step confirmation panel (draft actions) and keyboard-friendly disabled buttons */
.confirm-step{margin-block-start:12px;padding:14px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px}
.confirm-step.is-irreversible{border-color:var(--danger-line);background:var(--danger-bg)}
.confirm-step p{margin:6px 0 12px;line-height:1.8}
.account-filter{width:100%;margin-block-end:4px}
.button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.role-notes{margin:6px 0 0;padding-inline-start:18px;font-size:.82rem;color:var(--muted);line-height:1.7}

/* 14. INVOICE LINE ROWS ----------------------------------------------------
   Fixed table layout + explicit column widths: every input lives in a cell that is at least as wide as the input,
   so quantity / unit price / discount / tax can never overlap (the old auto layout let `width:100%` inputs collapse
   their cells to the padding and overflow into the neighbouring column). When the table's own container is narrower
   than ~1020px (phones, tablets, laptops with the sidebar open) each row becomes a labelled card. RTL via logical props. */
.invoice-lines-wrap{container:invoice-lines / inline-size}
.invoice-lines{table-layout:fixed;width:100%;min-width:1000px}
.invoice-lines .col-account{width:230px}
.invoice-lines .col-qty{width:104px}
.invoice-lines .col-money{width:150px}
.invoice-lines .col-act{width:56px}
.invoice-lines th,.invoice-lines td{white-space:normal;vertical-align:top;padding:10px 8px;min-width:0}
.invoice-lines th{vertical-align:middle}
.invoice-lines input,.invoice-lines select{min-width:0;width:100%;max-width:100%;text-overflow:ellipsis}
.invoice-lines .qty-input{text-align:end;padding-inline:8px}
.invoice-lines .amount-hint,.invoice-lines .field-help{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.invoice-lines .cell-act .button{min-width:40px;padding-inline:10px}
.invoice-lines tbody tr:hover td{background:transparent}
.invoice-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.invoice-totals>div{min-width:0}
.invoice-totals dt{font-size:12px;color:var(--muted)}
.invoice-totals dd{margin:2px 0 0;font-weight:800;overflow-wrap:anywhere;text-align:start}
.invoice-totals .is-net dd{color:var(--brand2)}
@container invoice-lines (max-width:1019px){
  .invoice-lines{display:block;min-width:0;table-layout:auto}
  .invoice-lines colgroup,.invoice-lines thead{display:none}
  .invoice-lines tbody{display:grid;gap:12px}
  .invoice-lines tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;position:relative;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .invoice-lines td{display:block;padding:0;border:0;min-width:0}
  .invoice-lines td::before{content:attr(data-label);display:block;margin-block-end:4px;font-size:12px;font-weight:700;color:var(--muted)}
  .invoice-lines td[data-label="شرح"],.invoice-lines td[data-label="حساب"],.invoice-lines td.cell-act{grid-column:1/-1}
  .invoice-lines td.cell-act{justify-self:end}
  .invoice-lines td.cell-act::before{content:none}
}
@container invoice-lines (max-width:440px){
  .invoice-lines tr{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .invoice-lines-wrap{overflow:visible;max-height:none}
}