/*
 * The theme of the panel (15 §1, D-082, D-084 approved 2026-11-05). The ONLY place a colour is written.
 *
 * 1. Tokens: --nb-<name> for light (:root) and dark (html.dark), exactly the `tokens` block of
 *    docs/engineering/15-UI-STANDARDS.md §1.2 (a test compares them value by value).
 * 2. Filament: its palettes (--gray-*, --primary-*, --danger-*, --warning-*, --success-*, --info-*, --color-white)
 *    are pointed at the tokens for each mode, so every Filament component draws with token colours only.
 * 3. A few explicit rules where a token has a fixed role (body, primary button text, field boundary, focus ring).
 */

/* ---------------------------------------------------------------- 1. tokens */
:root {
    --nb-bg: #F6F8F7;
    --nb-surface: #FFFFFF;
    --nb-surface-2: #EEF3F0;
    --nb-border: #D3DDD7;
    --nb-border-input: #7D8C84;
    --nb-text: #16211B;
    --nb-text-secondary: #4A5850;
    --nb-text-muted: #5F6E66;
    --nb-primary: #0E7A4E;
    --nb-primary-button: #0E7A4E;
    --nb-on-primary: #FFFFFF;
    --nb-primary-hover: #0A6340;
    --nb-primary-soft: #E2F3EA;
    --nb-focus: #0E7A4E;
    --nb-danger: #B42318;
    --nb-danger-soft: #FDECEA;
    --nb-warning: #9A4A05;
    --nb-warning-soft: #FEF3E2;
    --nb-temporary-bg: #F5C451;
    --nb-temporary-text: #2B2200;
    --nb-success: #05603A;
    --nb-success-soft: #E3F5EC;
    --nb-info: #1849A9;
    --nb-info-soft: #E8F0FE;
}

html.dark {
    --nb-bg: #0E1411;
    --nb-surface: #151D19;
    --nb-surface-2: #1C2621;
    --nb-border: #34433B;
    --nb-border-input: #6B7D73;
    --nb-text: #E6EEE9;
    --nb-text-secondary: #AEBDB5;
    --nb-text-muted: #93A39A;
    --nb-primary: #38C285;
    --nb-primary-button: #2E9E6C;
    --nb-on-primary: #04110A;
    --nb-primary-hover: #38C285;
    --nb-primary-soft: #173426;
    --nb-focus: #5EE0A5;
    --nb-danger: #F97066;
    --nb-danger-soft: #3A1A17;
    --nb-warning: #FDB022;
    --nb-warning-soft: #3A2A0E;
    --nb-temporary-bg: #F5C451;
    --nb-temporary-text: #2B2200;
    --nb-success: #4BD08F;
    --nb-success-soft: #12301F;
    --nb-info: #84ADFF;
    --nb-info-soft: #172540;
}

