/* =====================================================================
   MOSAIC — wwwroot/mosaic.css (design system revision 20261023)
   Drop-in replacement for the current mosaic.css. Class names unchanged.
   1) fonts  2) tokens: light (default) + dark via [data-theme="dark"] on <html>  3) components
   Generated from the MOSAIC design system (tokens.json + components/bundle.css).
   ===================================================================== */
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Devanagari';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansDevanagari-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Devanagari';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansDevanagari-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Devanagari';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansDevanagari-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Devanagari';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/IBMPlexSansDevanagari-Bold.woff2') format('woff2')}

:root,[data-theme="light"]{
  --ink:#1f3864;
  --text:#1f2a3d;
  --muted:#5b6b82;
  --azure:#2e5496;
  --azure-strong:#244879;
  --on-azure:#ffffff;
  --bg:#ffffff;
  --bg-alt:#f4f7fb;
  --bg-tint:#eaf0f8;
  --line:#e3e8ef;
  --line-strong:#c9d4e3;
  --side:#1f3864;
  --side-2:#16294a;
  --side-text:#b7c5dd;
  --side-group:#93a7c9;
  --side-hover:rgba(255, 255, 255, 0.07);
  --side-active:rgba(255, 255, 255, 0.13);
  --side-line:rgba(255, 255, 255, 0.1);
  --success:#2c7a4b;
  --success-text:#1d6f4e;
  --success-bg:#e7f4ee;
  --danger:#c94a4a;
  --danger-text:#b23b3b;
  --danger-bg:#fdecec;
  --danger-line:#f5c6c6;
  --warning:#e0b21b;
  --warning-ink:#3a2c00;
  --warning-text:#7a5a00;
  --warning-bg:#fff6da;
  --warning-line:#f0d98a;
  --info-text:#1f4e8c;
  --info-line:#c9daf2;
  --neutral-text:#4a5568;
  --neutral-bg:#eef1f5;
  --teal-text:#0f766e;
  --teal-bg:#e6f4f2;
  --doc-tag-text:#5b2c83;
  --doc-tag-bg:#f1e8fa;
  --doc-tag-line:#d9c4ee;
  --stat-muted:#c2ccdb;
  --brand-navy:#1f3864;
  --brand-azure:#2e5496;
  --sky:#7fa0cf;
  --on-fill:#ffffff;
  --scrim:rgba(16, 28, 46, 0.45);
  --shadow-sm:0 1px 2px rgba(31,56,100,.06), 0 1px 3px rgba(31,56,100,.07);
  --shadow:0 6px 20px rgba(31,56,100,.09), 0 2px 6px rgba(31,56,100,.06);
  --shadow-lg:0 22px 55px rgba(31,56,100,.16);
  --shadow-menu:0 12px 34px rgba(31,56,100,.16);
  --shadow-toast:0 10px 30px rgba(31,56,100,.18);
  --shadow-dialog:0 20px 60px rgba(31,56,100,.25);
  --shadow-focus:0 0 0 3px rgba(46,84,150,.15);
}
[data-theme="dark"]{
  --ink:#e6edf7;
  --text:#c8d7ea;
  --muted:#9daec6;
  --azure:#9cc1f0;
  --azure-strong:#b8d3f5;
  --on-azure:#16294a;
  --bg:#1c2b40;
  --bg-alt:#16202e;
  --bg-tint:#22344f;
  --line:#2c4566;
  --line-strong:#3a557a;
  --side:#16294a;
  --side-2:#101e36;
  --success-text:#8fd9b6;
  --success-bg:#143428;
  --danger-text:#f0a99e;
  --danger-bg:#3e211d;
  --danger-line:#6b3530;
  --warning-text:#f2d27a;
  --warning-bg:#3a2f0f;
  --warning-line:#6b5520;
  --info-text:#9cc1f0;
  --info-line:#2c4566;
  --neutral-text:#c2ccdb;
  --neutral-bg:#263142;
  --teal-text:#7dd3c8;
  --teal-bg:#12322f;
  --doc-tag-text:#d9c4ee;
  --doc-tag-bg:#2e2142;
  --doc-tag-line:#5b2c83;
  --stat-muted:#4a5d7a;
  --scrim:rgba(4, 9, 18, 0.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:0 22px 55px rgba(0,0,0,.5);
  --shadow-menu:0 12px 34px rgba(0,0,0,.45);
  --shadow-toast:0 10px 30px rgba(0,0,0,.45);
  --shadow-dialog:0 20px 60px rgba(0,0,0,.55);
  --shadow-focus:0 0 0 3px rgba(156,193,240,.28);
}
:root{
  --space-2:2px;
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-20:20px;
  --space-1rem:1rem;
  --space-1-25rem:1.25rem;
  --space-1-6rem:1.6rem;
  --space-2-2rem:2.2rem;
  --radius:6px;
  --radius-nav:8px;
  --radius-toast:10px;
  --radius-lg:14px;
  --radius-pill:999px;
  --maxw:2000px;
  --editor-maxw:1000px;
  --sidebar-w:248px;
  --topbar-h:58px;
  --auth-card-w:412px;
  --auth-panel-w:620px;
  --dialog-w:440px;
  --target-min:24px;
  --font-sans:"IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", system-ui, sans-serif;
  --font-mono:ui-monospace, monospace;
}

/* =====================================================================
   MOSAIC — نظام التصميم (Microsoft Fluent) — مطابقٌ للموقع التسويقي
   wwwroot/mosaic.css
   ===================================================================== */
:root{--font:var(--font-sans);color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--text);background:var(--bg-alt);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--azure)}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{margin:0}
[dir="rtl"] .eyebrow,[dir="rtl"] .side-group,[dir="rtl"] .acct-sec{letter-spacing:normal;text-transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:600;font-size:16px;line-height:1;padding:.78rem 1.5rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .15s,border-color .15s,color .15s}
.btn-primary{background:var(--azure);color:var(--on-azure);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--azure-strong);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--azure);color:var(--azure);background:color-mix(in srgb,var(--azure) 6%,transparent)}
.btn-sm{padding:.55rem 1.05rem;font-size:14px}
.btn-block{width:100%}
.lang-btn{background:transparent;border:1px solid var(--line);color:var(--ink);font:inherit;font-weight:600;font-size:14px;padding:.5rem .85rem;border-radius:var(--radius);cursor:pointer;transition:border-color .15s,color .15s}
.lang-btn:hover{border-color:var(--azure);color:var(--azure)}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark{width:30px;height:30px;flex:none}
.brand-name{font-weight:600;font-size:18px;letter-spacing:.16em;color:var(--ink);padding-inline-start:.16em}

