:root {
    color-scheme: light;
    --color-primary: #0b5cad;
    --color-primary-hover: #084a8d;
    --color-secondary: #128142;
    --color-bg: #eef3f8;
    --color-bg-soft: #e2eaf3;
    --color-surface: #ffffff;
    --color-surface-raised: #f7fafd;
    --color-surface-muted: #e8eef5;
    --color-sidebar: #ffffff;
    --color-border: #c5d1df;
    --color-border-strong: #8fa3b8;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-input-bg: #f8fafc;
    --color-hover: #e8f0f8;
    --color-active: #dce8f4;
    --color-table-header: #e8eef5;
    --color-table-row-hover: #edf4fa;
    --color-disabled-bg: #e4eaf1;
    --color-disabled-text: #5b687a;
    --color-disabled-border: #aebdcd;
    --color-focus-ring: rgb(11 92 173 / 0.28);
    --color-modal-backdrop: rgb(15 23 42 / 0.58);
    --color-on-solid: #ffffff;
    --color-danger: #b91c1c;
    --color-warning: #a16207;
    --color-success: #15803d;
    --shadow-card: 0 12px 32px rgb(15 23 42 / 0.12);
    --radius-card: 1rem;
    --topbar-height: 4.5rem;
}

:root.dark {
    color-scheme: dark;
    --color-primary: #38bdf8;
    --color-primary-hover: #7dd3fc;
    --color-secondary: #34d399;
    --color-bg: #0b1120;
    --color-bg-soft: #111827;
    --color-surface: #111827;
    --color-surface-raised: #172033;
    --color-surface-muted: #1d293b;
    --color-sidebar: #0f172a;
    --color-border: #263449;
    --color-border-strong: #334155;
    --color-text: #f8fafc;
    --color-text-muted: #a7b3c6;
    --color-input-bg: #111827;
    --color-hover: #172033;
    --color-active: #1d293b;
    --color-table-header: #172033;
    --color-table-row-hover: #172033;
    --color-disabled-bg: #1d293b;
    --color-disabled-text: #94a3b8;
    --color-disabled-border: #3b4a60;
    --color-focus-ring: rgb(56 189 248 / 0.28);
    --color-modal-backdrop: rgb(2 6 23 / 0.72);
    --color-on-solid: #ffffff;
    --color-danger: #fb7185;
    --color-warning: #fbbf24;
    --color-success: #34d399;
    --shadow-card: 0 18px 45px rgb(0 0 0 / 0.22);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 28%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
    color: var(--color-text);
    font-feature-settings: "tnum";
}

a,
button,
input,
select,
textarea,
summary {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.password-toggle-field input {
    padding-left: 3rem !important;
}

.password-toggle-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    left: .45rem;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
}

.password-toggle-button:hover,
.password-toggle-button:focus-visible {
    color: var(--color-text);
}

.password-toggle-button svg {
    height: 1.15rem;
    width: 1.15rem;
}

.app-shell {
    display: block;
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 70;
    display: flex;
    width: min(88vw, 22rem);
    max-width: calc(100vw - 1rem);
    flex-direction: column;
    border-left: 1px solid var(--color-border);
    /* Fully opaque: page text must never show through the open menu.  (The previous
       color-mix() was also dropped entirely by WebViews without color-mix support,
       leaving a transparent sidebar on some phones.) */
    background: var(--color-sidebar);
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
    transform: translateX(105%);
    transition: transform .22s ease;
}

.sidebar-open,
.mobile-sidebar-open {
    overflow: hidden;
}

.sidebar-open .app-sidebar,
.mobile-sidebar-open .app-sidebar {
    transform: translateX(0);
}

.app-sidebar-scroll {
    min-height: 0;
    overflow-y: auto;
    /* Room on both edges so section borders and focus rings are never clipped by the scroller. */
    padding-inline: .2rem .25rem;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    padding: .65rem;
    transition: background .2s ease, border-color .2s ease;
}

.brand-link:hover {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.brand-logo {
    height: 3.25rem;
    width: 3.25rem;
    flex: none;
    border-radius: .9rem;
    object-fit: contain;
}

.brand-mark {
    display: grid;
    height: 3.25rem;
    width: 3.25rem;
    flex: none;
    place-items: center;
    border-radius: .9rem;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-on-solid);
    font-weight: 800;
}

.brand-eyebrow {
    color: var(--color-secondary);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.brand-title {
    margin-top: .15rem;
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 800;
}

.app-main {
    min-width: 0;
    width: 100%;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-height);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    padding: 1rem clamp(1rem, 3vw, 2rem);
    backdrop-filter: blur(14px);
}

.app-content {
    padding: clamp(1rem, 3vw, 2rem);
}

.topbar-user-caption {
    color: var(--color-text-muted);
}

.topbar-user-summary {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.nav-section {
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
    border-radius: 1rem;
    padding: .65rem;
}

.nav-section > summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    border-radius: .8rem;
    padding: .65rem .75rem;
    color: var(--color-text-muted);
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: 0;
}

.nav-section > summary::-webkit-details-marker {
    display: none;
}

.nav-link {
    display: block;
    border-radius: .8rem;
    border: 1px solid transparent;
    padding: .78rem .9rem;
    color: var(--color-text);
    font-size: .98rem;
    font-weight: 700;
    transition: all .18s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}

.nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

/* Count chip inside a sidebar link (warehouse task queues). Inherits the theme tokens, so it
   reads correctly in both light and dark. */
.nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    margin-inline-start: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.5;
}

.icon-button,
.theme-button,
.topbar-button {
    display: inline-grid;
    min-height: 2.5rem;
    min-width: 2.5rem;
    place-items: center;
    border-radius: .8rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text);
    padding: .5rem;
    font-size: .85rem;
    font-weight: 700;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.icon-button svg,
.theme-button svg,
.topbar-button svg {
    height: 1.15rem;
    width: 1.15rem;
}

.dark .theme-icon-moon,
.theme-icon-sun {
    display: none;
}

.dark .theme-icon-sun {
    display: block;
}

.icon-button:hover,
.theme-button:hover,
.topbar-button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    color: var(--color-primary);
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    padding: .65rem 1rem;
    font-weight: 750;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-solid);
}

.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-on-solid);
}

.btn-danger {
    border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent);
    color: var(--color-danger);
}

.btn-ghost {
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn-primary:hover,
.btn-secondary:hover {
    filter: brightness(.94);
}

.btn-danger:hover,
.btn-ghost:hover {
    background: var(--color-hover);
    border-color: var(--color-border-strong);
}

button:disabled {
    cursor: not-allowed;
    background-color: var(--color-disabled-bg) !important;
    color: var(--color-disabled-text) !important;
    border-color: var(--color-disabled-border) !important;
    opacity: 1 !important;
}

[aria-disabled="true"]:not(button) {
    cursor: not-allowed;
    opacity: .72 !important;
}

.ui-card,
.card,
article,
section.rounded-2xl,
section.rounded-3xl,
div.rounded-2xl,
div.rounded-3xl {
    border-color: var(--color-border);
}

.ui-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="file"],
select,
textarea {
    border-color: var(--color-border) !important;
    background: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    min-height: 2.75rem;
}

input[type="file"] {
    direction: rtl;
    padding: .55rem .75rem;
}

/* Stored-file widget (core.forms.SafeClearableFileInput): a long stored/selected file name
   wraps and clamps to two lines instead of widening the form column on a phone. */
.safe-file-input {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .8rem;
    color: var(--color-text-muted);
}

.safe-file-input a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-all;
    direction: ltr;
    text-align: start;
    color: var(--color-primary);
}

.safe-file-input input[type="file"] {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type="file"]::file-selector-button {
    margin-left: .75rem;
    border: 0;
    border-radius: .7rem;
    background: var(--color-primary);
    color: var(--color-on-solid);
    padding: .55rem .85rem;
    font-weight: 800;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    background: var(--color-disabled-bg) !important;
    color: var(--color-disabled-text) !important;
    border-color: var(--color-disabled-border) !important;
    opacity: 1;
}

input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--color-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
}

input:invalid:not(:placeholder-shown),
select:invalid,
textarea:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

label {
    color: var(--color-text);
}

.message {
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: .85rem 1rem;
}

.message-success {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}

.message-error {
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

.message-warning {
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
}

.notification-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}

.notification-item {
    border-color: var(--color-border);
}

.notification-unread {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    /* A dark overlay in both themes behind the open menu. */
    background: rgb(2 6 23 / 0.62);
    backdrop-filter: blur(2px);
}

.sidebar-open .sidebar-backdrop,
.mobile-sidebar-open .sidebar-backdrop {
    display: block;
}

.table-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.responsive-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
}

.responsive-table-scroll table {
    width: max-content;
    min-width: var(--table-min-width, 52rem);
    max-width: none;
}

.responsive-table-scroll table.table-compact {
    --table-min-width: 44rem;
}

.responsive-table-scroll table.table-medium {
    --table-min-width: 64rem;
}

.responsive-table-scroll table.table-wide {
    --table-min-width: 86rem;
}

/* Supplier ledger: preserve its mobile scrolling layout while allowing the
   notes cell to absorb the available desktop card width. */
.supplier-ledger-table {
    min-width: 760px;
}

