/*
  صرح — design tokens + layout. Defined once here; pages never redeclare colors or fonts.
  Identity: royal blue #0B2D5B, warm gold #D4A85B, Cairo. Arabic-first RTL.
  Arabic rules: no letter-spacing on Arabic text, line-height ≥ 1.5 for body, logical properties.
*/
:root {
    --s-navy-900: #071E3D;
    --s-navy-800: #0B2D5B;   /* brand royal blue */
    --s-navy-700: #123B73;
    --s-blue-600: #1F5FBF;
    --s-blue-100: #E7EFFB;
    --s-gold-500: #D4A85B;   /* brand warm gold */
    --s-gold-600: #B98B3E;
    --s-gold-100: #FBF3E4;

    --s-bg: #F3F5F9;
    --s-surface: #FFFFFF;
    --s-border: #E3E8EF;
    --s-border-strong: #CBD3DF;
    --s-text: #1B2433;
    --s-text-muted: #66738A;

    --s-success: #1E8A55;  --s-success-bg: #E6F5EC;
    --s-warning: #B7791F;  --s-warning-bg: #FDF3E2;
    --s-danger:  #C0392B;  --s-danger-bg:  #FBEAE8;
    --s-info:    #1F5FBF;  --s-info-bg:    #E7EFFB;

    --s-focus: #FFE0C0;    /* MTA house focus color (255,224,192) */
    --s-radius: 12px;
    --s-radius-sm: 8px;
    --s-shadow: 0 1px 2px rgba(16, 33, 64, .06), 0 4px 14px rgba(16, 33, 64, .05);

    --s-font: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --s-font-num: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --s-sidebar-w: 272px;
}

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

html, body { margin: 0; height: 100%; }

body {
    font-family: var(--s-font);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--s-text);
    background: var(--s-bg);
    letter-spacing: normal;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; letter-spacing: normal; }

.num, .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.num { font-family: var(--s-font-num); }
.muted { color: var(--s-text-muted); }

/* ---------- Shell ---------- */
.s-shell { display: flex; min-height: 100vh; }

.s-sidebar {
    z-index: 5;
    width: var(--s-sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--s-navy-800), var(--s-navy-900));
    color: #DCE5F3;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.s-brand {
    display: grid; justify-items: center; gap: 6px;
    padding: 18px 16px 14px;
    border-block-end: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
}
.s-brand-logo { width: 200px; height: auto; display: block; }
.s-brand-tile {
    width: 48px; height: 48px; border-radius: 12px; background: #fff;
    display: grid; place-items: center; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.s-brand-tile img { width: 38px; height: 38px; }
.s-brand-name { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; }
.s-brand-sub { font-size: 12px; font-weight: 600; color: var(--s-gold-500); line-height: 1.4; letter-spacing: .2px; }

/* Menu between the logo and the footer: scrolls on its own, and reaches 28px past the sidebar's edge (over the page
   body) so the active card can stick out without being clipped. Only its rows take clicks. The scroll container's
   direction is flipped so the scrollbar sits on the sidebar's OUTER edge (right, in Arabic), its rows flipped back.
   Physical left/right on purpose: the page body is on the left in Arabic. */
.s-nav-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    direction: ltr;
    margin-left: -28px; padding: 10px 12px 10px 40px;
    pointer-events: none;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
    /* Its own layer, painting only inside its box: without it some browsers leave stale rows behind while scrolling. */
    will-change: transform; contain: paint; overscroll-behavior: contain;
}
.s-nav-scroll > * { direction: rtl; pointer-events: auto; }
.s-nav { display: grid; gap: 2px; }
.s-nav a, .s-nav-group > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px; color: #DCE5F3; text-decoration: none; font-weight: 600; font-size: 14.5px;
    position: relative;
    transition: background-color .18s ease, margin .18s ease, padding .18s ease, box-shadow .18s ease;
}
.s-nav a:hover, .s-nav-group > summary:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.s-nav a.soon { opacity: .42; pointer-events: none; }
.s-nav .s-ico { width: 20px; height: 20px; flex-shrink: 0; }

