/* NX1 — the new light interface (the Owner 2026-10-13: «الدنيا تبقى خفيفة جدا … واكيد بتبقى احلى … بس انا مش عايز اوبشن يسقط»). One stylesheet: the design of the approved mockup (astra-deliveries/MOCKUP-CONTINUE-20261013, v10 — the dark side rail, the sticky top bar, the cards and tables), Arabic first, the five navigation positions, the seven experience colours of the platform. No inline style anywhere (CSP). */ :root{--ink-0:#060c18;--rail:#0c1729;--rail-2:#21345d;--rail-text:#d9e3f6;--rail-muted:#a2aec4;--primary:#315bff;--primary-2:#2344cc;--primary-soft:#eef2ff;--accent:#20d5f5;--focus:#8b5cf6; --surface:#fff;--canvas:#f3f6fa;--ink:#102641;--muted:#52647b;--line:#dce4ed;--line-2:#a9b7ca;--th:#f0f4fa;--hover:#f6f8ff;--good:#08745d;--good-soft:#e5f5ef;--bad:#ad3544;--bad-soft:#fff0f2;--warn:#a35b11;--warn-soft:#fff5e6; --r:14px;--r-s:9px;--shadow:0 2px 5px #142f5510;--font:'Segoe UI',Tahoma,'Noto Sans Arabic',Arial,sans-serif;color-scheme:light} :root[data-color="aurora"]{--primary:#6d28d9;--primary-2:#5b21b6;--primary-soft:#f1ecfd;--accent:#a78bfa;--rail:#1e1446;--rail-2:#3b2a7a} :root[data-color="midnight"]{--primary:#7c3aed;--primary-2:#6d28d9;--primary-soft:#f0ebfe;--accent:#818cf8;--rail:#120f33;--rail-2:#2e2569} :root[data-color="ocean"]{--primary:#0e6fbe;--primary-2:#0b5a9b;--primary-soft:#e8f3fc;--accent:#38bdf8;--rail:#0b2a4a;--rail-2:#164a78} :root[data-color="emerald"]{--primary:#047857;--primary-2:#065f46;--primary-soft:#e7f6ef;--accent:#34d399;--rail:#06302a;--rail-2:#0d5246} :root[data-color="sunset"]{--primary:#c2410c;--primary-2:#9a3412;--primary-soft:#fdeee4;--accent:#fb923c;--rail:#3a1608;--rail-2:#6b2a12} :root[data-color="rose-gold"]{--primary:#be185d;--primary-2:#9d174d;--primary-soft:#fbe8f1;--accent:#f9a8d4;--rail:#3b0a24;--rail-2:#6b1741} *{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:var(--ink);background:var(--canvas);font-size:15px;line-height:1.6} button,input,select,textarea{font:inherit;color:inherit}a{color:var(--primary-2);text-underline-offset:3px} :focus-visible{outline:3px solid var(--focus);outline-offset:2px} .nx-skip{position:fixed;inset-block-start:-100px;inset-inline-start:8px;z-index:100;background:#fff;padding:12px}.nx-skip:focus{inset-block-start:8px} .nx-hidden,[hidden]{display:none!important}.nx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* buttons and fields */ .nx-btn,button.nx-btn{min-height:42px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px} .nx-btn:hover{border-color:var(--primary);background:var(--primary-soft)}.nx-btn:disabled{opacity:.55;cursor:not-allowed} .nx-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.nx-btn.primary:hover{background:var(--primary-2)} .nx-btn.danger{color:var(--bad);border-color:#e7b3bb}.nx-btn.ghost{border-color:transparent;background:transparent}.nx-btn.small{min-height:34px;padding:4px 10px;font-size:13px} .nx-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px}.nx-field>span{color:var(--muted);font-size:13px} .nx-field input,.nx-field select,.nx-field textarea,.nx-input{width:100%;min-height:42px;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;background:var(--surface)} .nx-field textarea{min-height:88px}.nx-check{display:flex;align-items:center;gap:10px;min-height:42px}.nx-check input{width:20px;height:20px} .nx-field [aria-invalid="true"]{border-color:var(--bad);background:var(--bad-soft)} /* the shell */ .nx-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh} .nx-rail{position:sticky;inset-block-start:0;height:100vh;background:var(--rail);color:var(--rail-text);padding:16px 10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;z-index:20} .nx-brand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 14px;text-decoration:none;color:#fff}.nx-brand img{width:150px;max-width:100%;height:auto}.nx-brand small{color:var(--rail-muted);font-size:11px;letter-spacing:.6px} .nx-rail a,.nx-rail button{min-height:44px;color:var(--rail-text);border:0;background:transparent;text-decoration:none;border-radius:var(--r-s);padding:9px 10px;display:flex;gap:12px;align-items:center;cursor:pointer;font-size:15px;text-align:start;width:100%} .nx-rail a:hover,.nx-rail button:hover{background:var(--rail-2)}.nx-rail a[aria-current="page"]{background:var(--rail-2);color:#fff;box-shadow:inset -3px 0 var(--accent)} [dir="ltr"] .nx-rail a[aria-current="page"]{box-shadow:inset 3px 0 var(--accent)} .nx-ico{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center}.nx-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .nx-sub{display:flex;flex-direction:column;gap:2px;padding-inline-start:34px;margin-block-end:4px}.nx-sub a{min-height:36px;font-size:14px;padding:6px 10px;color:var(--rail-muted)}.nx-sub a[aria-current="page"]{color:#fff;box-shadow:none;background:var(--rail-2)} .nx-rail-foot{margin-block-start:auto;font-size:12px;color:var(--rail-muted);padding:14px 8px;line-height:1.7;display:flex;flex-direction:column;gap:6px}.nx-rail-foot a{min-height:34px;font-size:13px;padding:4px 8px;color:var(--rail-muted)} .nx-shell.folded{grid-template-columns:72px minmax(0,1fr)}.folded .nx-label,.folded .nx-rail-foot,.folded .nx-sub,.folded .nx-brand small{display:none}.folded .nx-brand img{width:48px} .nx-main{min-width:0;display:flex;flex-direction:column} .nx-top{position:sticky;inset-block-start:0;z-index:15;background:rgba(255,255,255,.97);border-block-end:1px solid var(--line);display:flex;gap:12px;padding:10px 24px;align-items:end;flex-wrap:wrap;backdrop-filter:blur(6px)} .nx-top .nx-field{flex:1;min-width:150px;max-width:300px}.nx-top-tools{margin-inline-start:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .nx-icon-btn{min-width:42px;min-height:42px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--ink);text-decoration:none} .nx-icon-btn:hover{border-color:var(--primary);background:var(--primary-soft)}.nx-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .nx-count{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} .nx-content{width:100%;max-width:1560px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px} .nx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.nx-head h1{font-size:26px;margin:0;letter-spacing:-.3px}.nx-head p{margin:6px 0 0;color:var(--muted);max-width:760px} .nx-eyebrow{color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.4px} .nx-tabs{display:flex;gap:4px;flex-wrap:wrap;border-block-end:1px solid var(--line);padding-block-end:8px} .nx-tabs button,.nx-tabs a{min-height:40px;border:1px solid transparent;background:transparent;border-radius:8px;color:var(--muted);padding:6px 12px;cursor:pointer;text-decoration:none;font-size:14px} .nx-tabs [aria-selected="true"]{color:var(--primary-2);background:var(--primary-soft);border-color:#c6d3ff;font-weight:700} .nx-panel{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0} .nx-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-block-end:14px;flex-wrap:wrap}.nx-panel-head h2{margin:0;font-size:18px} .nx-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.nx-grid-2{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))} .nx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .nx-kpi{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:var(--shadow);text-align:start} .nx-kpi-label{font-size:13px;color:var(--muted)}.nx-kpi-value{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.nx-kpi-sub{font-size:12px;color:var(--muted)} .nx-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;text-decoration:none;color:var(--ink);min-width:0}.nx-card:hover{border-color:var(--primary);box-shadow:0 6px 20px #142f5514} .nx-card h3{margin:0;font-size:16px}.nx-card p{margin:0;color:var(--muted);font-size:14px} .nx-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:10px} .nx-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}.nx-table th{background:var(--th);color:#4c5e76;font-size:12px;font-weight:600;text-align:start} .nx-table th,.nx-table td{padding:10px 12px;border-block-end:1px solid var(--line);text-align:start;vertical-align:top}.nx-table tbody tr:hover{background:var(--hover)}.nx-table .num{text-align:end;white-space:nowrap}.nx-neg{color:var(--bad)} .nx-notice{border-inline-start:3px solid var(--primary);background:var(--primary-soft);padding:12px 16px;border-radius:8px}.nx-notice.bad{border-color:var(--bad);background:var(--bad-soft)}.nx-notice.good{border-color:var(--good);background:var(--good-soft)}.nx-notice.warn{border-color:var(--warn);background:var(--warn-soft)} .nx-empty{padding:26px;background:#f7f9fc;border:1px dashed #c4d0e2;border-radius:12px;color:var(--muted)} .nx-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:4px 10px;border-radius:999px;background:#fff;font-size:12px} .nx-status{min-height:22px;margin:0;color:var(--muted);font-size:14px}.nx-status.bad{color:var(--bad)}.nx-status.good{color:var(--good)} .nx-toast{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:60;padding:12px 18px;max-width:calc(100% - 48px);background:var(--rail);color:#fff;border-radius:10px;box-shadow:0 6px 30px #0003} dialog.nx-dialog{width:min(760px,calc(100% - 32px));max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}dialog.nx-dialog::backdrop{background:#061326a3} .nx-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-block-end:14px}.nx-dialog-head h2{margin:0;font-size:18px} .nx-menu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:40;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px #0002;padding:6px;display:flex;flex-direction:column} .nx-menu a,.nx-menu button{min-height:40px;border:0;background:transparent;text-align:start;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--ink);text-decoration:none;display:flex;gap:10px;align-items:center}.nx-menu a:hover,.nx-menu button:hover{background:var(--primary-soft)} .nx-wrap{position:relative} .nx-loading{padding:40px;text-align:center;color:var(--muted)} /* the sign-in screens */ .nx-auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);background:var(--canvas)} .nx-auth-hero{background:var(--rail);color:var(--rail-text);padding:48px;display:flex;flex-direction:column;justify-content:center;gap:18px}.nx-auth-hero img{width:220px;max-width:70%}.nx-auth-hero h1{color:#fff;font-size:30px;margin:0}.nx-auth-hero p{color:var(--rail-muted);max-width:520px;margin:0} .nx-auth-card{padding:40px 32px;display:flex;flex-direction:column;justify-content:center;gap:16px;background:var(--surface)}.nx-auth-card h2{margin:0;font-size:22px}.nx-auth-card form{display:flex;flex-direction:column;gap:14px} .nx-auth-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px} /* the five navigation positions (nav-modes of the mockup): right (default in Arabic), left, top, bottom, floating */ [dir="rtl"] .nx-shell.nav-left{direction:ltr}[dir="rtl"] .nav-left .nx-rail,[dir="rtl"] .nav-left .nx-main{direction:rtl} [dir="ltr"] .nx-shell.nav-right{direction:rtl}[dir="ltr"] .nav-right .nx-rail,[dir="ltr"] .nav-right .nx-main{direction:ltr} .nx-shell.nav-top,.nx-shell.nav-bottom{display:block} .nav-top .nx-rail,.nav-bottom .nx-rail{position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:6px 12px;gap:2px;inset-block-start:0} .nav-bottom .nx-rail{position:fixed;inset-block-start:auto;inset-block-end:0;inset-inline:0;z-index:30}.nav-bottom .nx-main{padding-block-end:80px} .nav-top .nx-rail a,.nav-bottom .nx-rail a,.nav-top .nx-rail button,.nav-bottom .nx-rail button{width:auto;min-height:40px;font-size:14px}.nav-top .nx-brand,.nav-bottom .nx-brand{flex-direction:row;padding:0 8px}.nav-top .nx-brand img,.nav-bottom .nx-brand img{width:90px} .nav-top .nx-sub,.nav-bottom .nx-sub,.nav-top .nx-rail-foot,.nav-bottom .nx-rail-foot,.nav-top .nx-brand small,.nav-bottom .nx-brand small{display:none}.nav-top .nx-top{inset-block-start:56px} .nx-shell.nav-float{grid-template-columns:76px minmax(0,1fr)}.nav-float .nx-rail{height:auto;border-radius:16px;margin:12px 6px;align-self:start;inset-block-start:12px}.nav-float .nx-label,.nav-float .nx-rail-foot,.nav-float .nx-sub,.nav-float .nx-brand small{display:none}.nav-float .nx-brand img{width:48px} /* screens of the phone */ @media (max-width:1100px){.nx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.nx-shell{grid-template-columns:200px minmax(0,1fr)}.nx-content{padding:18px}.nx-grid-2{grid-template-columns:1fr}} @media (max-width:760px){.nx-shell,.nx-shell.folded,.nx-shell.nav-float{display:block} .nx-rail{position:fixed;inset-block-start:auto;inset-block-end:0;inset-inline:0;height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px;gap:2px;border-radius:0;margin:0;z-index:30} .nx-rail .nx-brand,.nx-rail-foot,.nx-sub,.nx-rail .nx-label{display:none}.nx-rail a,.nx-rail button{flex:0 0 56px;justify-content:center;flex-direction:column;gap:2px;font-size:11px;min-height:52px;padding:4px} .nx-main{padding-block-end:76px}.nx-top{padding:8px 12px;gap:8px}.nx-top .nx-field{min-width:calc(50% - 8px);max-width:none}.nx-content{padding:14px 12px}.nx-head h1{font-size:22px} .nx-kpis{gap:10px}.nx-kpi{padding:12px}.nx-kpi-value{font-size:22px}.nx-panel{padding:14px}.nx-auth{grid-template-columns:1fr}.nx-auth-hero{padding:28px 20px}.nx-auth-card{padding:24px 18px}} /* G4-NX2 — the data screens: cards of templates, the details blocks, the questions of the review, the tables that hold choices, the gate chip, the stages of a month */ .nx-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-block-start:16px} .nx-panel+.nx-panel,.nx-panel+section,section+.nx-panel{margin-block-start:16px} .nx-panel h3{margin:8px 0 6px;font-size:16px} .nx-panel details{margin-block:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface)} .nx-panel details>summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center} .nx-panel details[open]>summary{margin-block-end:8px} .nx-unlocks{display:flex;flex-wrap:wrap;gap:6px} .nx-field legend{font-size:13px;font-weight:600;color:var(--muted);margin-block-end:6px} fieldset.nx-field{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0} .nx-table select,.nx-table input:not([type=checkbox]){min-height:34px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;max-width:100%} .nx-table input[type=checkbox]{width:18px;height:18px} [data-nx-gate="ready"],.nx-chip.good{background:var(--good-soft);color:var(--good)} [data-nx-gate="needs_mapping"],.nx-chip.warn{background:var(--warn-soft);color:var(--warn)} [data-nx-gate="validation_blocked"],.nx-chip.bad{background:var(--bad-soft);color:var(--bad)} .nx-notice ul{margin:6px 0 0;padding-inline-start:20px} .nx-stages{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .nx-stages [aria-current="step"]{background:var(--primary);color:#fff} .nx-actions-cell{display:flex;flex-wrap:wrap;gap:6px} .nx-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-block-end:12px}.nx-files-sec{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface)}.nx-files-sec>summary{cursor:pointer;padding:10px 14px;display:flex;gap:10px;align-items:center;list-style:none}.nx-files-sec>summary::-webkit-details-marker{display:none}.nx-files-sec>summary::before{content:'+';color:var(--muted);font-weight:700}.nx-files-sec[open]>summary::before{content:'−'}.nx-files-sec>div{padding:0 10px 10px}.nx-files-grid th,.nx-files-grid td{text-align:center;padding:4px 6px;white-space:nowrap}.nx-files-grid th[scope=row]{text-align:start}.nx-files-more-filters{flex-basis:100%}.nx-files-more-filters>summary{cursor:pointer;color:var(--muted)}.nx-files-more-filters>div{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-block-start:8px}@media (max-width:760px){.nx-files-sec table[data-nx-files] thead{display:none}.nx-files-sec table[data-nx-files],.nx-files-sec table[data-nx-files] tbody,.nx-files-sec table[data-nx-files] tr,.nx-files-sec table[data-nx-files] td{display:block;inline-size:auto}.nx-files-sec table[data-nx-files] tr{border-block-end:1px solid var(--line);padding:8px 4px}.nx-files-sec table[data-nx-files] tr[hidden]{display:none}.nx-files-sec table[data-nx-files] td{border:0;padding:3px 6px}}/* G4-FILESORG1: the files by month, the active months as a grid, the extra filters folded, a file as a card on the phone */ .nx-filters .nx-field{min-width:180px;flex:0 1 220px} .nx-score{font-size:40px;font-weight:700;line-height:1} .nx-muted{color:var(--muted);font-size:13px} @media (max-width:760px){.nx-cards{grid-template-columns:1fr}.nx-filters .nx-field{flex:1 1 100%}} /* G4-NX2 — the checks and their explanations (the words of public/clar1.js inside the new sheet) */ .control-check{border:1px solid var(--line);border-inline-start:4px solid var(--line-2);border-radius:10px;padding:10px 12px;margin-block:8px;background:var(--surface)} .control-check.critical{border-inline-start-color:var(--bad)}.control-check.high{border-inline-start-color:var(--warn)}.control-check.medium{border-inline-start-color:var(--primary)}.control-check.info{border-inline-start-color:var(--line-2)} .control-check p{margin:6px 0}.control-check small{color:var(--muted)} .nx-clar .muted,.control-check .muted{color:var(--muted)} .clar1-sub{font-weight:600;margin:10px 0 4px}.clar1-ok{color:var(--good)}.clar1-count{margin-inline-start:8px;color:var(--muted);font-size:13px} .clar1-files{margin:6px 0;padding-inline-start:20px}.unmapped-list{display:flex;flex-wrap:wrap;gap:6px}.unmapped-list span{border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px} .clar1-actions{display:flex;flex-wrap:wrap;gap:8px} .clar1-go,.clar1-why,.clar1-chip,.clar1-link,.clar1-close{min-height:34px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);padding:4px 10px;cursor:pointer;font:inherit;font-size:13px} .clar1-go:hover,.clar1-why:hover,.clar1-chip:hover,.clar1-link:hover{border-color:var(--primary);background:var(--primary-soft)} .clar1-link{border-color:transparent;background:transparent;color:var(--primary);padding-inline:2px} .clar1-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-block-end:8px} .clar1-block{margin-block:8px}.clar1-block>b{display:block;margin-block-end:4px} .clar1-steps,.clar1-score{margin:4px 0;padding-inline-start:22px}.clar1-note,.clar1-hint{color:var(--muted);font-size:13px} .clar1-reasons{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .nx-explain{margin-block:10px;box-shadow:var(--shadow)} button.nx-kpi{text-align:start;cursor:pointer;font:inherit;color:inherit} small.nx-muted{display:block;margin-block-start:4px} /* G4-NX3 — the classification page: the classic markup copied into the new sheet (the inbox groups, the saved rules, the side question) */ [data-nx-screen=classify] .mini{min-height:32px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);padding:3px 10px;cursor:pointer;font:inherit;font-size:13px} [data-nx-screen=classify] .mini.primary{background:var(--primary);border-color:var(--primary);color:#fff} [data-nx-screen=classify] .muted{color:var(--muted);font-size:13px} .flow-filter-note{color:var(--muted);font-size:13px;margin:6px 0} .flow-levels,.flow-groups{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .flow-level,.flow-group{min-height:32px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:3px 12px;cursor:pointer;font:inherit;font-size:13px} .flow-level[aria-pressed="true"],.flow-group[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff} .flow-gline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0} .flow-gline[data-flow-open="0"] .flow-groups{flex-wrap:nowrap;overflow-x:auto;max-width:100%} .flow-gfind{min-height:36px;border:1px solid var(--line);border-radius:var(--r-s);padding:4px 10px;font:inherit;min-width:220px;background:var(--surface);color:var(--ink)} .flow-gmore{border:0;background:transparent;color:var(--primary);cursor:pointer;font:inherit} .flow-gcount,.flow-tip{color:var(--muted);font-size:12px} .flow-size{display:inline-flex;gap:6px;align-items:center} .flow-size select,#flowBulkMetric{min-height:34px;border:1px solid var(--line);border-radius:8px;padding:2px 8px;background:var(--surface);color:var(--ink);font:inherit} .busy1-active{opacity:.75;cursor:progress} .nx-bulk{padding:8px 0;border-block-end:1px solid var(--line);margin-block-end:8px} .mv1-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0} .mv1-filters select{min-height:34px;border:1px solid var(--line);border-radius:8px;padding:2px 8px;background:var(--surface);color:var(--ink);font:inherit} .mv1-rule{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0;border-block-end:1px dashed var(--line)} .mv1-rule:last-child{border-block-end:0} .mv1-off{opacity:.6} .mv1-side,.mv1-chip{border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px} .mv1-warn{color:var(--warn);font-size:13px} .mv1-months{color:var(--muted)}.mv1-warn{color:var(--warn)}/* G4-CASHROLE1 */ .mv1-ask{color:var(--warn)} details.nx-panel>summary{cursor:pointer;font-weight:600;font-size:16px} /* G4-NX3 — the classic sheets of the account tree, the cost centres and the expense functions (public/maptree1.css, cc1.css, fn1.css, copied by _gate2/_work/nx3/gen-sheets.cjs with the colour tokens read as the new interface’s) */ /* maptree1.css */ /* G4-MAP1-A — the account tree and classification (structure and spacing only; colors follow the site tokens) */ .maptree .mt-body{display:grid;gap:12px} .maptree .mt-busy{opacity:.6} .maptree .mt-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center} .maptree .mt-coverage{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} .maptree .mt-coverage progress{inline-size:min(320px,100%);block-size:12px} .maptree .mt-pattern{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} .maptree .mt-pattern-edit{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center} .maptree .mt-pattern-edit input{inline-size:11ch} .maptree .mt-filters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:end} .maptree .mt-filters label{display:grid;gap:4px} .maptree .mt-filters .mt-check{grid-auto-flow:column;align-items:center} .maptree .mt-filters .mt-search{flex:1 1 200px} .maptree .mt-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:16px;align-items:start} .maptree .mt-tree-host{max-block-size:70vh;overflow:auto;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:10px;padding:6px} .maptree .mt-tree,.maptree .mt-tree ul{list-style:none;margin:0;padding:0} .maptree .mt-tree ul{padding-inline-start:18px} .maptree .mt-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;gap:6px 10px;align-items:center;padding:4px 6px;border-radius:8px;cursor:pointer} .maptree .mt-row.mt-account{grid-template-columns:auto minmax(0,1fr) auto auto auto;padding-inline-start:28px} .maptree .mt-row:hover{background:var(--primary-soft,rgba(37,99,235,.06))} .maptree .mt-row[aria-selected="true"]{background:var(--primary-soft,rgba(37,99,235,.12));outline:1px solid var(--line,rgba(37,99,235,.3))} .maptree .mt-toggle{border:0;background:none;cursor:pointer;inline-size:22px;block-size:22px;padding:0;font:inherit} .maptree .mt-code{font-variant-numeric:tabular-nums;font-weight:600} .maptree .mt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .maptree .mt-bal{font-variant-numeric:tabular-nums} .maptree .mt-count,.maptree .mt-metric{font-size:.85em;opacity:.8} .maptree .mt-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.8em;border:1px solid currentColor;white-space:nowrap} .maptree .mt-badge[data-status="missing"]{color:var(--bad,#b42318)} .maptree .mt-badge[data-status="exception"]{color:var(--warn,#b54708)} .maptree .mt-badge[data-status="inherited"],.maptree .mt-badge[data-status="direct"],.maptree .mt-badge[data-status="ok"]{color:var(--good,#067647)} .maptree .mt-badge[data-status="master"],.maptree .mt-badge[data-status="deferred"],.maptree .mt-badge[data-status="empty"]{opacity:.75} .maptree .mt-card h4{margin:0 0 6px} .maptree .mt-current{margin:0 0 8px} .maptree .mt-actions{display:flex;flex-wrap:wrap;gap:8px} .maptree .mt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block:10px} .maptree .mt-bar .mt-status{flex:1 1 100%;margin:0} .maptree .mt-figures{inline-size:100%;border-collapse:collapse;margin-block:8px} .maptree .mt-figures th,.maptree .mt-figures td{padding:4px 8px;text-align:start;border-block-end:1px solid var(--line,rgba(0,0,0,.1))} .maptree .mt-figures caption{text-align:start;font-weight:600;padding:4px 0} .maptree .mt-diff{font-weight:600} .maptree .mt-changes,.maptree .mt-exceptions{margin:6px 0;padding-inline-start:18px;max-block-size:30vh;overflow:auto} .maptree .mt-exc summary{cursor:pointer} /* G4-MAP1-B — the suggestions, the market, the notices, the side rules, the flips, MX, the approval */ .maptree .mt-market{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} .maptree .mt-market label{display:inline-flex;gap:6px;align-items:center} .maptree .mt-notice{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;padding:6px 10px;border:1px dashed var(--line,rgba(0,0,0,.2));border-radius:8px} .maptree .mt-suggest{margin:8px 0;padding:8px 10px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:8px} .maptree .mt-suggest h5{margin:0 0 6px} .maptree .mt-suggest ul{margin:0;padding-inline-start:16px} .maptree .mt-suggest .mt-sug-item{margin-block:4px} .maptree .mt-suggest .mt-sug-item p{margin:2px 0 4px} .maptree .mt-badge[data-status="suggest"]{color:var(--primary,#1d4ed8)} .maptree .mt-alerts{margin:6px 0;padding-inline-start:18px;max-block-size:30vh;overflow:auto} .maptree .mt-alerts li[data-state="pending"],.maptree .mt-alerts li[data-state="none"]{font-weight:600} .maptree .mt-sr summary,.maptree .mt-flips summary{cursor:pointer} .maptree .mt-sr table td{vertical-align:top} .maptree .mt-locked{display:grid;gap:6px;margin-block:6px} .maptree .mt-mx{margin-block:8px} .maptree .mt-notice,.maptree .mt-market,.maptree .mt-suggest,.maptree .mt-alerts{overflow-wrap:anywhere;max-inline-size:100%} .maptree .mt-body,.maptree .mt-body>*,.maptree .mt-side,.maptree .mt-grid,.maptree .mt-sr,.maptree .mt-flips{min-inline-size:0;max-inline-size:100%} .maptree .mt-market>*,.maptree .mt-notice>*{min-inline-size:0;flex:0 1 auto} @media (max-width:760px){.maptree .mt-sr table{display:block;overflow-x:auto;max-inline-size:100%}.maptree .mt-sr th,.maptree .mt-sr td{white-space:normal;min-inline-size:90px}.maptree .mt-preview{min-inline-size:0;max-inline-size:100%;overflow-x:auto}/* G4-MAP1-D: the figures table scrolls inside the preview, the page keeps its width */} @media (max-width:760px){.maptree .mt-grid{grid-template-columns:1fr}.maptree .mt-tree-host{max-block-size:50vh}.maptree .mt-row{grid-template-columns:auto auto minmax(0,1fr) auto}.maptree .mt-row .mt-count,.maptree .mt-row .mt-metric{display:none}.maptree .mt-row.mt-account{grid-template-columns:auto minmax(0,1fr) auto auto;padding-inline-start:18px}} /* G4-MAP2 (the Owner 2026-10-08: the ERP tree — «+» to open, the numbers beside the accounts, the tree the main column): the rows on one line, guide lines, the tree taller, the side card sticky, the readings and the totals as chips, an unnamed group in italics. */ .maptree .mt-grid{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)} .maptree .mt-tree-host{max-block-size:calc(100vh - 150px);min-block-size:420px;padding:8px 10px} .maptree .mt-side{position:sticky;inset-block-start:12px} .maptree .mt-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;grid-template-columns:none} .maptree .mt-row.mt-account{padding-inline-start:30px} .maptree .mt-row .mt-name{flex:1 1 auto;min-inline-size:0} .maptree .mt-row .mt-bal{min-inline-size:12ch;text-align:end} .maptree .mt-row .mt-count,.maptree .mt-row .mt-metric{white-space:nowrap} .maptree .mt-tree ul{margin-inline-start:11px;padding-inline-start:14px;border-inline-start:1px dashed var(--line,rgba(0,0,0,.18))} .maptree .mt-toggle{inline-size:20px;block-size:20px;border:1px solid var(--line,rgba(0,0,0,.25));border-radius:4px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none} .maptree .mt-row[data-level="1"] .mt-name{font-weight:700}.maptree .mt-unnamed{font-style:italic;opacity:.7} .maptree .mt-totals,.maptree .mt-pattern-choices{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .maptree .mt-total-chip{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border:1px solid var(--line,rgba(0,0,0,.18));border-radius:999px;font-size:.9em;white-space:nowrap} .maptree .mt-pattern-pick{display:inline-grid;gap:2px;text-align:start;padding:6px 10px;border-radius:10px} .maptree .mt-pattern-pick[aria-pressed="true"]{outline:2px solid var(--primary,#2563eb);outline-offset:-2px} .maptree .mt-pattern-pick span{font-size:.85em;opacity:.8} .mt-chart-dialog{max-inline-size:min(620px,calc(100vw - 32px));border:1px solid var(--line,rgba(0,0,0,.18));border-radius:14px;padding:18px} .mt-chart-dialog label{display:grid;gap:4px;margin-block:8px}.mt-chart-dialog textarea{inline-size:100%;font-family:ui-monospace,monospace} /* G4-PASS1 — «حسابين متقابلين» in the account card */ .maptree .mt-pair{display:grid;gap:8px;margin-block-start:12px;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.18));border-inline-start:4px solid var(--primary,#0869c9);border-radius:10px} .maptree .mt-pair summary{cursor:pointer;font-weight:600}.maptree .mt-pair h5{margin:0;font-size:1em}.maptree .mt-pair p{margin:0} .maptree .mt-pair label{display:grid;gap:4px}.maptree .mt-pair select{inline-size:100%;max-inline-size:100%}.maptree .mt-pair .mini{justify-self:start} /* G4-MAP3 — the full-width area under the tree: the exceptions, the side rules, the flipped accounts and the MX suggestions; nothing in it pushes the page sideways */ .maptree .mt-wide{display:grid;gap:12px;margin-block-start:16px;min-inline-size:0;max-inline-size:100%} .maptree .mt-wide>details,.maptree .mt-wide>.mt-mx{border:1px solid var(--line,rgba(0,0,0,.18));border-radius:12px;padding:10px 14px;min-inline-size:0;max-inline-size:100%;overflow-x:auto} .maptree .mt-wide summary{cursor:pointer;font-weight:600}.maptree .mt-wide table{inline-size:100%;border-collapse:collapse}.maptree .mt-wide td,.maptree .mt-wide th{overflow-wrap:anywhere;vertical-align:top} .maptree .mt-wide ul{margin:8px 0 0;padding-inline-start:18px;max-block-size:22rem;overflow-y:auto}.maptree .mt-card small{font-weight:400;opacity:.75} @media (max-width:900px){.maptree .mt-grid{grid-template-columns:1fr}.maptree .mt-side{position:static}.maptree .mt-row .mt-count,.maptree .mt-row .mt-metric{display:none}} /* cc1.css */ /* G4-CC1: the cost-centre window — the tree in a scrolling box (the page never grows long), the kinds as chips, the alerts and a centre's statement. */ .cc1-dialog{width:min(1100px,96vw);max-height:92vh;overflow:auto;padding:20px 22px;border:1px solid var(--line,#d9e1ec);border-radius:14px} .cc1-dialog h2{margin:0 0 4px;font-size:1.2rem} .cc1-close{position:absolute;inset-inline-end:14px;top:12px;border:0;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px} .cc1-context{margin:0 0 6px;color:var(--muted,#5b6b80);font-size:.9rem} .cc1-help{margin:0 0 10px;font-size:.88rem;line-height:1.6;color:var(--muted,#5b6b80)} .cc1-muted{color:var(--muted,#5b6b80);font-size:.86rem} .cc1-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px;border-bottom:1px solid var(--line,#d9e1ec)} .cc1-tabs button{border:0;background:transparent;padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;font:inherit} .cc1-tabs button.active,.cc1-tabs button[aria-selected="true"]{border-bottom-color:var(--primary,#1463d6);font-weight:600} .cc1-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px} .cc1-tools input[type="search"]{min-width:200px;flex:1 1 200px;max-width:320px} .cc1-upload span{display:inline-block;padding:6px 12px;border:1px solid var(--line,#d9e1ec);border-radius:8px;cursor:pointer} .cc1-scroll{max-height:58vh;overflow:auto;border:1px solid var(--line,#d9e1ec);border-radius:10px} .cc1-tree,.cc1-months,.cc1-moves,.cc1-accounts-table{width:100%;border-collapse:collapse;font-size:.88rem} .cc1-tree th,.cc1-tree td,.cc1-months th,.cc1-months td,.cc1-moves th,.cc1-moves td,.cc1-accounts-table th,.cc1-accounts-table td{padding:6px 8px;border-bottom:1px solid var(--line,#e6ebf2);text-align:start;vertical-align:middle} .cc1-tree thead th,.cc1-moves thead th{position:sticky;top:0;background:var(--surface,#fff);z-index:1} .cc1-num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums} .cc1-name{display:flex;align-items:center;gap:6px;min-width:220px} .cc1-name[data-level="2"]{padding-inline-start:24px}.cc1-name[data-level="3"]{padding-inline-start:48px}.cc1-name[data-level="4"]{padding-inline-start:72px}.cc1-name[data-level="5"]{padding-inline-start:96px} .cc1-name[data-level="6"],.cc1-name[data-level="7"],.cc1-name[data-level="8"],.cc1-name[data-level="9"],.cc1-name[data-level="10"],.cc1-name[data-level="11"],.cc1-name[data-level="12"]{padding-inline-start:120px} .cc1-twist{display:inline-block;width:20px;min-width:20px;border:0;background:transparent;cursor:pointer;padding:0;font:inherit} .cc1-code{font-weight:600} .cc1-tree tr[data-cc1-kind="aggregate"] td{font-weight:600;background:var(--hover,#f6f8fb)} .cc1-tree tr.cc1-inactive td{opacity:.6} .cc1-tree select,.cc1-tree input[type="text"]{max-width:260px;font:inherit;font-size:.86rem} .cc1-tree [data-cc1-posting]{min-width:10.5em} .cc1-tree [data-cc1-fn]{min-width:15em} .cc1-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.8rem;border:1px solid var(--line,#d9e1ec)} .cc1-link{border:0;background:transparent;color:var(--primary,#1463d6);cursor:pointer;text-decoration:underline;font:inherit} .cc1-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cc1-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .cc1-preview{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line,#d9e1ec);border-radius:10px;background:var(--hover,#f6f8fb)} .cc1-ok{color:var(--good,#1d7a46)} .cc1-warn{color:var(--warn,#9a5b00);font-weight:600} .cc1-fix{margin-top:12px;padding:10px 12px;border:1px solid var(--line,#e6ebf2);border-radius:10px} .cc1-fix h4{margin:0 0 6px;font-size:.95rem} .cc1-fix p{margin:0 0 6px;font-size:.88rem;line-height:1.6} .cc1-accounts{margin:0 0 8px;padding-inline-start:18px;font-size:.86rem} .cc1-empty{padding:16px} .cc1-message{min-height:1.2em;white-space:pre-line;margin-top:8px} [data-cc1-note]{display:block;margin-top:2px;opacity:.85} @media (max-width:720px){.cc1-dialog{padding:14px}.cc1-tree th:nth-child(4),.cc1-tree td:nth-child(4),.cc1-tree th:nth-child(6),.cc1-tree td:nth-child(6){display:none}.cc1-name{min-width:150px}.cc1-tree select{max-width:140px}} .cc1-preview .cc1-warn{white-space:pre-line} /* G4-MAP1-C — the business unit, the profit by unit, the exceptions and the policy */ .cc1-require{display:flex;gap:8px;align-items:flex-start;margin:6px 0} .cc1-require input{margin-block-start:4px} .cc1-exceptions{margin-block-end:10px} .cc1-units .cc1-total td{font-weight:600;border-block-start:2px solid var(--line,rgba(0,0,0,.2))} .cc1-units{inline-size:100%;border-collapse:collapse;margin-block:8px} .cc1-units th,.cc1-units td{padding:4px 8px;text-align:start;border-block-end:1px solid var(--line,rgba(0,0,0,.1))} @media (max-width:760px){.cc1-units{display:block;overflow-x:auto;max-inline-size:100%}.cc1-tree th:nth-child(5),.cc1-tree td:nth-child(5){display:none}} /* fn1.css */ /* G4-FN1 (the Owner 2026-10-02/03) — the function of the expenses: the window, the bar above the income statement by function, the buttons in the details and on the classification page. Structure and behaviour only; the colours come from the site's tokens. */ .fn1-dialog{width:min(820px,calc(100% - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:20px} .fn1-dialog h2{margin:0 0 4px;font-size:17px} .fn1-close{float:inline-end;min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer} .fn1-context{margin:0 0 6px;font-size:12.5px;color:var(--muted)} .fn1-help{margin:0 0 10px;font-size:12.5px;line-height:1.7;color:var(--muted)} .fn1-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 8px} .fn1-tools button,.fn1-actions button{min-height:38px;padding:0 14px} .fn1-only{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap} .fn1-list{max-height:min(56vh,560px);overflow:auto;border:1px solid var(--line);border-radius:10px} .fn1-table{width:100%;border-collapse:collapse;font-size:12.5px} .fn1-table thead th{position:sticky;top:0;background:var(--surface,var(--canvas,#fff));z-index:1} .fn1-table th,.fn1-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top} .fn1-table td:nth-child(3){white-space:nowrap} .fn1-table select{min-height:36px;max-width:100%;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit} .fn1-table tr.fn1-missing td:first-child{border-inline-start:3px solid #b7791f} .fn1-table tr.fn1-changed td:first-child{border-inline-start:3px solid #2f855a} .fn1-code{color:var(--muted);margin-inline-end:4px} .fn1-suggest{display:block;margin-top:4px;color:var(--muted);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px} .fn1-actions{display:flex;gap:8px;margin:10px 0 0} .fn1-message{margin:8px 0 0;font-size:12.5px;line-height:1.6} .fn1-muted{margin:8px;color:var(--muted);font-size:12.5px} .fn1-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-inline-start:4px solid #2f855a;border-radius:10px;font-size:13px} .fn1-bar[data-fn1-bar="missing"]{border-inline-start-color:#b7791f} .fn1-bar[data-fn1-bar="switch"]{border-inline-start-color:var(--primary,#43c9ff)} .fn1-bar button{min-height:36px;padding:0 12px} .fn1-drill{font:inherit;font-size:13px;cursor:pointer;border-radius:999px;border:1px solid var(--primary,#43c9ff);background:transparent;color:inherit;padding:4px 12px;min-height:34px} .fn1-tool{min-height:36px} @media (max-width:760px){ .fn1-dialog{padding:14px} .fn1-list{max-height:60vh} .fn1-table thead{display:none} .fn1-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:6px 4px;border-bottom:1px solid var(--line)} .fn1-table td{border-bottom:0;padding:0 2px;overflow-wrap:anywhere} .fn1-table td:nth-child(4){grid-column:1/-1} .fn1-table select,.fn1-tools button,.fn1-actions button,.fn1-bar button{min-height:44px;width:100%} } /* G4-FN2 (the Owner 2026-10-09): one filter line (search + the tree groups), the mixed account's chip, and its split editor. Structure only; the colours come from the site's tokens. */ .fn2-filter{display:flex;flex:1 1 320px;align-items:center;gap:6px;min-width:0} .fn2-filter input[type="search"]{flex:1 1 160px;min-width:0;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:12.5px} .fn2-filter select{flex:0 1 150px;min-width:0;min-height:36px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:12.5px} .fn2-chip{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)} .fn2-chip.fn2-pending{color:#b7791f;font-weight:600} .fn2-edit{margin-top:4px;min-height:30px;padding:0 10px;border:1px solid var(--primary,#43c9ff);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer} .fn1-table tr.fn2-editor td{padding:0;background:var(--hover,rgba(127,127,127,.06))} .fn2-box{padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0} .fn2-title{margin:0;font-weight:600} .fn2-hint{margin:0;font-size:12px;line-height:1.7;color:var(--muted)} .fn2-box p,.fn2-box label span{white-space:normal;overflow-wrap:anywhere} .fn2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:8px} .fn2-part{display:grid;grid-template-columns:1fr 84px;align-items:center;gap:4px 8px;padding:8px;border:1px solid var(--line);border-radius:9px;font-size:12.5px} .fn2-part input{min-height:34px;width:100%;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:center} .fn2-part output{grid-column:1 / -1;color:var(--muted);font-size:11.5px;direction:ltr;text-align:end} .fn2-total{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:6px 10px} .fn2-total progress{width:100%;height:10px} .fn2-total small{grid-column:1 / -1} .fn2-ok{color:#2f855a} .fn2-warn{color:#b7791f} .fn2-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:8px} .fn2-more label{display:grid;gap:4px;font-size:12px;color:var(--muted)} .fn2-more select,.fn2-more input{min-height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit} .fn2-note{grid-column:1 / -1} .fn2-actions{display:flex;flex-wrap:wrap;gap:8px} .fn2-actions button{min-height:36px;padding:0 12px} @media (max-width:760px){.fn2-filter{flex-basis:100%}.fn1-table,.fn1-table tbody{display:block;width:100%;max-width:100%}.fn2-grid>*,.fn2-more>*,.fn2-part input,.fn2-more select,.fn2-more input{min-width:0;max-width:100%}.fn1-table tr.fn2-editor{display:block;padding:0}.fn1-table tr.fn2-editor td{display:block;width:100%;min-width:0}.fn2-box{padding:10px;min-width:0}.fn2-title{overflow-wrap:anywhere}.fn2-grid{grid-template-columns:1fr 1fr}.fn2-part{grid-template-columns:1fr;min-width:0}.fn2-part input{width:100%}.fn2-more{grid-template-columns:1fr}.fn2-total{grid-template-columns:1fr auto}.fn2-total progress{grid-column:1 / -1}} .maptree button,.cc1-dialog button,.fn1-dialog button{min-height:34px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);padding:4px 12px;cursor:pointer;font:inherit;font-size:13px} .maptree button.primary,.cc1-dialog button.primary,.fn1-dialog button.primary{background:var(--primary);border-color:var(--primary);color:#fff} .maptree button:disabled,.cc1-dialog button:disabled,.fn1-dialog button:disabled{opacity:.55;cursor:not-allowed} .maptree .muted,.cc1-dialog .cc1-muted,.fn1-dialog .fn1-muted{color:var(--muted);font-size:13px} .maptree .error{color:var(--bad)} .maptree select,.maptree input,.maptree textarea,.cc1-dialog select,.cc1-dialog input,.fn1-dialog select,.fn1-dialog input,.fn1-dialog textarea{min-height:34px;border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;max-width:100%} .nx-dialog.nx-wide{inline-size:min(1100px,96vw);max-block-size:92vh;overflow:auto} /* G4-NX4 — the statements screens: the classic statements page in a frame of this page (public/nx/frame/) */ .nx-frame-host{display:flex;flex-direction:column;gap:8px;padding:12px 20px 0;min-width:0} .nx-frame-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .nx-frame-head h1{margin:0;font-size:20px} .nx-frame{display:block;inline-size:100%;block-size:70vh;border:0;background:var(--canvas);border-radius:var(--r)} .nx-frame-loading{visibility:hidden} @media (max-width:760px){.nx-frame-host{padding:8px 8px 0}.nx-frame-head h1{font-size:17px}} /* the side rail keeps its items whole when an open area makes it taller than the screen (it scrolls instead of squeezing the logo under the first item) */ .nx-rail>*{flex-shrink:0} /* NX5 — the general look of the approved mockup (astra-deliveries/MOCKUP-CONTINUE-20261013/work: assets/mockup.css, actions.css, nav-modes.css) on the new interface. Appended AFTER the current rules of public/nx/nx.css (the test g4nx1_new_shell pins ONE sheet, so these three nx5-*.css files are appended in this order: look → rail → auth; never bump the ?v= of index.html). No inline style anywhere (CSP style-src 'self'); every colour is a token of nx.css (--primary, --primary-2, --primary-soft, --accent, --rail, --rail-2, --rail-text, --rail-muted, data-color variants) or derived from one, so the seven colours keep working. Motion follows the Owner's rule (≤ 600 ms, GPU only) and prefers-reduced-motion (nx.css:395 already cancels every animation and transition; the rules below repeat it where a transition is the only thing drawn). */ /* ---- tokens shared by the three nx5 sheets --------------------------------------------------------------------------------------------------------- */ :root{ --nx-ease:cubic-bezier(.3,1.3,.4,1); /* nav-modes.css:2 --nm-ease (the glide, the fold handle) */ --nx-ease-soft:cubic-bezier(.2,.8,.2,1); /* --nm-ease-soft (the accordion, the icons, the popover) */ --nx-grad:linear-gradient(135deg,var(--primary),var(--accent)); /* the bright gradient of the active item (nav-modes.css:5) */ --nx-glow:#315bff66; /* --nm-glow; re-derived from --primary below where color-mix exists */ --nx-shadow:#10264144; /* --nm-shadow */ --nx-rail-line:#ffffff1f; /* --nm-line */ --nx-auth-a:#7a5cff;--nx-auth-b:#20d5f5; /* auth-skin.css:2 --au-a / --au-b (violet → cyan) — the desk colour */ --nx-auth-glow:#315bff55; /* --au-glow */ } :root:not([data-color="desk"]){--nx-auth-a:var(--primary);--nx-auth-b:var(--accent)} /* the other six colours: the gradient starts from their own primary */ @supports (color:color-mix(in srgb,#000 50%,#fff)){ :root{--nx-glow:color-mix(in srgb,var(--primary) 40%,transparent);--nx-auth-glow:color-mix(in srgb,var(--primary) 33%,transparent)} } /* ---- buttons and fields (mockup.css:2 — 44 px, radius 9, the primary hover) --------------------------------------------------------------------------- */ .nx-btn,button.nx-btn{min-height:44px;border-radius:9px;padding:9px 13px} .nx-btn.small{min-height:36px;padding:4px 10px} .nx-btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2)} .nx-field input,.nx-field select,.nx-field textarea,.nx-input{min-height:44px;padding:10px} .nx-field>span{font-size:13px} /* ---- the top bar (mockup.css:2 .period-bar — sticky, white .98, 14 px 28 px, the fields 145–310 px) ---------------------------------------------------- */ .nx-top{padding:14px 28px;gap:16px;background:rgba(255,255,255,.98);box-shadow:0 1px 0 var(--line)} .nx-top .nx-field{min-width:145px;max-width:310px} .nx-top .nx-field>span{font-size:13px;color:var(--ink)} .nx-top-tools{gap:8px} .nx-icon-btn{min-width:44px;min-height:44px;border-radius:12px;transition:background .15s,border-color .15s,transform .15s} .nx-icon-btn:hover,.nx-icon-btn:focus-visible{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)} /* the account button as the round avatar of Home-1366.png (core.js may put the first letter of the name inside ) */ .nx-icon-btn[data-nx-account]{border-radius:50%;background:var(--primary-soft);border-color:transparent;color:var(--primary-2);font-weight:700} .nx-icon-btn[data-nx-account] .nx-avatar-letter+.nx-ico{display:none} .nx-count{inset-block-start:-7px;inset-inline-end:-7px;box-shadow:0 0 0 2px #fff} /* the chip look of the Home screen (Home-1366.png: «الفترة: فبراير 2026» — label + bold value in one pill). Opt-in: core.js adds class «chips» to .nx-top */ .nx-top.chips .nx-field{flex-direction:row;align-items:center;gap:6px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 10px 0 4px} .nx-top.chips .nx-field>span{white-space:nowrap;color:var(--muted)} .nx-top.chips .nx-field>span::after{content:':'} .nx-top.chips .nx-field select{border:0;background:transparent;min-height:42px;font-weight:700;color:var(--ink);padding-inline:4px} /* ---- headings, cards, panels, tabs, tables (mockup.css:2) --------------------------------------------------------------------------------------------- */ .nx-head h1{font-size:28px;letter-spacing:-.4px} .nx-head p{font-size:14px;max-width:750px} .nx-eyebrow{letter-spacing:.5px;margin-block-end:8px} .nx-panel{padding:22px} .nx-panel-head{margin-block-end:16px} .nx-tabs{padding-block-end:10px} .nx-tabs button,.nx-tabs a{min-height:44px;padding:8px 12px} .nx-tabs [aria-selected="true"]{background:#e8eeff;color:#2347d1} :root[data-color]:not([data-color="desk"]) .nx-tabs [aria-selected="true"]{background:var(--primary-soft);color:var(--primary-2)} .nx-kpi{padding:18px;gap:10px;border-radius:12px} .nx-kpi-label{display:flex;justify-content:space-between;align-items:center;gap:8px} .nx-kpi-value{font-size:28px;letter-spacing:-.6px} /* the delta pill of Home-1366.png (optional: home.js may add 80.0% ↑ inside .nx-kpi-label) */ .nx-delta{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700;background:var(--good-soft);color:var(--good)} .nx-delta.down{background:var(--bad-soft);color:var(--bad)} .nx-delta.warn{background:var(--warn-soft);color:var(--warn)} .nx-card{transition:border-color .18s,box-shadow .18s,transform .18s} .nx-card:hover{transform:translateY(-1px)} .nx-table th,.nx-table td{padding:13px 14px;line-height:1.6} .nx-table th{white-space:nowrap} .nx-notice{line-height:1.8;font-size:14px} .nx-chip{padding:7px 10px;border-radius:8px} .nx-toast{padding:14px 20px;font-size:14px} dialog.nx-dialog{padding:26px} .nx-empty{line-height:1.8} /* ---- motion of numbers and charts on screen entry (actions.css:50-64, actions.js:91-110, components.js:3-4) ------------------------------------------ The numbers count up in JS (ui.js countUp — see PORT_PLAN.md §6); the charts only need these classes: the screen puts «nx-reveal» on the when it draws it (and again when the period changes) and «nx-mark» on every rect / circle / polyline / path. Horizontal bars drawn with a width get «nx-hbar». */ .nx-reveal rect.nx-mark{transform-box:fill-box;transform-origin:50% 100%;animation:nx-grow .5s cubic-bezier(.2,.7,.2,1) both} .nx-reveal rect.nx-mark.nx-wide{transform-origin:100% 50%;animation-name:nx-grow-x} [dir="ltr"] .nx-reveal rect.nx-mark.nx-wide{transform-origin:0 50%} .nx-reveal circle.nx-mark{transform-box:fill-box;transform-origin:50% 50%;animation:nx-pop .45s cubic-bezier(.2,.7,.2,1) both} .nx-reveal polyline.nx-mark,.nx-reveal path.nx-mark{stroke-dasharray:1;stroke-dashoffset:1;animation:nx-draw .6s ease-out both} .nx-mark{transition:opacity .16s,filter .16s} .nx-mark:hover,.nx-mark:focus-visible{filter:brightness(1.18) saturate(1.1);opacity:.85;outline:none} .nx-hbar{transform-origin:100% 50%;animation:nx-grow-x .7s cubic-bezier(.2,.7,.2,1) both} [dir="ltr"] .nx-hbar{transform-origin:0 50%} .nx-pulse{animation:nx-pulse .6s ease-out 1} .nx-counting{font-variant-numeric:tabular-nums} @keyframes nx-grow{from{transform:scaleY(.02)}to{transform:scaleY(1)}} @keyframes nx-grow-x{from{transform:scaleX(.02)}to{transform:scaleX(1)}} @keyframes nx-pop{from{transform:scale(.3);opacity:.2}to{transform:scale(1);opacity:1}} @keyframes nx-draw{to{stroke-dashoffset:0}} @keyframes nx-pulse{0%{background:var(--primary-soft)}100%{background:transparent}} /* a person's «motion off» switch (not a preference of the app yet — the hook is harmless until core.js sets html[data-motion="off"]) */ html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important} @media (prefers-reduced-motion:reduce){.nx-reveal .nx-mark,.nx-hbar,.nx-pulse,.nx-stm-chart-bar,.nx-stm-comp-part{animation:none!important}.nx-mark,.nx-icon-btn,.nx-card,.nx-stm-chart-bar,.nx-stm-comp-part{transition:none}} @media print{.nx-reveal .nx-mark,.nx-hbar{animation:none!important}} /* ---- phone widths (mockup.css:4 ≤ 700 px; the app breaks at 760 px) ---------------------------------------------------------------------------------- */ @media (max-width:760px){ .nx-top{padding:10px 14px;gap:10px} .nx-top .nx-field{min-width:calc(50% - 10px)} .nx-top .nx-field:first-child{flex-basis:100%} .nx-top.chips .nx-field{min-width:0;flex:1 1 calc(50% - 10px)} .nx-head h1{font-size:23px} .nx-kpi{padding:13px} .nx-kpi-value{font-size:24px} .nx-kpi-label{align-items:flex-start;flex-direction:column} .nx-panel{padding:16px} .nx-tabs{gap:3px}.nx-tabs button,.nx-tabs a{padding:8px 10px;font-size:13px} } /* NX5 — the side bar of the approved mockup (nav-modes.css / nav-modes.js, actions.css:111-132 / actions.js:78-89, mockup.css:2 .sidebar) on the new interface's rail markup (core.js railHtml — the markup after the changes of PORT_PLAN.md §3): ← the glowing indicator (JS moves it with CSSOM top/left/width/height) ← the round handle on the bar edge
← one row per area {icon}القوائم
← the accordion (inert when closed)
الدخل…
… {icon classic}الواجهة الحالية
orgCFO Intelligence · MASOUD X
The popover of a folded group is
appended to ; the floating dock of the «float» place is