@media (min-width: 1200px) {
    .supplier-ledger-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .supplier-ledger-table {
        width: 100%;
        min-width: 100%;
        table-layout: auto;
    }

    .supplier-ledger-table .supplier-ledger-date,
    .supplier-ledger-table .supplier-ledger-reference,
    .supplier-ledger-table .supplier-ledger-amount,
    .supplier-ledger-table .supplier-ledger-action {
        width: 1%;
        white-space: nowrap;
    }

    .supplier-ledger-table .supplier-ledger-amount {
        direction: ltr;
        unicode-bidi: plaintext;
    }

    .supplier-ledger-table .supplier-ledger-notes {
        width: 100%;
        min-width: 16rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .supplier-ledger-table .supplier-ledger-action-links {
        white-space: nowrap;
    }
}

.form-page-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.form-page-container-narrow {
    width: 100%;
    max-width: 1024px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .responsive-table-scroll table,
    .responsive-table-scroll table.table-compact,
    .responsive-table-scroll table.table-medium,
    .responsive-table-scroll table.table-wide {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 1023px) {
    .app-shell {
        display: block;
    }

    .app-content {
        padding: 1rem;
    }

    .app-topbar {
        padding: .85rem 1rem;
    }

    table {
        font-size: .82rem;
    }

    th,
    td {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .app-topbar h2 {
        font-size: 1rem;
    }

    .app-topbar form {
        margin: 0;
    }

    .notification-menu {
        position: fixed !important;
        top: calc(var(--topbar-height) + .5rem) !important;
        right: .75rem !important;
        left: .75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - var(--topbar-height) - 1.5rem);
        overflow: hidden;
    }

    .notification-menu-body {
        max-height: calc(100vh - var(--topbar-height) - 8rem);
        overflow-y: auto;
    }
}

@media (max-width: 639px) {
    .mobile-stack {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        table-layout: fixed;
    }

    .mobile-stack thead {
        display: none;
    }

    .mobile-stack tbody {
        display: block;
    }

    .mobile-stack tr {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: .55rem;
        border-bottom: 1px solid var(--color-border);
        padding: .9rem;
    }

    .mobile-stack tr:last-child {
        border-bottom: 0;
    }

    .mobile-stack td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        white-space: normal;
        padding: 0 !important;
        text-align: start;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-stack td > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .mobile-stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 7.5rem;
        color: var(--color-text-muted);
        font-size: .78rem;
        font-weight: 800;
    }

    .mobile-stack td[colspan] {
        display: block;
        text-align: center;
    }

    .mobile-stack td[colspan]::before {
        content: "";
        display: none;
    }

    /* A column whose value the card already shows in another cell (e.g. «الصنف × الكمية»). */
    .mobile-stack td.mobile-stack-hide {
        display: none;
    }

    /* The card's title cell: full width, no label. */
    .mobile-stack td.mobile-stack-title {
        display: block;
        order: -1;
        font-weight: 800;
    }

    .mobile-stack input,
    .mobile-stack select,
    .mobile-stack button,
    .mobile-stack a {
        max-width: 100%;
    }
}

@media screen {
    /* Legacy templates are dark-first. Keep their three neutral layers
       visually distinct when those utilities are translated to light mode. */
    html:not(.dark) body [class*="bg-slate-950"] {
        background-color: var(--color-input-bg) !important;
    }

    html:not(.dark) body [class*="bg-slate-900"] {
        background-color: var(--color-surface) !important;
    }

    html:not(.dark) body [class*="bg-slate-800"],
    html:not(.dark) body [class*="bg-slate-700"] {
        background-color: var(--color-surface-muted) !important;
    }

    html:not(.dark) body [class*="border-slate-800"],
    html:not(.dark) body [class*="border-slate-700"],
    html:not(.dark) body [class*="border-slate-600"] {
        border-color: var(--color-border) !important;
    }

    html:not(.dark) body .text-white,
    html:not(.dark) body [class*="text-slate-100"],
    html:not(.dark) body [class*="text-slate-200"],
    html:not(.dark) body [class*="text-slate-300"] {
        color: var(--color-text) !important;
    }

    html:not(.dark) body [class*="text-slate-400"],
    html:not(.dark) body [class*="text-slate-500"],
    html:not(.dark) body [class*="text-slate-600"] {
        color: var(--color-text-muted) !important;
    }

    html:not(.dark) body thead[class*="bg-slate"] {
        background-color: var(--color-table-header) !important;
    }

    html:not(.dark) body [class*="hover:bg-slate"]:hover {
        background-color: var(--color-table-row-hover) !important;
    }

    /* White is still deliberate on the few genuinely dark status surfaces.
       The 400/500 action colours intentionally retain dark ink for contrast. */
    html:not(.dark) body :is([class~="bg-cyan-950"], [class~="bg-emerald-950"], [class~="bg-rose-950"], [class~="bg-amber-950"]).text-white,
    html:not(.dark) body :is([class~="bg-cyan-950"], [class~="bg-emerald-950"], [class~="bg-rose-950"], [class~="bg-amber-950"]) .text-white {
        color: var(--color-on-solid) !important;
    }

    /* Dark-first tinted panels (bg-<hue>-950/<alpha>) turn into muddy mid tones on a light page,
       which drops their coloured text below a readable contrast: use the light tint instead. */
    html:not(.dark) body [class*="bg-rose-950/"] { background-color: #fff1f2 !important; }
    html:not(.dark) body [class*="bg-amber-950/"] { background-color: #fffbeb !important; }
    html:not(.dark) body [class*="bg-cyan-950/"] { background-color: #ecfeff !important; }
    html:not(.dark) body [class*="bg-emerald-950/"] { background-color: #ecfdf5 !important; }

    html:not(.dark) body [class*="text-emerald-100"],
    html:not(.dark) body [class*="text-emerald-200"],
    html:not(.dark) body [class*="text-emerald-300"] {
        color: #036b4f !important;
    }

    html:not(.dark) body [class*="text-green-100"],
    html:not(.dark) body [class*="text-green-200"],
    html:not(.dark) body [class*="text-green-300"] {
        color: #166534 !important;
    }

    html:not(.dark) body [class*="text-sky-100"],
    html:not(.dark) body [class*="text-sky-200"],
    html:not(.dark) body [class*="text-sky-300"],
    html:not(.dark) body [class*="text-cyan-100"],
    html:not(.dark) body [class*="text-cyan-200"],
    html:not(.dark) body [class*="text-cyan-300"] {
        color: #0369a1 !important;
    }

    html:not(.dark) body [class*="text-blue-100"],
    html:not(.dark) body [class*="text-blue-200"],
    html:not(.dark) body [class*="text-blue-300"] {
        color: #1d4ed8 !important;
    }

    html:not(.dark) body [class*="text-teal-100"],
    html:not(.dark) body [class*="text-teal-200"],
    html:not(.dark) body [class*="text-teal-300"] {
        color: #0f766e !important;
    }

    html:not(.dark) body [class*="text-violet-100"],
    html:not(.dark) body [class*="text-violet-200"],
    html:not(.dark) body [class*="text-violet-300"],
    html:not(.dark) body [class*="text-indigo-100"],
    html:not(.dark) body [class*="text-indigo-200"],
    html:not(.dark) body [class*="text-indigo-300"] {
        color: #6d28d9 !important;
    }

    html:not(.dark) body [class*="text-amber-100"],
    html:not(.dark) body [class*="text-amber-200"],
    html:not(.dark) body [class*="text-amber-300"] {
        color: #92400e !important;
    }

    html:not(.dark) body [class*="text-yellow-100"],
    html:not(.dark) body [class*="text-yellow-200"],
    html:not(.dark) body [class*="text-yellow-300"] {
        color: #854d0e !important;
    }

    html:not(.dark) body [class*="text-rose-100"],
    html:not(.dark) body [class*="text-rose-200"],
    html:not(.dark) body [class*="text-rose-300"] {
        color: #be123c !important;
    }

    html:not(.dark) body [class*="text-red-100"],
    html:not(.dark) body [class*="text-red-200"],
    html:not(.dark) body [class*="text-red-300"] {
        color: #b91c1c !important;
    }

    html:not(.dark) body [class*="text-orange-100"],
    html:not(.dark) body [class*="text-orange-200"],
    html:not(.dark) body [class*="text-orange-300"] {
        color: #9a3412 !important;
    }
}

.statement-table-wrap {
    overflow-x: auto;
}

.statement-ledger-table th,
.statement-date,
.statement-value,
.statement-effect,
.statement-balance,
.statement-reference {
    white-space: nowrap;
}

.statement-notes {
    min-width: 15rem;
    white-space: normal;
}

.statement-branch {
    min-width: 8rem;
    white-space: normal;
}

@media print {
    :root {
        color-scheme: light;
    }

    body {
        background: white !important;
        color: #111827 !important;
    }

    .app-sidebar,
    .app-topbar,
    .sidebar-backdrop {
        display: none !important;
    }
}

/* ---------------------------------------------------------------
 * Sidebar icons: a CSS mask painted with currentColor, so each icon
 * follows the link/summary colour in both themes (hover/active too).
 * ------------------------------------------------------------- */
.nav-link[data-nav-icon] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nav-section-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.nav-link[data-nav-icon]::before,
.nav-section-title[data-nav-icon]::before {
    content: "";
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
}

.nav-link[data-nav-icon]::before {
    opacity: .72;
}

.nav-link[data-nav-icon]:hover::before,
.nav-link[data-nav-icon]:focus-visible::before,
.nav-link[data-nav-icon][aria-current="page"]::before {
    opacity: 1;
}

[data-nav-icon="book"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5Z%27/%3E%3Cpath d=%27M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5%27/%3E%3C/svg%3E"); }
[data-nav-icon="boxes"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%2712%27 width=%279%27 height=%279%27 rx=%271%27/%3E%3Crect x=%2713%27 y=%2712%27 width=%279%27 height=%279%27 rx=%271%27/%3E%3Crect x=%277.5%27 y=%273%27 width=%279%27 height=%279%27 rx=%271%27/%3E%3C/svg%3E"); }
[data-nav-icon="building"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%272%27 width=%2716%27 height=%2720%27 rx=%271%27/%3E%3Cpath d=%27M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01%27/%3E%3C/svg%3E"); }
[data-nav-icon="cart"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%2720%27 r=%271.5%27/%3E%3Ccircle cx=%2718%27 cy=%2720%27 r=%271.5%27/%3E%3Cpath d=%27M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.5L21 8H6%27/%3E%3C/svg%3E"); }
[data-nav-icon="chart-bar"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3v18h18%27/%3E%3Cpath d=%27M8 16v-5M13 16V7M18 16v-8%27/%3E%3C/svg%3E"); }
[data-nav-icon="chart-down"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3v18h18%27/%3E%3Cpath d=%27m7 9 4 4 3-3 6 6%27/%3E%3Cpath d=%27M15 16h5v-5%27/%3E%3C/svg%3E"); }
[data-nav-icon="chart-up"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3v18h18%27/%3E%3Cpath d=%27m7 15 4-4 3 3 6-6%27/%3E%3Cpath d=%27M15 8h5v5%27/%3E%3C/svg%3E"); }
[data-nav-icon="clipboard"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%276%27 y=%274%27 width=%2712%27 height=%2718%27 rx=%272%27/%3E%3Cpath d=%27M9 2h6v4H9zM9 11h6M9 15h6%27/%3E%3C/svg%3E"); }
[data-nav-icon="clipboard-check"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%276%27 y=%274%27 width=%2712%27 height=%2718%27 rx=%272%27/%3E%3Cpath d=%27M9 2h6v4H9zM9 14l2 2 4-4%27/%3E%3C/svg%3E"); }
[data-nav-icon="clock"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 7v5l3 2%27/%3E%3C/svg%3E"); }
[data-nav-icon="coins"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%275%27/%3E%3Cpath d=%27M18.1 10.4a5 5 0 1 1-7.7 7.7%27/%3E%3Cpath d=%27M7 6h1v4%27/%3E%3C/svg%3E"); }
[data-nav-icon="credit-card"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%275%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M2 10h20M6 15h4%27/%3E%3C/svg%3E"); }
[data-nav-icon="database"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cellipse cx=%2712%27 cy=%275%27 rx=%278%27 ry=%273%27/%3E%3Cpath d=%27M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3%27/%3E%3C/svg%3E"); }
[data-nav-icon="folder"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z%27/%3E%3C/svg%3E"); }
[data-nav-icon="gift"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%278%27 width=%2718%27 height=%274%27 rx=%271%27/%3E%3Cpath d=%27M12 8v13M5 12v9h14v-9%27/%3E%3Cpath d=%27M12 8c-1.5-3-4.5-4.5-5.5-3S8 8 12 8Zm0 0c1.5-3 4.5-4.5 5.5-3S16 8 12 8Z%27/%3E%3C/svg%3E"); }
[data-nav-icon="grid"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%273%27 width=%277%27 height=%277%27 rx=%271%27/%3E%3Crect x=%2714%27 y=%273%27 width=%277%27 height=%277%27 rx=%271%27/%3E%3Crect x=%273%27 y=%2714%27 width=%277%27 height=%277%27 rx=%271%27/%3E%3Crect x=%2714%27 y=%2714%27 width=%277%27 height=%277%27 rx=%271%27/%3E%3C/svg%3E"); }
[data-nav-icon="inbox"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 12h-6l-2 3h-4l-2-3H2%27/%3E%3Cpath d=%27M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6Z%27/%3E%3C/svg%3E"); }
[data-nav-icon="key"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%2715%27 r=%274%27/%3E%3Cpath d=%27m10.8 12.2 9.2-9.2M17 6l3 3M14 9l2 2%27/%3E%3C/svg%3E"); }
[data-nav-icon="list"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01%27/%3E%3C/svg%3E"); }
[data-nav-icon="lock"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%2711%27 width=%2716%27 height=%2710%27 rx=%272%27/%3E%3Cpath d=%27M8 11V7a4 4 0 0 1 8 0v4%27/%3E%3C/svg%3E"); }
[data-nav-icon="outflow"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%276%27 width=%2720%27 height=%2712%27 rx=%272%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.5%27/%3E%3Cpath d=%27M6 10v4M18 10v4%27/%3E%3C/svg%3E"); }
[data-nav-icon="package"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 8 12 3 3 8v8l9 5 9-5Z%27/%3E%3Cpath d=%27m3 8 9 5 9-5M12 13v8%27/%3E%3C/svg%3E"); }
[data-nav-icon="plus-circle"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M12 8v8M8 12h8%27/%3E%3C/svg%3E"); }
[data-nav-icon="receipt"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2Z%27/%3E%3Cpath d=%27M8 8h8M8 12h8M8 16h5%27/%3E%3C/svg%3E"); }
[data-nav-icon="repeat"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m17 2 4 4-4 4%27/%3E%3Cpath d=%27M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4%27/%3E%3Cpath d=%27M21 13v1a4 4 0 0 1-4 4H3%27/%3E%3C/svg%3E"); }
[data-nav-icon="return"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 14 4 9l5-5%27/%3E%3Cpath d=%27M4 9h11a5 5 0 0 1 0 10h-3%27/%3E%3C/svg%3E"); }
[data-nav-icon="safe"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2716%27 rx=%272%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273%27/%3E%3Cpath d=%27M7 20v1M17 20v1%27/%3E%3C/svg%3E"); }
[data-nav-icon="shield"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z%27/%3E%3C/svg%3E"); }
[data-nav-icon="sliders"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6%27/%3E%3C/svg%3E"); }
[data-nav-icon="store"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 9 4.5 4h15L21 9%27/%3E%3Cpath d=%27M3 9h18v2a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0Z%27/%3E%3Cpath d=%27M5 13v7h14v-7M10 20v-4h4v4%27/%3E%3C/svg%3E"); }
[data-nav-icon="tag"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 2H2v10l9.3 9.3a1 1 0 0 0 1.4 0l8.6-8.6a1 1 0 0 0 0-1.4Z%27/%3E%3Ccircle cx=%277%27 cy=%277%27 r=%271.5%27/%3E%3C/svg%3E"); }
[data-nav-icon="tools"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.1-.4-.4-2.1Z%27/%3E%3C/svg%3E"); }
[data-nav-icon="truck"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 6h11v10H3zM14 9h4l3 3v4h-7%27/%3E%3Ccircle cx=%277%27 cy=%2718%27 r=%272%27/%3E%3Ccircle cx=%2717%27 cy=%2718%27 r=%272%27/%3E%3C/svg%3E"); }
[data-nav-icon="map"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z%27/%3E%3Ccircle cx=%2712%27 cy=%2711%27 r=%272%27/%3E%3C/svg%3E"); }
[data-nav-icon="user"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M4 21a8 8 0 0 1 16 0%27/%3E%3C/svg%3E"); }
[data-nav-icon="user-clock"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M2 21a7 7 0 0 1 10-6.3%27/%3E%3Ccircle cx=%2718%27 cy=%2717%27 r=%274%27/%3E%3Cpath d=%27M18 15.5V17l1 1%27/%3E%3C/svg%3E"); }
[data-nav-icon="user-plus"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M2 21a7 7 0 0 1 14 0M19 8v6M16 11h6%27/%3E%3C/svg%3E"); }
[data-nav-icon="users"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%274%27/%3E%3Cpath d=%27M2 21a7 7 0 0 1 14 0%27/%3E%3Cpath d=%27M16 3.5a4 4 0 0 1 0 7.5M22 21a7 7 0 0 0-4-6.3%27/%3E%3C/svg%3E"); }
[data-nav-icon="wallet"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5%27/%3E%3Cpath d=%27M16 14h.01%27/%3E%3C/svg%3E"); }
[data-nav-icon="warehouse"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35L12 3Z%27/%3E%3Cpath d=%27M6 18h12M6 14h12M6 22V10h12v12%27/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------
 * Dashboard headline cards: a restrained accent (top bar, tint and
 * icon badge).  --kpi-ink is the readable accent text colour per theme.
 * ------------------------------------------------------------- */
.dashboard-kpi--sales { --kpi-accent: #0ea5e9; --kpi-ink: #7dd3fc; }
.dashboard-kpi--profit { --kpi-accent: #10b981; --kpi-ink: #6ee7b7; }
.dashboard-kpi--services { --kpi-accent: #8b5cf6; --kpi-ink: #c4b5fd; }
.dashboard-kpi--loss { --kpi-accent: #f43f5e; --kpi-ink: #fda4af; }
.dashboard-kpi--operating { --kpi-accent: #f59e0b; --kpi-ink: #fcd34d; }
.dashboard-kpi--purchases { --kpi-accent: #6366f1; --kpi-ink: #a5b4fc; }
.dashboard-kpi--inventory { --kpi-accent: #14b8a6; --kpi-ink: #5eead4; }
/* Expenses are an outflow, not a loss: orange, never the loss red. */
.dashboard-kpi--expenses { --kpi-accent: #f97316; --kpi-ink: #fdba74; }

html:not(.dark) .dashboard-kpi--sales { --kpi-ink: #0369a1; }
html:not(.dark) .dashboard-kpi--profit { --kpi-ink: #047857; }
html:not(.dark) .dashboard-kpi--services { --kpi-ink: #6d28d9; }
html:not(.dark) .dashboard-kpi--loss { --kpi-ink: #be123c; }
html:not(.dark) .dashboard-kpi--operating { --kpi-ink: #b45309; }
html:not(.dark) .dashboard-kpi--purchases { --kpi-ink: #4338ca; }
html:not(.dark) .dashboard-kpi--inventory { --kpi-ink: #0f766e; }
html:not(.dark) .dashboard-kpi--expenses { --kpi-ink: #c2410c; }

html body article.dashboard-kpi.dashboard-kpi--accent {
    border-color: color-mix(in srgb, var(--kpi-accent) 42%, var(--color-border)) !important;
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--kpi-accent) 13%, transparent) 0%, transparent 62%);
    box-shadow: inset 0 3px 0 var(--kpi-accent), var(--shadow-card);
}

html body article.dashboard-kpi.dashboard-kpi--accent:hover,
html body article.dashboard-kpi.dashboard-kpi--accent:focus-within {
    border-color: var(--kpi-accent) !important;
}

html body article.dashboard-kpi--accent span[data-card-icon] {
    background-color: color-mix(in srgb, var(--kpi-accent) 18%, transparent) !important;
    color: var(--kpi-ink) !important;
}

/* A zero loss stays neutral; only a real loss uses the red tone. */
html body article.dashboard-kpi--accent:not(.dashboard-kpi--loss) [data-card-tone="neutral"] {
    color: var(--kpi-ink) !important;
}

/* ---------------------------------------------------------------
 * Light theme contrast: shades that were never remapped for white
 * backgrounds (loss red, informational sky).
 * ------------------------------------------------------------- */
@media screen {
    html:not(.dark) body [class*="text-rose-400"],
    html:not(.dark) body [class*="text-rose-500"] {
        color: #be123c !important;
    }

    html:not(.dark) body [class*="text-sky-200"],
    html:not(.dark) body [class*="text-sky-300"] {
        color: #0369a1 !important;
    }

    /* Management dashboard polish (light theme only). */
    html:not(.dark) .dashboard-page [class*="bg-slate-950/"] {
        background-color: var(--color-surface-raised) !important;
    }

    html:not(.dark) .dashboard-page :is(article, section, form).rounded-2xl {
        border-color: #d3dde9 !important;
        box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 8px 22px rgb(15 23 42 / .06);
    }

    html:not(.dark) .dashboard-page article.dashboard-kpi--accent {
        box-shadow: inset 0 3px 0 var(--kpi-accent), 0 1px 2px rgb(15 23 42 / .05), 0 10px 26px rgb(15 23 42 / .08);
    }

    html:not(.dark) .dashboard-page article.dashboard-kpi:not(.dashboard-kpi--accent) span[data-card-icon] {
        background-color: #eef3f8 !important;
    }

    html:not(.dark) .dashboard-page form input,
    html:not(.dark) .dashboard-page form select {
        background-color: #f8fafc !important;
        border-color: #cbd6e2 !important;
    }

    html:not(.dark) .dashboard-page form input:focus,
    html:not(.dark) .dashboard-page form select:focus {
        background-color: #ffffff !important;
        border-color: var(--color-primary) !important;
        outline: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
        outline-offset: 0;
    }

    html:not(.dark) .dashboard-page form label > span {
        font-weight: 700;
    }

    html:not(.dark) .dashboard-page section h2 {
        font-weight: 800;
        letter-spacing: 0;
    }

    html:not(.dark) .dashboard-page [data-dashboard-root] > .rounded-2xl:first-child {
        background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 55%);
    }
}

/* ===========================================================================
   Warehouse Operations
   Tone tokens carry status/type colour. Every tone is paired with Arabic text
   in the markup, so colour is never the only carrier of meaning, and each tone
   is redefined for dark mode so contrast holds in both themes.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Semantic UI tokens: ONE calm palette for the whole ERP. Components read these
   (never raw Tailwind hues) so Transfer, Stock Request and every new component
   look like siblings, and each tone is redefined for dark mode so contrast holds.
     primary  = teal (actions)          info    = blue/slate
     accent   = indigo (operational)    success = green
     warning  = amber                   danger  = rose
     neutral  = slate
   --------------------------------------------------------------------------- */
:root {
    --ui-primary-fg: #0f6b66;  --ui-primary-bg: #d5f3ef;  --ui-primary-br: #86d3c9;  --ui-primary-solid: #13796f;
    --ui-info-fg: #1d4e89;     --ui-info-bg: #e1ebf8;     --ui-info-br: #a8c1e4;
    --ui-accent-fg: #4338a8;   --ui-accent-bg: #e7e7fb;   --ui-accent-br: #b9b8ee;   --ui-accent-solid: #5a52c4;
    --ui-success-fg: #1c6b3a;  --ui-success-bg: #dff3e5;  --ui-success-br: #9dd4ae;  --ui-success-solid: #257a48;
    --ui-warning-fg: #8a4b0f;  --ui-warning-bg: #fbf0d9;  --ui-warning-br: #e9c887;
    --ui-orange-fg: #a4461c;   --ui-orange-bg: #fbe8dc;   --ui-orange-br: #eab595;
    --ui-danger-fg: #a52a42;   --ui-danger-bg: #fbe4e8;   --ui-danger-br: #eba9b6;   --ui-danger-solid: #b0334b;
    --ui-neutral-fg: #4b5a6e;  --ui-neutral-bg: #e6ebf1;  --ui-neutral-br: #c8d2de;
    --ui-strip: #6aa8a0;
    /* Preparer note: calm slate surface with a muted amber edge; never a status/type colour. */
    --ui-note-fg: #4a4538;     --ui-note-bg: #f3f1ec;     --ui-note-br: #d9d2c1;     --ui-note-edge: #b8925a;   --ui-note-label: #7a5a2c;
}

html.dark {
    --ui-primary-fg: #8fd3cb;  --ui-primary-bg: #11302d;  --ui-primary-br: #245a54;  --ui-primary-solid: #1c7a70;
    --ui-info-fg: #a7c0e6;     --ui-info-bg: #172338;     --ui-info-br: #2d4468;
    --ui-accent-fg: #b9b7ee;   --ui-accent-bg: #201f42;   --ui-accent-br: #3d3b74;   --ui-accent-solid: #544dab;
    --ui-success-fg: #9dd4ae;  --ui-success-bg: #12291b;  --ui-success-br: #25533a;  --ui-success-solid: #22704a;
    --ui-warning-fg: #e8c784;  --ui-warning-bg: #2c2311;  --ui-warning-br: #5a461c;
    --ui-orange-fg: #eab595;   --ui-orange-bg: #2f1d12;   --ui-orange-br: #5f3822;
    --ui-danger-fg: #eba9b6;   --ui-danger-bg: #301920;   --ui-danger-br: #642c3a;   --ui-danger-solid: #9c3048;
    --ui-neutral-fg: #c3ccd8;  --ui-neutral-bg: #1c2535;  --ui-neutral-br: #334155;
    --ui-note-fg: #cfc9bb;     --ui-note-bg: #1f2229;     --ui-note-br: #3a3d45;     --ui-note-edge: #9c7d4f;   --ui-note-label: #d6b784;
    --ui-strip: #3f8078;
}

/* The warehouse tone vocabulary (status/type chips) now resolves to the semantic palette, so
   every existing chip inherits the calmer colours centrally. The status -> tone mapping itself
   (models) is unchanged, so every status keeps a distinct colour. */
:root {
    --wh-blue-fg: var(--ui-info-fg);      --wh-blue-bg: var(--ui-info-bg);      --wh-blue-br: var(--ui-info-br);
    --wh-amber-fg: var(--ui-warning-fg);  --wh-amber-bg: var(--ui-warning-bg);  --wh-amber-br: var(--ui-warning-br);
    --wh-indigo-fg: var(--ui-accent-fg);  --wh-indigo-bg: var(--ui-accent-bg);  --wh-indigo-br: var(--ui-accent-br);
    --wh-green-fg: var(--ui-success-fg);  --wh-green-bg: var(--ui-success-bg);  --wh-green-br: var(--ui-success-br);
    --wh-teal-fg: var(--ui-primary-fg);   --wh-teal-bg: var(--ui-primary-bg);   --wh-teal-br: var(--ui-primary-br);
    --wh-orange-fg: var(--ui-orange-fg);  --wh-orange-bg: var(--ui-orange-bg);  --wh-orange-br: var(--ui-orange-br);
    --wh-red-fg: var(--ui-danger-fg);     --wh-red-bg: var(--ui-danger-bg);     --wh-red-br: var(--ui-danger-br);
    --wh-gray-fg: var(--ui-neutral-fg);   --wh-gray-bg: var(--ui-neutral-bg);   --wh-gray-br: var(--ui-neutral-br);
}

.wh-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.wh-tone-blue   { color: var(--wh-blue-fg);   background: var(--wh-blue-bg);   border-color: var(--wh-blue-br); }
.wh-tone-amber  { color: var(--wh-amber-fg);  background: var(--wh-amber-bg);  border-color: var(--wh-amber-br); }
.wh-tone-indigo { color: var(--wh-indigo-fg); background: var(--wh-indigo-bg); border-color: var(--wh-indigo-br); }
.wh-tone-green  { color: var(--wh-green-fg);  background: var(--wh-green-bg);  border-color: var(--wh-green-br); }
.wh-tone-teal   { color: var(--wh-teal-fg);   background: var(--wh-teal-bg);   border-color: var(--wh-teal-br); }
.wh-tone-orange { color: var(--wh-orange-fg); background: var(--wh-orange-bg); border-color: var(--wh-orange-br); }
.wh-tone-red    { color: var(--wh-red-fg);    background: var(--wh-red-bg);    border-color: var(--wh-red-br); }
.wh-tone-gray   { color: var(--wh-gray-fg);   background: var(--wh-gray-bg);   border-color: var(--wh-gray-br); }

.wh-chip-action { color: #fff; background: var(--color-secondary); border-color: var(--color-secondary); }
.wh-chip-action:hover { filter: brightness(1.08); }
.wh-chip-quiet { color: var(--color-text); background: var(--color-surface-raised); }
.wh-chip-danger { color: var(--wh-red-fg); background: transparent; border-color: var(--wh-red-br); }

/* One meaning per colour on every document page (Sale / Transfer / Purchase / Stock Request):
   indigo  = operational: hand the document to the warehouse. Moves no stock, posts nothing.
   green   = the real business action (send the transfer, create it) that posts stock.
   outline = neutral (print, back).   red = cancel.
   These are solid in both themes so the prep/send difference survives dark mode and a phone. */
button.wh-chip { cursor: pointer; font-family: inherit; }
.wh-chip-prep { color: #fff; background: var(--ui-accent-solid); border-color: var(--ui-accent-solid); }
.wh-chip-send { color: #fff; background: var(--ui-success-solid); border-color: var(--ui-success-solid); }
.wh-chip-danger-solid { color: #fff; background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); }
.wh-chip-prep:hover, .wh-chip-send:hover, .wh-chip-danger-solid:hover { filter: brightness(1.1); }
/* «إرسال للتحضير» from a list row: an icon button in the same indigo as the document-page chip. */
.wh-list-send {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.25rem; height: 2.25rem; border-radius: .75rem;
    color: var(--ui-accent-solid); border: 1px solid var(--ui-accent-solid); background: transparent;
}
.wh-list-send svg { width: 1.2rem; height: 1.2rem; }
.wh-list-send:hover, .wh-list-send:focus-visible { color: #fff; background: var(--ui-accent-solid); }
@media (max-width: 640px) { .wh-list-send { width: 2.75rem; height: 2.75rem; } }
.wh-chip-danger:hover { background: var(--wh-red-bg); }

/* --- document detail shell (Transfer / Stock Request) --------------------- */
.wh-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wh-doc-actions form { margin: 0; }
.wh-doc-actions-secondary { margin-inline-start: auto; }
@media (max-width: 639px) {
    .wh-doc-actions { align-items: stretch; }
    .wh-doc-actions > .wh-chip, .wh-doc-actions > form, .wh-doc-actions > details { flex: 1 1 100%; }
    .wh-doc-actions > form > .wh-chip, .wh-doc-actions > details > summary.wh-chip { width: 100%; justify-content: center; padding-block: .7rem; }
    .wh-doc-actions > .wh-chip { justify-content: center; padding-block: .7rem; }
    .wh-doc-actions-secondary { margin-inline-start: 0; flex: 1 1 100%; display: flex; gap: .5rem; }
    .wh-doc-actions-secondary > .wh-chip { flex: 1 1 0; justify-content: center; padding-block: .7rem; }
}
.wh-doc-note {
    border-radius: 1rem;
    border: 1px solid var(--wh-amber-br);
    background: var(--wh-amber-bg);
    padding: .75rem 1rem;
}
.wh-doc-note > h5 { font-size: .75rem; font-weight: 800; color: var(--wh-amber-fg); }
.wh-doc-note > p { margin-top: .3rem; font-weight: 600; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.wh-confirm > summary { list-style: none; }
.wh-confirm > summary::-webkit-details-marker { display: none; }
.wh-confirm[open] { flex: 1 1 100%; }
.wh-confirm-panel {
    margin-top: .5rem;
    display: grid;
    gap: .6rem;
    padding: .8rem;
    border-radius: 1rem;
    border: 1px solid var(--wh-red-br);
    background: var(--color-surface-raised);
}
.wh-confirm-panel.wh-confirm-panel-note { border-color: var(--color-border); }
.wh-confirm-panel label { font-size: .8rem; font-weight: 700; color: var(--color-text-muted); }
.wh-muted-reason { font-size: .8rem; color: var(--color-text-muted); }

/* --- document list pages (Stock Requests / Transfers) --------------------- */
.wh-list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.wh-list-head .wh-title { margin-top: 0; }
.wh-list-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.wh-filter-grid { display: grid; gap: .6rem .75rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .wh-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wh-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .wh-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wh-filter-grid label { display: block; margin-bottom: .25rem; font-size: .72rem; font-weight: 700; color: var(--color-text-muted); }
.wh-filter-grid input, .wh-filter-grid select {
    width: 100%;
    min-height: 2.4rem;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: .7rem;
    background-color: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    padding: .4rem .7rem;
    font-size: .85rem;
}
.wh-filter-grid input:hover, .wh-filter-grid select:hover { border-color: var(--color-primary) !important; }
.wh-filter-grid input:focus, .wh-filter-grid select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.wh-filter-grid input::placeholder { color: var(--color-text-muted) !important; }
.wh-filter-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.wh-list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.exchange-stock-row-selected { background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface)); }
.exchange-stock-row-selected td:first-child { box-shadow: inset -3px 0 0 var(--color-primary); }
.wh-transfer-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
    gap: .25rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
    background: var(--color-surface-muted);
    padding: .25rem;
}
[data-workflow-supplier-select] {
    width: 100%;
    border: 1px solid var(--color-border) !important;
    border-radius: .75rem;
    background-color: var(--color-input-bg) !important;
    padding-inline: .8rem;
}
[data-workflow-supplier-select]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}
.wh-transfer-tab {
    flex: 0 0 auto;
    border-radius: .65rem;
    color: var(--color-text-muted);
    padding: .55rem .85rem;
    font-size: .84rem;
    font-weight: 800;
}
.wh-transfer-tab:hover { color: var(--color-text); background: var(--color-surface); }
.wh-transfer-tab.is-active { color: var(--color-on-solid); background: var(--color-primary); }
.wh-stock-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wh-stock-branch { color: var(--color-text); font-weight: 800; }
.wh-stock-suggestion { margin-top: .3rem; color: var(--color-primary); font-size: .72rem; font-weight: 800; }
.wh-stock-request-link { color: var(--color-primary); font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }
.wh-destination-suggestion { margin-top: .55rem; border-inline-start: 3px solid var(--color-primary); border-radius: .45rem; background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)); color: var(--color-text-muted); padding: .55rem .7rem; font-size: .78rem; }
.wh-maintenance-section { border: 1px solid var(--color-border); border-radius: 1.25rem; background: var(--color-surface); padding: 1.25rem; box-shadow: var(--shadow-card); }
.wh-maintenance-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wh-maintenance-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.wh-maintenance-card { display: flex; min-width: 0; height: 100%; flex-direction: column; gap: .9rem; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface-muted); padding: 1rem; box-shadow: var(--shadow-card); }
.wh-maintenance-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.wh-maintenance-status { border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); padding: .35rem .65rem; font-size: .75rem; font-weight: 800; }
.wh-maintenance-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.wh-maintenance-facts > div { min-width: 0; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); padding: .65rem .75rem; }
.wh-maintenance-facts dt, .wh-execution-branch span { color: var(--color-text-muted); font-size: .7rem; font-weight: 700; }
.wh-maintenance-facts dd, .wh-execution-branch strong { display: block; margin-top: .18rem; overflow-wrap: anywhere; color: var(--color-text); font-size: .84rem; font-weight: 800; }
.wh-maintenance-facts dd small { display: block; margin-top: .2rem; color: var(--color-text-muted); font-size: .68rem; font-weight: 700; }
.wh-maintenance-action-panel { margin-top: auto; border: 1px solid var(--color-border); border-radius: .9rem; background: var(--color-surface); padding: .9rem; }
.wh-maintenance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .6rem; border-top: 1px solid var(--color-border); padding-top: .8rem; }
.wh-maintenance-delivery-form { display: grid; gap: .85rem; width: 100%; min-width: 0; }
.wh-maintenance-delivery-fields { display: grid; grid-template-columns: minmax(8rem, .65fr) minmax(12rem, 1.35fr); gap: .75rem; align-items: stretch; }
.wh-maintenance-delivery-form label { display: block; margin-bottom: .35rem; color: var(--color-text); font-size: .78rem; font-weight: 800; }
.wh-maintenance-delivery-form input, .wh-maintenance-delivery-form select, .wh-maintenance-delivery-form textarea { width: 100%; min-width: 0; }
.wh-maintenance-delivery-form textarea { min-height: 5rem; resize: vertical; }
.wh-maintenance-submit { display: flex; justify-content: flex-end; border-top: 1px solid var(--color-border); padding-top: .8rem; }
.wh-maintenance-submit .btn-primary { min-width: min(100%, 18rem); writing-mode: horizontal-tb; white-space: normal; text-align: center; }
.wh-execution-branch { border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface-muted); padding: .65rem .75rem; }
.wh-execution-branch small { display: block; margin-top: .18rem; color: var(--color-text-muted); font-size: .67rem; }
.wh-delivery-blocked { flex: 1 1 100%; border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); border-radius: .75rem; background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface)); color: var(--color-text); padding: .7rem .8rem; font-size: .8rem; font-weight: 700; }
.wh-workflow-status-stack { display: grid; justify-items: start; gap: .4rem; }
@media (min-width: 900px) { .wh-maintenance-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wh-maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .wh-maintenance-section { padding: .9rem; }
    .wh-maintenance-facts, .wh-maintenance-delivery-fields { grid-template-columns: 1fr; }
    .wh-maintenance-actions > form, .wh-maintenance-actions > button, .wh-maintenance-submit .btn-primary { width: 100%; }
    .wh-maintenance-actions .btn-primary, .wh-maintenance-actions .btn-secondary { width: 100%; justify-content: center; }
}
.wh-modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    border: 1px solid var(--color-border);
    border-radius: .9rem;
    background: var(--color-surface-muted);
    padding: .85rem;
}
.wh-modal-summary div { min-width: 0; }
.wh-modal-summary dt { color: var(--color-text-muted); font-size: .72rem; font-weight: 700; }
.wh-modal-summary dd { margin-top: .2rem; overflow-wrap: anywhere; color: var(--color-text); font-weight: 800; }
.wh-choice-group { display: grid; gap: .55rem; }
.wh-choice-option { display: flex; cursor: pointer; align-items: flex-start; gap: .65rem; border: 1px solid var(--color-border); border-radius: .8rem; background: var(--color-surface); padding: .75rem; }
.wh-choice-option:hover, .wh-choice-option:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.wh-choice-option input { margin-top: .15rem; accent-color: var(--color-primary); }
.wh-inline-feedback { border: 1px solid var(--color-border); border-radius: .8rem; padding: .75rem; font-size: .85rem; }
.wh-inline-feedback.is-success { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface)); color: var(--color-success); }
.wh-inline-feedback.is-error { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); color: var(--color-danger); }
@media (max-width: 640px) { .wh-modal-summary { grid-template-columns: 1fr; } .wh-transfer-tabs { display: inline-flex; width: auto; } .wh-transfer-tab { flex: 0 0 auto; text-align: center; } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.htmx-request .not-htmx-indicator { display: none; }

.wh-source-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wh-source-detail { margin-top: .75rem; }
.wh-source-facts { display: grid; gap: .35rem; font-size: .82rem; }
.wh-source-facts > div { display: flex; justify-content: space-between; gap: 1rem; }
.wh-source-facts dt { color: var(--color-text-muted); }
.wh-source-facts dd { font-weight: 700; }
@media (min-width: 640px) { .wh-source-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }

.wh-note {
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    padding: .7rem 1rem;
    font-size: .85rem;
    font-weight: 600;
}

/* --- assignment modal ---------------------------------------------------- */
.wh-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; }
.wh-modal.is-open { display: flex; }
.wh-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--color-modal-backdrop); }
.wh-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 40rem;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 1.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 1.25rem;
    box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .45);
}
.wh-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wh-modal-title { font-size: 1.15rem; font-weight: 800; }
.wh-modal-subtitle { margin-top: .25rem; font-size: .85rem; color: var(--color-text-muted); }
.wh-modal-scope { margin-top: .15rem; font-size: .78rem; color: var(--color-text-muted); }
.wh-modal-close { border: 0; background: transparent; color: var(--color-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }

[data-supplier-result-form] {
    min-width: 0;
}

[data-supplier-result-form] form,
[data-supplier-result-form] form > *,
[data-supplier-result-form] .grid,
[data-supplier-result-form] label,
[data-supplier-result-form] fieldset {
    min-width: 0;
    max-width: 100%;
}

[data-supplier-result-form] .ui-input,
[data-supplier-result-form] input[type="text"],
[data-supplier-result-form] input[type="number"],
[data-supplier-result-form] input[type="search"],
[data-supplier-result-form] select,
[data-supplier-result-form] textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: .55rem;
    background: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    padding: .65rem .8rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .03);
}

[data-supplier-result-form] textarea {
    min-height: 5.5rem;
    resize: vertical;
}

[data-supplier-result-form] select {
    min-height: 2.75rem;
    appearance: auto;
}

[data-supplier-result-form] input:hover:not(:disabled),
[data-supplier-result-form] select:hover:not(:disabled),
[data-supplier-result-form] textarea:hover:not(:disabled) {
    border-color: var(--color-primary) !important;
}

[data-supplier-result-form] input:focus-visible,
[data-supplier-result-form] select:focus-visible,
[data-supplier-result-form] textarea:focus-visible {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

[data-supplier-result-form] input:disabled,
[data-supplier-result-form] select:disabled,
[data-supplier-result-form] textarea:disabled {
    border-color: var(--color-disabled-border) !important;
    background: var(--color-disabled-bg) !important;
    color: var(--color-disabled-text) !important;
}

[data-supplier-result-form] input[type="radio"] {
    width: 1rem;
    min-height: 1rem;
    padding: 0;
    accent-color: var(--color-primary);
}

[data-supplier-result-form] input:invalid:not(:placeholder-shown),
[data-supplier-result-form] select:invalid,
[data-supplier-result-form] textarea:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger) !important;
}

[data-supplier-result-form] ::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1;
}

[data-supplier-result-modal] .wh-modal-panel {
    width: min(100%, 40rem);
    min-width: 0;
    max-width: 100%;
}

[data-supplier-result-modal] [data-result-mode] {
    min-width: 0;
    max-width: 100%;
}

.wh-worker-list { margin-top: 1rem; display: grid; gap: .75rem; }
.wh-worker { border-radius: 1rem; border: 1px solid var(--color-border); background: var(--color-surface-raised); padding: .9rem; }
.wh-worker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.wh-worker-name { font-weight: 800; }
.wh-worker-scope { margin-top: .2rem; font-size: .75rem; color: var(--color-text-muted); }
.wh-worker-stats { margin-top: .7rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; font-size: .78rem; }
.wh-worker-stats > div { display: flex; justify-content: space-between; gap: .5rem; }
.wh-worker-stats dt { color: var(--color-text-muted); }
.wh-worker-stats dd { font-weight: 700; }
@media (min-width: 640px) { .wh-worker-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wh-worker-pick {
    margin-top: .85rem;
    width: 100%;
    border-radius: .9rem;
    border: 0;
    background: var(--color-secondary);
    color: #fff;
    padding: .7rem 1rem;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}
.wh-worker-pick:hover { filter: brightness(1.08); }

/* --- product image lightbox ---------------------------------------------- */
.wh-lightbox { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; }
.wh-lightbox.is-open { display: flex; }
.wh-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2, 6, 23, .88); }
.wh-lightbox-figure { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 96vw; max-height: 92vh; }
.wh-lightbox-stage { overflow: auto; max-width: 96vw; max-height: 78vh; border-radius: 1rem; }
.wh-lightbox-image { display: block; max-width: 96vw; max-height: 78vh; object-fit: contain; transform-origin: center center; transition: transform .15s ease; }
.wh-lightbox-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.wh-lightbox-bar button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: .8rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.wh-lightbox-caption { color: #e2e8f0; font-size: .85rem; font-weight: 700; text-align: center; }
.wh-zoomable { cursor: zoom-in; }
/* Sale detail: a product NAME that opens its image. Looks like ordinary text (no underline, no
   link colour); a real button, only rendered when the product has an image. */
.product-image-trigger { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.product-image-trigger:hover, .product-image-trigger:focus-visible { color: var(--wh-blue-fg); }

/* --- preparation checklist (task detail) ----------------------------------
   A checked line turns calm teal AND shows a solid ✓ with "تم التجهيز", so the state never
   rests on colour alone. The control is a large tap target for a phone held in one hand. */
.wh-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    padding: .75rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.wh-item.is-checked { background: var(--wh-teal-bg); border-color: var(--wh-teal-br); }
.wh-item.is-removed { border-color: var(--wh-red-br); background: var(--wh-red-bg); }
.wh-item.is-removed.is-checked { border-color: var(--wh-red-fg); background: var(--wh-red-bg); }
.wh-check-form { margin: 0; flex-shrink: 0; align-self: center; }
.wh-check {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    width: 4.25rem;
    min-height: 4.25rem;
    padding: .4rem;
    border-radius: 1rem;
    border: 2px dashed var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wh-check svg { width: 1.75rem; height: 1.75rem; opacity: .22; }
.wh-check:hover { border-color: var(--wh-teal-br); color: var(--wh-teal-fg); }
.wh-check:focus-visible { outline: 3px solid var(--wh-teal-br); outline-offset: 2px; }
.wh-item.is-checked .wh-check { border-style: solid; border-color: var(--wh-teal-fg); background: var(--wh-teal-fg); color: var(--color-surface); }
.wh-item.is-checked .wh-check svg { opacity: 1; }
.wh-item.is-removed .wh-check.is-danger:hover { border-color: var(--wh-red-br); color: var(--wh-red-fg); }
.wh-item.is-removed.is-checked .wh-check.is-danger { border-style: solid; border-color: var(--wh-red-fg); background: var(--wh-red-fg); color: var(--color-surface); }
.wh-check.is-readonly { cursor: default; }
.wh-check.is-readonly:hover { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.wh-item.is-checked .wh-check.is-readonly:hover { border-color: var(--wh-teal-fg); color: var(--color-surface); }
.wh-check-form.htmx-request .wh-check { opacity: .6; cursor: progress; }
.wh-checklist-progress {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 800;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.wh-checklist-progress.is-complete { color: var(--wh-teal-fg); background: var(--wh-teal-bg); border-color: var(--wh-teal-br); }
/* Review mode: the same cards, neutral until the REVIEWER ticks them, then yellow + ✓.
   Green stays the preparation colour only; the preparer's ticks are not shown here. */
.wh-item.is-reviewed { background: var(--wh-amber-bg); border-color: var(--wh-amber-br); }
.wh-check.is-review:hover { border-color: var(--wh-amber-br); color: var(--wh-amber-fg); }
.wh-check.is-review:focus-visible { outline-color: var(--wh-amber-br); }
.wh-item.is-reviewed .wh-check.is-review { border-style: solid; border-color: var(--wh-amber-fg); background: var(--wh-amber-fg); color: var(--color-surface); }
.wh-item.is-reviewed .wh-check.is-review svg { opacity: 1; }
.wh-check.is-review.is-readonly:hover { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.wh-item.is-reviewed .wh-check.is-review.is-readonly:hover { border-color: var(--wh-amber-fg); color: var(--color-surface); }
.wh-checklist-progress.is-review.is-complete { color: var(--wh-amber-fg); background: var(--wh-amber-bg); border-color: var(--wh-amber-br); }
@media (max-width: 479px) {
    .wh-item { gap: .65rem; padding: .6rem; }
    .wh-item > img { width: 4.5rem; height: 4.5rem; }
    .wh-check { width: 3.75rem; min-height: 3.75rem; }
}

/* --- history / monitoring tables ------------------------------------------ */
.wh-table-wrap { overflow-x: auto; }
.wh-stack-label { display: none; }
@media (max-width: 767px) {
    /* Stack the history rows into cards: no horizontal scrolling for normal use. */
    .wh-stack, .wh-stack tbody, .wh-stack tr, .wh-stack td { display: block; width: 100%; }
    .wh-stack thead { display: none; }
    .wh-stack tr {
        margin-bottom: .75rem;
        border-radius: 1rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface-raised);
        padding: .35rem .75rem;
    }
    .wh-stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .4rem 0; text-align: start; }
    .wh-stack-label { display: inline; color: var(--color-text-muted); font-size: .75rem; font-weight: 700; }
    .wh-table-wrap { overflow-x: visible; }
}

.wh-card { border-radius: 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); padding: 1rem; }
.wh-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.wh-card-name { font-weight: 800; }

/* --- shared warehouse page shell ------------------------------------------
   Every warehouse screen and every document detail page that shows warehouse
   state uses this, so container width, card style, spacing and RTL behaviour
   are identical across them. */
.wh-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
}

.wh-page-head { margin-bottom: .25rem; }
.wh-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--color-text-muted); }
.wh-title { margin-top: .15rem; font-size: 1.5rem; font-weight: 900; color: var(--color-text); }
.wh-subtitle { margin-top: .4rem; font-size: .875rem; color: var(--color-text-muted); }

/* Document pages (Transfer / Stock Request): the information card and the items card carry the
   same calm side strip, so the two read as one document. inline-start = the right edge in RTL. */
.wh-card-header,
.wh-card-accent { border-inline-start: 4px solid var(--ui-strip); }

.wh-card-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--color-border);
}
.wh-card-actions form { margin: 0; }

/* Label/value pairs. One column on a phone, two from sm, three from xl -- the same rhythm on
   every page so nothing reads as a differently sized screen. */
.wh-facts { display: grid; gap: .5rem; font-size: .85rem; }
.wh-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .4rem .6rem;
    border-radius: .6rem;
    background: var(--color-surface-raised);
}
.wh-facts dt { color: var(--color-text-muted); white-space: nowrap; }
.wh-facts dd { margin: 0; font-weight: 700; text-align: end; }
@media (min-width: 640px) { .wh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .wh-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- warehouse tables ------------------------------------------------------ */
.wh-card-flush { padding: 0; overflow: hidden; }
.wh-card-pad { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.wh-card-foot { padding: 1rem; border-top: 1px solid var(--color-border); }

.wh-table { width: 100%; border-collapse: collapse; text-align: start; font-size: .85rem; }
.wh-table thead { background: var(--color-surface-raised); }
.wh-table th {
    padding: .7rem 1rem;
    text-align: start;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.wh-table td { padding: .7rem 1rem; border-top: 1px solid var(--color-border); vertical-align: middle; }
.wh-table tbody tr:hover { background: var(--color-surface-raised); }
.wh-strong { font-weight: 800; color: var(--color-text); }
.wh-empty { padding: 2.5rem 1rem; text-align: center; color: var(--color-text-muted); }

.wh-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--color-border);
    font-size: .82rem;
    color: var(--color-text-muted);
}

/* --- warehouse home stat tiles --------------------------------------------- */
.wh-stats { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .wh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wh-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wh-stat {
    display: block;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: .9rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease;
}
.wh-stat:hover, .wh-stat:focus-visible { border-color: var(--color-primary); }
.wh-stat-label { font-size: .75rem; font-weight: 700; color: var(--color-text-muted); }
.wh-stat-value { margin-top: .4rem; font-size: 1.75rem; font-weight: 900; color: var(--color-text); line-height: 1.1; }

/* Warehouse dashboard: one titled section per task type, boxes in pairs (row by row). */
.wh-dashboard-sections { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .wh-dashboard-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.wh-receipt-sections { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 1024px) {
    .wh-receipt-sections { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.wh-dashboard-section { min-width: 0; border-radius: 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface-muted, var(--color-surface)); padding: .9rem; }
.wh-dashboard-section-title { margin-bottom: .7rem; font-size: 1rem; font-weight: 900; color: var(--color-text); }
.wh-stats.wh-stats-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wh-stats-pairs .wh-stat { min-width: 0; }
.wh-stats-pairs .wh-stat-label { overflow-wrap: anywhere; }
.wh-task-party { margin-top: .35rem; font-size: .8rem; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.wh-task-party-label { color: var(--color-text-muted); font-weight: 700; }

/* Task page on a phone: nothing may push the page sideways. Long names wrap, flex children may
   shrink, and every fact row keeps its value inside the card. */
.wh-task-page, .wh-task-page > * { min-width: 0; max-width: 100%; }
.wh-task-facts > div { min-width: 0; }
.wh-task-facts dt { flex-shrink: 0; }
.wh-task-facts dd { min-width: 0; overflow-wrap: anywhere; text-align: end; }
.wh-item-name { overflow-wrap: anywhere; white-space: normal; }
.wh-item > .min-w-0 { min-width: 0; }
/* History: the note stays on its own line under the task (a badge in the phone card), but only as
   wide as its text — aligned to the start (right) and wrapping at the row/card width at most. */
.wh-preparer-note-row { display: inline-block; width: fit-content; max-width: 100%; text-align: start; vertical-align: top; }
/* «حضّرها: …» / «راجعها: …» each on its own line inside the history's «المسؤول» value. */
.wh-person-line { display: block; }
.wh-preparer-note-text { white-space: pre-wrap; }
@media (max-width: 767px) {
    /* The global phone rule makes every td nowrap; stacked warehouse cards must wrap instead. */
    .wh-stack td { white-space: normal; }
    .wh-stack td.wh-doc-cell { flex-wrap: wrap; }
    .wh-stack td.wh-doc-cell > .wh-preparer-note, .wh-stack td.wh-doc-cell > .wh-task-party { flex: 1 1 100%; min-width: 0; }
    .wh-stack td > span:not(.wh-stack-label) { min-width: 0; overflow-wrap: anywhere; text-align: end; }
}

/* A secondary, lower-weight chip (e.g. "إلغاء الإسناد" beside a status). */
.wh-chip-sm { padding: .3rem .65rem; font-size: .75rem; }

/* ===========================================================================
   Product list table (inventory/partials/product_table.html)
   Calm zebra rows, and one quiet tint per PRICE TYPE so the eye finds a column fast.
   Every tint sits beside its Arabic header/label, so colour never carries meaning alone.
     cost (last receiving / receiving) = gray      trader & distributor = indigo
     wholesale = blue      technician & half-wholesale = amber      retail = teal
   Tints reuse the theme-aware --wh-* tokens, so dark and light both hold contrast.
   =========================================================================== */
.product-table { border-collapse: separate; border-spacing: 0; }
.product-table thead { background: var(--color-surface-raised); }
.product-table th {
    color: var(--color-text-muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal; /* long headers («سعر فنيين و نصف جملة») wrap instead of widening the column */
    vertical-align: bottom;
    border-bottom: 1px solid var(--color-border);
}
.product-table th.price-head { border-bottom-width: 3px; }
.product-table th.price-tone-cost { border-bottom-color: var(--wh-gray-br); }
.product-table th.price-tone-trader { border-bottom-color: var(--wh-indigo-br); }
.product-table th.price-tone-wholesale { border-bottom-color: var(--wh-blue-br); }
.product-table th.price-tone-artisan { border-bottom-color: var(--wh-amber-br); }
.product-table th.price-tone-retail { border-bottom-color: var(--wh-teal-br); }

.product-table td { border-top: 1px solid var(--color-border); color: var(--color-text-muted); vertical-align: middle; }
.product-table tbody tr:first-child td { border-top: 0; }
.product-table .product-row:nth-child(even) { background: color-mix(in srgb, var(--color-surface-raised) 70%, transparent); }
.product-table .product-row { transition: background-color .15s ease; }
.product-table .product-row:hover { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }

.product-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 700; color: var(--color-text-muted); direction: ltr; unicode-bidi: isolate; }
.product-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--color-text); text-align: start; cursor: pointer; }
.product-name:hover, .product-name:focus-visible { color: var(--color-primary); }

.price-cell { white-space: nowrap; }
.price-chip {
    display: inline-block;
    min-width: 4.1rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    padding: .1rem .35rem;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Each price pill takes its column's tone — the same colour as the line under that column's header. */
.price-chip.price-tone-cost { color: var(--wh-gray-fg); background: color-mix(in srgb, var(--wh-gray-bg) 55%, transparent); border-color: color-mix(in srgb, var(--wh-gray-br) 45%, transparent); }
.price-chip.price-tone-trader { color: var(--wh-indigo-fg); background: color-mix(in srgb, var(--wh-indigo-bg) 55%, transparent); border-color: color-mix(in srgb, var(--wh-indigo-br) 45%, transparent); }
.price-chip.price-tone-wholesale { color: var(--wh-blue-fg); background: color-mix(in srgb, var(--wh-blue-bg) 55%, transparent); border-color: color-mix(in srgb, var(--wh-blue-br) 45%, transparent); }
.price-chip.price-tone-artisan { color: var(--wh-amber-fg); background: color-mix(in srgb, var(--wh-amber-bg) 55%, transparent); border-color: color-mix(in srgb, var(--wh-amber-br) 45%, transparent); }
.price-chip.price-tone-retail { color: var(--wh-teal-fg); background: color-mix(in srgb, var(--wh-teal-bg) 70%, transparent); border-color: color-mix(in srgb, var(--wh-teal-br) 55%, transparent); }

/* Desktop (768+): table-layout fixed + one width per column (sum 100%), so extra width on a wide
   screen is shared by every column instead of pooling in «الاسم». Under ~1180 px the table keeps
   that minimum and scrolls INSIDE its own container (never clipped, never the whole page). */
.product-last-receiving { display: none; }
.product-table .product-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: .4rem; }
.product-action {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; border-radius: .55rem; border: 1px solid var(--color-border);
    background: transparent; color: var(--color-text-muted); transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.product-action svg { width: 1rem; height: 1rem; }
.product-action:hover, .product-action:focus-visible { color: var(--color-primary); border-color: var(--color-primary); }
.product-action-share { color: var(--wh-blue-fg); border-color: color-mix(in srgb, var(--wh-blue-br) 55%, transparent); }
.product-action-danger { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.product-action-danger:hover, .product-action-danger:focus-visible { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.product-table .product-status-badge { display: inline-block; padding: .15rem .6rem; font-size: .72rem; white-space: nowrap; }

@media (min-width: 768px) {
    .responsive-table-scroll table.product-table { table-layout: fixed; width: 100%; min-width: 80rem; }
    .product-table col.cw-select { width: 0; }
    .product-table col.cw-code { width: 6%; }
    .product-table col.cw-name { width: 18.5%; }
    .product-table col.cw-group { width: 10%; }
    .product-table col.cw-price { width: 8.4%; }
    .product-table col.cw-qty { width: 5.5%; }
    .product-table col.cw-status { width: 5.5%; }
    .product-table col.cw-actions { width: 12.5%; }
    [data-label-selecting] .product-table col.cw-select { width: 3%; }
    [data-label-selecting] .product-table col.cw-name { width: 15.5%; }

    .product-table th, .product-table td { padding: .5rem .6rem; overflow: hidden; }
    .product-table td { height: 3.4rem; }
    .product-table th:nth-child(2), .product-table td:nth-child(2) { padding-inline-start: 1.25rem; }
    .product-table th:last-child, .product-table td:last-child { padding-inline-end: 1.25rem; }
    [data-label-selecting] .product-table th:first-child, [data-label-selecting] .product-table td:first-child { padding-inline-start: 1.25rem; }
    [data-label-selecting] .product-table th:nth-child(2), [data-label-selecting] .product-table td:nth-child(2) { padding-inline-start: .6rem; }
    /* The four action icons must fit the actions column even at its narrowest (12.5% of 80rem). */
    .product-table td.product-actions-cell { padding-inline-start: .4rem; }
    .product-table .product-actions { gap: .25rem; }
    .product-table .product-action { width: 1.85rem; height: 1.85rem; }

    /* Alignment: identity columns start-aligned; prices, quantity, status and actions centred —
       header and value alike. */
    .product-table th, .product-table td { text-align: start; }
    .product-table th.price-head, .product-table td.price-cell,
    .product-table th.col-center, .product-table .product-qty-cell, .product-table .product-status-cell,
    .product-table .product-actions-cell, .product-table .label-select-col { text-align: center; }
    .product-table .product-code-cell { white-space: nowrap; text-overflow: ellipsis; }
    .product-table .product-name {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        overflow-wrap: anywhere; line-height: 1.35;
    }
    .product-table .product-group-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-table .price-chip { width: 5.4rem; min-width: 0; max-width: 100%; padding: .15rem .3rem; }
    .product-table .product-last-receiving { display: block; margin-top: .2rem; font-size: .68rem; line-height: 1.1; color: var(--color-text-muted); text-align: center; }
    .product-table .col-last-receiving { display: none; }
    .product-table .product-qty-cell { font-variant-numeric: tabular-nums; }

    /* The checkbox column only exists while selecting (its <col> is 0 wide otherwise). */
    .product-table .label-select-col { padding-inline: 0; }
    .product-table .label-select-col input { display: none; }
    [data-label-selecting] .product-table .label-select-col input { display: inline-block; }
}
[data-label-selecting] .product-table .product-row { cursor: pointer; }
.product-table .product-row.is-label-selected { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }

/* Filter card: a regular grid of equal fields; on a computer 5 columns × 2 rows with the two buttons
   in the last cell, bottom-aligned with the fields. */
.product-filter-form input:not([type="checkbox"]), .product-filter-form select { padding-top: .5rem; padding-bottom: .5rem; height: 2.6rem; }
.product-filter-form .product-filter-actions { display: flex; align-items: center; gap: .5rem; height: 2.6rem; margin-top: .25rem; }

/* Below 768: each product becomes a compact card. Identity rows span the card; the six prices sit
   in a two-column grid of labelled tiles; the actions are one row. */
@media (max-width: 767px) {
    .responsive-table-scroll table.product-table { width: 100%; min-width: 0; }
    .product-table thead { display: none; }
    .product-table tbody { display: block; }
    .product-table .product-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        padding: .9rem;
        border-top: 1px solid var(--color-border);
    }
    .product-table tbody tr:first-child { border-top: 0; }
    .product-table .product-row td { display: block; min-width: 0; border: 0; padding: 0 !important; }
    .product-table .product-name-cell { grid-column: 1 / -1; order: -2; font-size: 1rem; overflow-wrap: anywhere; }
    .product-table .product-code-cell { order: -1; }
    .product-table .product-group-cell,
    .product-table .product-code-cell,
    .product-table .product-qty-cell,
    .product-table .product-status-cell { font-size: .8rem; }
    .product-table .product-group-cell::before,
    .product-table .product-qty-cell::before {
        content: attr(data-label) ": ";
        font-weight: 700;
    }
    .product-table .price-cell {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        white-space: normal;
    }
    .product-table .price-cell::before {
        content: attr(data-label);
        min-width: 0;
        font-size: .72rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--color-text-muted);
    }
    .product-table .price-chip { min-width: 0; flex-shrink: 0; }
    .product-table .product-actions-cell { grid-column: 1 / -1; padding-top: .35rem !important; width: auto; }
    .product-table td[colspan] { grid-column: 1 / -1; display: block; }
    .product-table .product-name-cell, .product-table .product-group-cell { min-width: 0; max-width: none; }
    .product-table .label-select-cell { display: none !important; }
    [data-label-selecting] .product-table .label-select-cell { display: block !important; grid-column: 1 / -1; order: -3; }
}

/* ===========================================================================
   Shared components of the UX/reporting batch. All colours come from the
   semantic --ui-* tokens above.
   =========================================================================== */

/* Tone badge: always paired with text, never colour alone. */
.ui-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; border: 1px solid var(--ui-neutral-br); background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); padding: .15rem .6rem; font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ui-badge--in { color: var(--ui-success-fg); background: var(--ui-success-bg); border-color: var(--ui-success-br); }
.ui-badge--out { color: var(--ui-danger-fg); background: var(--ui-danger-bg); border-color: var(--ui-danger-br); }
.ui-badge--info { color: var(--ui-info-fg); background: var(--ui-info-bg); border-color: var(--ui-info-br); }
.ui-badge--accent { color: var(--ui-accent-fg); background: var(--ui-accent-bg); border-color: var(--ui-accent-br); }

/* Metric card: a label, a value and ALWAYS a unit, so quantities are never read as money. */
.ui-metrics { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.ui-metric { min-width: 0; border-radius: 1rem; border: 1px solid var(--color-border); background: var(--color-surface); padding: .85rem 1rem; }
.ui-metric--in { border-inline-start: 4px solid var(--ui-success-br); }
.ui-metric--out { border-inline-start: 4px solid var(--ui-danger-br); }
.ui-metric--money { border-inline-start: 4px solid var(--ui-info-br); }
.ui-metric--net { border-inline-start: 4px solid var(--ui-strip); }
.ui-metric-label { font-size: .8rem; color: var(--color-text-muted); }
.ui-metric-value { margin-top: .35rem; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--color-text); }
.ui-metric-unit { margin-inline-start: .3rem; font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.ui-metric-hint { margin-top: .3rem; font-size: .72rem; line-height: 1.45; color: var(--color-text-muted); }

/* Stack table: a normal table on desktop; below md every row becomes a card whose cells show
   their column name from data-label. Nothing ever widens the page. */
.stack-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.stack-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.stack-table th { padding: .65rem .9rem; text-align: start; font-size: .75rem; font-weight: 800; color: var(--color-text-muted); background: var(--color-surface-raised); white-space: nowrap; }
.stack-table td { padding: .65rem .9rem; border-top: 1px solid var(--color-border); vertical-align: middle; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .stack-table-wrap { overflow-x: visible; }
    .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
    .stack-table thead { display: none; }
    .stack-table tr { margin-bottom: .7rem; border-radius: 1rem; border: 1px solid var(--color-border); background: var(--color-surface-raised); padding: .3rem .8rem; }
    .stack-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: 0; padding: .4rem 0; white-space: normal !important; text-align: end; }
    .stack-table td[data-label]::before { content: attr(data-label); flex: none; font-size: .74rem; font-weight: 700; color: var(--color-text-muted); text-align: start; }
    .stack-table td.stack-table-full { display: block; text-align: start; }
    .stack-table td[colspan] { display: block; text-align: center; }
}

/* Cards inside a CSS grid must be allowed to shrink below their content (a wide table in a
   grid item otherwise stretches the whole page sideways on a phone). */
.min-w-card { min-width: 0; max-width: 100%; }
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* Shared product viewer (image + description) on top of the lightbox. */
.wh-lightbox-figure { width: min(96vw, 60rem); }
.wh-lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 8rem; background: rgba(15, 23, 42, .55); cursor: grab; touch-action: none; user-select: none; }
.wh-lightbox-stage.is-zoomed { display: block; }
.wh-lightbox-stage.is-empty { width: min(90vw, 26rem); min-height: 10rem; }
.wh-lightbox-empty { color: #cbd5e1; font-size: .9rem; font-weight: 700; padding: 2rem; text-align: center; }
.wh-lightbox-description { max-width: min(92vw, 46rem); max-height: 22vh; overflow-y: auto; border-radius: .9rem; background: rgba(15, 23, 42, .85); color: #e2e8f0; padding: .6rem .9rem; font-size: .85rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wh-lightbox-description[hidden], .wh-lightbox-empty[hidden], .wh-lightbox-image[hidden], [data-wh-gallery-nav][hidden] { display: none; }
.wh-lightbox-counter { color: #cbd5e1; font-size: .78rem; font-weight: 700; }

/* Admin customer map. */
.customer-map { width: 100%; min-height: 18rem; height: 100%; border-radius: 1rem; border: 1px solid var(--color-border); overflow: hidden; background: var(--color-surface-raised); z-index: 0; }
.customer-map--full { height: min(72vh, 46rem); min-height: 24rem; }
.customer-map-empty { display: flex; min-height: 18rem; align-items: center; justify-content: center; border-radius: 1rem; border: 1px dashed var(--color-border-strong); color: var(--color-text-muted); font-size: .9rem; text-align: center; padding: 1.5rem; }
.customer-map-popup { direction: rtl; text-align: right; min-width: 11rem; font-family: inherit; }
.customer-map-popup strong { display: block; font-size: .9rem; margin-bottom: .2rem; }
.customer-map-popup span { display: block; font-size: .78rem; color: #475569; }
.customer-map-popup a { display: inline-block; margin-top: .35rem; font-weight: 700; }
.dashboard-top { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-top > * { min-width: 0; }
.dashboard-top > form { margin-bottom: 0; }
@media (min-width: 1024px) { .dashboard-top--with-map { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.dashboard-map-card { display: flex; flex-direction: column; gap: .6rem; border-radius: 1rem; border: 1px solid var(--color-border); background: var(--color-surface); padding: 1rem; }
.dashboard-map-card .customer-map { flex: 1 1 auto; min-height: 16rem; }

/* Sale summary: evenly balanced cards, 1-2 columns on a phone, filling the row on desktop. */
.sale-summary-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
/* Phones: two ~90px columns split every amount over 4-5 lines, so each total becomes one full-width
   row (small title at the start, amount at the end). A long amount drops below its title as a whole and,
   only if still too wide, wraps at the space before «جنيه» — never inside the number. */
@media (max-width: 639px) {
    div.sale-summary-panel { padding: .75rem; }
    .sale-summary-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .sale-summary-grid > :not(.hidden) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: .75rem;
        row-gap: .2rem;
        min-height: 3.25rem;
        padding: .7rem .85rem;
    }
    .sale-summary-grid > * > p { margin: 0; min-width: 0; max-width: 100%; }
    .sale-summary-grid > * > p:first-child { font-size: .8rem; line-height: 1.35; }
    .sale-summary-grid > * > p:last-child { font-size: 1.125rem; line-height: 1.3; overflow-wrap: break-word; word-break: normal; }
}
@media (max-width: 359px) { .sale-summary-grid { grid-template-columns: 1fr; } }
.sale-summary-grid > * { min-width: 0; }
.sale-summary-grid > .sale-summary-span { grid-column: 1 / -1; }

/* Packaging hint (carton / bag / piece). */
.packaging-hint { margin-top: .35rem; font-size: .75rem; font-weight: 700; color: var(--ui-primary-fg); }
.count-breakdown { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(3.6rem, 1fr)); max-width: 17rem; }
.count-breakdown label { display: block; font-size: .68rem; font-weight: 700; color: var(--color-text-muted); }
.count-breakdown input { width: 100%; }
.count-total { margin-top: .3rem; font-size: .75rem; font-weight: 800; color: var(--ui-primary-fg); }
.wh-lightbox-bar [hidden] { display: none !important; }
.wh-lightbox-stage { max-height: 68vh; }
.wh-lightbox-image { max-height: 66vh; transition: none; }
.wh-lightbox-stage.is-zoomed { cursor: grab; }
.wh-lightbox-stage.is-zoomed:active { cursor: grabbing; }
.customer-map-empty[hidden], .customer-map[hidden] { display: none; }
/* Viewer toolbar: Arabic labels never clip or wrap mid-word; one tidy row that scrolls inside
   itself on a very narrow phone instead of breaking into uneven lines. */
.wh-lightbox-bar { flex-wrap: nowrap; max-width: 96vw; overflow-x: auto; padding: .15rem; scrollbar-width: none; }
.wh-lightbox-bar button { flex: none; white-space: nowrap; line-height: 1.2; padding-inline: .55rem; font-family: inherit; }
.wh-lightbox-bar .wh-lightbox-text-button { padding-inline: .85rem; font-size: .88rem; font-weight: 700; }
.wh-lightbox-bar bdi { unicode-bidi: isolate; }
@media (max-width: 420px) { .wh-lightbox-bar button { min-width: 2.5rem; min-height: 2.5rem; } .wh-lightbox-bar .wh-lightbox-text-button { padding-inline: .6rem; font-size: .8rem; } }
.ui-metrics--primary .ui-metric-value { font-size: 1.5rem; }
.ui-metrics--secondary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ui-metrics--secondary .ui-metric { background: var(--color-surface-raised); padding: .6rem .85rem; }
.ui-metrics--secondary .ui-metric-label { font-size: .74rem; }
.ui-metrics--secondary .ui-metric-value { font-size: 1.05rem; color: var(--color-text-muted); }
.ui-metrics-note { grid-column: 1 / -1; margin-top: 0; }
/* عدد القطع بالكرتونة: compact rows, calm tints, inputs that fit a phone card. */
.carton-table td, .carton-table th { padding-block: .5rem; }
.carton-table .carton-input { width: 5.5rem; border-radius: .6rem; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); padding: .3rem .5rem; text-align: center; }
.carton-table .carton-save { margin-inline-start: .35rem; border-radius: .6rem; border: 1px solid var(--ui-primary-br); background: var(--ui-primary-bg); color: var(--ui-primary-fg); padding: .3rem .7rem; font-size: .78rem; font-weight: 700; }
.carton-table thead th { position: sticky; top: 0; z-index: 1; }

/* Dashboard statistics: contained horizontal scrolling instead of crushing or page overflow. */
@media (max-width: 1279px) {
    .dashboard-kpi-strip {
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(14.5rem, 42%);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: .25rem;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
    }
    .dashboard-kpi-strip > * { scroll-snap-align: start; }
}
@media (max-width: 639px) { .dashboard-kpi-strip { grid-auto-columns: minmax(13rem, 78%); } }
.dashboard-chart-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.dashboard-chart-canvas { min-width: 30rem; }
@media (min-width: 768px) { .dashboard-chart-canvas { min-width: 0; } }
/* «ملاحظة المخزنجي» snippet on warehouse lists and source pages. */
.wh-preparer-note { margin-top: .4rem; max-width: 100%; border-radius: .6rem; border: 1px solid var(--ui-note-br); border-inline-start: 3px solid var(--ui-note-edge); background: var(--ui-note-bg); color: var(--ui-note-fg); padding: .3rem .6rem; font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.wh-preparer-note-label { font-weight: 800; color: var(--ui-note-label); }
.wh-preparer-note-card { border-inline-start: 3px solid var(--ui-note-edge) !important; }
.wh-preparer-note summary { cursor: pointer; }
.wh-preparer-note-full { margin-top: .3rem; white-space: pre-wrap; color: var(--color-text); }
/* Map background unavailable: a calm notice over the map, never a wall of error tiles. */
.leaflet-container { position: relative; }
.map-tiles-unavailable { position: absolute; inset-inline: .75rem; bottom: .75rem; z-index: 500; border-radius: .7rem; border: 1px solid var(--ui-warning-br); background: var(--ui-warning-bg); color: var(--ui-warning-fg); padding: .4rem .7rem; font-size: .78rem; font-weight: 700; text-align: center; pointer-events: none; }
/* Compact confirmation dialog (native <dialog>: Esc closes, focus stays inside, works on a phone). */
.ui-dialog { width: min(92vw, 26rem); margin: auto; border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface); color: var(--color-text); padding: 1rem 1.1rem; box-shadow: 0 20px 50px rgb(0 0 0 / .35); }
.ui-dialog::backdrop { background: var(--color-modal-backdrop); }
.ui-dialog-title { font-size: 1rem; font-weight: 800; }
.ui-dialog-subject { margin-top: .35rem; font-weight: 700; color: var(--ui-danger-fg); overflow-wrap: anywhere; }
.ui-dialog-text { margin-top: .4rem; font-size: .82rem; line-height: 1.6; color: var(--color-text-muted); }
.ui-dialog-label { display: block; margin-top: .7rem; margin-bottom: .3rem; font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.ui-dialog-actions { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ui-dialog-actions > * { flex: 1 1 8rem; }
/* Product Movement table: readable signed quantities. */
.movement-table td { vertical-align: top; }
.movement-qty { font-weight: 800; font-variant-numeric: tabular-nums; }
.movement-qty--in { color: var(--ui-success-fg); }
.movement-qty--out { color: var(--ui-danger-fg); }
/* «رابط الموقع» (Customer / Supplier / User): a normal full-width input; the URL itself reads LTR
   inside the RTL form and never widens the page. */
.location-url-input { display: block; width: 100%; max-width: 100%; min-width: 0; direction: ltr; text-align: left; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.location-url-input:focus { text-overflow: clip; outline: none; border-color: var(--ui-primary-br); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary-solid) 25%, transparent); }
.location-url-input::selection { background: color-mix(in srgb, var(--ui-primary-solid) 30%, transparent); }
.location-url-input::placeholder { direction: ltr; text-align: left; }
/* Viewer bar: «ملاءمة للشاشة» is always shown in full -- never wrapped inside the button, never
   clipped. On a narrow phone the whole row wraps onto a second line instead. */
.wh-lightbox-bar { max-width: min(96vw, 40rem); row-gap: .45rem; }
.wh-lightbox-bar .wh-lightbox-fit { white-space: nowrap; min-width: max-content; flex: none; overflow: visible; text-overflow: clip; font-size: .92rem; }
@media (max-width: 380px) {
    .wh-lightbox-bar { gap: .35rem; }
    .wh-lightbox-bar button { min-width: 2.5rem; min-height: 2.5rem; padding-inline: .45rem; }
    .wh-lightbox-bar .wh-lightbox-fit { font-size: .85rem; }
}
/* Sales invoice lines: fixed columns, so nothing moves when a line's «تفاصيل» opens or a hint
   appears; the panel spans the whole line (a second row on a computer, a full-width block under
   the card's fields on a phone). Numbers read LTR, never wrap and keep their width. */
.sale-num { white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.sale-lines-table > tbody > tr.sale-line-details-row { border-top-width: 0 !important; }
.sale-line-details, .sale-line-details * { overflow-wrap: break-word; word-break: normal; }
.sale-line-details-grid { display: grid; gap: .9rem; }
/* «تفاصيل» then «الربح» in the same details row; one alone takes the whole row. */
.sale-line-panels { display: grid; gap: .75rem; }
.sale-line-profit-stats { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
@media (min-width: 640px) {
    .sale-lines-table { table-layout: fixed; width: 100%; }
    .sale-lines-table > thead th:nth-child(2) { width: 12%; }
    .sale-lines-table > thead th:nth-child(3) { width: 16%; }
    .sale-lines-table > thead th:nth-child(4) { width: 19%; }
    .sale-lines-table > thead th:nth-child(5) { width: 17%; }
    .sale-lines-table > thead th:nth-child(6) { width: 17%; }
    .sale-lines-table > thead th, .sale-lines-table > tbody > tr > td { padding-inline: .5rem; }
    .sale-lines-table > tbody input { padding-inline: .5rem; }
}
@media (min-width: 1024px) {
    .sale-lines-table > thead th:nth-child(2) { width: 11%; }
    .sale-lines-table > thead th:nth-child(3) { width: 12%; }
    .sale-lines-table > thead th:nth-child(4) { width: 21%; }
    .sale-lines-table > thead th:nth-child(5) { width: 15%; }
    .sale-lines-table > thead th:nth-child(6) { width: 15%; }
    .sale-lines-table > thead th, .sale-lines-table > tbody > tr > td { padding-inline: 1rem; }
    .sale-lines-table > tbody input { padding-inline: .75rem; }
}
@media (min-width: 768px) {
    .sale-line-details-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .sale-line-panels.has-both { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .mobile-stack tr.sale-line-row.has-details { border-bottom: 0; }
    .mobile-stack tr.sale-line-details-row { display: block; padding: 0 .9rem .9rem; }
    .mobile-stack tr.sale-line-details-row > td[colspan] { text-align: start; }
    /* Phone card: a narrower label column, and the quantity / price / discount fields take all
       the remaining width so their numbers show in full. */
    .mobile-stack.sale-lines-table td[data-label]::before { flex-basis: 4.75rem; }
    .mobile-stack.sale-lines-table > tbody > tr > td:nth-child(2) > *,
    .mobile-stack.sale-lines-table > tbody > tr > td:nth-child(3) > *,
    .mobile-stack.sale-lines-table > tbody > tr > td:nth-child(4) > * { flex: 1 1 0%; }
    /* Phone card: «تفاصيل» / «الربح» / «حذف» in ONE row across the card's foot, equal widths and a
       comfortable touch height; «حذف» stays at the far end. */
    .mobile-stack.sale-lines-table td.sale-line-actions-cell { display: block; padding-top: .35rem !important; }
    .mobile-stack.sale-lines-table td.sale-line-actions-cell::before { content: none; display: none; }
    .mobile-stack.sale-lines-table .sale-line-actions { display: flex; flex-wrap: nowrap; gap: .5rem; width: 100%; }
    .mobile-stack.sale-lines-table .sale-line-actions > button { flex: 1 1 0; min-width: 0; min-height: 2.75rem; }
    .sale-line-details dl > div { flex-wrap: wrap; row-gap: .1rem; }
    .sale-line-details dl > div > dt { flex: 1 1 7rem; }
    .sale-line-details dl > div > dd { margin-inline-start: auto; }
}
/* The line price is read-only: no spinner, so the whole amount fits a narrow column. */
.sale-lines-table [data-price-input] { -moz-appearance: textfield; appearance: textfield; }
.sale-lines-table [data-price-input]::-webkit-inner-spin-button, .sale-lines-table [data-price-input]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* User / representative edit pages: ONE structure for every role (header, then «بيانات الحساب» →
   «الدور والفروع» → «الصلاحيات» → «بيانات إضافية»). Theme tokens only, so light and dark both work;
   nothing may push the page sideways on a 360px phone. */
.user-edit { max-width: 56rem; min-width: 0; }
.user-edit-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.user-edit-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--color-text); overflow-wrap: anywhere; }
.user-edit-role { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; padding: .2rem .75rem; font-size: .8rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-surface-raised); }
.user-edit-section { min-width: 0; border: 1px solid var(--color-border); border-radius: 1.25rem; background: var(--color-surface); padding: 1.25rem; }
.user-edit-section + .user-edit-section { margin-top: 1rem; }
.user-edit-section-title { margin: 0 0 .25rem; font-size: 1rem; font-weight: 800; color: var(--color-text); }
.user-edit-section-hint { margin: 0 0 1rem; font-size: .78rem; line-height: 1.6; color: var(--color-text-muted); }
.user-edit-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.user-edit-grid > * { min-width: 0; }
.user-edit-grid .user-edit-span { grid-column: 1 / -1; }
.user-edit input:not([type="checkbox"]):not([type="radio"]), .user-edit select, .user-edit textarea { max-width: 100%; min-width: 0; }
/* Touch-friendly switches list: one column on a phone, 44px rows, labels wrap instead of overflowing. */
.user-toggle-list { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--color-border); border-radius: 1rem; background: var(--color-surface-raised); padding: .5rem; }
.user-toggle { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; min-width: 0; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); padding: .55rem .85rem; font-size: .9rem; color: var(--color-text); cursor: pointer; }
.user-toggle:hover { border-color: var(--color-border-strong); }
.user-toggle > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.user-toggle input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--color-secondary); }
@media (min-width: 640px) {
    .user-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-toggle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .75rem; }
}
@media (min-width: 1024px) { .user-toggle-list.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .user-edit-section { padding: .9rem; border-radius: 1rem; } }
/* User / representative forms: clearly visible field borders and focus in BOTH themes (tokens only;
   this replaces a dark-only inline block that painted the fields dark in the light theme). */
.user-form input[type="text"], .user-form input[type="password"], .user-form input[type="email"], .user-form input[type="url"],
.user-form input[type="number"], .user-form select, .user-form textarea {
    border: 1px solid var(--user-form-field-border) !important;
    border-radius: 0.75rem;
    background: var(--color-input-bg) !important;
    color: var(--color-text) !important;
}
.user-form { --user-form-field-border: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border-strong)); }
.user-form input::placeholder, .user-form textarea::placeholder { color: var(--color-text-muted); }
.user-form input:focus, .user-form select:focus, .user-form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: none;
}
.user-form input:disabled, .user-form select:disabled, .user-form textarea:disabled, .user-form input[readonly] {
    border-style: dashed !important;
    border-color: var(--color-disabled-border) !important;
    background: var(--color-disabled-bg) !important;
    color: var(--color-disabled-text) !important;
    cursor: not-allowed;
}
.user-form input[type="checkbox"] { border: 1px solid var(--color-border-strong); accent-color: var(--color-secondary); }

/* ===========================================================================
   Warehouse: work history in separate columns (computer) / one ordered card per task (phone),
   item totals on task cards, the hand-over reason, and the viewer's gallery arrows.
   =========================================================================== */
.wh-nowrap { white-space: nowrap; }
.wh-task-items { margin-top: .3rem; font-size: .8rem; font-weight: 700; color: var(--color-text-muted); overflow-wrap: anywhere; }
.wh-history th, .wh-history td { padding: .6rem .7rem; }
.wh-history td { vertical-align: top; }
.wh-history .wh-task-party, .wh-history .wh-task-items { margin-top: 0; }
.wh-history td.wh-history-doc { overflow-wrap: anywhere; }
.wh-history td.wh-history-party { min-width: 8rem; overflow-wrap: anywhere; }
.wh-history td.wh-history-items { white-space: nowrap; }
.wh-history td.wh-history-action { text-align: end; white-space: nowrap; }
.wh-history tbody tr:hover { background: none; }
.wh-history tbody.wh-history-entry:hover > tr { background: var(--color-surface-raised); }
.wh-history tbody.wh-history-entry > tr.wh-history-note > td { border-top: 0; padding-top: 0; }
.wh-history .wh-history-note .wh-preparer-note { margin-top: 0; }
@media (max-width: 767px) {
    .wh-stack.wh-history tbody.wh-history-entry {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: .75rem;
        row-gap: .2rem;
        margin-bottom: .75rem;
        border-radius: 1rem;
        border: 1px solid var(--color-border);
        background: var(--color-surface-raised);
        padding: .65rem .85rem;
    }
    .wh-stack.wh-history tbody.wh-history-entry > tr { display: contents; }
    .wh-stack.wh-history tbody.wh-history-entry td {
        display: block;
        grid-column: 1 / -1;
        width: auto;
        min-width: 0;
        border: 0;
        padding: .2rem 0;
        white-space: normal;
    }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-doc { grid-column: 1; order: 1; align-self: center; font-size: .95rem; }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-status { grid-column: 2; order: 2; align-self: center; text-align: end; }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-party { order: 3; }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-items { order: 4; }
    .wh-stack.wh-history tbody.wh-history-entry > tr.wh-history-note > td { order: 5; padding: .35rem 0; }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-fact {
        order: 6;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--color-border);
        padding: .4rem 0;
    }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-action { order: 7; padding-top: .55rem; }
    .wh-stack.wh-history tbody.wh-history-entry td.wh-history-action .wh-chip { display: flex; justify-content: center; width: 100%; }
    .wh-stack.wh-history tbody.wh-history-entry:hover > tr { background: none; }
}

.wh-transfer-reason { margin-top: .9rem; display: grid; gap: .4rem; }
.wh-transfer-reason label { font-size: .85rem; font-weight: 700; color: var(--color-text); }
.wh-required { margin-inline-start: .15rem; color: var(--wh-red-fg); font-weight: 900; }
.wh-required-text { margin-inline-start: .25rem; font-size: .75rem; font-weight: 700; color: var(--wh-red-fg); }

.wh-lightbox-viewport { position: relative; max-width: 96vw; }
.wh-lightbox-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, .35);
    background: rgba(15, 23, 42, .72);
    color: #f8fafc;
    cursor: pointer;
}
.wh-lightbox-arrow svg { width: 1.4rem; height: 1.4rem; }
.wh-lightbox-arrow:hover, .wh-lightbox-arrow:focus-visible { background: rgba(15, 23, 42, .92); border-color: rgba(226, 232, 240, .7); }
.wh-lightbox-arrow.is-prev { inset-inline-start: .4rem; }
.wh-lightbox-arrow.is-next { inset-inline-end: .4rem; }
.wh-lightbox-arrow[hidden] { display: none; }

/* Warehouse home: compact head with the period button beside the title, so on a 360×740 phone
   the «فواتير البيع» boxes are visible as soon as the page opens. */
.wh-home { gap: .75rem; }
.wh-home-head { margin-bottom: 0; }
.wh-home-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wh-home-title-row .wh-title { margin-top: 0; }
.wh-home-head .wh-subtitle { margin-top: .15rem; font-size: .8rem; }
.wh-period-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}
.wh-period-button:hover, .wh-period-button:focus-visible { border-color: var(--color-primary); }
.wh-period-button svg { width: 1.25rem; height: 1.25rem; }
.wh-period-label { font-size: .8rem; font-weight: 800; color: var(--color-text-muted); white-space: nowrap; }
.wh-period-panel { max-width: 26rem; }
.wh-period-form { margin-top: .9rem; display: grid; gap: .75rem; }
.wh-period-form label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--color-text-muted); }
.wh-period-form input { width: 100%; min-width: 0; }
.wh-period-hint { font-size: .75rem; color: var(--color-text-muted); }
.wh-period-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
    .wh-home .wh-dashboard-section { padding: .65rem; }
    .wh-home .wh-dashboard-section-title { margin-bottom: .45rem; font-size: .95rem; }
    .wh-home .wh-stats { gap: .5rem; }
    .wh-home .wh-stat { padding: .55rem .7rem; }
    .wh-home .wh-stat-value { margin-top: .2rem; font-size: 1.35rem; }
    .wh-home .wh-stat .text-xs { margin-top: .1rem; font-size: .68rem; }
}

/* Task item card: carton/bag hint under the piece quantity, and the product name that opens the
   warehouse-only picture. */
.wh-pack-note { margin-top: .1rem; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--wh-blue-fg); }
/* Looks exactly like any other product name; only the click opens the warehouse-only picture. */
.wh-item-name-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: inherit;
    overflow-wrap: anywhere;
}

/* Warehouse dashboard tiles: text and number on the right, a large calm line icon on the left, and
   a thin edge strip on the right in the same muted colour. The colour/icon follow the box (its
   state), so «جاري التحضير» looks the same under sales and transfers. */
:root {
    --wh-box-blue: #4d78a6;  --wh-box-amber: #a9762a;  --wh-box-sky: #3a87a8;  --wh-box-green: #4b8a5d;
    --wh-box-violet: #7a6cab; --wh-box-yellow: #9a861f; --wh-box-orange: #b06a44; --wh-box-teal: #2f8c86;
    --wh-box-slate: #5d7491; --wh-box-rose: #a55f6e;
}
html.dark {
    --wh-box-blue: #8fb0d8;  --wh-box-amber: #dcb06a;  --wh-box-sky: #7fc0db;  --wh-box-green: #8cc59d;
    --wh-box-violet: #b2a8df; --wh-box-yellow: #d8c46c; --wh-box-orange: #e1a17e; --wh-box-teal: #7ccdc6;
    --wh-box-slate: #a2b3ca; --wh-box-rose: #e0a3b0;
}
:is(.wh-stat, .wh-mon-tile)[data-box="to_prepare"]       { --wh-box-tone: var(--wh-box-blue); }
:is(.wh-stat, .wh-mon-tile)[data-box="modified"]         { --wh-box-tone: var(--wh-box-amber); }
:is(.wh-stat, .wh-mon-tile)[data-box="in_progress"]      { --wh-box-tone: var(--wh-box-sky); }
:is(.wh-stat, .wh-mon-tile)[data-box="prepared"]         { --wh-box-tone: var(--wh-box-green); }
:is(.wh-stat, .wh-mon-tile)[data-box="waiting_review"]   { --wh-box-tone: var(--wh-box-violet); }
:is(.wh-stat, .wh-mon-tile)[data-box="available_review"] { --wh-box-tone: var(--wh-box-yellow); }
:is(.wh-stat, .wh-mon-tile)[data-box="reviewed_no_note"] { --wh-box-tone: var(--wh-box-orange); }
:is(.wh-stat, .wh-mon-tile)[data-box="pending_dispatch"] { --wh-box-tone: var(--wh-box-blue); }
:is(.wh-stat, .wh-mon-tile)[data-box="completed"]        { --wh-box-tone: var(--wh-box-teal); }
:is(.wh-stat, .wh-mon-tile)[data-box="to_receive"]       { --wh-box-tone: var(--wh-box-slate); }
:is(.wh-stat, .wh-mon-tile)[data-box="cancelled"]        { --wh-box-tone: var(--wh-box-rose); }
.wh-home .wh-stat[data-box] {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    min-width: 0;
    border-inline-start: 4px solid var(--wh-box-tone, var(--color-border));
}
.wh-home .wh-stat[data-box]:hover, .wh-home .wh-stat[data-box]:focus-visible { border-inline-start-color: var(--wh-box-tone, var(--color-primary)); }
/* Text column: the label takes the free height, so the numbers of one row line up even when one
   label wraps to more lines than its neighbour. */
.wh-stat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wh-stat-body > .wh-stat-label { flex: 1 0 auto; }
.wh-stat-icon { flex: 0 0 auto; align-self: center; width: 2.5rem; height: 2.5rem; color: var(--wh-box-tone, var(--color-text-muted)); opacity: .6; }
/* An odd number of boxes: the last one takes the whole row instead of leaving half of it empty. */
.wh-stats-pairs > .wh-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* «مكتملة» always closes its section on a full row; the boxes before it are kept in pairs. */
.wh-stats-pairs > .wh-stat[data-box="completed"] { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .wh-home .wh-stat[data-box] { gap: .4rem; }
    .wh-stat-icon { width: 1.9rem; height: 1.9rem; }
}

/* Task page: the finishing step (تم التحضير / تمت المراجعة / تأكيد الاستلام) right under the last
   item, full card width. A plain in-flow button — deliberately never sticky or fixed. */
.wh-step-bottom { margin-top: 1rem; display: grid; gap: .75rem; }
.wh-step-action { width: 100%; min-width: 0; }

/* ===========================================================================
   Shared image viewer, final layout (phone first): title on top (wraps, never cut) with a clear ✕
   in the corner, the picture taking every pixel left, and one short bar fixed at the bottom that
   always fits 360px — − / + / «ملاءمة» (44px touch targets), the zoom level and «1 / 2» on one line.
   =========================================================================== */
#wh-lightbox .wh-lightbox-figure {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    pointer-events: none;
}
#wh-lightbox .wh-lightbox-figure > * { pointer-events: auto; }
#wh-lightbox .wh-lightbox-top { display: flex; align-items: flex-start; gap: .5rem; flex: none; }
#wh-lightbox .wh-lightbox-caption { flex: 1 1 auto; min-width: 0; padding-top: .55rem; text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
#wh-lightbox .wh-lightbox-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, .4);
    background: rgba(15, 23, 42, .8);
    color: #f8fafc;
    cursor: pointer;
}
#wh-lightbox .wh-lightbox-x svg { width: 1.3rem; height: 1.3rem; }
#wh-lightbox .wh-lightbox-viewport { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; display: flex; }
#wh-lightbox .wh-lightbox-stage { flex: 1 1 auto; width: 100%; max-width: 100%; height: 100%; max-height: none; min-height: 0; }
#wh-lightbox .wh-lightbox-stage:not(.is-zoomed) .wh-lightbox-image { max-width: 100%; max-height: 100%; }
#wh-lightbox .wh-lightbox-description { flex: none; max-height: 18vh; align-self: center; }
#wh-lightbox .wh-lightbox-bar {
    flex: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 0;
}
#wh-lightbox .wh-lightbox-bar button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .55rem;
    font-size: .85rem;
}
#wh-lightbox .wh-lightbox-bar svg { width: 1.2rem; height: 1.2rem; flex: none; }
#wh-lightbox .wh-lightbox-level,
#wh-lightbox .wh-lightbox-counter {
    flex: none;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .8rem;
    font-weight: 800;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
}
#wh-lightbox .wh-lightbox-level { min-width: 2.9rem; text-align: center; }
#wh-lightbox .wh-lightbox-bar [hidden] { display: none !important; }
@media (max-width: 359px) { #wh-lightbox .wh-lightbox-fit span { display: none; } }

/* Receipt pages: «للاستلام» / «تم الاستلام» tabs (wrap on a 360px phone, never scroll). */
.wh-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.wh-tab {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .4rem .9rem;
    border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
    color: var(--color-text-muted); font-size: .85rem; font-weight: 800;
}
.wh-tab:hover, .wh-tab:focus-visible { border-color: var(--color-primary); color: var(--color-text); }
.wh-tab.is-active { border-color: var(--color-primary); color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.wh-tab-count { font-variant-numeric: tabular-nums; }

/* Warehouse lines inside a Sale / Transfer / Purchase header: small, muted, one job per line,
   wrapping normally on a 360px phone. The stage is coloured text, not a badge. */
.wh-hlines { margin-top: .6rem; display: grid; gap: .2rem; min-width: 0; }
.wh-hline { margin: 0; font-size: .75rem; line-height: 1.6; color: var(--color-text-muted); overflow-wrap: anywhere; }
.wh-hline-label { font-weight: 700; }
.wh-hline-person { font-weight: 700; color: var(--color-text); }
a.wh-hline-person { text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
a.wh-hline-person:hover, a.wh-hline-person:focus-visible { color: var(--color-primary); }
.wh-hline-status { font-weight: 800; }
.wh-hline-status.is-blue { color: var(--wh-blue-fg); }   .wh-hline-status.is-amber { color: var(--wh-amber-fg); }
.wh-hline-status.is-indigo { color: var(--wh-indigo-fg); } .wh-hline-status.is-green { color: var(--wh-green-fg); }
.wh-hline-status.is-teal { color: var(--wh-teal-fg); }   .wh-hline-status.is-orange { color: var(--wh-orange-fg); }
.wh-hline-status.is-red { color: var(--wh-red-fg); }     .wh-hline-status.is-gray { color: var(--wh-gray-fg); }
.wh-hline-cancel { color: var(--wh-red-fg); text-decoration: underline; text-underline-offset: 3px; }
/* A document number stays on one line, left-to-right («TR-15»), in every width. */
.wh-doc-number { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }

/* «متابعة مسؤولي المخزن»: one full-width card per worker, one under the other. Each number is a
   compact link tile (number on top, its name under it, a thin edge strip in the dashboard's colour
   for that state). The tile grid fills by the width it actually has and never drops a tile below
   120px; names wrap between words only, at most two lines. */
.wh-mon-filter { padding: .75rem 1rem; }
.wh-mon-filter-form { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: .5rem; }
.wh-mon-filter-field { flex: 0 1 18rem; min-width: 0; }
.wh-mon-filter-field select { width: 100%; min-width: 0; height: 2.5rem; margin-top: 0; padding-block: 0; }
.wh-mon-filter-hint { margin-top: .5rem; font-size: .72rem; line-height: 1.6; color: var(--color-text-muted); }
.wh-mon-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.wh-mon-card { padding: .9rem 1rem; }
.wh-mon-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.wh-mon-head .wh-card-name { min-width: 0; }
.wh-mon-scope { flex: 1 1 10rem; min-width: 0; font-size: .75rem; color: var(--color-text-muted); }
.wh-mon-open { margin-inline-start: auto; padding: .3rem .75rem; font-size: .78rem; }
.wh-mon-body { margin-top: .75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.wh-mon-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; min-width: 0; }
@media (min-width: 1280px) { .wh-mon-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; } }
.wh-mon-section { min-width: 0; container-type: inline-size; }
.wh-mon-section > h5 { font-size: .75rem; font-weight: 800; color: var(--color-text-muted); }
.wh-mon-tiles {
    margin-top: .45rem;
    display: grid;
    /* The monitor card can become narrower than two 120px tiles after the page/card padding.
       Keep its useful two-column layout when it fits, but let a tile consume the full available
       width on the narrowest phones instead of widening the document. */
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
    gap: .4rem;
}
.wh-mon-tiles, .wh-mon-tiles * { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wh-mon-tile {
    display: flex; flex-direction: column; justify-content: flex-start; gap: .15rem;
    min-width: 0; height: 4.4rem; padding: .4rem .6rem; overflow: hidden;
    border: 1px solid var(--color-border); border-inline-start: 3px solid var(--wh-box-tone, var(--color-border));
    border-radius: .7rem; background: var(--color-surface); color: var(--color-text); text-decoration: none;
    transition: border-color .15s, background-color .15s, opacity .15s;
}
.wh-mon-tile:hover, .wh-mon-tile:focus-visible { border-color: var(--wh-box-tone, var(--color-primary)); background: var(--color-surface-raised); }
.wh-mon-tile.is-zero { opacity: .5; }
.wh-mon-tile.is-zero:hover, .wh-mon-tile.is-zero:focus-visible { opacity: .85; }
.wh-mon-tile-top { display: flex; align-items: center; justify-content: space-between; gap: .35rem; }
.wh-mon-tile-value { font-size: 1.3rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wh-mon-tile .wh-stat-icon { width: 1.05rem; height: 1.05rem; opacity: .8; }
.wh-mon-tile-label {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: .72rem; font-weight: 700; line-height: 1.3; color: var(--color-text-muted);
}
/* Averages: one row of three when they fit, one under the other on a narrow phone; the value never
   wraps («25 دقيقة و8 ثوانٍ» stays on one line). */
.wh-mon-avgs { margin-top: .45rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
@container (min-width: 27rem) { .wh-mon-avgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wh-mon-avg { min-width: 0; border-radius: .7rem; border: 1px solid var(--color-border); padding: .4rem .6rem; overflow-wrap: normal; word-break: normal; }
.wh-mon-avg dt { font-size: .7rem; font-weight: 700; color: var(--color-text-muted); }
.wh-mon-avg dd { margin-top: .1rem; font-size: .9rem; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
.wh-mon-avg-hint { margin-top: .15rem; font-size: .64rem; line-height: 1.35; color: var(--color-text-muted); }

/* Task page actions, under a thin divider. The step button (بدء التحضير / إرسال) is the biggest,
   on its own row. The secondary actions (نقل / إرسال لمراجعة شخص آخر / طلب التأكيد / إلغاء الإسناد)
   are real outline buttons of ONE size: 46px high, text-sm, one-line labels. Phone: each the full
   card width, one under the other with a fixed gap. From 640px: side by side in one row. Same rules
   for every task type, every stage, Admin/Manager and the worker. */
.wh-task-actions {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0;
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border);
}
.wh-task-primary { min-width: 0; }
@media (min-width: 640px) { .wh-task-primary { justify-self: start; min-width: 14rem; } }
.wh-task-secondary-row { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
@media (min-width: 640px) { .wh-task-secondary-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } }
.wh-task-secondary-wrap { min-width: 0; }
.wh-task-secondary {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    box-sizing: border-box; width: 100%; min-width: 0; height: 2.875rem; padding: 0 1.1rem;
    border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: .9rem;
    background: var(--color-surface-raised); color: var(--color-text);
    font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: center;
    text-decoration: none; cursor: pointer; list-style: none;
    transition: border-color .15s, background-color .15s, filter .15s;
}
.wh-task-secondary::-webkit-details-marker { display: none; }
.wh-task-secondary:hover, .wh-task-secondary:focus-visible { border-color: var(--color-primary); }
.wh-task-secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.wh-task-secondary.is-amber { color: var(--wh-amber-fg); background: var(--wh-amber-bg); border-color: var(--wh-amber-br); }
.wh-task-secondary.is-danger { color: var(--wh-red-fg); background: var(--wh-red-bg); border-color: var(--wh-red-br); }
.wh-task-secondary.is-amber:hover, .wh-task-secondary.is-danger:hover,
.wh-task-secondary.is-amber:focus-visible, .wh-task-secondary.is-danger:focus-visible { border-color: currentColor; }
@media (min-width: 640px) {
    .wh-task-secondary { width: auto; }
    .wh-task-secondary-wrap > .wh-task-secondary { display: inline-flex; }
}
/* «أنت تنفّذ هذه الخطوة بدلاً من المسؤول …» — Admin/Manager doing the worker's step. */
.wh-proxy-notice {
    margin-top: .75rem; padding: .45rem .75rem; border-radius: .75rem;
    border: 1px solid var(--wh-indigo-br); background: var(--wh-indigo-bg); color: var(--wh-indigo-fg);
    font-size: .8rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere;
}

/* Stock transfer lists (inventory + exchange tabs): compact, equal-height rows with fixed columns.
   The number and date never wrap; long warehouse/user names are clipped with their full text in
   the title. «المخزن» shows the warehouse jobs as short coloured markers; «الإجراءات» keeps a fixed
   slot for the send icon so «عرض» sits in the same place on every row. */
.wh-card-tight { padding-block: .75rem; }
@media (min-width: 1100px) {
    .wh-filter-grid.wh-filter-inline { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; align-items: end; }
    .wh-filter-grid.wh-filter-inline .wh-filter-actions { grid-column: auto; flex-wrap: nowrap; }
}
.wh-transfer-table { table-layout: fixed; font-size: .875rem; }
.wh-transfer-table th { white-space: nowrap; }
.wh-transfer-table td { padding: .5rem .75rem; height: 3rem; border-top: 1px solid var(--color-border); vertical-align: middle; }
.wh-transfer-table tbody tr:hover { background: color-mix(in srgb, var(--color-surface-raised) 70%, transparent); }
.wh-transfer-table .wh-tt-c-number { width: 7rem; }
.wh-transfer-table .wh-tt-c-request { width: 7rem; }
.wh-transfer-table .wh-tt-c-status { width: 7.5rem; }
.wh-transfer-table .wh-tt-c-user { width: 8.5rem; }
.wh-transfer-table .wh-tt-c-date { width: 8.5rem; }
.wh-transfer-table .wh-tt-c-wh { width: 8.5rem; }
.wh-transfer-table .wh-tt-c-actions { width: 6.5rem; }
.wh-transfer-table .wh-tt-c-view { width: 5rem; }
.wh-tt-clip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-tt-sub { font-size: .75rem; color: var(--color-text-muted); }
.wh-tt-date, .wh-tt-number { white-space: nowrap; }
.wh-transfer-table .wh-chip-sm { padding: .1rem .5rem; font-size: .7rem; line-height: 1.4; }
.wh-transfer-table .wh-stack-label { display: none; }
.wh-tt-wh { line-height: 1.3; }
.wh-mark { display: block; font-size: .7rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-mark.is-blue { color: var(--wh-blue-fg); }   .wh-mark.is-amber { color: var(--wh-amber-fg); }
.wh-mark.is-indigo { color: var(--wh-indigo-fg); } .wh-mark.is-green { color: var(--wh-green-fg); }
.wh-mark.is-teal { color: var(--wh-teal-fg); }   .wh-mark.is-orange { color: var(--wh-orange-fg); }
.wh-mark.is-red { color: var(--wh-red-fg); }     .wh-mark.is-gray { color: var(--wh-gray-fg); }
.wh-tt-none { color: var(--color-text-muted); }
.wh-tt-act { display: flex; align-items: center; gap: .4rem; }
.wh-tt-view { min-height: 2rem; display: inline-flex; align-items: center; }
.wh-tt-slot { display: inline-flex; width: 2rem; height: 2rem; flex: 0 0 2rem; }
.wh-transfer-table .wh-list-send { width: 2rem; height: 2rem; }
@media (max-width: 639px) {
    .wh-transfer-table, .wh-transfer-table tbody { display: block; width: 100%; }
    .wh-transfer-table thead, .wh-transfer-table colgroup { display: none; }
    .wh-transfer-table tr.wh-tt-row {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: center;
        grid-template-areas: "num num status" "src dst dst" "user date date" "wh wh wh" "act act act";
        margin-bottom: .6rem; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: 1rem;
        background: var(--color-surface-raised);
    }
    .wh-transfer-table.is-exchange tr.wh-tt-row {
        grid-template-areas: "num num status" "req party party" "src dst dst" "user date date" "act act act";
    }
    .wh-transfer-table td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
    .wh-tt-number { grid-area: num; }  .wh-tt-status { grid-area: status; justify-self: end; }
    .wh-tt-source { grid-area: src; }  .wh-tt-dest { grid-area: dst; }
    .wh-tt-dest { display: flex !important; align-items: center; gap: .3rem; }
    .wh-tt-dest::before { content: "←"; flex: 0 0 auto; color: var(--color-text-muted); }
    .wh-tt-user { grid-area: user; font-size: .75rem; color: var(--color-text-muted); }
    .wh-tt-date { grid-area: date; font-size: .75rem; color: var(--color-text-muted); }
    .wh-tt-wh { grid-area: wh; display: flex !important; flex-wrap: wrap; gap: .2rem .75rem; }
    .wh-tt-wh .wh-mark { display: inline; }
    .wh-tt-request { grid-area: req; font-size: .8rem; }  .wh-tt-party { grid-area: party; font-size: .8rem; }
    .wh-tt-actions { grid-area: act; padding-top: .3rem !important; }
    .wh-transfer-table td.wh-empty { padding: 1rem; }
}

/* --- Sales: transferred pending invoices (tab «المحوّلة») ------------------------------------
   Both tables share the same fixed, percentage columns (sum 100%) so they line up and fit the
   card at 1280/1366 with all four actions. The invoice number is never clipped (it wraps, at
   the dashes first); actions wrap inside their cell. The wrapper scrolls horizontally only as a
   fallback on a narrower screen. Below 1024px every invoice becomes a compact card. */
.sx-table-wrap { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.sx-table { width: 100%; min-width: 52rem; table-layout: fixed; border-collapse: collapse; font-size: .85rem; text-align: right; }
.sx-table thead { background: var(--color-surface-raised); }
.sx-table th { padding: .55rem .5rem; font-size: .76rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sx-table td { padding: .5rem .5rem; border-top: 1px solid var(--color-border); vertical-align: middle; min-width: 0; overflow: hidden; }
/* First and last columns keep the card's own inner padding (the title's px-5). */
.sx-table th:first-child, .sx-table td:first-child { padding-inline-start: 1.25rem; }
.sx-table th:last-child, .sx-table td:last-child { padding-inline-end: 1.25rem; }
.sx-table tbody tr:hover { background: color-mix(in srgb, var(--color-surface-raised) 70%, transparent); }
.sx-table .sx-c-number { width: 17%; }
.sx-table .sx-c-customer { width: 12%; }
.sx-table .sx-c-branch { width: 11%; }
.sx-table .sx-c-kind { width: 9%; }
.sx-table .sx-c-status { width: 15%; }
.sx-table .sx-c-user { width: 9%; }
.sx-table .sx-c-actions { width: 16%; }
.sx-number a {
    display: block; direction: ltr; text-align: right; white-space: normal; overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.35;
}
.sx-clip { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-sub { display: block; margin-top: .15rem; font-size: .72rem; line-height: 1.3; color: var(--color-text-muted); }
.sx-badge {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
    padding: .1rem .5rem; border: 1px solid; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.4;
}
.sx-status .sx-badge { display: block; width: fit-content; }
.sx-act { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.sx-act form { margin: 0; display: contents; }
.sx-btn {
    display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; min-width: 0; height: 1.875rem;
    padding: 0 .45rem; border: 1px solid var(--color-border); border-radius: .55rem; background: transparent;
    color: var(--color-text); font: inherit; font-size: .72rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.sx-btn:hover { background: var(--color-surface-raised); }
.sx-btn-ok { color: var(--wh-green-fg); border-color: var(--wh-green-br); }
.sx-btn-danger { color: var(--wh-red-fg); border-color: var(--wh-red-br); }
.sx-btn-warn { color: var(--wh-amber-fg); border-color: var(--wh-amber-br); }
.sx-act .wh-list-send { width: 1.875rem; height: 1.875rem; }
.sx-empty { padding: 1.5rem !important; text-align: center; color: var(--color-text-muted); }
@media (max-width: 1023px) {
    .sx-table-wrap { overflow-x: visible; }
    .sx-table, .sx-table tbody { display: block; width: 100%; min-width: 0; }
    .sx-table thead, .sx-table colgroup { display: none; }
    .sx-table tbody { padding: 0 .75rem .75rem; }
    .sx-table tr.sx-row {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .75rem; align-items: center;
        grid-template-areas: "num kind" "status status" "cust cust" "from to" "user user" "act act";
        margin-top: .6rem; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: 1rem;
        background: var(--color-surface-raised);
    }
    .sx-table td, .sx-table td:first-child, .sx-table td:last-child { display: block; padding: 0; border: 0; overflow: visible; }
    .sx-table td.sx-empty { padding: 1rem !important; }
    .sx-number { grid-area: num; }
    .sx-number a { font-size: .8rem; }
    .sx-customer { grid-area: cust; font-weight: 600; }
    .sx-kind { grid-area: kind; justify-self: end; }
    .sx-status { grid-area: status; display: flex !important; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; min-width: 0; }
    .sx-status .sx-badge { display: inline-block; }
    .sx-status .sx-sub { margin-top: 0; }
    .sx-status .sx-reason { flex-basis: 100%; }
    .sx-from { grid-area: from; font-size: .78rem; color: var(--color-text-muted); }
    .sx-to { grid-area: to; display: flex !important; align-items: center; gap: .3rem; font-size: .78rem; color: var(--color-text-muted); min-width: 0; }
    .sx-to::before { content: "←"; flex: 0 0 auto; }
    .sx-user { grid-area: user; font-size: .75rem; color: var(--color-text-muted); }
    .sx-actions { grid-area: act; padding-top: .25rem !important; }
    .sx-act .sx-btn { flex: 1 1 0; min-width: 4.25rem; height: 2.5rem; font-size: .8rem; }
    .sx-act .wh-list-send { width: 2.5rem; height: 2.5rem; }
}

/* ---------------------------------------------------------------
 * Exchange-stock operation forms (batch modal and single pages):
 * framed fields from the theme tokens, so light and dark both hold.
 * ------------------------------------------------------------- */
.ex-form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ex-form .ex-fields { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 640px) { .ex-form .ex-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-form .ex-span-2 { grid-column: 1 / -1; } }
.ex-form .ex-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ex-form [hidden] { display: none !important; }
.ex-form .ex-label { font-size: .875rem; font-weight: 700; color: var(--color-text); }
.ex-form .ex-required { color: var(--color-danger); margin-inline-start: .2rem; }
.ex-form select,
.ex-form textarea,
.ex-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: .75rem;
    background-color: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    padding: .6rem .85rem;
    font-size: .95rem;
    box-shadow: none;
}
.ex-form textarea { min-height: 5.6rem; line-height: 1.6; resize: vertical; }
.ex-form select { cursor: pointer; padding-inline-end: 2.25rem; }
.ex-form select:focus,
.ex-form textarea:focus,
.ex-form input:focus {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
/* Only our own messages mark a field invalid, never the browser's after-submit styling. */
.ex-form :is(:invalid, :-moz-ui-invalid, :user-invalid):not([aria-invalid="true"]):not(:focus) { border-color: var(--color-border-strong) !important; box-shadow: none; }
.ex-form [aria-invalid="true"] { border-color: var(--color-danger) !important; }
.ex-form .ex-error { font-size: .8rem; font-weight: 600; color: var(--color-danger); }
.ex-form .ex-hint { font-size: .8rem; line-height: 1.6; color: var(--color-text-muted); }
.ex-form .ex-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.ex-form .ex-actions > * { min-height: 2.75rem; min-width: 8rem; }
.btn-danger-solid { background: var(--color-danger) !important; color: #fff !important; border: 0 !important; }
.btn-danger-solid:hover { filter: brightness(.94); }
@media (max-width: 639px) { .ex-form .ex-actions > * { flex: 1 1 100%; } }

.ex-modal-panel { max-width: 36rem; max-height: calc(100dvh - 2rem); }
.ex-modal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.ex-modal-head .wh-modal-close { display: inline-flex; height: 2.5rem; width: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: .75rem; }
.ex-modal-head .wh-modal-close:hover { background: var(--color-hover); color: var(--color-text); }
@media (max-width: 639px) { .ex-modal .wh-modal-panel { max-width: none; padding: 1rem; border-radius: 1rem; } .ex-modal { padding: .5rem; } }

/* The action bar above the exchange-stock table: one size, wraps instead of being cut off. */
.ex-action-bar { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; max-width: 100%; }
.ex-action-bar > a,
.ex-action-bar > button { min-height: 2.75rem; padding: .55rem 1rem; font-size: .9rem; white-space: nowrap; border-radius: .85rem; }
@media (max-width: 639px) {
    .ex-action-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .ex-action-bar > a,
    .ex-action-bar > button { width: 100%; white-space: normal; text-align: center; line-height: 1.35; }
}

/* ---------------------------------------------------------------
 * Exchanges & maintenance: clickable count cards and phone filters.
 * New class names only, so no other page is affected.
 * ------------------------------------------------------------- */
.ex-stat-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ex-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ex-stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ex-stat-card {
    display: block;
    min-width: 0;
    min-height: 5.75rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: .9rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
a.ex-stat-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.ex-stat-card:hover,
a.ex-stat-card:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: none; }
a.ex-stat-card:active { transform: scale(.98); background: var(--color-active); }
.ex-stat-label { display: block; font-size: .82rem; font-weight: 700; color: var(--color-text-muted); overflow-wrap: anywhere; }
.ex-stat-value { display: block; margin-top: .35rem; font-size: 1.6rem; font-weight: 900; line-height: 1.15; color: var(--color-text); }
.ex-stat-hint { display: block; margin-top: .3rem; font-size: .72rem; font-weight: 700; color: var(--color-primary); }

/* Batch actions with nothing selected: a readable disabled button (clear border, dark-enough
   text) instead of a washed-out one; with a selection the button takes its full colour again. */
.ex-action-bar > button:disabled {
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    border: 1px dashed var(--color-border-strong) !important;
}
:root.dark .ex-action-bar > button:disabled { border-color: var(--color-disabled-border) !important; }

/* Per-lot «إرجاع جزء / تحويل جزء / إهلاك جزء»: small outlined buttons, theme tokens only. */
.ex-part-action {
    display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .7rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); border-radius: .6rem;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary); font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.ex-part-action:hover, .ex-part-action:focus-visible { background: color-mix(in srgb, var(--color-primary) 16%, transparent); outline: none; }
.ex-part-action-danger { border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); }
.ex-part-action-danger:hover, .ex-part-action-danger:focus-visible { background: color-mix(in srgb, var(--color-danger) 16%, transparent); }

/* Supplier result «ماذا حدث مع المورد؟»: the chosen result is unmistakable in both themes (the
   light theme force-maps the buttons' slate border, which hid the cyan one). */
[data-result-mode].border-cyan-400 {
    border-color: var(--color-primary) !important;
    background-color: var(--color-active) !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
    font-weight: 800;
}

/* Exchange stock lots on phones: one card per lot (.mobile-stack); the select box keeps its 44px target. */
@media (max-width: 639px) {
    .ex-stock-table tr { border: 1px solid var(--color-border); border-radius: .85rem; margin-bottom: .6rem; background: var(--color-surface); }
    .ex-stock-table tr:last-child { border-bottom: 1px solid var(--color-border); }
    /* label | value grid: a cell with several children (branch + state + link, source lines) stacks
       them in the value column instead of squeezing each into its own flex column. */
    .ex-stock-table td[data-label] { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .25rem .75rem; align-items: start; }
    .ex-stock-table td[data-label]::before { grid-column: 1; grid-row: 1; }
    .ex-stock-table td[data-label][dir="ltr"] { direction: rtl; }
    .ex-stock-table td[data-label] > * { grid-column: 2; }
    .ex-stock-table td[data-label="تحديد"] { align-items: center; }
    .ex-stock-table tr.exchange-stock-row-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-focus-ring); }
    [data-exchange-table-scroll] { overflow-x: visible; border: 0; border-radius: 0; }
}

.ex-filter-extra { display: contents; }
.ex-filter-toggle { display: none; }
@media (max-width: 639px) {
    .ex-filter-toggle { display: inline-flex; align-items: center; gap: .35rem; }
    .ex-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ex-filter-grid > .ex-filter-main { grid-column: 1 / -1; }
    .ex-filter-grid label { min-width: 0; }
    .ex-filters:not(.is-open) .ex-filter-extra { display: none !important; }
    .ex-filter-actions > * { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* Exchange guide: readable at 360px; the effect table becomes one card per action. */
.ex-guide { overflow-wrap: anywhere; min-width: 0; }
.ex-guide section { min-width: 0; }
@media (max-width: 639px) {
    .ex-guide section { padding: 1rem !important; }
    .ex-guide-table thead { display: none; }
    .ex-guide-table, .ex-guide-table tbody, .ex-guide-table tr, .ex-guide-table td { display: block; width: 100%; }
    .ex-guide-table tr { border: 1px solid var(--color-border) !important; border-radius: .75rem; margin-bottom: .6rem; background: var(--color-surface); }
    .ex-guide-table td { white-space: normal !important; padding: .5rem .75rem !important; }
    .ex-guide-table td:first-child { font-weight: 800; border-bottom: 1px solid var(--color-border); }
}

/* --- exchange serial picker / serial lines ------------------------------------------------
   One line «الصنف × N» that opens to its serials.  Theme tokens only, so light and dark both
   hold contrast; comfortable touch targets down to 360px. */
.ex-serial-picker { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface-raised); color: var(--color-text); }
.ex-serial-picker-head { display: flex; align-items: center; gap: .5rem; }
.ex-serial-search { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid var(--color-border-strong); border-radius: .6rem; background: var(--color-input-bg); color: var(--color-text); font-size: 1rem; }
.ex-serial-search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.ex-serial-count { flex: 0 0 auto; min-width: 3.5rem; padding: .35rem .6rem; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text); font-weight: 700; font-size: .85rem; text-align: center; }
.ex-serial-feedback { min-height: 1.1rem; margin: 0; font-size: .8rem; color: var(--color-text-muted); }
.ex-serial-feedback.is-error { color: #be123c; }
.ex-serial-feedback.is-ok { color: #047857; }
.ex-serial-feedback.is-warning { color: #b45309; }
:root.dark .ex-serial-feedback.is-error { color: #fda4af; }
:root.dark .ex-serial-feedback.is-ok { color: #6ee7b7; }
:root.dark .ex-serial-feedback.is-warning { color: #fcd34d; }
.ex-serial-list { display: grid; gap: .35rem; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: .1rem; }
@media (min-width: 640px) { .ex-serial-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-serial-option { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-surface); cursor: pointer; touch-action: manipulation; }
.ex-serial-option[hidden] { display: none; }
.ex-serial-option input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--color-primary); }
.ex-serial-option.is-checked { border-color: var(--color-primary); background: var(--color-active); }
.ex-serial-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.ex-serial-status { margin-inline-start: auto; font-size: .72rem; color: var(--color-text-muted); text-align: end; }
/* The serial keeps its line; the state label wraps first («HDD-VIS-006» never splits on a phone). */
.ex-serial-option .ex-serial-number { flex: 0 0 auto; max-width: 70%; }
.ex-serial-option .ex-serial-status { flex: 1 1 0; min-width: 0; }
.ex-serial-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
input.is-serial-locked { cursor: not-allowed; opacity: .85; }
.ex-serial-line > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; }
.ex-serial-line > summary::-webkit-details-marker { display: none; }
.ex-serial-line > summary::after { content: "▾"; font-size: .75rem; color: var(--color-text-muted); }
.ex-serial-line[open] > summary::after { content: "▴"; }
.ex-serial-rows { display: grid; gap: .25rem; margin-top: .4rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-surface-raised); min-width: min(18rem, 80vw); }
.ex-serial-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; font-size: .8rem; color: var(--color-text); }
.ex-serial-row.is-closed { color: var(--color-text-muted); }
.ex-serial-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid #f59e0b; background: rgba(245, 158, 11, .14); color: #92400e; font-size: .72rem; font-weight: 700; }
:root.dark .ex-serial-badge { color: #fcd34d; }

/* «عرض مسؤول المخزن»: the management tiles in a readable grid (2 per row on a phone), labels not clipped. */
.wh-member-tiles { margin-top: .45rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: .5rem; }
@media (max-width: 639px) { .wh-member-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wh-member-tiles .wh-mon-tile { height: auto; min-height: 4.6rem; padding: .55rem .7rem; }
.wh-member-tiles .wh-mon-tile-label { -webkit-line-clamp: 3; line-clamp: 3; font-size: .74rem; }

/* Payroll periods: on a phone every row is its own full-width card (stack-table); the framed
   card around the table is for wider screens only. */
@media (min-width: 768px) {
    .payroll-card { border: 1px solid var(--color-border); border-radius: 1.5rem; background: var(--color-surface); }
}