/* ===================== AUTH (login / about / support shells) ===================== */
.auth-shell{min-height:100vh;display:flex;flex-direction:column}
.auth-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.auth-header .hwrap{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:.6rem;padding:.65rem clamp(1rem,4vw,2rem)}
.auth-header .hactions{margin-inline-start:auto}
.auth-main{flex:1;display:grid;place-items:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);padding:clamp(1.5rem,5vw,3rem) 1rem}
.auth-card{width:100%;max-width:412px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(1.7rem,4vw,2.4rem)}
.auth-panel{width:100%;max-width:620px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(1.7rem,4vw,2.6rem)}
.auth-logo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;margin-bottom:1.5rem}
.auth-logo .brand-mark{width:46px;height:46px}
.auth-logo .nm{font-weight:600;letter-spacing:.16em;font-size:20px;color:var(--ink)}
.auth-logo .suite{font-size:12px;color:var(--muted);line-height:1.45;max-width:24em}
.auth-title{font-size:24px;font-weight:600;color:var(--ink);text-align:center;margin:0 0 .35rem}
.auth-sub{font-size:16px;color:var(--muted);text-align:center;margin:0 0 1.6rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:.4rem}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg{position:absolute;inset-inline-start:.8rem;color:var(--muted);pointer-events:none}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
.field.has-icon input{padding-inline-start:2.4rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--azure);box-shadow:var(--shadow-focus)}
.field textarea{min-height:120px;resize:vertical}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 1.3rem;flex-wrap:wrap}
.check{display:inline-flex;align-items:center;gap:.45rem;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.check input{width:15px;height:15px;accent-color:var(--azure)}
.link{color:var(--azure);font-size:14px;font-weight:600;text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.link:hover{text-decoration:underline}
.auth-err{display:flex;align-items:flex-start;gap:.55rem;background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-text);font-size:14px;line-height:1.5;border-radius:var(--radius);padding:.7rem .85rem;margin-bottom:1.1rem}
.auth-err svg{flex:none;margin-top:.1rem}
.auth-foot{text-align:center;font-size:14px;color:var(--muted);margin-top:1.4rem}
.auth-footer{border-top:1px solid var(--line);background:var(--bg)}
.auth-footer .fwrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.4rem;padding-block:1.3rem;font-size:14px;color:var(--muted)}
.auth-footer a,.auth-footer .link{color:var(--muted);font-weight:500}
.auth-footer .sep{color:var(--line)}

/* ===================== APP SHELL ===================== */
.appshell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* الحُجُب مخفيٌّ افتراضيّاً — يظهر فقط عند فتح القائمة على الجوّال.
   إخفاؤه افتراضيّاً ضروريٌّ كيلا يحتلّ خليّةً في شبكة سطح المكتب. */
.scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:55}
.side{background:var(--side);color:var(--on-fill);display:flex;flex-direction:column;padding:1rem .8rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem 1.1rem;color:var(--on-fill);font-weight:600;letter-spacing:.16em;font-size:16px;text-decoration:none}
.side-brand svg{width:26px;height:26px;flex:none}
.side-group{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--side-group);padding:.9rem .6rem .4rem}
.side-nav{display:flex;flex-direction:column;gap:.12rem}
.nav-item{display:flex;align-items:center;gap:.7rem;font-size:14px;font-weight:500;color:var(--side-text);padding:.62rem .65rem;border-radius:8px;cursor:pointer;border:0;background:transparent;font-family:inherit;text-align:start;width:100%;text-decoration:none;transition:background .15s,color .15s}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.9}
.nav-item:hover{background:var(--side-hover);color:var(--on-fill)}
.nav-item.active{background:var(--side-active);color:var(--on-fill)}
.nav-item.is-soon{opacity:.55;cursor:default}
.nav-item.is-soon:hover{background:transparent;color:var(--side-text)}
.side-spacer{flex:1}
.side-foot{border-top:1px solid var(--side-line);padding-top:.6rem;margin-top:.6rem}
.side-ver{font-size:12px;color:var(--side-group);padding:.5rem .65rem 0}

.appmain{display:flex;flex-direction:column;min-width:0;background:var(--bg-alt)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.7rem;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);padding:.6rem clamp(1rem,3vw,1.6rem)}
.topbar h1{font-size:18px;font-weight:600;color:var(--ink);margin:0}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.6rem}
.conn{display:inline-flex;align-items:center;gap:.4rem;font-size:13px;font-weight:600;color:var(--muted);padding:.35rem .6rem;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg)}
.conn .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.user-chip{display:flex;align-items:center;gap:.55rem;padding:.3rem .35rem;border-radius:var(--radius-pill)}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-azure),var(--brand-navy));color:var(--on-fill);font-size:13px;font-weight:700}
.user-meta{line-height:1.15}
.user-meta .un{font-size:14px;font-weight:600;color:var(--text)}
.user-meta .ur{font-size:12px;color:var(--muted)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:var(--azure);color:var(--azure)}
.burger{display:none}

.content{--content-pad:clamp(1.3rem,3vw,2.2rem);padding:var(--content-pad);max-width:var(--maxw);width:100%;margin:0 auto}
.content:has(.hm-wrap){max-width:none}
.content:has(.ppl-wrap){max-width:none}
.content:has(.tn-wrap){max-width:none}
.content:has(.bd-wrap){max-width:none}
.page-head{margin-bottom:1.5rem}
.page-head h2{font-size:24px;font-weight:600;color:var(--ink);margin:0 0 .3rem}
.page-head p{color:var(--muted);font-size:16px;margin:0}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--azure);margin-bottom:.6rem}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:1000px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm)}
.stat-card .si{width:38px;height:38px;border-radius:9px;background:var(--bg-tint);color:var(--azure);display:grid;place-items:center;margin-bottom:.8rem}
.stat-card .sv{font-size:30px;font-weight:700;color:var(--ink);line-height:1}
.stat-card .sv.muted{color:var(--stat-muted)}
.stat-card .sl{font-size:13px;color:var(--muted);margin-top:.3rem}

/* panels */
.panel-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem}
@media(max-width:900px){.panel-grid{grid-template-columns:1fr}}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.panel-head h3{font-size:16px;font-weight:600;color:var(--ink);margin:0}
.pill-soft{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-alt);border:1px solid var(--line);padding:.18rem .55rem;border-radius:var(--radius-pill)}
.panel-body{padding:1.25rem}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius);padding:2.2rem 1.4rem;background:var(--bg-alt)}
.empty-icon{width:50px;height:50px;border-radius:13px;background:var(--bg);border:1px solid var(--line);color:var(--azure);display:grid;place-items:center;margin-bottom:.9rem}
.empty h4{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 .35rem}
.empty p{color:var(--muted);font-size:14px;line-height:1.55;margin:0;max-width:30em}