/* ---------------------------------------------------------------- 2. Filament palettes -> tokens */
:root:root {
    /* Readex Pro, served locally, with the fallback of 15 §1.4. */
    --font-family: 'Readex Pro', system-ui, "Segoe UI", Tahoma, sans-serif;
    --font-sans: 'Readex Pro', system-ui, "Segoe UI", Tahoma, sans-serif;
    --color-white: var(--nb-surface);

    --gray-50: var(--nb-bg);
    --gray-100: var(--nb-surface-2);
    --gray-200: var(--nb-border);
    --gray-300: var(--nb-border);
    --gray-400: var(--nb-text-muted);
    --gray-500: var(--nb-text-secondary);
    --gray-600: var(--nb-text-secondary);
    --gray-700: var(--nb-text);
    --gray-800: var(--nb-text);
    --gray-900: var(--nb-text);
    --gray-950: var(--nb-text);

    --primary-50: var(--nb-primary-soft);
    --primary-100: var(--nb-primary-soft);
    --primary-200: var(--nb-primary-soft);
    --primary-300: var(--nb-primary);
    --primary-400: var(--nb-primary);
    --primary-500: var(--nb-primary-hover);
    --primary-600: var(--nb-primary-button);
    --primary-700: var(--nb-primary-hover);
    --primary-800: var(--nb-primary-hover);
    --primary-900: var(--nb-primary-hover);
    --primary-950: var(--nb-primary-hover);

    --danger-50: var(--nb-danger-soft);
    --danger-100: var(--nb-danger-soft);
    --danger-200: var(--nb-danger-soft);
    --danger-300: var(--nb-danger);
    --danger-400: var(--nb-danger);
    --danger-500: var(--nb-danger);
    --danger-600: var(--nb-danger);
    --danger-700: var(--nb-danger);
    --danger-800: var(--nb-danger);
    --danger-900: var(--nb-danger);
    --danger-950: var(--nb-danger);

    --warning-50: var(--nb-warning-soft);
    --warning-100: var(--nb-warning-soft);
    --warning-200: var(--nb-warning-soft);
    --warning-300: var(--nb-warning);
    --warning-400: var(--nb-warning);
    --warning-500: var(--nb-warning);
    --warning-600: var(--nb-warning);
    --warning-700: var(--nb-warning);
    --warning-800: var(--nb-warning);
    --warning-900: var(--nb-warning);
    --warning-950: var(--nb-warning);

    --success-50: var(--nb-success-soft);
    --success-100: var(--nb-success-soft);
    --success-200: var(--nb-success-soft);
    --success-300: var(--nb-success);
    --success-400: var(--nb-success);
    --success-500: var(--nb-success);
    --success-600: var(--nb-success);
    --success-700: var(--nb-success);
    --success-800: var(--nb-success);
    --success-900: var(--nb-success);
    --success-950: var(--nb-success);

    --info-50: var(--nb-info-soft);
    --info-100: var(--nb-info-soft);
    --info-200: var(--nb-info-soft);
    --info-300: var(--nb-info);
    --info-400: var(--nb-info);
    --info-500: var(--nb-info);
    --info-600: var(--nb-info);
    --info-700: var(--nb-info);
    --info-800: var(--nb-info);
    --info-900: var(--nb-info);
    --info-950: var(--nb-info);
}

/* In dark mode Filament draws surfaces with the dark end of the gray scale and text with the light end. */
html.dark:root {
    --color-white: var(--nb-text);

    --gray-50: var(--nb-text);
    --gray-100: var(--nb-text);
    --gray-200: var(--nb-text);
    --gray-300: var(--nb-text-secondary);
    --gray-400: var(--nb-text-secondary);
    --gray-500: var(--nb-text-muted);
    --gray-600: var(--nb-border-input);
    --gray-700: var(--nb-border);
    --gray-800: var(--nb-surface-2);
    --gray-900: var(--nb-surface);
    --gray-950: var(--nb-bg);

    --primary-50: var(--nb-primary);
    --primary-100: var(--nb-primary);
    --primary-200: var(--nb-primary);
    --primary-300: var(--nb-primary-hover);
    --primary-400: var(--nb-primary);
    --primary-500: var(--nb-primary-button);
    --primary-600: var(--nb-primary-button);
    --primary-700: var(--nb-primary-soft);
    --primary-800: var(--nb-primary-soft);
    --primary-900: var(--nb-primary-soft);
    --primary-950: var(--nb-primary-soft);

    --danger-700: var(--nb-danger-soft);
    --danger-800: var(--nb-danger-soft);
    --danger-900: var(--nb-danger-soft);
    --danger-950: var(--nb-danger-soft);
    --warning-700: var(--nb-warning-soft);
    --warning-800: var(--nb-warning-soft);
    --warning-900: var(--nb-warning-soft);
    --warning-950: var(--nb-warning-soft);
    --success-700: var(--nb-success-soft);
    --success-800: var(--nb-success-soft);
    --success-900: var(--nb-success-soft);
    --success-950: var(--nb-success-soft);
    --info-700: var(--nb-info-soft);
    --info-800: var(--nb-info-soft);
    --info-900: var(--nb-info-soft);
    --info-950: var(--nb-info-soft);
}

/* ---------------------------------------------------------------- 3. fixed roles */
html.fi body.fi-body {
    background-color: var(--nb-bg);
    color: var(--nb-text);
    font-size: 16px;
}

/* Primary buttons: the button token and its own text colour in both modes (15 §1.2). */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background-color: var(--nb-primary-button);
    color: var(--nb-on-primary);
}
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) :is(svg, .fi-icon) {
    color: var(--nb-on-primary);
}
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--nb-primary-hover);
}
html.dark .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--nb-primary-hover);
    color: var(--nb-on-primary);
}