/* Active page: a floating card pulled 16px past the sidebar edge, on top of the page body. */
.s-nav a.active {
    background: linear-gradient(135deg, #1F5FBF 0%, var(--s-navy-700) 100%);
    color: #fff; font-weight: 700;
    margin-left: -28px; padding-left: 40px;
    border-radius: 14px;
    z-index: 1;
    box-shadow: 0 16px 32px -8px rgba(5, 12, 28, .55), 0 4px 12px rgba(5, 12, 28, .3), 0 0 0 1px rgba(255, 255, 255, .12);
}
.s-nav a.active .s-ico { color: var(--s-gold-500); }

/* Main sections: <details>/<summary>, no script. */
.s-nav-group > summary { cursor: pointer; list-style: none; user-select: none; }
.s-nav-group > summary::-webkit-details-marker { display: none; }
.s-nav-group > summary .label { flex: 1; }
.s-nav-group > summary .chev { width: 16px; height: 16px; flex: none; color: #8EA2C3; transition: transform .18s ease; }
.s-nav-group[open] > summary { color: #fff; }
.s-nav-group[open] > summary .chev { transform: rotate(180deg); }
.s-nav-group[open] > summary .s-ico { color: var(--s-gold-500); }
.s-nav-sub {
    display: grid; gap: 2px;
    margin: 2px 0 6px; padding-inline-start: 12px; margin-inline-start: 21px;
    border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.s-nav-sub a { font-size: 14px; padding-block: 8px; }

.s-sidebar-foot {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 12px 18px; font-size: 11.5px; color: #8EA2C3; border-block-start: 1px solid rgba(255, 255, 255, .08);
}
.s-sidebar-foot b { color: #DCE5F3; font-weight: 700; }

.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.s-topbar {
    height: 64px; background: var(--s-surface); border-block-end: 1px solid var(--s-border);
    display: flex; align-items: center; gap: 16px; padding-inline: 24px;
    position: sticky; top: 0; z-index: 5;
}
.s-topbar .s-search {
    flex: 1; max-width: 520px; height: 40px; border: 1px solid var(--s-border); border-radius: 10px;
    background: var(--s-bg); padding-inline: 14px; font: inherit; color: var(--s-text);
}
.s-topbar .s-spacer { flex: 1; }
/* The search: grows to 520px; the results panel opens under it. */
.s-gsearch { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; }
.s-gsearch .s-search { width: 100%; max-width: none; padding-inline: 40px 64px; }
.s-gsearch .s-search:focus { outline: none; border-color: var(--s-blue-600); background: #fff; box-shadow: 0 0 0 3px var(--s-blue-100); }
.s-gsearch .s-search::-webkit-search-cancel-button { display: none; }
.s-gsearch-ico { position: absolute; inset-inline-start: 13px; color: var(--s-text-muted); pointer-events: none; }
.s-gsearch-kbd {
    /* Physical «left»: the label's own LTR direction would turn a logical inset to the right, over the text. */
    position: absolute; left: 10px; padding: 1px 7px; border: 1px solid var(--s-border-strong); border-radius: 6px;
    background: #fff; color: var(--s-text-muted); font: 600 11px var(--s-font); direction: ltr; unicode-bidi: isolate; pointer-events: none;
}
.s-gsearch-panel { inset-inline-end: auto; inset-inline-start: 0; width: 100%; min-width: 360px; max-height: min(560px, 75vh); overflow-y: auto; padding-block-end: 6px; }
.s-gsearch-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--s-text); text-decoration: none; }
.s-gsearch-item.sel { background: var(--s-blue-100); }
.s-gsearch-item .txt { display: grid; min-width: 0; }
.s-gsearch-item .txt b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-gsearch-item .txt small { font-size: 12px; color: var(--s-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-gsearch-ico2 { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--s-bg); color: var(--s-navy-800); }
.s-gsearch-item.sel .s-gsearch-ico2 { background: #fff; }
.s-company { text-align: start; line-height: 1.35; }
.s-company b { display: block; font-size: 14px; }
.s-company small { color: var(--s-text-muted); font-size: 12px; }

.s-content { padding: 22px 24px 70px; }

/* ---------- Page head ---------- */
.s-page-head { display: flex; align-items: center; gap: 14px; margin-block-end: 18px; }
.s-page-head .s-page-ico {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--s-gold-100); color: var(--s-gold-600);
}
.s-page-head h1 { font-size: 22px; }
.s-page-head p { margin: 0; color: var(--s-text-muted); font-size: 13px; }
.s-crumbs { font-size: 12.5px; color: var(--s-text-muted); }

/* ---------- Cards ---------- */
.s-card {
    background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius);
    box-shadow: var(--s-shadow);
}
.s-card-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 18px;
    border-block-end: 1px solid var(--s-border);
}
.s-card-head h2 { font-size: 16px; }
.s-card-head .s-spacer { flex: 1; }
.s-card-body { padding: 18px; }

.s-grid-2 { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 18px; align-items: start; }
.s-stack { display: grid; gap: 18px; }
@media (max-width: 1100px) { .s-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.s-form { display: grid; gap: 12px; }
.s-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-field { display: grid; gap: 5px; }
.s-field label { font-size: 13px; font-weight: 700; color: #34405A; }
.s-field label .req { color: var(--s-danger); margin-inline-start: 2px; }
.s-input, .s-select {
    height: 40px; border: 1px solid var(--s-border-strong); border-radius: var(--s-radius-sm);
    padding-inline: 12px; font: inherit; font-weight: 600; color: var(--s-text); background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s; width: 100%;
}
textarea.s-input { height: auto; min-height: 70px; padding-block: 8px; resize: vertical; }
.s-input:focus, .s-select:focus {
    outline: none; border-color: var(--s-gold-500); background: var(--s-focus);
    box-shadow: 0 0 0 3px rgba(212, 168, 91, .25);
}
.s-input[readonly], .s-input:disabled { background: var(--s-bg); color: var(--s-text-muted); }
.s-input.invalid { border-color: var(--s-danger); animation: s-shake .25s; }
.s-hint { font-size: 12px; color: var(--s-text-muted); }
@keyframes s-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.s-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.s-check input { width: 18px; height: 18px; accent-color: var(--s-navy-800); }

/* ---------- Buttons ---------- */
.s-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 6px; }
.s-btn {
    height: 40px; padding-inline: 16px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap; text-decoration: none;
    transition: filter .15s, box-shadow .15s;
}
.s-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 168, 91, .55); }
.s-btn:disabled { opacity: .5; cursor: not-allowed; }
.s-btn-primary { background: var(--s-navy-800); color: #fff; }
.s-btn-primary:hover { filter: brightness(1.12); }
.s-btn-gold { background: var(--s-gold-500); color: var(--s-navy-900); }
.s-btn-light { background: #fff; color: var(--s-navy-800); border-color: var(--s-border-strong); }
.s-btn-danger { background: #fff; color: var(--s-danger); border-color: #F0C6C0; }
.s-btn-sm { height: 32px; padding-inline: 10px; font-size: 13px; border-radius: 8px; }
.s-kbd {
    font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 5px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); direction: ltr;
}
.s-btn-light .s-kbd, .s-btn-danger .s-kbd { background: var(--s-bg); border-color: var(--s-border); }

/* ---------- Tables ---------- */
.s-table-wrap { overflow: auto; }
.s-table { width: 100%; border-collapse: collapse; }
.s-table th {
    font-size: 12.5px; font-weight: 700; color: var(--s-text-muted); text-align: start;
    padding: 10px 14px; background: #F7F9FC; border-block-end: 1px solid var(--s-border); white-space: nowrap;
}
.s-table td { padding: 10px 14px; border-block-end: 1px solid var(--s-border); vertical-align: middle; }
.s-table tbody tr { cursor: pointer; transition: background .1s; }
.s-table tbody tr:hover { background: #F7F9FC; }
.s-table tbody tr.selected { background: var(--s-blue-100); box-shadow: inset -3px 0 0 var(--s-blue-600); }
.s-table td.num, .s-table th.num { text-align: end; }
.s-empty { padding: 28px; text-align: center; color: var(--s-text-muted); }

/* ---------- Pills & messages ---------- */
.s-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.s-pill-success { background: var(--s-success-bg); color: var(--s-success); }
.s-pill-muted { background: #EEF1F5; color: var(--s-text-muted); }
.s-pill-gold { background: var(--s-gold-100); color: var(--s-gold-600); }
.s-pill-info { background: var(--s-info-bg); color: var(--s-info); }

.s-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; font-weight: 600; margin-block-end: 14px; }
.s-msg-error { background: var(--s-danger-bg); color: var(--s-danger); }
.s-msg-ok { background: var(--s-success-bg); color: var(--s-success); }
.s-msg-info { background: var(--s-info-bg); color: var(--s-info); }

.s-rate-hero {
    display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 10px;
    background: linear-gradient(135deg, var(--s-navy-800), var(--s-navy-700)); color: #fff; margin-block-end: 14px;
}
.s-rate-hero .big { font-size: 26px; font-weight: 800; }
.s-rate-hero small { color: var(--s-gold-500); }

/* ---------- Shortcut hint bar (MTA StatusHints) ---------- */
.s-hintbar {
    position: fixed; inset-block-end: 0; inset-inline-end: 0; inset-inline-start: var(--s-sidebar-w);
    background: var(--s-surface); border-block-start: 1px solid var(--s-border);
    display: flex; gap: 18px; padding: 8px 24px; font-size: 12.5px; color: var(--s-text-muted); z-index: 4;
}
.s-hintbar span { display: inline-flex; align-items: center; gap: 6px; }
.s-hintbar span b { color: var(--s-navy-800); direction: ltr; unicode-bidi: isolate; }

/* ---------- Searchable select ---------- */
.s-ss { position: relative; }
.s-ss-list {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30;
    max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid var(--s-border-strong); border-radius: 10px; box-shadow: 0 10px 28px rgba(16, 33, 64, .16);
}
.s-ss-list li { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.s-ss-list li.active, .s-ss-list li:hover { background: var(--s-blue-100); }
.s-ss-code { color: var(--s-text-muted); font-size: 12.5px; min-width: 64px; }
.s-ss-empty { color: var(--s-text-muted); cursor: default; }

/* ---------- Tree table ---------- */
.s-tree td.name { white-space: nowrap; }
.s-tree .toggle {
    width: 22px; height: 22px; border: 0; background: transparent; cursor: pointer; color: var(--s-text-muted);
    display: inline-grid; place-items: center; border-radius: 6px; vertical-align: middle; margin-inline-end: 2px;
}
.s-tree .toggle:hover { background: var(--s-bg); }
.s-tree .toggle svg { transition: transform .15s; }
.s-tree .toggle.open svg { transform: rotate(-90deg); }
.s-tree .spacer { display: inline-block; width: 24px; }
.s-tree tr.group td.name { font-weight: 700; }
.s-tree tr.inactive td { color: var(--s-text-muted); text-decoration: line-through; }
.amount-neg { color: var(--s-danger); }
.s-hero-empty { text-align: center; padding: 34px 20px; }
.s-hero-empty h2 { font-size: 20px; margin-block-end: 6px; }
.s-hero-empty p { color: var(--s-text-muted); margin: 0 auto 18px; max-width: 560px; }
.s-seg { display: inline-flex; border: 1px solid var(--s-border-strong); border-radius: 10px; overflow: hidden; }
.s-seg button { border: 0; background: #fff; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; color: var(--s-text-muted); }
.s-seg button.on { background: var(--s-navy-800); color: #fff; }
.s-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.s-period { border: 1px solid var(--s-border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; background: #fff; }
.s-period.closed { background: #F7F9FC; }
.s-period .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* ---------- Modal ---------- */
.s-modal-backdrop { position: fixed; inset: 0; background: rgba(7, 30, 61, .45); z-index: 50; animation: s-fade .12s; }
.s-modal {
    position: fixed; z-index: 51; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%);
    width: min(92vw, 640px); max-height: 90vh; display: flex; flex-direction: column;
    background: var(--s-surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(7, 30, 61, .35); animation: s-pop .14s;
}
[dir="ltr"] .s-modal { transform: translate(-50%, -50%); }
.s-modal-sm { width: min(92vw, 460px); }
.s-modal-lg { width: min(94vw, 860px); }
.s-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-block-end: 1px solid var(--s-border); }
.s-modal-head h2 { font-size: 17px; }
.s-modal-x { border: 0; background: var(--s-bg); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: var(--s-text-muted); font-size: 15px; }
.s-modal-body { padding: 18px 20px; overflow-y: auto; }
.s-modal-foot { display: flex; gap: 8px; align-items: center; padding: 14px 20px; border-block-start: 1px solid var(--s-border); background: #FAFBFD; border-radius: 0 0 16px 16px; }
.s-modal-foot .s-spacer { flex: 1; }
@keyframes s-fade { from { opacity: 0; } }
@keyframes s-pop { from { opacity: 0; transform: translate(50%, -48%) scale(.98); } }

/* ---------- Toolbar & tabs ---------- */
.s-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 12px; }
.s-toolbar .s-spacer { flex: 1; }
.s-btn-group { display: inline-flex; border: 1px solid var(--s-border-strong); border-radius: 10px; overflow: hidden; background: #fff; }
.s-btn-group button { border: 0; border-inline-start: 1px solid var(--s-border); background: transparent; padding: 0 12px; height: 34px; font: inherit; font-weight: 700; font-size: 13px; color: var(--s-navy-800); cursor: pointer; white-space: nowrap; }
.s-btn-group button:first-child { border-inline-start: 0; }
.s-btn-group button:hover { background: var(--s-bg); }
.s-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--s-border); margin-block-end: 14px; flex-wrap: wrap; }
.s-tabs button { border: 0; background: transparent; padding: 10px 16px; font: inherit; font-weight: 700; color: var(--s-text-muted); cursor: pointer; white-space: nowrap; flex: none; border-block-end: 3px solid transparent; margin-block-end: -1px; }
.s-tabs button.active { color: var(--s-navy-800); border-block-end-color: var(--s-gold-500); }
.s-tree .row-act { opacity: 0; transition: opacity .1s; }
.s-tree tr:hover .row-act { opacity: 1; }
.s-leaf-tag { font-size: 11px; font-weight: 700; color: var(--s-success); background: var(--s-success-bg); padding: 0 7px; border-radius: 99px; margin-inline-start: 6px; }

/* ---------- Journal lines grid ---------- */
.s-lines { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.s-lines th { font-size: 12.5px; color: var(--s-text-muted); font-weight: 700; text-align: start; padding: 0 6px; }
.s-lines td { padding: 0 4px; vertical-align: top; }
.s-lines td.no { color: var(--s-text-muted); font-size: 12.5px; padding-top: 10px; width: 26px; text-align: center; }
.s-lines .s-input { height: 38px; }
.s-lines .amt { text-align: end; direction: ltr; font-variant-numeric: tabular-nums; }
.s-lines .del { border: 0; background: transparent; color: var(--s-text-muted); cursor: pointer; height: 38px; width: 30px; border-radius: 8px; }
.s-lines .del:hover { background: var(--s-danger-bg); color: var(--s-danger); }
.s-totals { display: flex; gap: 18px; align-items: center; justify-content: flex-end; padding: 10px 6px 0; border-block-start: 1px dashed var(--s-border-strong); margin-block-start: 6px; }
.s-totals .t { display: grid; text-align: end; }
.s-totals .t small { color: var(--s-text-muted); font-size: 12px; }
.s-totals .t b { font-size: 17px; direction: ltr; font-variant-numeric: tabular-nums; }
.s-totals .diff b { color: var(--s-danger); }
.s-totals .ok b { color: var(--s-success); }
.s-view-lines td, .s-view-lines th { padding: 8px 10px; }
.s-seg-sm button { padding: 6px 12px; font-size: 13px; }

/* ---------- Full-page document (journal, vouchers, claims…) ---------- */
.s-doc-head { display: flex; align-items: center; gap: 14px; margin-block-end: 16px; flex-wrap: wrap; }
.s-doc-head h1 { font-size: 22px; }
.s-doc-head .s-spacer { flex: 1; }
.s-doc-meta { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.s-doc-meta > div { display: grid; gap: 2px; flex: 1; min-width: 140px; }
.s-doc-meta small { color: var(--s-text-muted); font-size: 12px; }
.s-doc-bar {
    position: sticky; inset-block-end: 40px; z-index: 6; margin-block-start: 16px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius);
    box-shadow: 0 -4px 18px rgba(16, 33, 64, .08); padding: 12px 18px;
}
.s-doc-bar .s-spacer { flex: 1; }
.s-ico.flip { transform: scaleX(-1); }

/* ---------- Tabs with counters, role picker chips ---------- */
.s-tabs .count { display: inline-block; min-width: 22px; margin-inline-start: 6px; padding: 0 6px; border-radius: 99px; background: #EEF1F5; color: var(--s-text-muted); font-size: 12px; line-height: 20px; text-align: center; }
.s-tabs button.active .count { background: var(--s-gold-100); color: var(--s-gold-600); }
.s-role-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.s-role-picks .s-check { border: 1px solid var(--s-border-strong); border-radius: 10px; padding: 7px 12px; background: #fff; }
.s-role-picks .s-check:has(input:checked) { border-color: var(--s-navy-800); background: #F1F5FB; color: var(--s-navy-800); }
.s-role-picks .s-check:has(input:focus) { outline: 2px solid var(--s-gold-500); outline-offset: 1px; }
.s-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .s-row-3 { grid-template-columns: 1fr; } }

/* ---------- Settings rows ---------- */
.s-setting { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--s-border); border-radius: 12px; cursor: pointer; }
.s-setting:has(input:focus) { border-color: var(--s-gold-500); }
.s-setting input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--s-navy-800); flex: none; }
.s-setting span { display: grid; gap: 3px; }
.s-setting small { color: var(--s-text-muted); font-size: 13px; }

/* ---------- Balance strip on money documents ---------- */
.s-balances { display: flex; flex-wrap: wrap; gap: 12px; margin-block-end: 16px; }
.s-balance { flex: 1 1 220px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--s-border); }
.s-balance small { color: var(--s-text-muted); font-size: 12.5px; font-weight: 700; }
.s-balance b { font-size: 20px; font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.s-balance .after { font-size: 12.5px; color: var(--s-text-muted); direction: rtl; text-align: start; }
.s-balance.treasury { border-inline-start: 4px solid var(--s-navy-800); }
.s-balance.party { border-inline-start: 4px solid var(--s-gold-500); }
.s-balance.neg b { color: var(--s-danger); }

/* Blazor focuses the page heading after navigation (screen readers); no visible box for mouse/keyboard users. */
h1:focus, h1:focus-visible { outline: none; }
.s-nav a, .s-nav-group > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Numbers, dates and document numbers never break across lines in tables. */
.s-table td.num, .s-table th.num { white-space: nowrap; }

/* ---------- Reports ---------- */
.s-tb thead th.c { text-align: center; border-inline-start: 1px solid var(--s-border); }
.s-tb tbody tr.group td { background: #F7F9FC; }
.s-btn-group button.on { background: var(--s-navy-800); color: #fff; }
.s-pill-danger { background: var(--s-danger-bg); color: var(--s-danger); }
.s-print-head { display: none; margin-block-end: 12px; }
.s-print-head h2 { font-size: 18px; margin: 0 0 4px; }

@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background: #fff !important; }
    .s-sidebar, .s-topbar, .s-hintbar, .s-no-print, .s-toolbar, #blazor-error-ui, .s-doc-bar { display: none !important; }
    .s-content { padding: 0 !important; }
    .s-print-head { display: block !important; }
    .s-card { box-shadow: none !important; border: 1px solid #ccc; }
    .s-table tr { break-inside: avoid; }
    .s-table th, .s-table td { padding: 4px 6px !important; font-size: 11px; }
}

/* Owner's convention (2026-10-20): debit amounts red, credit amounts green — tables, balances, statements. */
:root { --s-debit: #C0392B; --s-credit: #1E8449; }
.dr { color: var(--s-debit); }
.cr { color: var(--s-credit); }

/* ---------- PDF preview (in-page) ---------- */
.s-pdf { position: fixed; inset: 3vh 3vw; z-index: 60; background: #fff; border-radius: 16px; display: flex; flex-direction: column;
         box-shadow: 0 30px 80px rgba(7, 30, 61, .45); overflow: hidden; animation: s-fade .12s; }
.s-pdf-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-block-end: 1px solid var(--s-border); background: #FAFBFD; }
.s-pdf-head h2 { font-size: 16px; margin: 0; }
.s-pdf-body { position: relative; flex: 1; background: #525659; }
.s-pdf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-pdf-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }
.s-logo-box { width: 180px; height: 140px; border: 1px dashed var(--s-border-strong); border-radius: 14px; display: grid; place-items: center; background: #fff; }
.s-logo-box img { max-width: 160px; max-height: 120px; object-fit: contain; }

/* ---------- Sign-in (Embassy style, owner 2026-10-21): centered card on the dark brand background ---------- */
.s-login-scene {
    position: relative; min-height: 100vh; overflow: hidden; isolation: isolate;
    display: grid; place-items: center; padding: 56px 16px;
    background: radial-gradient(ellipse at 50% 30%, var(--s-navy-700) 0%, var(--s-navy-800) 45%, var(--s-navy-900) 100%);
}
.s-login-skyline { position: absolute; inset: auto 0 0 0; width: 100%; height: 46vh; z-index: -1; color: rgba(255, 255, 255, .06); }
.s-login-skyline .crane { color: rgba(212, 168, 91, .22); }
.s-login-center { width: 100%; display: grid; place-items: center; }
.s-login-card {
    position: relative; width: 100%; max-width: 410px; padding: 30px 30px 22px;
    background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(4, 12, 28, .45); overflow: hidden;
}
.s-login-brand { display: grid; justify-items: center; gap: 2px; margin: 4px 0 16px; text-align: center; }
.s-login-brand img { width: 92px; height: 92px; border-radius: 50%; object-fit: contain; background: #fff; padding: 8px; box-shadow: 0 6px 18px rgba(13, 32, 64, .18); margin-bottom: 8px; }
.s-login-brand strong { font-size: 18px; color: var(--s-navy-800); }
.s-login-brand span { font-size: 12.5px; color: var(--s-gold-600); font-weight: 700; }
.s-auth-title { font-size: 16px; margin: 0 0 4px; text-align: center; color: var(--s-text-muted); font-weight: 700; }
.s-auth-sub { color: var(--s-text-muted); margin: 0 0 12px; font-size: 13px; text-align: center; line-height: 1.7; }
.s-login-card .s-form { display: grid; gap: 12px; }
.s-login-note { margin: 14px 0 0; font-size: 11.5px; color: var(--s-text-muted); text-align: center; }
@media (max-width: 560px) { .s-login-card { padding: 26px 20px 18px; } .s-login-brand img { width: 78px; height: 78px; } }

/* ---------- Top bar: the bell and the user menu ---------- */
.s-topbar-actions { display: flex; align-items: center; gap: 10px; padding-inline-start: 14px; margin-inline-start: 4px; border-inline-start: 1px solid var(--s-border); }
.s-um, .s-bell { position: relative; }
.s-pop-backdrop { position: fixed; inset: 0; z-index: 40; }
.s-pop {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 41;
    background: #fff; border: 1px solid var(--s-border); border-radius: 14px; overflow: hidden;
    box-shadow: 0 22px 48px -14px rgba(7, 30, 61, .38), 0 4px 12px rgba(7, 30, 61, .08);
    animation: s-pop-in .14s ease-out;
}
@keyframes s-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.s-pop-sep { height: 1px; background: var(--s-border); margin: 6px 4px; }
.s-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--s-blue-600); cursor: pointer; }

.s-um-btn {
    display: flex; align-items: center; gap: 10px; padding: 3px 4px 3px 10px; border: 1px solid transparent; border-radius: 999px;
    background: transparent; font: inherit; color: var(--s-text); cursor: pointer; transition: background-color .15s, border-color .15s;
}
.s-um-btn:hover, .s-um-btn[aria-expanded="true"] { background: var(--s-bg); border-color: var(--s-border); }
.s-um-btn .s-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--s-gold-500); margin-inline-start: 4px; }
.s-um-who { display: grid; line-height: 1.25; text-align: start; max-width: 190px; }
.s-um-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-um-who small { color: var(--s-text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-um-btn .chev { width: 16px; height: 16px; color: var(--s-text-muted); transition: transform .18s ease; }
.s-um-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.s-um-menu { width: 300px; padding: 6px; }
.s-um-head {
    display: flex; align-items: center; gap: 12px; margin: -6px -6px 6px; padding: 16px;
    background: linear-gradient(135deg, var(--s-navy-800), var(--s-navy-700)); color: #fff;
}
.s-um-head > div { display: grid; gap: 2px; min-width: 0; }
.s-um-head b { font-size: 15px; }
.s-um-head small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.s-um-head .s-pill { justify-self: start; margin-top: 4px; }
.s-um-head .s-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.s-um-menu a, .s-um-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--s-text); text-decoration: none; text-align: start; cursor: pointer;
}
.s-um-menu a:hover, .s-um-menu button:hover { background: var(--s-bg); }
.s-um-menu a .s-ico, .s-um-menu button .s-ico { color: var(--s-text-muted); }
.s-um-menu form { margin: 0; }
.s-um-menu .danger, .s-um-menu .danger .s-ico { color: var(--s-danger); }

.s-bell-btn {
    position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--s-border); background: #fff;
    color: var(--s-navy-800); display: grid; place-items: center; cursor: pointer; transition: background-color .15s;
}
.s-bell-btn:hover, .s-bell-btn[aria-expanded="true"] { background: var(--s-bg); }
.s-bell-badge {
    position: absolute; inset-block-start: -3px; inset-inline-end: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--s-gold-500); color: var(--s-navy-900); border: 2px solid #fff;
    font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
}
.s-bell-badge.critical { background: var(--s-danger); color: #fff; }
.s-bell-panel { width: 410px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; max-height: min(620px, 78vh); }
.s-bell-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-block-end: 1px solid var(--s-border); }
.s-bell-head b { font-size: 15px; }
.s-bell-body { overflow-y: auto; flex: 1 1 auto; }
.s-bell-sec { padding: 10px 16px 4px; font-size: 12px; font-weight: 700; color: var(--s-text-muted); }
.s-bell-empty { padding: 14px 16px 18px; font-size: 13px; color: var(--s-text-muted); }
.s-bell-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; position: relative;
    color: var(--s-text); text-decoration: none; transition: background-color .12s;
}
.s-bell-item:hover { background: var(--s-bg); }
.s-bell-item .txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.s-bell-item .txt b { font-size: 13.5px; font-weight: 700; }
.s-bell-item .txt small { font-size: 12.5px; color: var(--s-text-muted); overflow-wrap: anywhere; }
.s-bell-item .when { font-size: 11.5px; color: #8A96AB; white-space: nowrap; }
.s-bell-item .cnt { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--s-bg); font-size: 12px; font-weight: 800; text-align: center; }
.s-bell-item.unread { background: #F5F9FF; }
.s-bell-item.unread .txt b { color: var(--s-navy-800); }
.s-bell-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s-blue-600); flex: none; margin-top: 6px; }
.s-bell-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.s-bell-item.critical .s-bell-ico { background: var(--s-danger-bg); color: var(--s-danger); }
.s-bell-item.warning .s-bell-ico { background: var(--s-warning-bg); color: var(--s-warning); }
.s-bell-item.info .s-bell-ico { background: var(--s-info-bg); color: var(--s-info); }
.s-bell-item.success .s-bell-ico { background: var(--s-success-bg); color: var(--s-success); }
.s-bell-foot { display: block; padding: 11px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--s-navy-800); text-decoration: none; border-block-start: 1px solid var(--s-border); }
.s-bell-foot:hover { background: var(--s-bg); }
.s-note-list .s-bell-item { padding: 14px 20px; border-block-end: 1px solid var(--s-border); align-items: center; }
.s-note-list .s-bell-item:last-child { border-block-end: 0; }

/* ---------- My profile ---------- */
.s-profile-hero {
    display: flex; align-items: center; gap: 28px; padding: 24px 28px;
    background: linear-gradient(120deg, #fff 55%, var(--s-gold-100));
}
.s-profile-photo { display: grid; justify-items: center; gap: 10px; }
.s-profile-photo .s-avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--s-gold-500), 0 10px 24px -8px rgba(7, 30, 61, .4); }
.s-profile-photo .acts { display: flex; gap: 6px; }
.s-profile-id h1 { margin: 0; font-size: 24px; color: var(--s-navy-800); }
.s-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.s-profile-facts { display: flex; gap: 32px; }
.s-profile-facts div { display: grid; }
.s-profile-facts small { color: var(--s-text-muted); font-size: 12px; }
.s-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-block-start: 16px; align-items: start; }
.s-profile-scope { display: grid; gap: 14px; }
.s-profile-scope > div { display: grid; gap: 2px; }
.s-profile-scope small { color: var(--s-text-muted); font-size: 12px; }
.s-profile-scope ul { margin: 2px 0 0; padding-inline-start: 18px; }
@media (max-width: 700px) { .s-profile-hero { flex-direction: column; text-align: center; } .s-profile-facts, .s-profile-tags { justify-content: center; } .s-um-who { display: none; } }

/* ---------- Permissions matrix ---------- */
.s-perm { display: grid; gap: 14px; padding-block-end: 70px; }
.s-perm-module { background: #fff; border: 1px solid var(--s-border); border-radius: 14px; overflow: hidden; }
.s-perm-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F7F9FC; border-block-end: 1px solid var(--s-border); }
.s-perm-head h3 { flex: 1; margin: 0; font-size: 15px; color: var(--s-navy-800); }
.s-perm table { width: 100%; border-collapse: collapse; }
.s-perm th { font-size: 12.5px; color: var(--s-text-muted); font-weight: 700; padding: 8px 10px; text-align: start; border-block-end: 1px solid var(--s-border); }
.s-perm td { padding: 6px 10px; border-block-end: 1px solid #EEF1F6; }
.s-perm .c { text-align: center; width: 76px; }
.s-perm td.na { color: #C9D1DD; }
.s-perm td.screen { font-weight: 700; }
.s-perm tr.special td { font-size: 13px; color: #34405A; background: #FCFCFE; }
.s-perm tr.special .dot { color: var(--s-gold-500); margin-inline-end: 4px; }
.s-perm input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--s-navy-800); cursor: pointer; }
.s-perm-cell { width: 30px; height: 26px; border-radius: 7px; border: 1px solid var(--s-border-strong); background: #fff; font-weight: 800; cursor: pointer; }
.s-perm-cell.inherit { color: #8A97AD; background: #F2F4F8; }
.s-perm-cell.grant { color: #fff; background: var(--s-credit); border-color: var(--s-credit); }
.s-perm-cell.deny { color: #fff; background: var(--s-debit); border-color: var(--s-debit); }
.s-perm-cell:disabled { cursor: default; opacity: .8; }

/* ---------- Cheque fields on a voucher ---------- */
.s-cheque-row { display: grid; grid-template-columns: 180px minmax(200px, 1fr) 180px minmax(0, 1.4fr); gap: 14px; padding-block-start: 0; background: #FBF7EE; border-block-start: 1px dashed var(--s-gold-500); }

/* ---------- Projects: cost share bars, category rows ---------- */
.s-table tr.s-group-row td { background: #F7F9FC; }
.s-table tr.warn td { background: var(--s-warning-bg); }
.s-bar { position: relative; height: 8px; border-radius: 4px; background: var(--s-blue-100); margin-inline-end: 58px; }
.s-bar span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: var(--s-gold-500); }
.s-bar em { position: absolute; inset-inline-end: -58px; top: -7px; width: 52px; font-style: normal; font-size: 12px; color: var(--s-text-muted); text-align: end; }
.s-balance b.cr { color: var(--s-success); }
.s-balance b.dr { color: var(--s-danger); }

/* ---------- BOQ grid ---------- */
.s-boq td.num, .s-boq td.muted { padding-top: 10px; }
.s-boq tr.heading .s-input { font-weight: 700; background: #F7F9FC; }
.s-boq .s-input:disabled { background: transparent; border-color: transparent; color: var(--s-text); opacity: 1; }
/* Fixed layout: the columns keep their set widths and the description takes the rest (auto layout squeezed it). */
.s-boq { table-layout: fixed; }
.s-boq .s-input { width: 100%; }
.s-boq thead th:first-child { width: 30px; }

/* ---- employee file (ملف الموظف) ---- */
.s-tabs .count.warn { background: var(--s-danger-bg); color: var(--s-danger); }
.s-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--s-gold-100); color: var(--s-gold-600); font-weight: 700; overflow: hidden; flex: none; }
.s-avatar img { width: 100%; height: 100%; object-fit: cover; }
.s-emp-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.s-emp-head h1 { margin: 0; }
.s-emp-facts { display: flex; gap: 18px; flex-wrap: wrap; color: var(--s-text-muted); font-size: 13px; margin-top: 4px; }
.s-emp-facts b { color: var(--s-text); font-weight: 600; }
.s-emp-photo { position: relative; }
.s-emp-photo .acts { position: absolute; inset-block-end: -4px; inset-inline-start: -4px; display: flex; gap: 4px; }
.s-emp-photo .acts label, .s-emp-photo .acts button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff;
    border: 1px solid var(--s-border); cursor: pointer; font-size: 13px; padding: 0; }
.s-section-title { font-weight: 700; color: var(--s-blue-600); margin: 6px 0 2px; font-size: 14px; }

/* ---- figure tiles (كشوف الضمان والضريبة…) ---- */
.s-kpi { background: var(--s-surface, #fff); border: 1px solid var(--s-border); border-radius: 12px; padding: 12px 16px; display: grid; gap: 4px; }
.s-kpi small { color: var(--s-text-muted); font-size: 12px; font-weight: 700; }
.s-kpi b { font-size: 19px; direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.s-kpi.main { border-color: var(--s-gold-500); box-shadow: inset -4px 0 0 var(--s-gold-500); }

/* ---- approval timeline (الطلبات والموافقات) ---- */
.s-timeline { list-style: none; margin: 14px 0; padding: 0 22px 0 0; border-inline-start: 2px solid var(--s-border); display: grid; gap: 12px; }
.s-timeline li { position: relative; }
.s-timeline li::before { content: ""; position: absolute; inset-inline-start: -30px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--s-border-strong); }
.s-timeline li.ok::before { background: #1E8E5A; border-color: #1E8E5A; }
.s-timeline li.no::before { background: var(--s-danger); border-color: var(--s-danger); }
.s-timeline li.wait::before { border-color: var(--s-gold-500); }
.s-timeline li.skip { opacity: .6; }

/* ---- Licence: the countdown bar under the top bar, the lock in place of a page, the licence page's codes */
.s-licence-bar { display: flex; align-items: center; gap: 8px; padding: 7px 24px; font-size: 12.5px; font-weight: 600;
    background: var(--s-gold-100); color: var(--s-gold-600); border-bottom: 1px solid var(--s-border); }
.s-licence-bar.soon { background: var(--s-danger-bg); color: var(--s-danger); }
.s-licence-bar a { margin-inline-start: auto; font-weight: 700; color: inherit; text-decoration: underline; }
.s-licence-lock { max-width: 520px; margin: 40px auto; text-align: center; display: grid; justify-items: center; gap: 8px; padding: 28px; }
.s-licence-lock h2 { margin: 0; font-size: 18px; }
.s-licence-lock p { margin: 0 0 8px; color: var(--s-text-muted); }
.s-licence-state { margin: 0 0 14px; text-align: center; font-size: 13.5px; line-height: 1.8; }
.s-licence-state.locked { color: var(--s-danger); font-weight: 600; }
.s-machine-code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-align: center; }
.s-licence-code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; word-break: break-all; resize: vertical; }