/* cards / prose (about, support, placeholders) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm)}
.card-icon{width:46px;height:46px;border-radius:11px;background:var(--bg-tint);display:grid;place-items:center;color:var(--azure);margin-bottom:1rem}
.card h3{font-size:18px;font-weight:600;color:var(--ink);margin:0 0 .45rem}
.card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.prose-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.prose-card p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-email{display:inline-block;margin:.4rem 0 0;font-size:20px;font-weight:700;color:var(--azure);text-decoration:none}
.contact-email:hover{text-decoration:underline}
.note-box{display:flex;gap:.6rem;background:var(--bg-tint);border:1px solid var(--info-line);border-radius:var(--radius);padding:.9rem 1rem;font-size:14px;color:var(--text);line-height:1.55;margin-top:1.1rem}
.note-box svg{flex:none;color:var(--azure);margin-top:.1rem}

/* ===================== reveal animation (pure CSS) ===================== */
@keyframes revealIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{animation:revealIn .55s ease both}
.stagger>*{animation:revealIn .55s ease both}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.11s}
.stagger>*:nth-child(3){animation-delay:.18s}
.stagger>*:nth-child(4){animation-delay:.25s}
.stagger>*:nth-child(5){animation-delay:.32s}
.stagger>*:nth-child(6){animation-delay:.39s}
.stagger>*:nth-child(7){animation-delay:.46s}
.stagger>*:nth-child(8){animation-delay:.53s}
@media(prefers-reduced-motion:reduce){.reveal,.stagger>*{animation:none}}

/* ===================== Blazor reconnection UI (charter: weak-connection indicator) ===================== */
#components-reconnect-modal{position:fixed;inset:0;z-index:1055;display:none;align-items:center;justify-content:center;background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-family:var(--font)}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{display:flex}
.mosaic-reconnect{width:min(92vw,420px);background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.8rem;text-align:center}
.mosaic-reconnect .spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--bg-tint);border-top-color:var(--azure);margin:0 auto 1.1rem;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mosaic-reconnect h3{font-size:20px;font-weight:600;color:var(--ink);margin:0 0 .5rem}
.mosaic-reconnect p{color:var(--muted);font-size:16px;line-height:1.55;margin:0}
.mosaic-reconnect .rc-note{font-size:14px;color:var(--success);background:var(--success-bg);border-radius:var(--radius);padding:.5rem .7rem;margin-top:.9rem}
.mosaic-reconnect .show-failed,.mosaic-reconnect .show-rejected{display:none}
#components-reconnect-modal.components-reconnect-failed .show-show,
#components-reconnect-modal.components-reconnect-failed .spinner{display:none}
#components-reconnect-modal.components-reconnect-failed .show-failed{display:block}
#components-reconnect-modal.components-reconnect-rejected .show-show,
#components-reconnect-modal.components-reconnect-rejected .spinner{display:none}
#components-reconnect-modal.components-reconnect-rejected .show-rejected{display:block}

/* ===================== responsive sidebar ===================== */
@media(max-width:860px){
  .appshell{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:260px;z-index:60;transform:translateX(-100%);transition:transform .25s ease}
  [dir="rtl"] .side{transform:translateX(100%)}
  .appshell.nav-open .side{transform:translateX(0)}
  .appshell.nav-open .scrim{display:block}
  .burger{display:inline-grid}
  .user-meta{display:none}
}

/* ═══ المشترك المرقّى من الصفحات — عقد صيانة النسق 20260810 ═══
   ثمانية عشر تعريفاً كانت مكرّرة حرفاً في ثلاث وعشرين صفحة، رُقّيت بعد قياس
   تطابقها التامّ — والمتغاير بين الصفحات تُرك محليّاً عمداً ولم يُرقَّ */
.ref-wrap-list { max-width: 2000px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ref-wrap-editor { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lens-back { display: flex; margin-bottom: 2px; }
.lens-head { display: flex; flex-direction: column; gap: 10px; }
.ppl-title { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; }
.ppl-count { font-size: 14px; color: var(--ink); font-weight: 600; }
.ppl-spacer { flex: 1; }
.ppl-ctxmsg { font-size: 12px; }
.ppl-ctxmsg.ok { color: var(--success-text); }
.ppl-ctxmsg.err { color: var(--danger-text); }
.ppl-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppl-qbox { font: inherit; font-size: 14px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; flex: 1; min-width: 200px; }
.ppl-qbox:focus { outline: none; border-color: var(--azure); background: var(--bg); }
.acc-btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--on-azure); background: var(--azure); border: none; border-radius: var(--radius); padding: 8px 18px; cursor: pointer; }
.acc-btn:hover { background: var(--azure-strong); }
.acc-btn:disabled { opacity: .55; cursor: default; }
.acc-btn.ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.acc-btn.ghost:hover { background: var(--bg); border-color: var(--azure); color: var(--azure); }

/* زرّا اتّجاه الترتيب — رمزان بلا كلمات، أحلّا محلّ المنسدلة في كلّ أشرطة البحث (توجيه 20260810) */
.sortdir { display: inline-flex; gap: 4px; }
.sortdir-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); cursor: pointer; padding: 0; }
.sortdir-btn svg { width: 16px; height: 16px; }
.sortdir-btn:hover { border-color: var(--azure); color: var(--azure); background: var(--bg-tint); }
.sortdir-btn.on { background: var(--azure); border-color: var(--azure); color: var(--on-azure); }