/* «(P1-14 review fixes)» Filled danger buttons: Filament fills them with its shade 400 and writes its shade 950 on it, and
   the theme gives both shades the danger token, so the label was danger on danger (seen on «رجّع البيانات لأولها»). The fill
   is the danger token and the text the surface token in both modes: the pair «danger on surface» that
   tools/check_ui_contrast.py checks (15 §1.2). */
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link),
html.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) {
    background-color: var(--nb-danger);
    color: var(--nb-surface);
}
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) :is(svg, .fi-icon),
html.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) :is(svg, .fi-icon) {
    color: var(--nb-surface);
}
.fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link):hover,
html.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--nb-danger);
    color: var(--nb-surface);
    filter: brightness(0.92);
}

/* «(DEF-001, JRN-1 on the gate run, 2026-11-13)» Coloured badges (the «نشط» status and the rest): Filament writes the
   label in one of its shades 600–950 chosen per palette, and in the dark mode the theme gives shades 700–950 the soft
   (background) token, so the label was the soft token on a 10% wash of the colour: 1.47:1 measured on «نشط». The badge
   is the soft token with the colour token on it in both modes: the pairs «success on success-soft», «danger on
   danger-soft», «warning on warning-soft», «info on info-soft» and «primary on primary-soft» that
   tools/check_ui_contrast.py checks (15 §1.2). «مؤقت» keeps its own badge (.nb-badge-temporary). */
.fi-badge.fi-color-success,
html.dark .fi-badge.fi-color-success {
    background-color: var(--nb-success-soft);
    --text: var(--nb-success);
    --dark-text: var(--nb-success);
    color: var(--nb-success);
}
.fi-badge.fi-color-danger,
html.dark .fi-badge.fi-color-danger {
    background-color: var(--nb-danger-soft);
    --text: var(--nb-danger);
    --dark-text: var(--nb-danger);
    color: var(--nb-danger);
}
.fi-badge.fi-color-warning,
html.dark .fi-badge.fi-color-warning {
    background-color: var(--nb-warning-soft);
    --text: var(--nb-warning);
    --dark-text: var(--nb-warning);
    color: var(--nb-warning);
}
.fi-badge.fi-color-info,
html.dark .fi-badge.fi-color-info {
    background-color: var(--nb-info-soft);
    --text: var(--nb-info);
    --dark-text: var(--nb-info);
    color: var(--nb-info);
}
.fi-badge.fi-color-primary,
html.dark .fi-badge.fi-color-primary {
    background-color: var(--nb-primary-soft);
    --text: var(--nb-primary);
    --dark-text: var(--nb-primary);
    color: var(--nb-primary);
}

/* Sizes (15 §1.5, D-084): fields and buttons 44px high; icon buttons 44 × 44 (touch); compact 36px row buttons
   are for tables on a computer only and come with the first table. */
.fi-btn,
.nb-branch-select {
    min-height: 44px;
}
.fi-input-wrp .fi-input,
.fi-input-wrp select {
    min-height: 44px;
}
/* Choices: the whole row is the touch target (the radio itself stays its usual size). */
label:has(> .fi-radio-input),
label:has(> .fi-checkbox-input) {
    min-height: 44px;
    display: flex;
    align-items: center;
}
/* The toggle keeps its look; an invisible margin makes its touch target 44px high. */
.fi-toggle { position: relative; }
.fi-toggle::after { content: ''; position: absolute; inset: -10px 0; }
.fi-icon-btn,
.fi-user-menu-trigger {
    min-width: 44px;
    min-height: 44px;
}
.fi-user-menu-trigger { display: inline-flex; align-items: center; justify-content: center; }
/* «(P1-15 batch 2, final review ui_text_docs-8)» Link-style actions — «تعديل» on a row, «إيقاف المقاس» next to «حذف المقاس» —
   are a text line high in Filament; on a phone (15 §2) each gets a 44 × 44 target, and the inline padding keeps neighbours apart. */