/* جذرُ الطباعة المستقلّ — مخفيٌّ على الشاشة، وحدَه الظاهرُ في الورق (توجيه 20260811) */
#mosaic-print-root { display: none; }
@media print {
  body.mosaic-printing > *:not(#mosaic-print-root) { display: none !important; }
  body.mosaic-printing #mosaic-print-root { display: block !important; }
  #mosaic-print-root thead { display: table-header-group; }
  #mosaic-print-root tr { break-inside: avoid; }
}

/* مبدّلُ نطاقٍ ثنائيّ — زرّان متلاصقان النافذُ منهما مضاء (معتمد 20260811) */
.seg { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg-btn { font: inherit; font-size: 13px; color: var(--muted); background: var(--bg-alt); border: none; padding: 6px 12px; cursor: pointer; }
.seg-btn:hover:not(:disabled) { color: var(--azure); background: var(--bg-tint); }
.seg-btn.on { background: var(--azure); color: var(--on-azure); }
.seg-btn:disabled { opacity: .55; cursor: default; }

/* صورةُ رأس الشاشة (م٧-١٢): رئيسةُ الشخص تعبئةً داخل الشارة */
.hdr-av { overflow: hidden; }
.hdr-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ── الحقلُ الملزمُ الناقص (RequiredBlink) — ثلاثُ ومضاتٍ بدل رسالة الخطأ، سنّةُ المنصّة (أمر المالك 20260926) ── */
.req-blink{border-radius:var(--radius);animation:reqBlink .45s ease-in-out 3}
@keyframes reqBlink{0%,100%{background:transparent;box-shadow:none}50%{background:var(--danger-bg);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.req-blink{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 60%,transparent)}}

/* ── النوافذُ والرسائلُ العائمة (ConfirmDialog · ToastHost) — سنّةُ المنصّة (أمر المالك 20260926) ──
   الشريطُ العلويّ: أحمرُ للحذف وحده، أصفرُ لكلّ تنبيهٍ آخر، أخضرُ للمعلومة العاديّة */
.mz-red{--mz-stripe:var(--danger)} .mz-yellow{--mz-stripe:var(--warning)} .mz-green{--mz-stripe:var(--success)}
.mz-dlg-veil{position:fixed;inset:0;z-index:3000;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
/* سقفُ كلّ رسالةٍ ٧٠٪ من ارتفاع الشاشة: المتنُ يتمرّر رأسيًّا، والعنوانُ والأزرارُ ثابتةٌ ظاهرةٌ دائمًا (أمر المالك 20261014-2322) */
.mz-dlg{background:var(--bg);border-radius:var(--radius-lg);width:min(440px,100%);padding:18px 20px 16px;box-shadow:var(--shadow-dialog);border-top:4px solid var(--mz-stripe);max-height:70vh;display:flex;flex-direction:column}
.mz-dlg.wide{width:min(760px,100%)}
.mz-dlg-title{font-weight:600;color:var(--ink);margin-bottom:8px;flex:0 0 auto}
.mz-dlg-body{font-size:14px;color:var(--ink);margin-bottom:16px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-inline-end:4px}
.mz-dlg-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex:0 0 auto}
.mz-dlg-btn{font:inherit;font-size:14px;font-weight:600;border-radius:var(--radius);padding:7px 16px;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.mz-dlg-btn.primary{background:var(--azure);border-color:var(--azure);color:var(--on-azure)}
.mz-dlg-btn.danger{background:var(--danger);border-color:var(--danger);color:var(--on-fill)}
.mz-dlg-btn.ghost{background:var(--bg)}
.mz-dlg-btn:disabled{opacity:.55;cursor:default}
.mz-toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:3100;display:flex;flex-direction:column;gap:8px;width:min(460px,calc(100vw - 32px));pointer-events:none}
.mz-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;background:var(--bg);border-radius:var(--radius-toast);box-shadow:var(--shadow-toast);border-top:4px solid var(--mz-stripe);padding:10px 12px;font-size:14px;color:var(--ink);animation:mzToastIn .18s ease-out}
.mz-toast-txt{flex:1 1 auto;white-space:pre-wrap;unicode-bidi:plaintext;max-height:70vh;overflow-y:auto}
.mz-toast-x{min-width:var(--target-min);min-height:var(--target-min);border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px;line-height:1.6}
@keyframes mzToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mz-toast{animation:none}}

/* ── الرأسُ الثابت (mz-fixhead) — سنّةُ المنصّة (أمر المالك 20260926) ──
   رأسُ الصفحة (الرجوعُ والعنوانُ والبحثُ والتصفيةُ والأزرار، أو رأسُ المحرّر) يثبت في موضعه تماماً تحت الترويسة،
   ويمرّ ما تحته وحده. يلتصق على بُعد ترويسة الصفحة (--topbar-h المقيس في mosaic.js) وحشوةِ المحتوى، فلا يتحرّك
   قيدَ شعرة، وقناعُه العلويّ يحجب ما يمرّ في تلك الحشوة. ويُعفى منه الجوّالُ والشاشةُ القصيرة */
.mz-fixhead{display:flex;flex-direction:column;gap:inherit}
@media (min-width:721px) and (min-height:640px){
  .mz-fixhead{position:sticky;top:calc(var(--topbar-h,58px) + var(--content-pad,0px));z-index:15;background:var(--bg-alt);padding-bottom:12px;margin-bottom:-12px}
  .mz-fixhead::before{content:"";position:absolute;inset-inline:-6px;bottom:100%;height:calc(var(--content-pad,0px) + 1px);background:var(--bg-alt)}
  /* القناعُ يمتدّ في الحشوة الجانبيّة كلّها وفي العلويّة، فلا يظهر ما يمرّ تحت الرأس من جانبيه (أمر المالك 20261020):
     طبقةٌ خلف محتوى الرأس بلون الخلفيّة تمتدّ بعرض الحشوة، ولا تنزل تحته، ولا تقصّ قوائمه المنسدلة */
  .mz-fixhead::after{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--bg-alt);
    inset:calc(-1 * var(--content-pad,0px) - 1px) calc(-1 * var(--content-pad,0px) - 2px) 0 calc(-1 * var(--content-pad,0px) - 2px)}
}

/* زوجُ الاسمين (اليمينيّ واليساريّ): في الواجهة اليساريّة يتقدّم الاسمُ اليساريّ — الترتيبُ محلّيٌّ داخل الزوج فلا يمسّ بقيّة الحقول */
.nm-pair { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 12px; }
[dir="ltr"] .nm-pair > .nm-ltr { order: -1; }
.nm-pair > label { min-width: 0; }
/* خانةُ العدد (NumberBox): نصٌّ لا يُقرأ عدداً */
input.num-bad { border-color: var(--danger) !important; background: var(--danger-bg) !important; }

/* وسمُ المستند — لونٌ واحدٌ مميّزٌ في المنصّة كلّها، ونصُّه الرقمُ المرجعيّ وحده (أمر المالك 20260930) */
.doc-tag { display:inline-flex; align-items:center; font:inherit; font-size:12px; font-weight:600; letter-spacing:.3px;
           font-variant-numeric:tabular-nums; color:var(--doc-tag-text); background:var(--doc-tag-bg); border:1px solid var(--doc-tag-line);
           border-radius:6px; padding:2px 8px; margin-top:4px; cursor:pointer; white-space:nowrap; text-decoration:none; }
button.doc-tag:hover, a.doc-tag:hover { background:color-mix(in srgb,var(--doc-tag-bg) 82%,var(--doc-tag-text)); border-color:color-mix(in srgb,var(--doc-tag-line) 70%,var(--doc-tag-text)); }
span.doc-tag { cursor:default; }

/* ===== المالُ في المنصّة (القاعدة الحاكمة 20261002-1022): كلُّ مبلغٍ مقرونٌ بعملته.
   .money للمبلغ المعروض بأرقامٍ لاتينيّةٍ معزولة؛ .mny لخانة الإدخال وبجوارها منسدلةُ العملة ===== */