.fi-ta-actions .fi-link,
.fi-ac .fi-link {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 8px;
}
/* Filament pins the label to the baseline, which in a 44px box sits it at the top: centred, like the icon next to it. */
.fi-ta-actions .fi-link > .fi-link-label,
.fi-ac .fi-link > .fi-link-label {
    align-self: center;
}

/* Text in fields is body text, 16px (15 §1.5); below 16px phones zoom the page when a field is focused. */
.fi-input,
.fi-select-input,
.nb-branch-select {
    font-size: 16px;
}

/* Everything clickable shows it (ui-ux-pro-max: cursor-pointer). */
.nb-branch-select,
.nb-theme-toggle {
    cursor: pointer;
}

/* Field boundary ≥ 3:1 on its surface (15 §1.3). */
.fi-input-wrp {
    box-shadow: 0 0 0 1px var(--nb-border-input);
    background-color: var(--nb-surface);
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px var(--nb-focus);
}

/* A visible focus ring everywhere: 2px + 2px offset (15 §1.13). */
:focus-visible {
    outline: 2px solid var(--nb-focus);
    outline-offset: 2px;
}

/* Numbers in tables and figures: the fallback stack has tabular digits (Readex Pro has no tnum, 15 §1.4). */
.nb-num,
.fi-ta-text-item-label.fi-numeric {
    font-family: system-ui, "Segoe UI", Tahoma, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* «مؤقت» badge: the same yellow in both modes (15 §1.2). */
.nb-badge-temporary {
    background-color: var(--nb-temporary-bg);
    color: var(--nb-temporary-text);
    border-radius: 6px;
    padding: 0 8px;
}

/* Cards and read-only details of the platform pages (15 §1.7). */
.nb-card {
    background-color: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: 10px;
    padding: 16px;
    max-width: 960px;
}
@media (min-width: 1024px) {
    .nb-card { padding: 24px; }
}
.nb-card-title { font-size: 18px; font-weight: 600; margin-block-end: 16px; color: var(--nb-text); }
.nb-subtitle { font-size: 16px; font-weight: 600; margin-block: 16px 8px; }
.nb-subtitle-sm { font-size: 14px; font-weight: 600; margin-block: 12px 4px; color: var(--nb-text-secondary); }
.nb-details { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 8px 16px; }
.nb-details dt { color: var(--nb-text-secondary); font-size: 14px; }
.nb-details dd { color: var(--nb-text); margin: 0; overflow-wrap: anywhere; }
.nb-list { list-style: disc; padding-inline-start: 24px; }
/* Readable line length for running text (ui-ux-pro-max: line-length 65-75 characters). */
.nb-list li,
.nb-hint,
.nb-sidebar-empty { max-inline-size: 70ch; }
.nb-sidebar-empty { padding: 16px; font-size: 14px; color: var(--nb-text-secondary); }
.nb-hint { color: var(--nb-text-muted); font-size: 14px; margin-block-start: 12px; }
.nb-permissions { margin-block-start: 12px; }
.nb-permissions summary { cursor: pointer; color: var(--nb-primary); min-height: 44px; display: flex; align-items: center; }
.nb-permissions ul { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.nb-permissions code { font-size: 12px; background: var(--nb-surface-2); border-radius: 6px; padding: 2px 8px; }

/* Top bar: active branch and theme button (15 §17.2). */
.nb-branch-switcher { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nb-text-secondary); }
.nb-branch-select {
    min-height: 44px;
    border-radius: 6px;
    border: 1px solid var(--nb-border-input);
    background-color: var(--nb-surface);
    color: var(--nb-text);
    padding-inline: 8px;
}
.nb-branch-name { color: var(--nb-text); }
.nb-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border-radius: 6px; color: var(--nb-text-secondary);
}
.nb-theme-toggle:hover { background-color: var(--nb-surface-2); color: var(--nb-text); }
@media (max-width: 640px) {
    .nb-branch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Footer: version and build date (15 §17.9). */
.nb-footer { padding: 16px; font-size: 12px; color: var(--nb-text-muted); text-align: center; }

/* Skeleton for lists and cards while they load (15 §1.9). */
.nb-skeleton { background-color: var(--nb-surface-2); border-radius: 6px; min-height: 16px; }
.nb-skeleton-pulse { animation: nb-pulse 1.5s ease-in-out infinite; }
@keyframes nb-pulse { 50% { opacity: 0.55; } }

/* Empty state (15 §1.12). */
.nb-empty { display: grid; justify-items: center; gap: 12px; padding: 32px 16px; text-align: center; color: var(--nb-text-secondary); }
.nb-empty svg { width: 32px; height: 32px; color: var(--nb-text-muted); }

/* Screen-reader-only live region for failures (aria-live="assertive", 15 §1.10). */
.nb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Toasts: top at the reading end on a computer, bottom and full width on a phone (15 §1.10). */
@media (max-width: 640px) {
    .fi-no { inset-block-start: auto !important; inset-block-end: 0 !important; inset-inline: 0 !important; }
}

/* No decorative motion (15 §1.9): the page appears at once instead of fading in. */
.fi-main-ctn { transition: none; }

/* Honour the user's setting for any remaining motion (15 §1.9). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* «(P1-14)» The demo band (E-03): on every page of the demo, never in production; the reset link for its key holders. */
.nb-demo-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
    padding: 6px 16px; background-color: var(--nb-warning-soft); color: var(--nb-warning);
    border-block-end: 1px solid var(--nb-warning); font-weight: 600; text-align: center;
}
.nb-demo-band__action {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px;
    color: inherit; text-decoration: underline; text-underline-offset: 3px; border-radius: 6px;
}
.nb-demo-band__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nb-demo-reset-explain { border-inline-start: 4px solid var(--nb-danger); padding: 12px 16px; background-color: var(--nb-surface-2); border-radius: 6px; }
.nb-demo-reset-explain ul { margin-block-start: 8px; padding-inline-start: 20px; list-style: disc; }
/* «(P1-14 review fixes)» The sign-in notice of a reset that stopped part-way (role=alert; 15 §7). The command stays one unbroken line. */
.nb-demo-reset-stopped { border-inline-start: 4px solid var(--nb-danger); padding: 12px 16px; background-color: var(--nb-danger-soft); border-radius: 6px; overflow-wrap: anywhere; }