.money { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.mny { display:flex; align-items:stretch; gap:6px; min-width:0; }
.mny > input { flex:1 1 0; min-width:0; }
.mny > .mny-cur { flex:0 0 auto; width:auto; min-width:4.5em; font:inherit; font-size:14px; color:var(--text);
                  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:0 10px; cursor:pointer; }
.mny > .mny-cur:focus { outline:none; border-color:var(--azure); background:var(--bg); }
.mny > .mny-cur:disabled { cursor:default; opacity:.55; }

/* قواعدُ كلمة المرور الحيّة (20261014-1307) */
.pw-rules{margin:6px 0 0;padding-inline-start:18px;font-size:13px;color:var(--muted);line-height:1.7}
.pw-rules li.ok{color:var(--success-text);font-weight:600}
.pw-rules li.bad{color:var(--danger-text)}

/* م٨-٣: المشاركة — وسمُ المشارَك، وشريطُ الجهاز، وزرُّ الإعادة العائم داخل الحقل */
.shr-tag{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:var(--radius-pill);font-size:11px;background:var(--bg-tint);color:var(--info-text);border:1px solid var(--info-line)}
.shr-banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--bg-tint);border:1px solid var(--info-line);color:var(--text);font-size:14px}
.shr-banner .shr-ask{color:var(--danger-text);font-weight:600}
.acc-field:has(> .shr-rv){position:relative}
.shr-rv{position:absolute;inset-inline-end:28px;bottom:7px;z-index:3;width:24px;height:24px;border-radius:50%;border:1px solid var(--info-line);background:var(--bg);color:var(--info-text);font-size:14px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);opacity:.85}
.shr-rv:hover{opacity:1;background:var(--bg-tint)}
.shr-flag{background:var(--bg-tint) !important;color:var(--info-text) !important}
.shr-detail{padding:6px 2px 10px;display:flex;flex-direction:column;gap:4px}

/* قضبانُ السقوف (20261014) */
.cap-bars{display:flex;flex-direction:column;gap:12px}
.cap-row{display:grid;grid-template-columns:90px 1fr 70px;align-items:center;gap:10px;font-size:13px}
.cap-label{color:var(--ink)}
.cap-unit{color:var(--muted);font-size:12px}
.cap-track{position:relative;height:24px;border:1px solid var(--line);border-radius:var(--radius-pill);background:transparent;overflow:hidden}
.cap-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--radius-pill)}
.cap-fill.green{background:var(--success)}
.cap-fill.amber{background:var(--warning)}
.cap-fill.red{background:var(--danger)}
.cap-val{position:absolute;top:50%;white-space:nowrap;font-weight:600;color:var(--on-fill);direction:ltr;unicode-bidi:isolate}
.cap-val.out{color:var(--ink)}
.cap-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
@media (max-width:720px){.cap-cols{grid-template-columns:1fr}}
.cap-fill.amber ~ .cap-val:not(.out){color:var(--warning-ink)}

/* جدولُ بنود التوثيق (م٨-٥) */
.vt-wrap{display:flex;flex-direction:column;gap:8px}
.vt-tbl{width:100%;border-collapse:collapse;font-size:14px}
.vt-tbl th,.vt-tbl td{padding:8px 6px;border-top:1px solid var(--line);text-align:start;vertical-align:top}
.vt-tbl th{color:var(--muted);font-weight:600;font-size:14px}
.vt-no{font-weight:600;color:var(--muted)}
.vt-desc{white-space:pre-wrap}
.vt-link{background:none;border:0;padding:0;margin-top:4px;color:var(--azure);cursor:pointer;font:inherit;font-size:13px}
.vt-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.vt-inline input{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt);min-width:180px}
.vt-files{display:flex;flex-wrap:wrap;gap:6px}
.vt-sq{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-alt);text-decoration:none}
.vt-sq img{width:100%;height:100%;object-fit:cover}
.vt-ext{font-size:11px;font-weight:700;color:var(--muted)}
.vt-sel{font:inherit;padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt)}
.vt-new textarea{width:100%;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt)}
.vt-consent{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.am-ltr{direction:ltr;unicode-bidi:isolate}

/* سجلُّ باقات المنشأة تحت قضبان السقوف (م٨-٩) */
.ph-wrap{margin-top:14px}
.ph-title{font-weight:600;color:var(--ink);margin-bottom:6px}
.ph-table{width:100%;border-collapse:collapse;font-size:13px}
.ph-table th{font-weight:600;color:var(--muted);text-align:start;padding:6px 8px;border-bottom:1px solid var(--line)}
.ph-table td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--text)}
.pf-wrap{display:inline-flex;align-items:center;gap:6px}
.pf-pick{position:relative;overflow:hidden}
.pf-pick input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.pf-clear{border:0;background:transparent;color:var(--muted);cursor:pointer}
.pf-err{color:var(--danger-text);font-size:12px}
.ph-ev td{font-size:12px;color:var(--muted);background:var(--bg-alt)}
.ph-ev td:first-child{padding-inline-start:22px}
.ph-att{display:inline-flex;gap:6px;flex-wrap:wrap}
.ph-att a{font-size:12px}

/* ═══ المبلغ (قرار المالك 20261017 · الدفعة التاسعة): العملةُ يسارَ الرقم في الواجهتين، رمزٌ عربيٌّ في اليمينيّة
   وإنجليزيٌّ في اليساريّة، والرقمُ محاذًى إلى طرفه الأيمن فتصطفّ العلاماتُ العشريّة. يُرسم بـ MoneyFmt.Amt ═══ */