/* «(P1-15, 2026-11-07)» The settings centre and the cash accounts (the approved mockup docs/requirements/تصور-مركز-الإعدادات-P1-15.html).
   Tokens only; touch targets 44px; tables become stacked cards below 640px (15 §11, TECH-UI-13); no fixed width. */
.nb-sc-intro { margin-block: 0 8px; }
.nb-sc-layout { display: grid; gap: 16px; }
@media (min-width: 1024px) {
    .nb-sc-layout { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: start; }
    .nb-sc-group-select { display: none; }
}
@media (max-width: 1023px) {
    .nb-sc-group-list { display: none; }
}
.nb-sc-groups { background-color: var(--nb-surface); border: 1px solid var(--nb-border); border-radius: 10px; padding: 12px; }
.nb-sc-group-list { display: grid; gap: 4px; }
.nb-sc-group {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px;
    border-radius: 6px; color: var(--nb-text); text-decoration: none;
}
.nb-sc-group:hover { background-color: var(--nb-surface-2); }
.nb-sc-group.is-current { background-color: var(--nb-primary-soft); color: var(--nb-text); font-weight: 600; box-shadow: inset -3px 0 0 var(--nb-primary); }
.nb-sc-group-counts { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: var(--nb-text-secondary); }
.nb-sc-main { background-color: var(--nb-surface); border: 1px solid var(--nb-border); border-radius: 10px; padding: 16px; min-inline-size: 0; }
@media (min-width: 1024px) { .nb-sc-main { padding: 24px; } }
.nb-sc-summary { margin-block: -8px 12px; }
.nb-sc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.nb-field-label { display: block; font-size: 14px; font-weight: 600; color: var(--nb-text-secondary); margin-block-end: 4px; }
.nb-field-inline { display: grid; gap: 4px; }
.nb-input, .nb-select {
    min-height: 44px; inline-size: 100%; font-size: 16px; border-radius: 6px; padding: 8px 12px;
    border: 1px solid var(--nb-border-input); background-color: var(--nb-surface); color: var(--nb-text);
}
.nb-input:focus-visible, .nb-select:focus-visible { outline: 2px solid var(--nb-focus); outline-offset: 2px; }
.nb-input[aria-invalid="true"], .nb-select[aria-invalid="true"] { border-color: var(--nb-danger); }
.nb-textarea { min-height: 88px; }
.nb-file { padding-block: 8px; }
.nb-search { position: relative; flex: 1 1 16rem; max-inline-size: 24rem; }
.nb-search .nb-input { padding-inline-start: 40px; }
.nb-search-icon { position: absolute; inset-inline-start: 12px; inset-block-start: 12px; width: 20px; height: 20px; color: var(--nb-text-muted); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-chip {
    min-height: 44px; padding-inline: 16px; border-radius: 6px; border: 1px solid var(--nb-border-input);
    background-color: var(--nb-surface); color: var(--nb-text); cursor: pointer; font-size: 14px;
}
.nb-chip:hover { background-color: var(--nb-surface-2); }
.nb-chip.is-on { background-color: var(--nb-primary-soft); border-color: var(--nb-primary); color: var(--nb-text); font-weight: 600; }

/* Badges: a word and an icon next to the colour, never the colour alone (15 §1.2, §1.14). */
.nb-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 0 8px; font-size: 14px; line-height: 1.6; }
.nb-badge-approved { background-color: var(--nb-success-soft); color: var(--nb-success); }
.nb-badge-missing { background-color: var(--nb-danger-soft); color: var(--nb-danger); }
.nb-badge-info { background-color: var(--nb-info-soft); color: var(--nb-info); }
.nb-badge-warning { background-color: var(--nb-warning-soft); color: var(--nb-warning); }
.nb-badge-muted { background-color: var(--nb-surface-2); color: var(--nb-text-secondary); }
.nb-ico { width: 16px; height: 16px; flex: none; }