.amt { display: inline-flex; direction: ltr; unicode-bidi: isolate; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt .cur { font-size: .82em; color: var(--muted); font-weight: 500; }
.amt .n { text-align: right; }
.amt.up .n { color: var(--success-text); }
.amt.down .n { color: var(--danger-text); }
.amt-nil { color: var(--muted); }
td.amtc { text-align: right; }
td.amtc .amt { display: flex; justify-content: flex-end; }

/* ═══ صفحاتُ محور العقد (م٩-٢): أسلوبٌ واحدٌ مشتركٌ تحت الغلاف .ax — منقولٌ من صفحة العقود التي راجعها المالك ═══ */
.ax .ppl-ctxbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 32px; }
.ax .lens-ico { flex-shrink:0; width:30px; height:30px; border-radius:8px; background:var(--bg-tint); color:var(--azure); display:inline-flex; align-items:center; justify-content:center; align-self:center; }
.ax .lens-ico svg { width:18px; height:18px; }
.ax .ppl-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 12px; }
.ax .ppl-bulkbar select { font: inherit; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.ax .vo-wrap { margin-top:12px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.ax .xs { overflow-x:auto; }
.ax .vo-tbl { width:100%; border-collapse:collapse; font-size:13px; background:var(--bg); }
.ax .vo-tbl th { text-align:start; color:var(--muted); font-weight:600; padding:0 10px; height:34px; box-sizing:border-box; border-bottom:1px solid var(--line); background:var(--bg); white-space:nowrap; }
.ax .vo-tbl td { padding:0 10px; height:38px; box-sizing:border-box; border-bottom:1px solid var(--line); }
.ax .vo-tbl tr.click { cursor:pointer; } .ax .vo-tbl tr.click:hover td { background:var(--bg-tint); }
.ax .vo-tbl td.ln { text-align:start; font-variant-numeric:tabular-nums; }
.ax .vo-tbl tr.tot td { font-weight:600; color:var(--ink); background:var(--bg-alt); }
.ax .xs > .vo-tbl { min-width:640px; }
.ax .two .xs > .vo-tbl { min-width:0; }
.ax .vo-list td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.ax .vo-no { direction:ltr; unicode-bidi:plaintext; font-weight:600; font-variant-numeric:tabular-nums; }
.ax .vo-draftno { color:var(--muted); font-style:italic; }
.ax .vo-lbl { font-size:13px; font-weight:400; color:var(--muted); margin-inline-end:6px; }
.ax .vo-idgrid { display:grid; grid-template-columns:max-content max-content; column-gap:10px; row-gap:2px; align-items:baseline; justify-items:start; min-width:0; }
.ax .vo-editbody { margin-top:12px; display:flex; flex-direction:column; gap:14px; }
.ax .vo-val { font-size:14px; color:var(--text); background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; min-height:20px; white-space:pre-wrap; unicode-bidi:plaintext; text-align:start; }
.ax .vo-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.ax .vo-row label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); min-width:0; }
.ax .vo-row select, .ax .vo-row input { font: inherit; font-size: 14px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width:0; }
.ax .chip { font-size:11px; border-radius:var(--radius-pill); padding:2px 9px; white-space:nowrap; }
.ax .chip.s1 { background:var(--warning-bg); color:var(--warning-text); }
.ax .chip.s2 { background:var(--success-bg); color:var(--success-text); }
.ax .chip.s3 { background:var(--danger-bg); color:var(--danger-text); }
.ax .chip.s4 { background:var(--bg-tint); color:var(--info-text); }
.ax .chip.s5 { background:var(--neutral-bg); color:var(--neutral-text); }
.ax .acc-hero { display: flex; gap: 16px; }
.ax .acc-hero-id { flex: 1 1 0; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: center; gap: 14px; flex-wrap:wrap; }
.ax .acc-avatar { width: 54px; height: 54px; border-radius: 14px; background: var(--brand-navy); color: var(--on-fill); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight:700; font-size:16px; direction:ltr; }
.ax .acc-name { font-size: 18px; font-weight: 600; color: var(--ink); }
.ax .acc-spacer { flex: 1; }
.ax .acc-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 20px; display:flex; flex-direction:column; gap:12px; }
.ax .acc-card h3 { margin: 0; font-size: 16px; color: var(--ink); }
.ax .acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 16px; }
.ax .acc-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); min-width:0; }
.ax .acc-grid label.wide { grid-column: 1 / -1; }
.ax .acc-grid input, .ax .acc-grid textarea, .ax .acc-grid select { font: inherit; font-size: 14px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width:0; width:100%; box-sizing:border-box; }
.ax .acc-grid .chk { flex-direction:row; align-items:center; gap:8px; font-size:13px; color:var(--text); align-self:end; padding-bottom:8px; }
.ax .acc-grid .chk input { width:auto; }
.ax .ppl-editbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax .bar-sep { width: 1px; align-self: stretch; min-height: 28px; background: var(--line); margin: 0 2px; }
.ax .acc-muted { font-size: 13px; color: var(--muted); margin: 0; }
.ax .muted { color: var(--muted); }
.ax .meta { font-size:12px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap; }
.ax .stamp { font-size:13px; font-weight:700; color:var(--danger-text); border:2px solid var(--danger-text); border-radius:8px; padding:4px 12px; transform:rotate(-4deg); }
.ax .mz-fixhead .acc-hero { margin-top: 12px; }
.ax .kit-x { min-width:var(--target-min); min-height:var(--target-min); border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:6px; }
.ax .kit-x:hover { background:var(--line); color:var(--ink); }
.ax .reason { font: inherit; font-size: 14px; width:100%; box-sizing:border-box; margin-top:10px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.ax .tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:1000px) { .ax .tiles { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .ax .tiles { grid-template-columns:1fr; } }
.ax .tile { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 18px; }
.ax .tile .tl { font-size:12px; color:var(--muted); }
.ax .tile .tv { font-size:24px; font-weight:700; color:var(--ink); line-height:1.35; }
.ax .tile .tv .amt .cur { font-size:13px; }
.ax .tile .ts { font-size:12px; color:var(--muted); }
.ax .tile.warn { background:var(--warning-bg); border-color:var(--warning-line); }
.ax .tile.warn .tl, .ax .tile.warn .tv, .ax .tile.warn .ts { color:var(--warning-text); }
.ax .bar-cell { display:flex; flex-direction:column; gap:3px; min-width:120px; }
.ax .bar { position:relative; height:8px; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; }
.ax .bar > span { position:absolute; inset-block:0; inset-inline-start:0; background:var(--success); border-radius:var(--radius-pill); }
.ax .bar > span.amb { background:var(--warning); }
.ax .two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
@media (max-width:1100px) { .ax .two { grid-template-columns:1fr; } }
.ax .ltype { font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 7px; white-space:nowrap; }
.ax .chain { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.ax .doc-tag { direction:ltr; unicode-bidi:isolate; }
.ax .arr2::before { content: "←"; color: var(--muted); }
[dir="ltr"] .ax .arr2::before { content: "→"; }
.ax .ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ax .ppl-card { display: flex; align-items: center; gap: 10px; text-align: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; font: inherit; width: 100%; position:relative; }
.ax .ppl-card:hover { border-color: var(--azure); background: var(--bg-tint); }
.ax .ppl-card.ended { opacity:.65; }
.ax .ppl-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-navy); color: var(--on-fill); font-weight: 600; font-size: 11px; font-family: ui-monospace, monospace; display: flex; align-items: center; justify-content: center; flex-shrink: 0; direction:ltr; }
.ax .ppl-card-text { min-width: 0; flex: 1; }
.ax .ppl-name { font-size: 16px; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.3; }
.ax .ppl-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .ppl-marks { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.ax .mark { font-size: 11px; border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap; }
.ax .mark.pos { background: var(--success-bg); color: var(--success-text); }
.ax .mark.neu { background: var(--neutral-bg); color: var(--neutral-text); }
.ax .mark.own-c { background: var(--bg-tint); color: var(--info-text); }
.ax .mark.own-m { background: var(--teal-bg); color: var(--teal-text); }
.ax .mark.own-u { background: var(--neutral-bg); color: var(--neutral-text); }
.ax .mark.warn { background:var(--warning-bg); color:var(--warning-text); }
.ax .card-x { position:absolute; top:6px; inset-inline-end:6px; }
.ax .dv-pick { display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); padding:6px; }
.ax .dv-pick label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); padding:4px 6px; border-radius:6px; cursor:pointer; }
.ax .dv-pick label:hover { background:var(--bg-tint); }
.ax .ppl-qbox { min-width:0; }
@media (max-width: 900px) { .ax .acc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ax .acc-grid { grid-template-columns: 1fr; } }
.ax .chip.s6 { background:var(--teal-bg); color:var(--teal-text); }
.ax .vo-tbl tr.over td { background:var(--warning-bg); }
.ax .banner { border:1px solid; border-radius:var(--radius-lg); padding:10px 14px; font-size:13px; }
.ax .banner.pend, .ax .banner.warn { background:var(--warning-bg); border-color:var(--warning-line); color:var(--warning-text); }
.ax .banner.info { background:var(--bg-tint); border-color:var(--line); color:var(--text); }
.ax .steps { display:inline-flex; flex-wrap:wrap; font-size:12px; }
.ax .steps > span { padding:4px 12px; border:1px solid var(--line); margin-inline-start:-1px; color:var(--muted); background:var(--bg); }
.ax .steps > span:first-child { border-start-start-radius:var(--radius-pill); border-end-start-radius:var(--radius-pill); margin-inline-start:0; }
.ax .steps > span:last-child { border-start-end-radius:var(--radius-pill); border-end-end-radius:var(--radius-pill); }
.ax .steps > span.done { background:var(--success-bg); color:var(--success-text); }
.ax .steps > span.cur { background:var(--azure); border-color:var(--azure); color:var(--on-azure); }
.ax .cap-row { display:grid; grid-template-columns:130px 1fr 130px; gap:10px; align-items:center; font-size:13px; }
.ax .cap-unit { direction:ltr; unicode-bidi:isolate; text-align:end; font-variant-numeric:tabular-nums; }
[dir="ltr"] .ax .cap-unit { text-align:start; }
.ax .mini-btn { font:inherit; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--bg); color:var(--azure); border-radius:var(--radius); padding:4px 10px; cursor:pointer; }
.ax .mini-btn:disabled { opacity:.55; cursor:default; }