/* Data tables (15 §1.6): header on surface-2, rows 14px, numbers aligned to the left with tabular digits. */
.nb-dt-wrap { overflow-x: auto; border: 1px solid var(--nb-border); border-radius: 10px; background-color: var(--nb-surface); }
.nb-dt { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.nb-dt caption.nb-subtitle { text-align: start; padding: 12px 16px 0; }
.nb-dt th, .nb-dt td { padding: 12px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--nb-border); color: var(--nb-text); }
.nb-dt thead th { background-color: var(--nb-surface-2); color: var(--nb-text-secondary); font-weight: 600; }
.nb-dt tbody tr:hover { background-color: var(--nb-surface-2); }
.nb-dt tbody th { font-weight: 600; }
.nb-dt-num { text-align: end; white-space: nowrap; }
.nb-dt td.nb-dt-num, .nb-dt th.nb-dt-num { text-align: left; }
.nb-dt-empty { color: var(--nb-text-muted); }
.nb-dt-actions-in { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-sc-label { display: block; }
.nb-sc-note, .nb-sc-version { display: block; margin-block-start: 4px; }
.nb-sc-values .nb-badge-info { margin-block-start: 4px; flex-wrap: wrap; }
.nb-sc-reason { display: block; color: var(--nb-text-secondary); }
/* «(ISS-067 (أ))» «استعادة السعر الملغى» / «استعادة القيمة الملغاة»: the button under a cancel line of a log, and its reason form. */
.nb-sc-line-action { margin-block-start: 8px; }
.nb-sc-restore { border-radius: 6px; padding: 12px 16px; border-inline-start: 4px solid var(--nb-info); background-color: var(--nb-info-soft); }
.nb-code { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }
@media (max-width: 640px) {
    .nb-dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .nb-dt, .nb-dt tbody, .nb-dt tr, .nb-dt th, .nb-dt td { display: block; inline-size: 100%; }
    .nb-dt tr { border-block-end: 1px solid var(--nb-border); padding-block: 8px; }
    .nb-dt th, .nb-dt td { border: 0; padding: 4px 16px; }
    .nb-dt td::before, .nb-dt tbody th::before { content: attr(data-label); display: block; font-size: 12px; color: var(--nb-text-secondary); font-weight: 400; }
    .nb-dt td.nb-dt-num { text-align: start; }
    .nb-dt-empty { display: none; }
}

/* Forms of the screens (15 §5): one column, the error next to its field, the actions at the end. */
.nb-sc-editor { margin-block-start: 16px; max-width: none; }
.nb-form { display: grid; gap: 16px; }
.nb-field { display: grid; gap: 4px; border: 0; padding: 0; margin: 0; }
.nb-choices { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.nb-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.nb-choice input { width: 20px; height: 20px; accent-color: var(--nb-primary); }
.nb-input-unit { display: flex; align-items: center; gap: 8px; max-inline-size: 20rem; }
.nb-unit { color: var(--nb-text-secondary); white-space: nowrap; }
.nb-field-error { color: var(--nb-danger); font-size: 14px; }
.nb-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nb-alert { border-radius: 6px; padding: 12px 16px; border-inline-start: 4px solid var(--nb-info); background-color: var(--nb-info-soft); color: var(--nb-text); display: grid; gap: 8px; justify-items: start; }
.nb-alert-danger { border-color: var(--nb-danger); background-color: var(--nb-danger-soft); }
.nb-alert-success { border-color: var(--nb-success); background-color: var(--nb-success-soft); }
.nb-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 12px; }

/* The transfer preview: the item of the demo and the item here side by side (D-113 item 4). */
.nb-sc-transfer { display: grid; gap: 16px; }
.nb-tp-list { display: grid; gap: 12px; }
.nb-tp-row { border: 1px solid var(--nb-border); border-radius: 10px; padding: 12px 16px; display: grid; gap: 12px; }
.nb-tp-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.nb-tp-title { font-weight: 600; }
.nb-tp-sides { display: grid; gap: 12px; }
@media (min-width: 768px) { .nb-tp-sides { grid-template-columns: 1fr 1fr; } }
.nb-tp-side { background-color: var(--nb-surface-2); border-radius: 6px; padding: 8px 12px; display: grid; gap: 4px; }
.nb-tp-side .nb-hint, .nb-tp-candidate .nb-hint { margin: 0; display: block; }
.nb-item { display: block; }
.nb-tp-candidates ul { display: grid; gap: 8px; }
.nb-tp-candidate { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; border-block-start: 1px solid var(--nb-border); padding-block-start: 8px; }
/* «(P1-15 review fixes)» What changed since the link was saved (a row stopped for review). */
.nb-tp-changes { display: grid; gap: 4px; border-inline-start: 4px solid var(--nb-warning); padding-inline-start: 12px; }
.nb-tp-changes ul { display: grid; gap: 4px; list-style: disc; padding-inline-start: 20px; margin: 0; }

/* One cash box (questions 7 and 9). */
.nb-ca-box { display: grid; gap: 8px; justify-items: start; max-width: none; }
.nb-ca-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--nb-text-secondary); }
.nb-ca-figure { display: grid; gap: 4px; }
.nb-ca-figure dt { color: var(--nb-text-secondary); font-size: 14px; }
.nb-ca-figure dd { font-size: 22px; font-weight: 600; margin: 0; }