/* ═══ علامةُ التهجير (م٩-٦): مثلّثٌ أصفر للانتباه، ودائرةٌ حمراء للاستثناء ═══ */
.migf { position:relative; display:inline-flex; vertical-align:middle; margin-inline-start:4px; }
.migf-btn { background:none; border:0; padding:0; cursor:pointer; display:inline-flex; gap:2px; line-height:0; }
.migf-btn svg { width:14px; height:14px; }
.migf-warn path:first-child { fill:var(--warning); stroke:var(--warning-ink); stroke-width:1; stroke-linejoin:round; }
.migf-exc circle { fill:var(--danger); stroke:var(--danger-text); stroke-width:1; }
.migf-mark { fill:none; stroke:var(--on-fill); stroke-width:2.6; stroke-linecap:round; }
.migf-warn .migf-mark { stroke:var(--warning-ink); }
.migf-pop { position:absolute; z-index:40; top:18px; inset-inline-start:0; min-width:260px; max-width:380px; background:var(--bg); color:var(--text);
            border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-menu); padding:8px; display:flex; flex-direction:column; gap:6px;
            font-size:13px; font-weight:normal; text-align:start; white-space:normal; }
.migf-item { display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-radius:6px; }
.migf-item.warn { background:var(--warning-bg); }
.migf-item.exc { background:var(--danger-bg); }
.migf-item .mini-btn { align-self:flex-end; }
.migf-field, .migf-code { color:var(--muted); font-size:12px; }
.migf-err { color:var(--danger-text); }

/* ── رأسُ العمود بسهمَي الترتيب (SortHead) — سنّةُ جدول إجراءات الأجهزة، ورؤوسُ أعمدة قوائم المحور تلتصق تحت الرأس الثابت (أمر المالك 20261019) ── */
.sorth-in { display:inline-flex; align-items:center; gap:6px; }
th .sortdir-btn, .sorth .sortdir-btn { width:var(--target-min); height:var(--target-min); }
th .sortdir-btn svg, .sorth .sortdir-btn svg { width:12px; height:12px; }
@media (min-width:721px) and (min-height:640px) {
  .ax .vo-wrap.stick, .ax .vo-wrap.stick > .xs { overflow:visible; }
  .ax .vo-wrap.stick .vo-tbl thead th { position:sticky; top:calc(var(--topbar-h,58px) + var(--content-pad,0px) + var(--fixhead-h,0px)); z-index:5; box-shadow:0 1px 0 var(--line); }
}