/* «(P1-15, 2026-11-07)» The users and roles screens (the approved mockup docs/requirements/تصور-شاشة-المستخدمين-والأدوار-P1-15.html).
   They reuse the shared classes above (nb-dt, nb-alert, nb-badge, nb-choice, nb-input); only what is theirs is here. Tokens only. */
.nb-alert-warning { border-color: var(--nb-warning); background-color: var(--nb-warning-soft); }
.nb-user-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.nb-user-head .nb-hint { margin: 0; }
.nb-link {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--nb-primary);
    text-decoration: underline; text-underline-offset: 3px; border-radius: 6px;
}
.nb-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-block-end: 1px solid var(--nb-border); }
.nb-tab {
    min-height: 44px; padding-inline: 16px; border: 0; background: none; color: var(--nb-text-secondary); cursor: pointer;
    font-size: 16px; border-block-end: 3px solid transparent; margin-block-end: -1px;
}
.nb-tab:hover { color: var(--nb-text); }
.nb-tab[aria-selected="true"] { color: var(--nb-text); font-weight: 600; border-block-end-color: var(--nb-primary); }
.nb-preview { display: grid; gap: 8px; }
.nb-preview__yes { color: var(--nb-success); font-weight: 600; }
.nb-preview__no { color: var(--nb-text-muted); font-weight: 600; }
.nb-matrix-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; }
.nb-matrix-tools .nb-field { flex: 1 1 16rem; max-inline-size: 24rem; }
.nb-domain { background-color: var(--nb-surface); border: 1px solid var(--nb-border); border-radius: 10px; }
.nb-domain__summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 16px;
    cursor: pointer; font-weight: 600; color: var(--nb-text);
}
.nb-domain[open] > .nb-domain__summary { border-block-end: 1px solid var(--nb-border); }
.nb-domain .nb-dt-wrap { border: 0; border-radius: 0 0 10px 10px; }
.nb-matrix td { white-space: normal; }
.nb-matrix .nb-choice { min-width: 44px; justify-content: flex-start; margin-inline-end: 12px; }
.nb-matrix__row--changed th { box-shadow: inset -3px 0 0 var(--nb-warning); }
.nb-matrix__note { font-size: 12px; color: var(--nb-text-secondary); }
/* «(P1-15 final review, C6)» The approved qualifier under a row's title in the roles matrix (D-110, D-115 item 10). Tokens only. */
.nb-matrix__qualifier { display: block; margin-block-start: 4px; font-size: 14px; font-weight: 400; color: var(--nb-text-secondary); white-space: normal; }
/* «(P1-15 final review, C7/C8)» «الحسابات النقدية»: the «الفرع» filter beside the search, its label on the same line (the mockup §4);
   «الملف الشخصي»: the permissions by their names, grouped by domain (no key code is shown, 17). Tokens only. */