/* ── دورةُ مستندات أمر الشغل (jo-path) — أمر المالك 20261019: خطٌّ بعُقد، فوقها اسمُ الخطوة وتحتها سندُ تمامها ── */
.jo-path-wrap { overflow-x:auto; margin:16px 0 4px; padding-bottom:4px; }
.jo-path { display:flex; min-width:640px; }
.jo-path .st { flex:1 1 0; min-width:84px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.jo-path .st .nm { height:18px; line-height:18px; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding:0 4px; margin-bottom:6px; }
.jo-path .st::before { content:""; position:absolute; top:30px; inset-inline:0; height:2px; background:var(--line); }
.jo-path .st:first-child::before { inset-inline-start:50%; }
.jo-path .st:last-child::before { inset-inline-end:50%; }
.jo-path .st .dot { width:14px; height:14px; box-sizing:border-box; border-radius:50%; border:2px solid var(--line); background:var(--bg); position:relative; z-index:1; }
.jo-path .st.done .dot { background:var(--azure); border-color:var(--azure); }
.jo-path .st.done::before { background:var(--azure); }
.jo-path .st.done .nm { color:var(--ink); }
.jo-path .st.cur .dot { border-color:var(--azure); box-shadow:0 0 0 3px var(--bg-tint); }
.jo-path .st.cur .nm { color:var(--azure); }
.jo-path .st.skip .dot { border-style:dashed; }
.jo-path .st.skip .nm { opacity:.55; }
.jo-path .st .pf { margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; min-height:18px; }
.jo-path .st .pf .doc-tag { font-size:11px; padding:1px 7px; }

/* ── الزرُّ العائم «انتقل إليه» على حقلٍ يحمل هويّةَ كائن في صفحات المحور — سنّةُ صفحات الجهات والأشخاص ── */
.ax .goto-wrap { position:relative; }
.ax .goto-btn { position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:8px; z-index:2; font:inherit; font-size:12px; color:var(--azure); background:color-mix(in srgb, var(--bg) 75%, transparent); border:1px solid var(--azure); border-radius:var(--radius); padding:3px 9px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .12s ease; white-space:nowrap; }
.ax .goto-wrap:hover .goto-btn { opacity:1; pointer-events:auto; }
.ax .goto-btn:hover { background:var(--azure); color:var(--on-azure); }
.ax a.lnk { color:var(--azure); text-decoration:underline; }
@media (hover:none), (max-width:760px) { .ax .goto-btn { opacity:1; pointer-events:auto; } }

/* ── محاذاةُ حقول القيمة الواحدة باتّجاه الواجهة لا باتّجاه محتواها — أمر المالك 20261020:
   الحقلُ الذي يعرض قيمةً محدّدة (اسم، رقم صنف، رقم مسلسل، رقم) يُحاذى يمينًا في الواجهة اليمينيّة ولو بدأ بحرفٍ لاتينيّ،
   ويسارًا في اليساريّة. أمّا الحقولُ المقاليّة (الإجراءات والتشخيص والتوصيات والملاحظات وكلّ نصٍّ متعدّد الأسطر)
   فتبقى على القاعدة الأصليّة: اتّجاهُها من محتواها ── */
html[dir="rtl"] :is(.vo-val:not(.body):not(.two), .acc-field input, .sp-pn, input[dir]:not([type="checkbox"]):not([type="radio"]), td[dir="auto"], .acc-field > bdi, .acc-field > span[dir]) { text-align:right; }
html[dir="ltr"] :is(.vo-val:not(.body):not(.two), .acc-field input, .sp-pn, input[dir]:not([type="checkbox"]):not([type="radio"]), td[dir="auto"], .acc-field > bdi, .acc-field > span[dir]) { text-align:left; }

/* علامةُ «بلا عرض» في قائمة أوامر الشغل (المفاهيم ١٦-٢) */
.ax .chip.noq { margin-inline-start:6px; font-size:11px; padding:1px 7px; }
.ax tr.offrule td { background:var(--warning-bg); }

/* عمودُ الحال في رأس المستند: ما يعلو الشارةَ (منسدلةُ الإصدارات) ثمّ الشارة */
.ax .hero-stat-col { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ax .hero-stat-col select { font:inherit; font-size:12px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--text); }

/* المبالغُ والأسعارُ يمينًا في كلّ واجهة، المُدخَلُ منها والمعروض (أمر المالك 20261021) */
html[dir] td.amtc input, html[dir] input.money { text-align: right !important; }

/* ═══ مراجعة التصميم 20261023 — معالجةُ تركيزٍ واحدةٌ لكلّ حقلٍ نصّيّ ═══ */
.field input:focus,.field textarea:focus,.ppl-qbox:focus,.mny>.mny-cur:focus,.vt-inline input:focus,.vt-sel:focus,.vt-new textarea:focus,
.ax :is(.acc-grid,.vo-row,.ppl-bulkbar) :is(input,select,textarea):focus,.ax .reason:focus,.ax .hero-stat-col select:focus{outline:none;border-color:var(--azure);box-shadow:var(--shadow-focus)}


/* ═══ Paper is always light: printed documents and the on-screen print frame ignore the dark theme ═══ */
#mosaic-print-root,.dpf{--ink:#1f3864;--text:#1f2a3d;--muted:#5b6b82;--azure:#2e5496;--azure-strong:#244879;--on-azure:#ffffff;--bg:#ffffff;--bg-alt:#f4f7fb;--bg-tint:#eaf0f8;--line:#e3e8ef;--line-strong:#c9d4e3;--side:#1f3864;--side-2:#16294a;--side-text:#b7c5dd;--side-group:#93a7c9;--side-hover:rgba(255, 255, 255, 0.07);--side-active:rgba(255, 255, 255, 0.13);--side-line:rgba(255, 255, 255, 0.1);--success:#2c7a4b;--success-text:#1d6f4e;--success-bg:#e7f4ee;--danger:#c94a4a;--danger-text:#b23b3b;--danger-bg:#fdecec;--danger-line:#f5c6c6;--warning:#e0b21b;--warning-ink:#3a2c00;--warning-text:#7a5a00;--warning-bg:#fff6da;--warning-line:#f0d98a;--info-text:#1f4e8c;--info-line:#c9daf2;--neutral-text:#4a5568;--neutral-bg:#eef1f5;--teal-text:#0f766e;--teal-bg:#e6f4f2;--doc-tag-text:#5b2c83;--doc-tag-bg:#f1e8fa;--doc-tag-line:#d9c4ee;--stat-muted:#c2ccdb;--brand-navy:#1f3864;--brand-azure:#2e5496;--sky:#7fa0cf;--on-fill:#ffffff;--scrim:rgba(16, 28, 46, 0.45);--shadow-sm:0 1px 2px rgba(31,56,100,.06), 0 1px 3px rgba(31,56,100,.07);--shadow:0 6px 20px rgba(31,56,100,.09), 0 2px 6px rgba(31,56,100,.06);--shadow-lg:0 22px 55px rgba(31,56,100,.16);--shadow-menu:0 12px 34px rgba(31,56,100,.16);--shadow-toast:0 10px 30px rgba(31,56,100,.18);--shadow-dialog:0 20px 60px rgba(31,56,100,.25);--shadow-focus:0 0 0 3px rgba(46,84,150,.15);color-scheme:light}
@media print{:root,[data-theme="dark"]{--ink:#1f3864;--text:#1f2a3d;--muted:#5b6b82;--azure:#2e5496;--azure-strong:#244879;--on-azure:#ffffff;--bg:#ffffff;--bg-alt:#f4f7fb;--bg-tint:#eaf0f8;--line:#e3e8ef;--line-strong:#c9d4e3;--side:#1f3864;--side-2:#16294a;--side-text:#b7c5dd;--side-group:#93a7c9;--side-hover:rgba(255, 255, 255, 0.07);--side-active:rgba(255, 255, 255, 0.13);--side-line:rgba(255, 255, 255, 0.1);--success:#2c7a4b;--success-text:#1d6f4e;--success-bg:#e7f4ee;--danger:#c94a4a;--danger-text:#b23b3b;--danger-bg:#fdecec;--danger-line:#f5c6c6;--warning:#e0b21b;--warning-ink:#3a2c00;--warning-text:#7a5a00;--warning-bg:#fff6da;--warning-line:#f0d98a;--info-text:#1f4e8c;--info-line:#c9daf2;--neutral-text:#4a5568;--neutral-bg:#eef1f5;--teal-text:#0f766e;--teal-bg:#e6f4f2;--doc-tag-text:#5b2c83;--doc-tag-bg:#f1e8fa;--doc-tag-line:#d9c4ee;--stat-muted:#c2ccdb;--brand-navy:#1f3864;--brand-azure:#2e5496;--sky:#7fa0cf;--on-fill:#ffffff;--scrim:rgba(16, 28, 46, 0.45);--shadow-sm:0 1px 2px rgba(31,56,100,.06), 0 1px 3px rgba(31,56,100,.07);--shadow:0 6px 20px rgba(31,56,100,.09), 0 2px 6px rgba(31,56,100,.06);--shadow-lg:0 22px 55px rgba(31,56,100,.16);--shadow-menu:0 12px 34px rgba(31,56,100,.16);--shadow-toast:0 10px 30px rgba(31,56,100,.18);--shadow-dialog:0 20px 60px rgba(31,56,100,.25);--shadow-focus:0 0 0 3px rgba(46,84,150,.15);color-scheme:light}}