.nb-ca-toolbar { justify-content: flex-start; }
.nb-ca-branch { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; max-inline-size: 100%; }
.nb-ca-branch .nb-field-label { margin: 0; white-space: nowrap; }
.nb-ca-branch .nb-select { inline-size: auto; min-inline-size: 10rem; max-inline-size: 100%; }
.nb-permissions li { font-size: 14px; color: var(--nb-text); background: var(--nb-surface-2); border-radius: 6px; padding: 2px 8px; }
/* «(P1-15 final review, C8)» A key's approved qualifier on its own line inside its name on «الملف الشخصي», as the roles screen
   shows it under the row (D-115 item 10, D-110 items 3 and 4). Tokens only. */
.nb-permissions__qualifier { display: block; font-size: 13px; color: var(--nb-text-secondary); }
/* «(MVP-01)» A work order's page, a receipt and a customer statement (15 §4, §10): the order's facts and the money figures in a
   grid that folds to one column on a phone; «المتبقي» stands out as the figure to act on; the delivered quantities of a delivery
   note as chips. Tokens only; no fixed width wider than a phone. */
.nb-wo-facts, .nb-wo-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px 24px; margin: 0; }
.nb-wo-facts dt, .nb-wo-figures dt { font-size: 13px; color: var(--nb-text-secondary); margin-block-end: 2px; }
.nb-wo-facts dd, .nb-wo-figures dd { margin: 0; color: var(--nb-text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nb-wo-figures dd { font-size: 18px; font-weight: 600; }
.nb-wo-wide { grid-column: 1 / -1; }
.nb-wo-due dd { color: var(--nb-primary); }
.nb-wo-item { display: inline-block; margin-inline-end: 8px; padding: 0 6px; border-radius: 6px; background-color: var(--nb-surface-2); }
.nb-wo-none { color: var(--nb-text-secondary); }
.nb-st-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.nb-st-balance strong { font-size: 22px; color: var(--nb-text); }
.nb-st-pick { max-inline-size: 32rem; }
/* «(MVP-03)» The quick sale's total said as a status, its receipt, and «تقرير مختصر»: two figure cards side by side from a tablet up,
   one column on a phone; a cash figure names what it is under the number. Tokens only; no fixed width wider than a phone. */
.nb-qs-total { font-size: 22px; color: var(--nb-text); }
.nb-qs-lines { margin-block: 16px; }
.nb-qs-paid strong { color: var(--nb-primary); }
.nb-sr-filters { max-inline-size: 48rem; }
.nb-sr-period { margin-block: 0; }
.nb-sr-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .nb-sr-grid { grid-template-columns: 1fr 1fr; } }
.nb-sr-label { display: block; font-size: 12px; font-weight: 400; color: var(--nb-text-secondary); }
.nb-dt tfoot th, .nb-dt tfoot td { background-color: var(--nb-surface-2); font-weight: 600; }