/* ============================================================
   components.css — genuinely shared, reusable UI components:
   form shell, buttons, cards/panels, DevExtreme grid/pager/scheduler
   overrides, index-page toolbar, badges/alerts, dashboard KPI cards,
   quick actions, chart cards, welcome banner.
   Split out of the former monolithic site.css (Phase 1 foundation).
   ============================================================ */

.form-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.form-head {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
}

.form-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-head-icon svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.form-head-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text1);
}

.form-head-sub {
    font-size: .77rem;
    color: var(--muted);
    margin-top: 2px;
}

.form-body {
    padding: 16px;
}

.form-section {
    margin-bottom: 24px;
}

.form-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 20px; }
@media(max-width:700px) { .form-grid-3 { grid-template-columns:1fr; } }

.row-1 {
    grid-column: span 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.row-2 {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.row-3 {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.row-4 {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-full {
    grid-column: 1 / -1;
}

/* Responsive collapse for the .form-grid 4-column shell above and its
   .row-2/.row-3/.row-4 nested rows (each `grid-column: span 4` only makes
   sense against a 4-column parent, so they must collapse in step with it —
   see tokens.css for the shared breakpoint scale). */
@media (max-width: 1024px) {
    .form-grid, .row-2, .row-3, .row-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .row-1, .row-2, .row-3, .row-4 {
        grid-column: span 2;
    }
    .col-span-2, .col-span-3 {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .form-grid, .row-2, .row-3, .row-4 {
        grid-template-columns: 1fr;
    }
    .row-1, .row-2, .row-3, .row-4, .col-span-2, .col-span-3 {
        grid-column: span 1;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-label {
    font-size: .77rem;
    font-weight: 600;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.field-label .req {
    color: var(--danger);
    font-size: .8rem;
}

.field-input {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--text1);
    background: #fff;
    transition: all .15s;
    outline: none;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18);
}

.field-input:hover {
    border-color: var(--accent);
}

.field-textarea {
    height: auto;
    min-height: 80px;
    padding: 9px 11px;
    resize: vertical;
}

.field-error {
    font-size: .72rem;
    color: var(--danger);
    margin-top: 2px;
}

.field-hint {
    font-size: .72rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Live read-only caption showing the result of a calculation the fields
   above it feed (e.g. a unit-conversion equivalence) — recomputed as those
   fields change. Shared across any form that needs one (Item's Units &
   Packaging tab, the Unit of Measure form), so it lives here rather than in
   a page-specific stylesheet. */
.calc-hint-line {
    font-size: var(--fs-sm);
    color: var(--text3);
    padding: 6px 10px;
    margin-top: -6px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* ── Toggle switch — a plain checkbox restyled as a pill-shaped on/off
   control (label > hidden checkbox + visual track/thumb siblings) for
   boolean fields anywhere in the app. Deliberately NOT DevExtreme's
   dxSwitch: that widget sizes its track by measuring switchedOnText/
   switchedOffText, and collapses to a near-zero-width box once that text
   is blank (confirmed) — this is a native input, so its size is exactly
   the CSS below, always. Logical inset-inline-start makes the thumb
   position mirror correctly under RTL with no extra JS. ────────────── */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    cursor: pointer;
}
.toggle-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.toggle-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    transition: background-color .15s, border-color .15s;
}
.toggle-switch-thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    transition: inset-inline-start .15s, background-color .15s;
}
.toggle-switch input:hover + .toggle-switch-track {
    border-color: var(--accent-hover);
}
.toggle-switch input:checked + .toggle-switch-track {
    /* Same checked color as every other toggle control in the app
       (checkbox/radio/dxSwitch above) — the stock switch blue was
       deliberately repointed to this gold app-wide for legibility. */
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
    inset-inline-start: calc(100% - 20px);
    background: #fff;
}
.toggle-switch input:focus-visible + .toggle-switch-track {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
.toggle-switch input:disabled ~ .toggle-switch-track {
    opacity: .5;
}
.toggle-switch input:disabled {
    cursor: not-allowed;
}

/* ── Switch-style field row — the base .field above is a top-label-then-
   input column meant for text/select inputs; a toggle reads left-to-right
   as "label switch" on one row instead, label outside the control with the
   switch sitting directly beside it (one --space-3 gap), not flung to the
   far end of the form column. Pair with .toggle-switch. ───────── */
.field-switch {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    gap: var(--space-3);
}
.field-switch-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text1);
}

/* ── Grouped toggle rows — a bordered card wrapping a vertical stack of
   .field-switch rows, label on the row's start edge and the switch on its
   end edge, hairline separators between visible rows. Use when a set of
   related booleans should read as one consistent control instead of a
   loose 2-per-row grid (item card's General/Classification tabs, the
   Warehouse form's options). Pair each row with .toggle-switch. ───────── */
.switch-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    max-width: 460px;
}
.switch-list .field-switch {
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px;
    min-height: 40px;
}
/* Separator between consecutive visible rows — anchored to the top of the
   following row so a hidden last row (e.g. a toggle shown only conditionally)
   never leaves a dangling bottom border. */
.switch-list .field-switch + .field-switch {
    border-top: 1px solid var(--border);
}

/* Inline switch (no card) — a single .field-switch row in a toolbar or dialog (DNAX.Form.renderSwitchList { plain: true }). */
.switch-inline { display: inline-flex; }
.switch-inline .field-switch { min-height: 0; }

/* ── Every checkbox is a switch — one rule set for the whole app, so no page
   has to change markup to get the .toggle-switch look above (same track,
   thumb and gold checked color, mirrored by logical insets under RTL):
     • native <input type="checkbox">  → appearance:none track + ::before thumb
     • DevExtreme dxCheckBox           → .dx-checkbox-icon is the track, its
                                          glyph ::before is the thumb; the text
                                          sits before the switch like .field-switch
   Left alone on purpose: .toggle-switch (already a switch), row-selection /
   tree / list-select checkboxes inside DevExtreme grids, trees, lists and
   filter builders, and anything inside / marked .chk-plain (opt-out for a
   "pick items from a list" checkbox, where a switch would read wrongly). ── */
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *) {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 42px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *)::before {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    transition: inset-inline-start .15s, background-color .15s;
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *):hover {
    border-color: var(--accent-hover);
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *):checked {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *):checked::before {
    inset-inline-start: calc(100% - 20px);
    background: var(--surface);
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}
input[type="checkbox"]:not(.toggle-switch input):not(.chk-plain):not(.chk-plain *):disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dx-checkbox:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-container {
    gap: var(--space-3);
}
.dx-checkbox:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-text {
    order: -1;
    padding-inline-start: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text1);
}
.dx-checkbox:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon {
    box-sizing: border-box;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--surface);
    border: 1.5px solid var(--border-2);
    font-size: 0;
    line-height: 0;
    transition: background-color .15s, border-color .15s;
}
.dx-checkbox:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: auto;
    right: auto;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 50%;
    background: var(--muted);
    transition: inset-inline-start .15s, background-color .15s;
}
.dx-checkbox.dx-state-hover:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon {
    border-color: var(--accent-hover);
}
.dx-checkbox.dx-checkbox-checked:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
.dx-checkbox.dx-checkbox-checked:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon::before {
    inset-inline-start: calc(100% - 20px);
    background: var(--surface);
}
.dx-checkbox.dx-state-focused:not(:is(.dx-datagrid, .dx-treelist, .dx-treeview, .dx-list, .dx-filterbuilder, .dx-pivotgrid, .chk-plain) .dx-checkbox):not(.chk-plain) .dx-checkbox-icon {
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
}

.form-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
}

.chk-field {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.chk-field input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Lightweight CSS-only ripple/pulse on click — DevExtreme's own dxButton
   already ships a wave effect from the stock theme, so this only needs to
   cover plain HTML .btn elements. */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,.55) 10%, transparent 10.5%);
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(8);
    pointer-events: none;
    transition: transform .35s ease, opacity .6s ease;
}

.btn:active::after {
    transform: scale(0);
    opacity: .4;
    transition: 0s;
}

.btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Black face with gold label + icon (SVGs inherit currentColor); on hover /
   keyboard focus it inverts to a solid gold fill with a black label. */
.btn-primary {
    background: var(--primary);
    color: var(--accent);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

.btn-secondary {
    background: #fff;
    color: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    filter: brightness(.9);
    color: #fff;
}

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.btn-success:hover {
    filter: brightness(.9);
    color: #fff;
}

.btn-warning {
    background: var(--accent);
    color: var(--primary);
    border-color: var(--accent);
}

.btn-warning:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--primary);
}

.btn-ghost {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-ghost:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.btn-sm {
    padding: 5px 12px;
    font-size: .79rem;
}

.btn-lg {
    padding: 11px 24px;
    font-size: .92rem;
}

.btn-icon-only {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Responsive Audit foundation: without this, a title + action-button
       header row that no longer fits (narrow card, long title, RTL) doesn't
       shrink — it overflows past the card edge and the button gets clipped
       by body{overflow-x:hidden} instead of reflowing. Confirmed on
       Rfq/Edit's "شروط وأحكام"/"متطلبات الشراء" cards at <=768px. */
    flex-wrap: wrap;
    gap: 8px;
}

.card-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}

.panel-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Read-only key/value summary panel — a bordered list where each row spreads
   its label to the start edge and its value to the end edge. Direction-
   agnostic (space-between). Originated on the Item Master Overview/
   Classification tabs (Unit Weight/Volume/Dimensions/Density box); shared
   app-wide for any "totals"/"summary" read-only row list (e.g. Inventory
   Receipt's Totals box). Nest rows directly inside an existing bordered
   container (like .card-body) by omitting the outer .pf-summary wrapper. */
.pf-summary {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
    max-width: 460px;
}
.pf-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.pf-summary-row:last-child {
    border-bottom: 0;
}
.pf-summary-label {
    font-size: var(--fs-sm);
    color: var(--text3);
}
.pf-summary-value {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text1);
    font-variant-numeric: tabular-nums;
    text-align: end;
}
.pf-summary-value .badge {
    font-weight: 600;
}

.panel-body {
    padding: 18px;
}

/* ── Record card grid — a list of records shown as small cards instead of
   a DataGrid, for screens where a handful of at-a-glance fields per record
   (a status, a couple of dates, one primary action) reads better than a
   scrollable table row. First consumer: Accounting's Account Opening
   Requests dashboard/list (see account-opening-request-cards.js) — reuse
   this instead of hand-rolling another page-specific card block. ────── */
.dnax-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.dnax-record-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dnax-record-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.dnax-record-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text1);
}

.dnax-record-card-sub {
    font-size: .78rem;
    color: var(--text3);
    margin-top: 2px;
}

.dnax-record-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.dnax-record-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dnax-record-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    color: var(--text2);
}

.dnax-record-card-row .dnax-rc-label {
    color: var(--text3);
}

.dnax-record-card-actions {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── DevExtreme: base widget density ──────────────────────────────────
   dx.light.css hardcodes .dx-widget at 14px regardless of our own root
   font-size (see base.css), so shrinking the app's own text alone doesn't
   shrink DevExtreme controls — this is what actually does. Placed before
   the more specific .dx-datagrid/.dx-form rules below so those still win
   for the elements they target (equal specificity, later in source order),
   this only sets the baseline for everything that doesn't have its own
   override (buttons, toolbars, popups, plain inputs, ...). */
.dx-widget {
    font-size: 12.5px;
}

.dx-texteditor-input {
    padding: 6px 10px;
}

.dx-form .dx-field-item {
    padding-bottom: var(--space-4);
}

/* Field value text — larger than the label above it (see --field-value-fs). */
.dx-form .dx-texteditor-input {
    font-size: var(--field-value-fs);
}

/* A dxForm label (labelLocation:'top') sat almost flush against its own
   editor by default (DevExtreme's own layout left well under 1px between
   them) — a small, deliberate gap instead, app-wide for every dxForm. */
.dx-form .dx-field-item-label {
    margin-bottom: 4px;
}

.dx-datagrid {
    font-size: var(--grid-fs);
    color: var(--text1);
    background: transparent;
    border: none;
}

.dx-datagrid .dx-datagrid-header-panel {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* ── Grid / tree header (shared: DataGrid + TreeList) ───────────────────
   One gold identity for every DevExtreme grid and tree header. Face is a
   shallow accent→accent-hover gradient for depth, an inset hairline top
   highlight to lift it, a crisp smoke-gray bottom rule and a soft drop
   shadow that separates it from the data. Tokens in tokens.css. */
.dx-datagrid-headers,
.dx-treelist-headers {
    background: linear-gradient(180deg,
                var(--grid-header-bg) 0%,
                var(--grid-header-bg) 55%,
                var(--grid-header-bg-foot) 100%) !important;
    border-bottom: 2px solid var(--grid-header-ink) !important;
    box-shadow: inset 0 1px 0 var(--grid-header-highlight),
                var(--grid-header-shadow) !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td,
.dx-treelist-headers .dx-treelist-table .dx-row > td {
    padding: var(--grid-cell-py) var(--grid-cell-px) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--grid-header-ink) !important;
    text-shadow: 0 1px 0 var(--grid-header-highlight) !important;
    border: none !important;
    border-inline-end: 1px solid var(--grid-header-line) !important;
    background: transparent !important;
    white-space: normal !important;
    text-align: center !important;
    vertical-align: middle !important;
    transition: background-color .12s ease !important;
}

/* Numeric column cells center app-wide, matching the centered headers above
   — a number reading start/end-aligned under a centered title looked
   inconsistent. Read-only numeric cells (plain text, or the dnax-boxed-cell
   read-only template) are centered via dx-grid-defaults.js's
   onCellPrepared/dnax-lines-grid.js's boxedColumn default; this covers the
   one case JS can't reach — an ACTIVE numeric editor's own input text —
   via DevExtreme's own dx-numberbox widget class, which every dxNumberBox
   carries regardless of which grid/column config rendered it. */
.dx-datagrid .dx-numberbox .dx-texteditor-input,
.dx-treelist .dx-numberbox .dx-texteditor-input {
    text-align: center !important;
}

/* Column titles — one step below the cell text. */
.dx-datagrid-headers .dx-header-row > td,
.dx-treelist-headers .dx-header-row > td,
.dx-datagrid-headers .dx-header-row > td .dx-datagrid-text-content,
.dx-treelist-headers .dx-header-row > td .dx-treelist-text-content {
    font-size: var(--grid-head-fs);
}

/* In-cell editors read at the same size as idle cell text. */
.dx-datagrid-rowsview .dx-data-row .dx-texteditor-input,
.dx-treelist-rowsview .dx-data-row .dx-texteditor-input {
    font-size: var(--grid-fs);
}

/* Unified header height — a column-title cell renders at --grid-header-h
   whether its title is one line or wraps to two, so the header strip no
   longer steps up and down across columns. `height` on a table cell is a
   minimum; a rare 3-line title still grows its own header. Scoped to
   .dx-header-row so the (optional) filter row keeps its own sizing. */
.dx-datagrid-headers .dx-header-row > td,
.dx-treelist-headers .dx-header-row > td {
    height: var(--grid-header-h) !important;
}

/* Interaction polish — faint darkening on hover of a sortable header cell,
   a slightly stronger tint on the column currently sorted. */
.dx-datagrid-headers .dx-header-row > td.dx-state-hover,
.dx-treelist-headers .dx-header-row > td.dx-state-hover {
    background: var(--grid-header-hover) !important;
}

.dx-datagrid-headers .dx-header-row > td[aria-sort="ascending"],
.dx-datagrid-headers .dx-header-row > td[aria-sort="descending"],
.dx-treelist-headers .dx-header-row > td[aria-sort="ascending"],
.dx-treelist-headers .dx-header-row > td[aria-sort="descending"] {
    background: var(--grid-header-sorted) !important;
}

/* Two-word column titles need to wrap onto a second line instead of being
   ellipsis-truncated or overlapping the sort/filter indicator icon — the
   indicator sits inline right after the text (not absolutely positioned),
   so it only collides with the title when the row itself is too short for
   wrapped text, which the extra height/padding above fixes.

   Both siblings are inline-block, and the stock theme gives them DIFFERENT
   vertical-align values (text-content: top, column-indicators: whatever
   the browser default resolves to) — that mismatch is what made the icon
   land at a different height per column depending on how many lines the
   title happened to wrap to. Forcing both to the same value (middle) makes
   every column consistent regardless of 1-line vs 2-line titles. */
.dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content,
.dx-treelist-headers .dx-header-row > td > .dx-treelist-text-content,
.dx-datagrid-headers .dx-header-row > td .dx-header-filter,
.dx-treelist-headers .dx-header-row > td .dx-header-filter,
.dx-datagrid-headers .dx-header-row > td .dx-sort,
.dx-treelist-headers .dx-header-row > td .dx-sort {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* Header-filter (funnel) icon hidden across every grid/tree — visual-only,
   the underlying headerFilter option can stay enabled per-page harmlessly,
   this just stops the icon from rendering everywhere it currently does. */
.dx-datagrid .dx-header-filter,
.dx-treelist .dx-header-filter {
    display: none !important;
}

.dx-datagrid-headers .dx-column-indicators,
.dx-treelist-headers .dx-column-indicators {
    vertical-align: middle !important;
}

.dx-datagrid-headers .dx-sort-indicator,
.dx-datagrid-headers .dx-header-filter-indicator,
.dx-datagrid-headers .dx-column-indicators .dx-icon,
.dx-treelist-headers .dx-sort-indicator,
.dx-treelist-headers .dx-header-filter-indicator,
.dx-treelist-headers .dx-column-indicators .dx-icon {
    color: var(--grid-header-ink) !important;
    opacity: .85 !important;
}

/* Select-all checkbox lives on the gold face — its stock border (light
   gray) and checked/indeterminate mark (--accent-hover gold) both wash
   out against gold, so pin every part to the smoke-gray ink. */
.dx-datagrid-headers .dx-header-row .dx-select-checkbox .dx-checkbox-icon,
.dx-treelist-headers .dx-header-row .dx-select-checkbox .dx-checkbox-icon {
    border-color: var(--grid-header-ink) !important;
}

.dx-datagrid-headers .dx-header-row .dx-checkbox-checked .dx-checkbox-icon,
.dx-datagrid-headers .dx-header-row .dx-checkbox-indeterminate .dx-checkbox-icon,
.dx-treelist-headers .dx-header-row .dx-checkbox-checked .dx-checkbox-icon,
.dx-treelist-headers .dx-header-row .dx-checkbox-indeterminate .dx-checkbox-icon {
    color: var(--grid-header-ink) !important;
}

.dx-datagrid-rowsview .dx-row > td,
.dx-treelist-rowsview .dx-row > td {
    padding: var(--grid-cell-py) var(--grid-cell-px) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
}

/* Editor cell — smaller pad than a static cell on both axes: block pad is
   trimmed so the ~33px in-cell editor still fits inside --grid-row-h
   without regrowing the row, and inline pad is --grid-editor-cell-px so
   that (+ the editor input's own 7px inset) the editing text lands at the
   exact same x-position as the static text it replaces. */
.dx-datagrid-rowsview .dx-row > td.dx-editor-cell,
.dx-treelist-rowsview .dx-row > td.dx-editor-cell {
    padding: var(--grid-editor-cell-py) var(--grid-editor-cell-px) !important;
}

/* Unified row height — a data row must NOT visibly shrink when a cell
   loses focus and its in-cell editor is torn down. `height` on a table
   cell acts as a MINIMUM, so an idle row is padded up to the very height
   the editing row renders at (--grid-row-h ≈ the editor's own height),
   while genuinely tall / wrapped content is still free to grow the row.
   Combined with `vertical-align: middle` above, short text stays centred. */
.dx-datagrid-rowsview .dx-data-row > td,
.dx-treelist-rowsview .dx-data-row > td {
    height: var(--grid-row-h) !important;
}

.dx-datagrid-rowsview .dx-row:hover > td {
    background: var(--bg) !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td {
    background: var(--accent-bg) !important;
    color: var(--text1) !important;
}

/* .dx-row-focused is a distinct state from .dx-selection — it's the
   "current" row highlighted on click/keyboard nav, independent of whether
   selection mode is even enabled (e.g. clicking a node in a tree). Stock
   theme uses a much louder solid blue (#5c95c5, white text) here; toned
   down to the same pale-gold tint as .dx-selection above so a clicked row
   and a checkbox-selected row read as one language. */
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td,
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td,
.dx-treelist-rowsview .dx-row-focused.dx-data-row > td,
.dx-treelist-rowsview .dx-row-focused.dx-data-row > tr > td {
    background-color: var(--accent-bg) !important;
    color: var(--text1) !important;
    border-color: var(--border) !important;
}

/* A THIRD, separate mechanism: DevExtreme draws the clicked cell's outline
   as an absolutely-positioned overlay element, not a td border — this is
   what's actually visible as the outline on left-click even after the two
   fixes above. Repointed off the stock blue to the brand gold; the darker
   accent-hover reads as a crisper line against a white cell face than the
   bright --accent. */
.dx-datagrid-focus-overlay,
.dx-treelist-focus-overlay {
    border-color: var(--accent-hover) !important;
}

/* DevExtreme rings an edited-but-unsaved cell with a translucent green 2px
   outline (::after, rgba(92,184,92,.5)). Suppressed — the row already
   reads as "in edit" and the green clashes with the gold identity. The
   validation-error (red) outline is a different selector and stays. The
   doubled .dx-cell-modified matches the vendor rule's own specificity. */
.dx-datagrid-rowsview .dx-data-row .dx-cell-modified.dx-cell-modified::after,
.dx-treelist-rowsview .dx-data-row .dx-cell-modified.dx-cell-modified::after {
    border-color: transparent !important;
}

.dx-pager {
    padding: 6px 14px !important;
    border-top: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

/* ── Boxed-cell grid design — the DEFAULT for every grid built on
   DNAX.Grid.baseOptions (dx-grid-defaults.js does the cell-wrapping/
   class-adding work; this is just its matching CSS), so a page adopting
   baseOptions gets this automatically with no per-page change. Piloted on
   Warehouse/InventoryReceipt/Edit's line-items grid (wwwroot/Image/
   dxdatagrid.png reference — every cell its own bordered/rounded white box)
   then generalized here so ANY grid, including plain Index/browse grids,
   gets the same look without redefining it. Scoped to the .dnax-boxed-grid
   class (added automatically by baseOptions) rather than a grid id — unlike
   voucher-edit.css's #receiptLinesGrid-style rules (a handful of known,
   page-local ids), a
   boxed Index grid can be any element on any page, so a shared class is the
   only scoping that works without hardcoding every future grid's id here. */
.dnax-boxed-grid.dx-datagrid-rowsview .dx-data-row > td,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td {
    height: var(--grid-boxed-row-h) !important;
    background-color: var(--surface) !important;
    border-bottom: none !important;
}

.dnax-boxed-grid .dx-datagrid-rowsview .dx-row-alt > td,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-row.dx-state-hover > td {
    background-color: var(--surface) !important;
}

.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-editor-cell {
    padding: var(--grid-boxed-cell-py) 10px !important;
}

.dnax-boxed-grid .dx-texteditor {
    border: 1px solid var(--grid-cell-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    /* Without this, the editor keeps its own intrinsic ~40px height instead
       of filling the same padded cell space .dnax-boxed-cell-inner does
       (height: 100% there) — the two box styles then render at visibly
       different heights side by side in the same row. box-sizing:border-box
       so height:100% includes this rule's own border, matching how
       .dnax-boxed-cell-inner sizes itself. */
    height: 100% !important;
    box-sizing: border-box !important;
}

.dnax-boxed-grid .dx-texteditor-input {
    background: transparent !important;
}

.dnax-boxed-grid .dx-texteditor-input::selection {
    background: var(--accent-bg);
    color: var(--text1);
}

.dnax-boxed-grid .dx-datagrid-rowsview .dx-selection.dx-row > td,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td {
    background-color: transparent !important;
    border-color: var(--border) !important;
}

.dnax-boxed-grid .dx-datagrid-focus-overlay {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Editor widgets inside a boxed cell are pinned to the same box height as the plain boxed cells (--grid-boxed-box-h = row − 2× block padding),
   so entering edit mode never makes the row taller. */
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-editor-cell .dx-texteditor {
    height: var(--grid-boxed-box-h) !important;
    min-height: 0 !important;
}
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-editor-cell .dx-texteditor-container,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-editor-cell .dx-texteditor-input {
    min-height: 0 !important;
    height: 100% !important;
}
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-editor-cell .dx-texteditor-input {
    padding-block: 0 !important;
}

/* Focus / edit state of a boxed cell — ONE rule set for every grid: only the border COLOR changes (skin → gold),
   with the same radius; the extra 1px ring is a box-shadow so no dimension changes and the row height stays put.
   The td height is pinned (--grid-boxed-row-h above) so editor widgets replacing the cell content can't grow the row either. */
.dnax-boxed-grid td.dx-focused .dnax-boxed-cell-inner,
.dnax-boxed-grid td.dx-focused .dnax-item-cell,
.dnax-boxed-grid td.dx-focused.dnax-boxed-cell-frame::after,
.dnax-boxed-grid td.dx-focused .dx-texteditor,
.dnax-boxed-grid td.dx-editor-cell .dx-texteditor.dx-state-focused,
.dnax-boxed-grid td.dx-focused .dx-link-edit,
.dnax-boxed-grid td.dx-focused .dx-link-delete {
    border-color: var(--grid-cell-border-focus) !important;
    box-shadow: 0 0 0 1px var(--grid-cell-border-focus) !important;
}

.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-command-edit,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-command-select {
    padding: var(--grid-boxed-cell-py) 10px !important;
}

/* The cell itself lays its link(s) out in a row — a grid with only one
   editable action (edit OR delete, not both) still gets one link filling
   the cell as before; a grid with BOTH allowUpdating and allowDeleting
   (two <a> children) previously had each individually claim width/height
   100%, so the second link had nowhere left to render but directly on top
   of the first — completely hidden/unclickable underneath it, not merely
   scrolled off-screen (confirmed on Approval/StatusManagement's Rules
   grid, the first grid in the app to actually need both actions at once). */
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-command-edit {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-command-edit .dx-link-delete,
.dnax-boxed-grid .dx-datagrid-rowsview .dx-data-row > td.dx-command-edit .dx-link-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--grid-cell-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    /* DevExtreme's own .dx-link-icon rule pins these links to an 18px-tall / 3px-margin pill — without
       overriding it the delete/edit box rendered as a tiny sliver next to the boxes (--grid-boxed-box-h) of the cells
       around it. height:auto lets the flex row stretch it to the full cell box like every other cell. */
    height: auto !important;
    margin: 0 !important;
}

/* Boxed-cell utility classes — the actual box every boxed cell renders,
   whether wrapped automatically (DNAX.Grid.baseOptions' boxedCells option,
   above) or by a screen's own cellTemplate (DNAX.LinesGrid helpers,
   dnax-lines-grid.js, for a voucher/line-entry grid's finer-grained needs).
   Page/grid-agnostic on purpose — not scoped to .dnax-boxed-grid or any
   grid id — so anything can reuse the same box. */
.dnax-boxed-cell {
    padding: var(--grid-boxed-cell-py) 10px !important;
}

/* The plain-class rule above loses to the app-wide base grid padding rule
   (`.dx-datagrid-rowsview .dx-row > td { padding: var(--grid-cell-py)
   var(--grid-cell-px) !important }`, further up this file) — that selector
   is MORE specific (two classes + an element vs. .dnax-boxed-cell's single
   class), so despite both being !important, the base rule's 6px/12px wins
   over this one's 8px/10px. Confirmed live: a boxed cell's inner box ended
   up ~4px taller than a showEditorAlways cell's .dx-texteditor box in the
   same row, purely from this padding mismatch. Re-declare at matching (or
   higher) specificity so every .dnax-boxed-cell reliably gets the same
   8px/10px an editor cell gets (voucher-edit.css's ID-scoped editor-cell
   rule, or the .dx-editor-cell rule two rules up from here) regardless of
   which selector actually painted the base padding first. */
.dx-datagrid-rowsview .dx-row > td.dnax-boxed-cell,
.dx-treelist-rowsview .dx-row > td.dnax-boxed-cell {
    padding: var(--grid-boxed-cell-py) 10px !important;
}

/* Money / quantity figures in a boxed grid: equal-width digits, aligned to the end of the box (logical, so it mirrors in RTL). */
.dnax-boxed-grid .dx-numberbox .dx-texteditor-input,
.dnax-boxed-cell-inner {
    font-variant-numeric: tabular-nums;
}
.dnax-boxed-grid .dx-data-row .dx-numberbox .dx-texteditor-input {
    text-align: end;
}

.dnax-boxed-cell-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    box-sizing: border-box;
    padding-inline-end: 10px;
    border: 1px solid var(--grid-cell-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* The text of a boxed cell (wrapped by dx-grid-defaults.js): shrinks with the box and ends in an
   ellipsis when it doesn't fit, rather than overflowing the box border. */
.dnax-boxed-cell-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A centered variant for content that reads better centered than
   end-aligned like a plain number does (e.g. a status badge). */
.dnax-boxed-cell-inner.dnax-boxed-cell-inner-center {
    justify-content: center;
    padding-inline-end: 0;
}

.dnax-item-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--grid-cell-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.dnax-item-cell > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A boolean/read-only-editor cell (.dx-editor-cell — a checkbox, typically)
   gets boxed WITHOUT the wrapper-div treatment above: dx-grid-defaults.js
   deliberately leaves its DOM untouched (moving the checkbox into a wrapper
   broke its own centering, confirmed live), so the box here is painted as a
   ::after sitting behind the untouched checkbox instead — same visible
   result (a bordered box matching every other cell in the row), zero risk
   to the checkbox's own layout since nothing about its DOM or positioning
   context changes. requires the <td> itself to be the positioning context
   (position: relative) since the frame is sized/placed purely with CSS,
   with no wrapper element to anchor to. */
.dnax-boxed-cell-frame {
    position: relative;
    /* Establishes a local stacking context so ::after's negative z-index
       (below) stays scoped to THIS cell — without it, the negative z-index
       escapes to the nearest ancestor that actually forms a stacking
       context (however far up that is) and paints behind opaque sibling
       backgrounds well outside this cell, rendering invisible. */
    z-index: 0;
}

.dnax-boxed-cell-frame::after {
    content: "";
    position: absolute;
    inset: var(--grid-boxed-cell-py) 10px;
    border: 1px solid var(--grid-cell-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    pointer-events: none;
    /* Negative, not 0 — a pseudo-element paints as the LAST child in stacking
       order by default, which would otherwise cover the untouched checkbox
       instead of sitting behind it. */
    z-index: -1;
}

/* A status badge inside a framed cell (a column with its own cellTemplate) fills the frame —
   same box size as the plain boxed cells around it — instead of floating as a small pill in one corner. */
.dnax-boxed-cell-frame > .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--grid-boxed-box-h);
    border: 1px solid var(--grid-cell-border);
    border-radius: var(--radius-sm);
}

/* …but a cell carrying several badges (invoice status + its governance status) keeps the compact pills. */
.dnax-boxed-cell-frame > .badge:not(:only-child) {
    display: inline-flex;
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: 20px;
}

.dx-datagrid-search-panel input {
    border: 1px solid var(--border-2) !important;
    border-radius: var(--radius-sm) !important;
    height: 30px !important;
    font-size: .76rem !important;
}

/* DNAX.Grid.baseOptions sets a fixed searchPanel.width (DevExtreme only
   accepts a px number there, no %) — shrink it back down on narrow screens
   so it doesn't crowd out the rest of the grid's toolbar. `!important` is
   required to win over DevExtreme's own inline width style. */
@media (max-width: 768px) {
    .dx-datagrid-search-panel {
        max-width: 160px !important;
    }
}

@media (max-width: 480px) {
    .dx-datagrid-search-panel {
        max-width: 110px !important;
    }
}

.dx-scheduler {
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.dx-scheduler-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 16px !important;
}

.dx-scheduler-date-table-cell {
    border-color: var(--border) !important;
}

.dx-scheduler-appointment {
    border-radius: 6px !important;
    border: none !important;
    box-shadow: var(--shadow-xs) !important;
    font-size: .78rem !important;
}

.dx-scheduler-navigator {
    font-weight: 700 !important;
    color: var(--text1) !important;
}

/* ── DevExtreme: Popup ─────────────────────────────────────────────── */
.dx-popup-title.dx-toolbar {
    background: linear-gradient(to right, var(--primary) 0%, rgba(var(--muted-rgb),.15) 100%), var(--primary) !important;
    border-bottom: 2px solid var(--accent) !important;
}

html[dir="rtl"] .dx-popup-title.dx-toolbar {
    background: linear-gradient(to left, var(--primary) 0%, rgba(var(--muted-rgb),.15) 100%), var(--primary) !important;
}

.dx-popup-title .dx-toolbar-label > div,
.dx-popup-title .dx-title-content {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.dx-popup-title .dx-closebutton .dx-icon,
.dx-popup-title .dx-icon {
    color: #fff !important;
}

.dx-popup-bottom.dx-toolbar {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: 8px 12px !important;
}

.dx-popup-content {
    padding: 14px !important;
}

/* DevExtreme's theme sets "Helvetica Neue" on every overlay wrapper, so any text inside a popup that isn't itself a
   .dx-widget (custom markup in popup templates) rendered in Helvetica instead of the system font. The widgets already
   inherit (legacy-pages.css) — making the wrapper inherit from <body> fixes the whole popup consistently. */
.dx-overlay-wrapper {
    font-family: inherit;
}

.dx-popup-normal {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    /* Safety net: whatever fixed pixel width/height an individual popup
       config passes in, never let it exceed the viewport — every page still
       controls its own popup size, this only caps it. */
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
}

.index-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.index-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.index-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.index-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── التلميح المعلوماتي (i): وصف الشاشة وشرح الأقسام والخانات كزر بجانب العنوان بدل أسطر دائمة (dnax-hint.js) ──
   البطاقة تُنقل إلى body وتُوضَع بإحداثيات ثابتة من السكربت (فلا تقصّها حاويات overflow) وتتجه حسب RTL/LTR. */
.ds-hint { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: var(--space-2); text-transform: none; letter-spacing: 0; font-weight: var(--fw-normal); }
.ds-hint-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--accent-hover);
    cursor: help; transition: background .15s, color .15s;
}
.ds-hint-btn svg { width: 16px; height: 16px; }
.ds-hint-btn:hover, .ds-hint.is-open .ds-hint-btn { background: var(--accent-bg); color: var(--accent-hover); }
.ds-hint-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ds-hint-pop {
    position: fixed; z-index: 3000; top: 0; left: 0; right: auto;
    width: max-content; max-width: min(360px, 88vw);
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--surface); color: var(--text2);
    border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    font-size: var(--fs-sm); font-weight: var(--fw-normal); line-height: 1.6; text-align: start; white-space: normal;
    text-transform: none; letter-spacing: 0;
}
.ds-hint-pop[hidden] { display: none; }
.ds-hint-pop::before {
    content: ''; position: absolute; inset-block-start: -6px; left: var(--hint-arrow-x, 16px);
    width: 10px; height: 10px; background: var(--surface);
    border-block-start: 1px solid var(--border); border-inline-start: 1px solid var(--border);
    transform: rotate(45deg);
}
.ds-hint-pop.is-up::before { inset-block-start: auto; inset-block-end: -6px; transform: rotate(225deg); }
.ds-hint-title { color: var(--text1); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
.ds-hint-list { margin: var(--space-1) 0 0; padding-inline-start: var(--space-4); display: grid; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text2); }
.ds-hint-src { display: none !important; }
.ds-hint-auto { margin-inline-start: var(--space-1); }
.dx-field-item-label-content .ds-hint { margin-inline-start: var(--space-1); }
/* شريط تبويبات/مرشحات يحمل زر شرح: التبويبات تأخذ المتاح والزر بنهاية الشريط. */
.def-filterbar:has(> .ds-hint) { display: flex; align-items: center; }
.def-filterbar:has(> .ds-hint) > :first-child { flex: 1 1 auto; min-width: 0; }
.def-filterbar > .ds-hint-auto { flex: none; margin-inline: var(--space-3); }
.grid-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.grid-card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    /* See .card-header above — same overflow-instead-of-wrap risk. */
    flex-wrap: wrap;
    gap: 8px;
}

.grid-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text1);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Opt-in emphasized page title (PageHeaderModel.Emphasize) — a page whose
   header stands alone as the page's main heading, not a grid toolbar. */
.grid-title-lg {
    font-size: 1.35rem;
}

.grid-title-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    color: var(--primary);
}

.grid-title-icon svg {
    width: 100%;
    height: 100%;
}

/* DNAX.MapPicker host (wwwroot/js/dnax-map-picker.js). isolation keeps
   Leaflet's high pane z-indexes from covering DevExtreme popups/action bars. */
.dnax-map-picker {
    height: 280px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* رفع شعار/صورة بطاقة سيد-تفاصيل (مورد، عميل): بطاقة أفقية — معاينة مربعة بحدود منقطة + زر رفع وإزالة + سطر شروط الملف. */
.dnax-logo-uploader { display: flex; align-items: center; gap: var(--space-5); inline-size: fit-content; max-inline-size: 100%; padding: var(--space-4) var(--space-5); border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--bg); }
.dnax-logo-preview-wrap {
    inline-size: 84px; block-size: 84px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-xs);
}
.dnax-logo-preview { width: 100%; height: 100%; object-fit: cover; }
.dnax-logo-placeholder { color: var(--muted); width: 32px; height: 32px; }
.dnax-logo-placeholder svg { width: 100%; height: 100%; }
.dnax-logo-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dnax-logo-actions .dx-fileuploader { width: auto; }
.dnax-logo-actions .dx-fileuploader-wrapper { padding: 0; }
.dnax-logo-actions .dx-fileuploader-input-wrapper { padding: 0; }
.dnax-logo-actions .dx-fileuploader-files-container { display: none; }
.dnax-logo-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-inline-size: 0; }
.dnax-logo-help { margin: 0; color: var(--text3); font-size: var(--fs-xs); }
.btn-remove-logo {
    border: 1px solid var(--border); background: var(--surface); color: var(--danger);
    border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap;
}
.btn-remove-logo:hover { background: var(--danger-bg); }
@media (max-width: 520px) { .dnax-logo-uploader { flex-direction: column; align-items: flex-start; } }

/* Small icon before a .card-title's text (PurchaseInvoice supplier panel,
   Purchasing dashboard sections, …) — reuse instead of a page-local class. */
.card-title-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.card-title-icon svg {
    width: 100%;
    height: 100%;
}

.grid-count {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

/* Drill-down link rendered inside a DevExtreme grid cell (e.g. a report's
   name column linking to that record's detail page). */
.grid-link {
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.grid-link:hover {
    text-decoration: underline;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.badge-success {
    background: var(--success-bg);
    color: #065f46;
}

.badge-warning {
    background: var(--warning-bg);
    color: #92400e;
}

.badge-danger {
    background: var(--danger-bg);
    color: #991b1b;
}

.badge-info {
    background: var(--info-bg);
    color: #1e40af;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.badge-muted {
    background: #f1f5f9;
    color: #475569;
}

.badge-gold {
    background: rgba(var(--accent-rgb),.16);
    color: #8A6200;
}

/* Generic monospace "code" pill — item codes, account codes, barcodes, MRNs.
   No page has had a shared convention for this until now; every page hand-
   rolled its own pill. Reuse this instead of forking another one. */
.code-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: "Courier New", Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.dnax-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* محرك تسلسل العمليات (Process Flow) — "Create Next Document" button +
   lineage strip container, rendered by ProcessFlowActionsViewComponent /
   mounted manually via DNAX.ProcessFlowActions.mount (see
   dnax-process-flow-actions.js). */
.dnax-process-flow-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    align-items: flex-start;
}

.dnax-pf-lineage {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dnax-pf-lineage-row {
    font-size: .8rem;
    color: var(--text3);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dnax-pf-lineage-label {
    font-weight: 600;
    color: var(--text2);
}

.dnax-pf-lineage-pill {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 10px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.dnax-pf-lineage-pill:hover {
    border-color: var(--primary);
}

/* Cold-entry gate popup (DNAX.ProcessFlowActions.mountEntryGate) — shown
   when a user opens a chained screen's Edit/0 directly instead of arriving
   via another document's "Create Next Document" click. Header styled after
   the DNAxPRO identity itself (black chrome + gold accent — see tokens.css),
   the same combination the sidebar's own active-state already uses, rather
   than DevExtreme's plain default popup title. */
.dnax-pf-gate-popup .dx-popup-title {
    background: var(--primary);
    border-bottom: 3px solid var(--accent);
    padding: 14px 20px;
}

.dnax-pf-gate-popup .dx-popup-title .dx-toolbar-label > div,
.dnax-pf-gate-popup .dx-popup-title .dx-item-content {
    color: var(--accent) !important;
    font-weight: 700;
    font-size: 1.05rem;
}

.dnax-pf-gate-popup .dx-popup-title .dx-closebutton .dx-icon {
    color: #fff;
}

.dnax-pf-gate-popup .dx-popup-content {
    padding: 20px;
}

/* Continue/Start actions use plain type:"default" — this app's own
   DevExtreme theme already skins that gold/--accent app-wide (see the
   dx-button-mode-contained.dx-button-default rule below), which reads as
   this app's actual "primary action" color; no need for a one-off variant
   here, dnax-pf-primary-btn only exists as a stable hook to fine-tune
   later if needed. */
.dx-button.dnax-pf-primary-btn.dx-state-disabled {
    opacity: .5;
}

.dnax-pf-gate-intro {
    font-size: .875rem;
    color: var(--text2);
    margin-bottom: var(--space-2, 8px);
}

.dnax-pf-gate-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: .8rem;
    color: var(--text1);
    margin-bottom: var(--space-3, 12px);
}

.dnax-pf-gate-banner .dnax-pf-gate-banner-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--warning);
}

/* "أنت في الخطوة X من عملية: ..." — persistent badge on a chained screen's
   own Edit page (see mountRunPanel's onLoaded), telling the user which
   process/step they're working under without opening the sidebar. */
/* Process stepper (Icons and Labels) — rendered into #pfStepBadge under a voucher page title
   (DNAX.ProcessFlowActions renderStepBadge): completed = check, current = highlighted document icon, rest = number. */
#pfStepBadge:not(:empty) { flex: 1 1 100%; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-normal, 400); }
.dnax-pf-stepper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.dnax-pf-stepper-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--text2); }
.dnax-pf-stepper-title { font-weight: var(--fw-semibold); color: var(--text1); }
.dnax-pf-stepper-track { display: flex; list-style: none; margin: 0; padding: 0; }
.dnax-pf-step {
    flex: 1 1 0;
    min-width: 96px;
    max-width: 220px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    color: var(--text3);
}
/* connector to the previous step */
.dnax-pf-step + .dnax-pf-step::before {
    content: "";
    position: absolute;
    top: 17px;
    inset-inline-start: calc(-50% + 22px);
    inset-inline-end: calc(50% + 22px);
    height: 2px;
    background: var(--border);
}
.dnax-pf-step.is-linked::before { background: var(--success); }
.dnax-pf-step-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text3);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}
.dnax-pf-step-icon svg { width: 18px; height: 18px; }
.dnax-pf-step.is-done .dnax-pf-step-icon { background: var(--success); border-color: var(--success); color: var(--surface); }
.dnax-pf-step.is-current .dnax-pf-step-icon { background: var(--accent); border-color: var(--accent); color: var(--primary); box-shadow: 0 0 0 4px var(--accent-bg); }
.dnax-pf-step.is-done .dnax-pf-step-label { color: var(--text1); }
.dnax-pf-step.is-current .dnax-pf-step-label { color: var(--text1); font-weight: var(--fw-bold); }
.dnax-pf-step-label { line-height: 1.35; overflow-wrap: anywhere; }

/* Status/governance badge spacers inside a page-title bar (.ir-page-title,
   .form-title) — every process-flow-linked Edit page (InventoryReceipt,
   Rfq, PurchaseOrder, InternationalPurchaseOrder, PurchaseInvoice) repeated
   the same two inline margin-inline-start values per badge span; centralized
   here so the value lives in one place. */
.dnax-title-badge { margin-inline-start: 10px; }
.dnax-title-badge-sm { margin-inline-start: 6px; }

/* المرفقات — attachment rows (Rfq/Edit, etc.) */
.dnax-attachment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: .85rem;
}

.dnax-attachment-name {
    color: var(--primary);
    text-decoration: none;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnax-attachment-name:hover { text-decoration: underline; }

.dnax-attachment-size {
    color: var(--muted);
    font-size: .75rem;
    flex: 0 0 auto;
}

.dnax-attachment-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: .9rem;
    padding: 2px 6px;
    flex: 0 0 auto;
}

.dnax-attachment-remove:hover { color: var(--danger); opacity: .7; }

/* مستند بيع (أمر بيع…): شريط الحالة وإجمالي البنود */
.dnax-doc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dnax-doc-meta { color: var(--muted); font-size: .85rem; }

.dnax-doc-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.dnax-doc-total strong { color: var(--text1); font-size: 1.15rem; }

.dnax-attachments-empty {
    color: var(--muted);
    font-size: .85rem;
}

/* مرفقات المورد — one invited supplier's own quote documents, shown inside
   the Supplier Quotes card once that supplier is selected there
   (Rfq/Edit.cshtml, renderSupplierAttachments). */
.dnax-supplier-attachments {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.dnax-supplier-attachments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text1);
    font-size: .88rem;
}

/* الموردون المدعوون — invited-supplier rows (Rfq/Edit sidebar card) */
.dnax-supplier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: .82rem;
}

.dnax-supplier-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text1);
    font-weight: 500;
}

.dnax-supplier-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: .9rem;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.dnax-supplier-remove:hover { opacity: .7; }

.dnax-supplier-empty { color: var(--muted); font-size: .82rem; padding: 4px 0; }

/* Clickable once the RFQ is Sent/QuotesReceived — clicking a supplier row
   filters the on-screen Supplier Quotes grid down to that supplier
   (Rfq/Edit.cshtml, selectSupplierForQuotes). */
.dnax-supplier-row-clickable { cursor: pointer; }
.dnax-supplier-row-clickable:hover { background: var(--bg); }

.dnax-supplier-row-active {
    border-color: var(--primary);
    background: var(--bg);
}

.dnax-quotes-filter-badge { cursor: pointer; }

/* شروط وأحكام — read-only display once the RFQ is locked (not Draft);
   an editable dxTextArea is used instead while still Draft/new. */
.dnax-terms-readonly {
    font-size: .85rem;
    color: var(--text1);
    line-height: 1.7;
    margin: 0;
    padding-inline-start: 20px;
    /* base.css resets ul/ol to list-style:none app-wide — restore numbering
       here since this list's whole purpose is a numbered "1. 2. 3." clause
       list (see the RFQ mockup). */
    list-style: decimal;
}

.dnax-terms-readonly li { margin-bottom: 4px; }

/* The inner flex row (not the <li> itself) carries the remove button —
   display:flex directly on an <li> suppresses its own numbered ::marker
   in most browsers, which would silently drop the "1. 2. 3." numbering. */
.dnax-term-row-editable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.dnax-terms-empty { color: var(--muted); font-size: .85rem; }

/* Attachments + Terms & Conditions side-by-side row (Rfq/Edit, matches the
   RFQ mockup's bottom row) — collapses to one column on narrow screens.
   minmax(0, 1fr) on every track, not plain 1fr — a plain 1fr track can't
   shrink below the intrinsic min-content width of what's inside it, and a
   DevExtreme grid/form's own internal columns refuse to compress past their
   own minimums, which forced the whole row (and the page) wider than the
   viewport instead of letting each card's own content scroll/wrap
   internally (same fix already applied to .ir-lines-layout in
   voucher-edit.css for the same underlying reason). */
.dnax-two-col-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4, 16px);
}

@media (max-width: 800px) {
    .dnax-two-col-row { grid-template-columns: minmax(0, 1fr); }
}

/* A .card placed directly in one of these rows always owns its spacing from
   the row wrapper itself (which already carries its own bottom margin, e.g.
   via ir-section-card) — every consumer page was overriding this
   individually via an inline style="margin-bottom:0" on each card. */
.dnax-two-col-row > .card,
.dnax-three-col-row > .card {
    margin-bottom: 0;
}

/* Same idea as .dnax-two-col-row above but for a three-way row (e.g.
   Expenses + Terms & Conditions + Order Stages on PurchaseOrder/Edit) —
   collapses to two columns then one on narrower screens. minmax(0, 1fr) for
   the same reason as .dnax-two-col-row above. */
.dnax-three-col-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4, 16px);
}

@media (max-width: 1100px) {
    .dnax-three-col-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .dnax-three-col-row { grid-template-columns: minmax(0, 1fr); }
}

.dnax-pf-change-process-btn {
    background: none;
    border: none;
    padding: 0;
    margin-inline-start: auto;
    color: var(--info);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    white-space: nowrap;
}

.dnax-pf-gate-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3, 12px);
}

.dnax-pf-gate-list-scroll {
    max-height: 260px;
    overflow-y: auto;
}

.dnax-pf-gate-item {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .875rem;
    color: var(--text1);
}

.dnax-pf-gate-item:hover {
    border-color: var(--primary);
}

.dnax-pf-gate-item.selected {
    border-color: var(--primary);
    background: var(--bg);
    font-weight: 600;
}

.dnax-pf-gate-empty {
    font-size: .8rem;
    color: var(--muted);
    padding: 8px 0;
}

.dnax-pf-gate-actions {
    display: flex;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

/* "اختر العملية" run picker table (mountRunEntryGate) */
.dnax-pf-gate-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-3, 12px);
    max-height: 280px;
    overflow-y: auto;
}

.dnax-pf-gate-row {
    display: grid;
    grid-template-columns: 28px 1.4fr 1fr .8fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .8rem;
    color: var(--text1);
    border-bottom: 1px solid var(--border);
}

.dnax-pf-gate-row:last-child { border-bottom: none; }

.dnax-pf-gate-head {
    background: var(--bg);
    font-weight: 600;
    color: var(--text2);
}

.dnax-pf-gate-radio-col { display: flex; align-items: center; justify-content: center; }

.dnax-pf-gate-radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    box-sizing: border-box;
    position: relative;
}

.dnax-pf-gate-row-clickable { cursor: pointer; }
.dnax-pf-gate-row-clickable:hover { background: var(--bg); }
.dnax-pf-gate-row-clickable.selected { background: var(--info-bg); font-weight: 600; }
.dnax-pf-gate-row-clickable.selected .dnax-pf-gate-radio { border-color: var(--info); }
.dnax-pf-gate-row-clickable.selected .dnax-pf-gate-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--info);
}

/* Collapse toggle for the run sidebar (renderCollapseToggle) — full-width
   icon+label button when expanded, shrinks to an icon-only rail once the
   layout's second track drops to 40px (see .dnax-pf-page-layout--collapsed
   above). Sits above .dnax-pf-run-panel inside the same #receiptProcessFlow-
   style container, so it stays reachable whether the panel below it is
   shown or hidden. */
.dnax-pf-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-bottom: var(--space-3, 12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text2);
    cursor: pointer;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
}
.dnax-pf-sidebar-toggle:hover { background: var(--bg); color: var(--text1); }
.dnax-pf-sidebar-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Run info/progress/history sidebar (mountRunPanel) */
.dnax-pf-run-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.dnax-pf-sidebar-collapsed .dnax-pf-run-panel {
    display: none;
}

.dnax-pf-run-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: var(--surface);
}

.dnax-pf-run-card-title {
    font-weight: 600;
    font-size: .875rem;
    color: var(--text1);
    margin-bottom: 8px;
}

.dnax-pf-run-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    padding: 3px 0;
}

.dnax-pf-run-label { color: var(--text3); }
.dnax-pf-run-value { color: var(--text1); font-weight: 500; text-align: end; }

.dnax-pf-run-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dnax-pf-run-step {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    position: relative;
}

.dnax-pf-run-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: 26px;
    bottom: -4px;
    width: 2px;
    background: var(--border);
}

.dnax-pf-run-step-dot {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text3);
    z-index: 1;
}

.dnax-pf-run-step-completed .dnax-pf-run-step-dot { background: var(--success); border-color: var(--success); color: #fff; }
.dnax-pf-run-step-inprogress .dnax-pf-run-step-dot { background: var(--primary); border-color: var(--primary); color: #fff; }

.dnax-pf-run-step-name { font-size: .8rem; font-weight: 600; color: var(--text1); }
.dnax-pf-run-step-sub { font-size: .72rem; color: var(--text3); }

.dnax-pf-run-hist-row {
    padding: 6px 0;
    border-top: 1px solid var(--border);
}

.dnax-pf-run-hist-row:first-child { border-top: none; }
.dnax-pf-run-hist-text { font-size: .78rem; color: var(--text1); }
.dnax-pf-run-hist-meta { font-size: .7rem; color: var(--text3); margin-top: 2px; }

/* Two-column page layout for a chained screen's own content + the run
   sidebar (info/progress/history) — used by PurchaseInvoice/InventoryReceipt
   Edit pages once migrated to the run-aware Process Flow UX. minmax(0, 1fr)
   for the main column, not a plain 1fr — same reasoning as .dnax-two-col-row
   below: a plain 1fr can't shrink below the content's own min-content width,
   and a wide DevExtreme grid/tab set inside forced the whole page wider than
   the viewport (visible as a forced horizontal scroll on PurchaseOrder/
   InternationalPurchaseOrder) instead of scrolling internally. */
.dnax-pf-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-4, 16px);
    align-items: start;
}

/* Set by mountRunPanel (dnax-process-flow-actions.js) only on screens where
   the run panel is the entire second column with nothing else stacked
   alongside it, and only while that panel has nothing to show — reclaims
   the 320px track for the main content instead of leaving a dead gutter. */
.dnax-pf-page-layout.dnax-pf-page-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

/* User-toggled collapse (renderCollapseToggle in dnax-process-flow-actions.js)
   — distinct from --no-sidebar above: a real run exists here, the user just
   asked to shrink it while doing heavy data entry in the main column (e.g.
   InventoryReceipt/Edit's materials grid, which ALSO loses 33% of its own
   column to a line-detail panel the moment a row gets focus — three regions
   competing otherwise). Kept at 40px rather than fully removed so the
   re-expand toggle stays reachable. Scoped to the same width the two-column
   layout is actually active at — below that the max-width:1100px rule further
   down already stacks everything into one column, and a 40px second track
   would fight that instead of letting the collapsed panel sit inline in the
   stacked flow (its content still hidden, via .dnax-pf-sidebar-collapsed
   below, regardless of viewport). */
@media (min-width: 1101px) {
    .dnax-pf-page-layout.dnax-pf-page-layout--collapsed {
        grid-template-columns: minmax(0, 1fr) 40px;
    }
}

@media (max-width: 1100px) {
    /* minmax(0, 1fr), not a bare 1fr — same reasoning as above: a bare 1fr
       track still respects the child's min-content width, which let the
       stacked sidebar column (e.g. Rfq/Edit's "الموردون المدعوون" card
       header) overflow past the viewport instead of shrinking, confirmed
       at <=768px. */
    .dnax-pf-page-layout { grid-template-columns: minmax(0, 1fr); }
}

/* "بيانات مستمدة من الخطوة السابقة" — previous-step data pulled in once a
   run is attached at cold-entry. */
.dnax-pf-prev-data-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

.dnax-pf-prev-data-row:last-child { border-bottom: none; }
.dnax-pf-prev-data-label { color: var(--text3); }
.dnax-pf-prev-data-value { color: var(--text1); font-weight: 600; }

/* "بيانات مستمدة من الخطوة السابقة" card — a light success tint on the
   header only, marking this as data pulled in automatically rather than
   entered here, distinct from the plain-white headers every other card
   on the page uses. */
.dnax-pf-prev-card .card-header {
    background: var(--success-bg);
    border-bottom-color: var(--success);
}

.dnax-pf-prev-card .card-title { color: var(--text1); }

/* Sticky toolbar for a governed record's Actions dropdown + status badge —
   stays visible while the page's own scroll container (.page-body) scrolls
   past it, so the actions are always reachable on longer forms. */
.dnax-sticky-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px 16px;
}

/* Sticky Actions bar for a governed record — the standard container every
   screen will adopt once the Action Engine rolls out past the Currency
   pilot (replaces .dnax-sticky-bar for pages that opt in). Same in-flow
   sticky behavior as .dnax-sticky-bar (reserves its own layout space, stays
   visible while .page-body scrolls past it), but only 35% of the page
   width instead of the full width, pushed to the inline-end edge via
   margin-inline-start: auto — right in English (ltr), left in Arabic
   (rtl) — so it auto-flips with page direction with no isAr-conditional
   class needed. */
.dnax-action-panel {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 35%;
    margin-inline-start: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px 16px;
}

@media (max-width: 900px) {
    .dnax-action-panel {
        width: 100%;
    }
}

.dnax-action-panel-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot-success {
    background: var(--success);
}

.dot-warning {
    background: var(--warning);
}

.dot-danger {
    background: var(--danger);
}

.dot-muted {
    background: var(--muted);
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 9px;
    border: 1px solid;
    font-size: .84rem;
    margin-bottom: 14px;
}

.alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-success {
    background: var(--success-bg);
    border-color: #6ee7b7;
    color: #064e3b;
}

.alert-danger {
    background: var(--danger-bg);
    border-color: #fca5a5;
    color: #7f1d1d;
}

.alert-warning {
    background: var(--warning-bg);
    border-color: #fde68a;
    color: #78350f;
}

.alert-info {
    background: var(--info-bg);
    border-color: #93c5fd;
    color: #1e3a8a;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Opt-in — centers a short row of tiles instead of stretching them to fill
   every track (e.g. a KPI grid living inside its own bordered section). */
.kpi-grid-centered {
    grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
    justify-content: center;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s, transform .15s;
    position: relative;
    overflow: hidden;
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity .2s;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kpi-card:hover::after {
    opacity: 1;
}

.kpi-card--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.kpi-card--link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon svg {
    width: 21px;
    height: 21px;
}

.kpi-icon-teal {
    background: rgba(var(--accent-rgb),.14);
    color: var(--accent-hover);
}

.kpi-icon-blue {
    background: var(--info-bg);
    color: var(--info);
}

.kpi-icon-orange {
    background: var(--orange-bg);
    color: var(--orange);
}

.kpi-icon-red {
    background: var(--danger-bg);
    color: var(--danger);
}

.kpi-icon-purple {
    background: var(--purple-bg);
    color: var(--purple);
}

.kpi-icon-green {
    background: var(--success-bg);
    color: var(--success);
}

.kpi-icon-indigo {
    background: var(--indigo-bg);
    color: var(--indigo);
}

.kpi-icon-pink {
    background: var(--pink-bg);
    color: var(--pink);
}

.kpi-data {
    flex: 1;
    min-width: 0;
}

.kpi-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text1);
    line-height: 1;
}

.kpi-sub {
    font-size: .72rem;
    color: var(--muted);
    margin-top: 4px;
}

.charts-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}

@media (max-width: 1024px) {
    .charts-row {
        grid-template-columns: 1fr;
    }
}

.chart-card {
    /* CSS Grid tracks sized with `fr` still respect content's intrinsic
       min-width by default — a DevExtreme chart's SVG reports its own
       rendered width back through a ResizeObserver, so without this the
       track and the chart width feed off each other and grow every cycle
       instead of ever settling (confirmed live: 505 -> 515 -> 524 -> 533px
       before it happened to stabilize; not guaranteed to converge on every
       browser). min-width: 0 lets the grid track shrink to its allotted
       `fr` share regardless of the chart's own reported size, breaking the
       feedback loop at the source. */
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-xs);
}

.chart-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 14px;
}

.welcome-bar {
    background: linear-gradient(120deg, var(--secondary) 0%, var(--primary) 55%, var(--primary-dark) 100%);
    border-radius: var(--radius);
    padding: 18px 22px;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.welcome-bar::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}

.welcome-bar h2 {
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 3px;
    position: relative;
}

.welcome-bar p {
    font-size: .8rem;
    opacity: .7;
    position: relative;
}

.sec-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 18px 0 10px;
}

/* ApprovalHistory ViewComponent — embeddable approval status/timeline any
   module's detail view can drop in (see ViewComponents/ApprovalHistoryViewComponent.cs) */
.approval-history-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.approval-history-submitted {
    font-size: .78rem;
    color: var(--text3);
}

.approval-history-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.approval-history-step {
    border-inline-start: 3px solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--surface);
}

.approval-history-step-approved { border-inline-start-color: var(--success); }
.approval-history-step-rejected { border-inline-start-color: var(--danger); }
.approval-history-step-pending  { border-inline-start-color: var(--warning); }
.approval-history-step-skipped  { border-inline-start-color: var(--muted); opacity: .65; }
.approval-history-step-created  { border-inline-start-color: var(--info); }
.approval-history-step-edited   { border-inline-start-color: var(--accent); }
.approval-history-step-submitted { border-inline-start-color: var(--primary); }

/* سجل الحركة (MovementHistory ViewComponent): نفس بطاقات خطوات الاعتماد، ويُضاف لكل سطر صورة المستخدم وتفاصيل التغيير «قبل ← بعد». */
.ah-row { display: flex; align-items: flex-start; gap: 12px; }
.ah-avatar-wrap { flex-shrink: 0; padding-top: 2px; }
.ah-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: #fff; font-size: .8rem; font-weight: 700;
}
.ah-body { min-width: 0; flex: 1; }
.ah-user { font-weight: 600; color: var(--text2); }
.ah-role, .ah-note { color: var(--text3); }
.ah-changes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: .78rem; }
.ah-field { font-weight: 600; color: var(--text2); }
.ah-from { color: var(--text3); text-decoration: line-through; text-decoration-color: var(--danger); }
.ah-to { color: var(--text1); font-weight: 600; }
.ah-arrow { color: var(--muted); }
.ah-op { font-weight: 700; }
.ah-op-add { color: var(--success); }
.ah-op-del { color: var(--danger); }
.ah-empty { padding: 12px 0; }

.approval-history-step-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text1);
}

.approval-history-step-role {
    font-weight: 400;
    color: var(--text3);
}

.approval-history-step-meta {
    font-size: .76rem;
    color: var(--text3);
    margin-top: 2px;
}

.approval-history-step-comments {
    font-size: .78rem;
    color: var(--text2);
    font-style: italic;
    margin-top: 4px;
}

/* الجرس/القائمة/التنبيهات المنبثقة: انتقلت إلى design-system/notifications.css (مركز الإشعارات). */

/* ============================================================
   DevExtreme widget coverage — extends the grid/pager/scheduler
   override pattern above to the rest of the widget list used across
   the app. Targeted, token-driven overrides on top of the stock
   dx.light.css CDN theme (no ThemeBuilder/SCSS pipeline in this repo).
   ============================================================ */

/* ── DataGrid/TreeList row action links (the "buttons" column type renders
   edit/delete/custom icons as .dx-link) and the filter-panel icon/text —
   stock theme colors both #337ab7. ──────────────────────────────────── */
.dx-datagrid .dx-link,
.dx-treelist .dx-link {
    color: var(--accent-hover) !important;
}

.dx-datagrid .dx-command-edit .dx-link .dx-icon,
.dx-treelist .dx-command-edit .dx-link .dx-icon {
    font-size: 1.15rem !important;
}

.dx-datagrid .dx-command-edit .dx-link .dx-icon-trash,
.dx-treelist .dx-command-edit .dx-link .dx-icon-trash {
    color: var(--danger) !important;
}

.dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter,
.dx-datagrid-filter-panel .dx-datagrid-filter-panel-text,
.dx-datagrid-filter-panel .dx-icon-filter {
    color: var(--accent-hover) !important;
}

.dx-datagrid-search-text {
    background-color: var(--accent) !important;
    color: var(--primary) !important;
}

/* ── Focus (all dxTextBox/dxSelectBox/dxDateBox/dxNumberBox/... editors
   share the .dx-texteditor base class) — stock theme uses a blue focus
   border (#337ab7); repointed to the brand gold. ──────────────────────── */
.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined,
.dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-underlined {
    border-color: var(--accent) !important;
}

.dx-texteditor.dx-state-hover {
    border-color: rgba(var(--accent-rgb),.4) !important;
}

.dx-texteditor.dx-state-focused .dx-texteditor-label,
.dx-texteditor.dx-state-focused.dx-state-hover .dx-texteditor-label {
    color: var(--accent-hover) !important;
}

/* ── Form ──────────────────────────────────────────────────────────── */
.dx-field-item-label-text {
    color: var(--text3) !important;
    font-size: var(--field-label-fs) !important;
    font-weight: var(--field-label-fw) !important;
}

.dx-form .dx-fieldset-header {
    color: var(--text2) !important;
    font-weight: 600 !important;
}

/* ── Calendar (DateBox popup) — same #337ab7 stock blue, repointed. ──── */
.dx-calendar-cell.dx-calendar-today span {
    border: 2px solid var(--accent) !important;
}

.dx-calendar-cell.dx-state-hover span {
    background-color: rgba(var(--accent-rgb),.24) !important;
    color: var(--text1) !important;
}

.dx-calendar-cell.dx-state-active span {
    background-color: rgba(var(--accent-rgb),.4) !important;
}

.dx-calendar-cell.dx-calendar-selected-date span {
    color: var(--primary) !important;
    background-color: var(--accent) !important;
}

.dx-calendar-cell.dx-calendar-contoured-date span {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.5) !important;
}

/* ── Checkbox / RadioButton / Switch — same stock blue, repointed to a
   darker gold for legibility against a white control face. ──────────── */
.dx-checkbox-checked .dx-checkbox-icon {
    color: var(--accent-hover) !important;
}

.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    background-color: var(--accent-hover) !important;
}

.dx-switch-handle::before {
    background-color: var(--muted) !important;
}

.dx-switch-on-value .dx-switch-handle::before {
    background-color: var(--accent) !important;
}

.dx-switch.dx-state-active .dx-switch-handle::before {
    background-color: var(--accent-hover) !important;
}

.dx-switch.dx-state-hover .dx-switch-handle::before,
.dx-switch.dx-state-focused .dx-switch-handle::before {
    background-color: var(--accent) !important;
}

.dx-switch.dx-state-hover .dx-switch-container,
.dx-switch.dx-state-focused .dx-switch-container,
.dx-switch.dx-state-active .dx-switch-container {
    border-color: var(--accent) !important;
}

.dx-field-item-required-mark {
    color: var(--danger) !important;
}

/* ── dxButton type:'default' — stock theme's "branded/primary" button type
   renders solid blue (#337ab7); this is the DevExtreme-widget equivalent of
   our own .btn-primary (already gold), so it gets the same treatment. ──── */
.dx-button-mode-contained.dx-button-default {
    background-color: var(--accent) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}

.dx-button-mode-contained.dx-button-default .dx-icon {
    color: var(--primary) !important;
}

.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-button-mode-contained.dx-button-default.dx-state-focused,
.dx-button-mode-contained.dx-button-default.dx-state-active {
    background-color: var(--accent-hover) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}

.dx-button-mode-outlined.dx-button-default {
    border-color: var(--accent) !important;
    color: var(--accent-hover) !important;
}

.dx-button-mode-outlined.dx-button-default .dx-icon {
    color: var(--accent-hover) !important;
}

.dx-button-mode-outlined.dx-button-default.dx-state-focused,
.dx-button-mode-outlined.dx-button-default.dx-state-hover {
    background-color: rgba(var(--accent-rgb),.1) !important;
    border-color: var(--accent) !important;
}

.dx-button-mode-outlined.dx-button-default.dx-state-active {
    background-color: rgba(var(--accent-rgb),.4) !important;
    border-color: var(--accent) !important;
    color: var(--accent-hover) !important;
}

.dx-button-mode-text.dx-button-default {
    color: var(--accent-hover) !important;
}

.dx-button-mode-text.dx-button-default .dx-icon {
    color: var(--accent-hover) !important;
}

.dx-button-mode-text.dx-button-default.dx-state-focused,
.dx-button-mode-text.dx-button-default.dx-state-hover {
    background-color: rgba(var(--accent-rgb),.1) !important;
}

.dx-button-mode-text.dx-button-default.dx-state-active {
    background-color: rgba(var(--accent-rgb),.4) !important;
    color: var(--accent-hover) !important;
}

/* ── Badge — stock theme uses the same blue by default. ───────────────── */
.dx-badge {
    background-color: var(--accent) !important;
    color: var(--primary) !important;
}

/* ── Toolbar ───────────────────────────────────────────────────────── */
.dx-toolbar {
    background: var(--surface) !important;
}

.dx-toolbar .dx-toolbar-item {
/*    color: var(--text1);*/
}

/* ── Drawer ────────────────────────────────────────────────────────── */
.dx-drawer-panel-content {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ── List / dropdown popup (dxSelectBox, dxLookup, dxTagBox, dxAutocomplete
   all render their popup via dxList internally) — stock theme uses blue
   (#337ab7) for the focused/active item; repointed to the brand gold, with
   dark text/icons for contrast since gold is a light, bright accent unlike
   the darker stock blue. ───────────────────────────────────────────────── */
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {
    background-color: rgba(var(--accent-rgb),.10) !important;
    color: var(--text1) !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
    background-color: rgba(var(--accent-rgb),.16) !important;
    color: var(--text1) !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected.dx-state-hover:not(.dx-state-focused) {
    background-color: rgba(var(--accent-rgb),.22) !important;
    color: var(--text1) !important;
}

/* عنصر القائمة بالتركيز (لوحة المفاتيح، أو أول عنصر عند فتح القائمة المنسدلة) = تظليل خفيف بلون العلامة بدل مربع أصفر كامل؛
   الأصفر الكامل يبقى للتأشير الفعلي فقط (:active أثناء الضغط). */
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused {
    background-color: rgba(var(--accent-rgb),.14) !important;
    color: var(--text1) !important;
    outline: none !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
    background-color: rgba(var(--accent-rgb),.32) !important;
    color: var(--text1) !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused .dx-icon,
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active .dx-icon {
    color: var(--text1) !important;
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
    background-color: rgba(var(--accent-rgb),.28) !important;
    color: var(--text1) !important;
}

/* ── Accordion ─────────────────────────────────────────────────────── */
.dx-accordion-item-title {
    background: var(--surface) !important;
    color: var(--text1) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600 !important;
}

.dx-accordion-item.dx-accordion-item-opened > .dx-accordion-item-title {
    color: var(--primary) !important;
    border-inline-start: 3px solid var(--accent) !important;
}

.dx-accordion-item-body {
    background: var(--surface) !important;
}

/* ── TreeView — stock theme puts dx-state-selected/dx-state-focused on the
   OUTER wrapper (.dx-treeview-item-without-checkbox / -with-checkbox), not
   on .dx-treeview-item itself, with .dx-treeview-item as its child — a
   plain ".dx-treeview-item.dx-state-focused" selector never matches that
   structure, so the original override above this comment never actually
   fired. #337ab7 (focused, solid) repointed to gold; the gray (0,0,0,.1)
   selected-but-not-focused state repointed to a lighter gold tint. ────── */
.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item,
.dx-treeview-item-with-checkbox.dx-state-selected > .dx-treeview-item,
.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item,
.dx-treeview-item-with-checkbox.dx-state-focused > .dx-treeview-item {
    background-color: rgba(var(--accent-rgb),.16) !important;
    color: var(--text1) !important;
}

.dx-treeview-item-without-checkbox.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
    background-color: rgba(var(--accent-rgb),.16) !important;
}

.dx-treeview-item-with-checkbox.dx-state-focused > .dx-checkbox .dx-checkbox-icon {
    border-color: var(--accent) !important;
}

/* ── TreeList ──────────────────────────────────────────────────────────
   Header face/ink/indicators are unified with DataGrid up in the shared
   "Grid / tree header" block near the top of this file — nothing to
   repeat here. */
.dx-treelist-rowsview .dx-row:hover > td {
    background: var(--bg) !important;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.dx-tabs {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

.dx-tab-selected {
    color: var(--primary) !important;
    border-bottom: 2px solid var(--accent) !important;
}

.dx-tab.dx-state-hover {
    background: var(--bg) !important;
}

/* dxTabPanel (used inside dxForm's tabbed items, and standalone) draws a
   whole-strip blue box-shadow border (#337ab7) the moment the tab strip
   has DOM focus — separate from the selected-tab underline above, and not
   limited to keyboard nav; a plain click into the tab strip triggers it. */
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab,
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):last-of-type,
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):only-child {
    box-shadow: inset 0 1px var(--border), inset 0 -1px var(--accent) !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab.dx-state-active.dx-state-focused {
    box-shadow: inset 0 1px var(--accent), inset -1px 0 var(--accent), inset 1px 0 var(--accent), inset 0 -1px var(--border) !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):first-of-type,
.dx-rtl .dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):first-of-type,
.dx-rtl.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):first-of-type {
    box-shadow: inset 0 1px var(--border), inset 0 -1px var(--accent), inset 1px 0 var(--border) !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-stretched.dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):last-of-type {
    box-shadow: inset 0 1px var(--border), inset 0 -1px var(--accent), inset -1px 0 var(--border) !important;
}

.dx-rtl .dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-stretched.dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):last-of-type,
.dx-rtl.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-stretched.dx-tabs-expanded .dx-tab:not(.dx-state-focused,.dx-tab-selected):last-of-type {
    box-shadow: inset 0 1px var(--border), inset 0 -1px var(--accent), inset 1px 0 var(--border) !important;
}

.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-nav-button-left,
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-nav-button-right {
    box-shadow: inset 0 -1px var(--accent), inset 1px 0 var(--border), inset 0 1px var(--border) !important;
}

/* ── DropDownButton ──────────────────────────────────────────────────
   Same black-face / gold-label identity as .btn-primary and the toolbar
   buttons; hover inverts to a solid gold fill. Both the action segment and
   the dropdown-toggle arrow are covered so they never diverge. */
.dx-dropdownbutton .dx-button-mode-contained {
    background: var(--primary) !important;
    color: var(--accent) !important;
}

.dx-dropdownbutton .dx-button-mode-contained .dx-icon {
    color: var(--accent) !important;
}

.dx-dropdownbutton .dx-button-mode-contained:hover,
.dx-dropdownbutton .dx-button-mode-contained.dx-state-hover {
    background: var(--accent) !important;
    color: var(--primary) !important;
}

.dx-dropdownbutton .dx-button-mode-contained:hover .dx-icon,
.dx-dropdownbutton .dx-button-mode-contained.dx-state-hover .dx-icon {
    color: var(--primary) !important;
}

.dx-dropdownbutton-popup-wrapper .dx-list-item.dx-state-hover {
    background: var(--bg) !important;
}

/* ── LoadPanel ─────────────────────────────────────────────────────── */
.dx-loadpanel-content {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
}

.dx-loadindicator-icon .dx-loadindicator-segment::before {
    background-color: var(--primary) !important;
}

/* مؤشر تحميل الجداول: X متحركة (Image/brand/x-loader.svg عبر loadPanel.indicatorSrc في dx-grid-defaults.js) */
.dx-gridbase-container .dx-loadpanel-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
}
.dx-gridbase-container .dx-loadpanel-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.dx-gridbase-container .dx-loadindicator.dx-loadpanel-indicator,
.dx-gridbase-container .dx-loadindicator-image {
    width: 88px;
    height: 44px;
}
.dx-gridbase-container .dx-loadindicator-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.dx-toast-content {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
}

.dx-toast-success .dx-toast-content { background: var(--success) !important; }
.dx-toast-error .dx-toast-content   { background: var(--danger) !important; }
.dx-toast-warning .dx-toast-content { background: var(--warning) !important; }
.dx-toast-info .dx-toast-content    { background: var(--info) !important; }

/* ── Validation ────────────────────────────────────────────────────── */
.dx-invalid .dx-texteditor-input {
    border-color: var(--danger) !important;
}

.dx-invalid-message .dx-overlay-content {
    background: var(--danger) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
}

/* ── ContextMenu ───────────────────────────────────────────────────── */
.dx-context-menu .dx-menu-item.dx-state-hover {
    background: var(--bg) !important;
}

.dx-context-menu .dx-menu-item-selected {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* ── FloatingActionButton ─────────────────────────────────────────── */
.dx-fa-button-main {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.dx-fa-button-main .dx-icon {
    color: var(--accent) !important;
}

/* ── Purchase history summary tiles — the compact stat strip inside
   _PurchaseHistoryPopup.cshtml (shared by Supplier's "Item Reference" tab
   and Item's "Suppliers" tab). Same tokens as .kpi-card, deliberately more
   compact since it lives inside a popup rather than a full page. ───────── */
.ph-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ph-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.ph-tile-label {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.ph-tile-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text1);
}

.ph-tile-sub {
    font-size: .78rem;
    color: var(--text2);
    margin-top: 2px;
}


/* ============================================================
   Profile card (person-like records: employee first, patient/doctor next)
   ProfileHeader ViewComponent + the rich tab bar + activity timeline.
   Tokens only; logical properties so RTL/LTR mirror on their own.
   ============================================================ */
.ds-profile {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-block-end: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
}

/* thin brand-gold rail on the leading edge — the only decoration */
.ds-profile::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--accent);
}

.ds-avatar {
    flex: 0 0 auto;
    inline-size: 76px;
    block-size: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}
.ds-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-avatar--0 { background: var(--info-bg);    color: var(--info); }
.ds-avatar--1 { background: var(--success-bg); color: var(--success); }
.ds-avatar--2 { background: var(--warning-bg); color: var(--text1); }
.ds-avatar--3 { background: var(--accent-bg);  color: var(--text1); }

.ds-profile-main { flex: 1 1 auto; min-inline-size: 0; }
.ds-profile-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.ds-profile-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--text1); line-height: 1.25; }
.ds-profile-subtitle { margin-block-start: 2px; color: var(--text2); font-size: .92rem; }
.ds-profile-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }

.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text2);
    font-size: .78rem;
    text-decoration: none;
}
.ds-chip svg { inline-size: 14px; block-size: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; }
.ds-chip--link { cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.ds-chip--link:hover, .ds-chip--link:focus-visible { border-color: var(--accent-hover); color: var(--text1); background: var(--accent-bg); outline: none; }

.ds-profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; flex: 0 0 auto; }

@media (max-width: 768px) {
    .ds-profile { flex-direction: column; align-items: flex-start; }
    .ds-profile-actions { justify-content: flex-start; }
}

/* Rich tab bar (opt-in via .ds-tabs--rich): icon + label + live count badge, gold active marker, keyboard-visible focus */
.ds-tabs--rich .ds-tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-tabs--rich .ds-tab svg { inline-size: 16px; block-size: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.ds-tabs--rich .ds-tab:hover { background: var(--bg); }
.ds-tabs--rich .ds-tab:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: -2px; }
.ds-tabs--rich .ds-tab.active { color: var(--text1); border-bottom-color: var(--accent); }
.ds-tab-count {
    min-inline-size: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ds-tab-count:empty { display: none; }
.ds-tab.active .ds-tab-count { background: var(--accent-bg); border-color: var(--accent-hover); color: var(--text1); }

@keyframes ds-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ds-tabs--rich ~ div .ds-tab-content.active { animation: ds-fade-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .ds-tabs--rich ~ div .ds-tab-content.active { animation: none; } }

/* Activity timeline (career events, salary changes, hire) */
.ds-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ds-timeline::before { content: ''; position: absolute; inset-block: 6px; inset-inline-start: 15px; inline-size: 2px; background: var(--border); }
.ds-timeline-item { position: relative; display: flex; gap: var(--space-4); padding-block: var(--space-3); }
.ds-timeline-dot {
    flex: 0 0 auto; inline-size: 32px; block-size: 32px; border-radius: 50%;
    display: grid; place-items: center; z-index: 1;
    background: var(--surface); border: 2px solid var(--border-2); color: var(--text2);
}
.ds-timeline-dot svg { inline-size: 16px; block-size: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.ds-timeline-item--hire .ds-timeline-dot   { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.ds-timeline-item--career .ds-timeline-dot { border-color: var(--accent-hover); color: var(--text1); background: var(--accent-bg); }
.ds-timeline-item--salary .ds-timeline-dot { border-color: var(--info); color: var(--info); background: var(--info-bg); }
.ds-timeline-body {
    flex: 1 1 auto; min-inline-size: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: box-shadow .15s, border-color .15s;
}
.ds-timeline-body:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.ds-timeline-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.ds-timeline-title { font-weight: 700; color: var(--text1); font-size: .9rem; }
.ds-timeline-date { color: var(--text3); font-size: .78rem; }
.ds-timeline-detail { margin-block-start: 4px; color: var(--text2); font-size: .82rem; }
.ds-timeline-link { margin-block-start: var(--space-2); font-size: .78rem; }

/* ═══ أيقونات التابات (dnax-tab-icons.js) ═══ */
.dnax-tab-ico { display: inline-flex; align-items: center; margin-inline-end: 6px; vertical-align: -3px; flex-shrink: 0; }
.dnax-tab-ico svg { width: 16px; height: 16px; }
.dx-tab .dx-tab-content { display: inline-flex; align-items: center; justify-content: center; }
.ds-tab, .pt-tab, .rep-tab, .vt-tab, .dnax-compare-tab, .lab-tab { white-space: nowrap; }
/* ═══ شعار الشركة (Administration/Company/Edit) ═══ */
.company-logo-field { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.company-logo-preview { max-width: 220px; max-height: 90px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-2); }
.company-logo-remove { font-size: .85rem; color: var(--text2); cursor: pointer; }

/* لوحات التوفر بلوحة المستودعات (تبويبان + شريط أزرار) */
.wh-dash-panel { margin-block-start: var(--space-3, 12px); }
.wh-dash-panel[hidden] { display: none; }
.wh-dash-bar { display: flex; justify-content: flex-end; margin-block-end: var(--space-2, 8px); }

/* قائمة المستودعات: اسم المستودع مع إزاحة بحسب مستوى الشجرة */
.wh-name { display: flex; align-items: flex-start; gap: var(--space-1, 4px); }
.wh-branch { color: var(--text3); }
.wh-lvl-1 { padding-inline-start: var(--space-4, 16px); }
.wh-lvl-2 { padding-inline-start: calc(var(--space-4, 16px) * 2); }
.wh-lvl-3 { padding-inline-start: calc(var(--space-4, 16px) * 3); }
.wh-lvl-4 { padding-inline-start: calc(var(--space-4, 16px) * 4); }

/* شريط مرشّحات فوق شبكة (قوائم المخزون): عناصر بجانب بعضها وتلتف بالشاشات الضيقة */
.def-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); padding-block-end: var(--space-3, 12px); }
.def-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2, 8px); margin-block-end: var(--space-3, 12px); }

/* حقول/أزرار داخل نوافذ منبثقة بسيطة (اختيار مورد وغيرها) */
.dnax-popup-field { margin-top: var(--space-3); }
.dnax-popup-actions { margin-top: var(--space-5); }

/* بند بلوحة المستودعات طُلب تزويده: لا يُختار ثانية (الحالة مكتوبة بعمود «طلب التزويد» لا باللون وحده) */
.wh-dash-row-locked > td { opacity: .75; }

/* تنفيذ بند طلب (سند إخراج / طلب تزويد) بشبكات الطلبات الطالبة */
.dnax-fulfil-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dnax-fulfil-doc + .dnax-fulfil-doc { margin-block-start: var(--space-1); }
.dnax-fulfil-label { color: var(--text2); font-size: var(--fs-xs); }

/* ═══ شريط المؤشرات (KPI strip) — بديل بطاقات المؤشرات المنفصلة: شريط واحد مقسَّم، كل خانة: أيقونة + عنوان + قيمة + سطر فرعي + عدّاد نسبة.
   الخانات أزرار قابلة للتفعيل كمرشّح (.is-active)، أو عناصر ثابتة بلا تفاعل (div). النغمة بـ --tone؛ الحالة تُقرأ بالنص لا باللون وحده. ═══ */
.ds-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; }
.ds-kpi-seg { --tone: var(--text2); --tone-bg: var(--bg); position: relative; display: flex; align-items: center; gap: var(--space-4); min-inline-size: 0; padding: var(--space-4) var(--space-5); margin: 0; border: 0; border-inline-end: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: start; }
.ds-kpi-seg:last-child { border-inline-end: 0; }
button.ds-kpi-seg { cursor: pointer; transition: background-color .15s; }
button.ds-kpi-seg:hover { background: var(--bg); }
button.ds-kpi-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
button.ds-kpi-seg.is-active { background: var(--accent-bg); }
button.ds-kpi-seg.is-active::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--accent); }
.ds-kpi-tone-info { --tone: var(--info); --tone-bg: var(--info-bg); }
.ds-kpi-tone-success { --tone: var(--success); --tone-bg: var(--success-bg); }
.ds-kpi-tone-warning { --tone: var(--warning); --tone-bg: var(--warning-bg); }
.ds-kpi-tone-danger { --tone: var(--danger); --tone-bg: var(--danger-bg); }
.ds-kpi-tone-purple { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.ds-kpi-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-sm); background: var(--tone-bg); color: var(--tone); }
.ds-kpi-ico svg { inline-size: 20px; block-size: 20px; }
.ds-kpi-body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1; }
.ds-kpi-label { color: var(--text2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-kpi-value { color: var(--text1); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ds-kpi-sub { color: var(--text3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-kpi-sub:empty { display: none; }
.ds-kpi-bar { display: block; block-size: 4px; margin-block-start: var(--space-1); border-radius: 999px; background: var(--border); overflow: hidden; }
.ds-kpi-bar > i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--tone); transition: inline-size .3s; }
.ds-kpi-strip.is-compact .ds-kpi-seg { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
.ds-kpi-strip.is-compact .ds-kpi-ico { inline-size: 34px; block-size: 34px; }
.ds-kpi-strip.is-compact .ds-kpi-value { font-size: var(--fs-lg); }
@media (max-width: 700px) { .ds-kpi-seg { border-inline-end: 0; border-block-end: 1px solid var(--border); } .ds-kpi-seg:last-child { border-block-end: 0; } }
@media (prefers-reduced-motion: reduce) { .ds-kpi-bar > i { transition: none; } }

/* ═══ عدّاد أفقي (meter) ونجوم التقييم ═══ */
.ds-meter { display: block; block-size: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ds-meter > i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--accent); transition: inline-size .3s; }
.ds-meter.ds-meter-success > i { background: var(--success); } .ds-meter.ds-meter-info > i { background: var(--info); } .ds-meter.ds-meter-warning > i { background: var(--warning); } .ds-meter.ds-meter-danger > i { background: var(--danger); }
.ds-stars { --star: 16px; position: relative; display: inline-flex; vertical-align: middle; color: var(--border-2); }
.ds-stars svg { flex: none; inline-size: var(--star); block-size: var(--star); fill: currentColor; stroke: none; }
.ds-stars-row { display: flex; gap: 2px; }
.ds-stars-fill { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; color: var(--accent); }
.ds-stars-fill .ds-stars-row { inline-size: max-content; }
.ds-stars.is-lg { --star: 22px; }
/* مُدخل التقييم بالنجوم (radiogroup): النجوم أزرار */
.ds-star-input { display: inline-flex; gap: 2px; direction: ltr; }
html[dir="rtl"] .ds-star-input { direction: rtl; }
.ds-star-input button { display: inline-flex; padding: 2px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--border-2); cursor: pointer; transition: color .1s, transform .1s; }
.ds-star-input button svg { inline-size: 26px; block-size: 26px; fill: currentColor; stroke: none; }
.ds-star-input button.is-on { color: var(--accent); }
.ds-star-input button:hover { transform: scale(1.12); }
.ds-star-input button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* عمود نص طويل بقوائم التعريفات (بنود الشروط/المعايير): يلتف على أسطر بدل القصّ بنقاط */
.dx-datagrid .dx-data-row > td.dnax-cell-wrap { white-space: normal; text-overflow: clip; line-height: 1.5; }
/* خلايا شبكات المستندات: أرقام بعرض ثابت للأرقام، وإجمالي بند بارز، وقيمة مساعدة خافتة */
.dx-datagrid td.dnax-cell-num { font-variant-numeric: tabular-nums; }
.dx-datagrid .dx-data-row > td.dnax-cell-strong { font-weight: var(--fw-bold); color: var(--text1); font-variant-numeric: tabular-nums; }
.dx-datagrid .dx-datagrid-total-footer td.dnax-cell-strong, .dx-datagrid .dx-datagrid-total-footer .dx-datagrid-summary-item { font-weight: var(--fw-bold); color: var(--text1); font-variant-numeric: tabular-nums; }
.dnax-cell-stack { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* شريط تبويبات داخل بطاقة (ds-tabs--rich أعلى .card): نفس هامش رأس البطاقة وخلفيتها فيتصل خط الفاصل بجسم اللوحة */
.ds-tabs--card { padding-inline: var(--space-5); background: var(--surface); }

/* نوافذ المستند المشتركة (dnax-doc-popups.js): المرفقات والقيد المحاسبي */
.dnax-docpop .dx-popup-content { padding: var(--space-4); }
.dnax-docpop-list { margin-block-end: var(--space-3); }
.dnax-docpop-upload { margin-block-start: var(--space-3); }
.dnax-docpop-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.dnax-docpop-meta-item { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.dnax-docpop-meta-label { color: var(--text3); font-size: var(--fs-xs); }
.dnax-docpop-meta-value { color: var(--text1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.dnax-docpop-link { display: inline-block; margin-block-start: var(--space-3); color: var(--primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.dnax-docpop-link:hover { text-decoration: underline; }

/* قوائم المستندات: عمودا «آخر إجراء» والمرفقات (doc-lists.js). */
.dl-last { display: grid; gap: 1px; line-height: 1.3; }
.dl-last-line { font-size: var(--fs-sm); }
.dl-last-time { color: var(--text3); font-size: var(--fs-xs, .75rem); }
.dl-last--ok .dl-last-label { color: var(--success); }
.dl-last--no .dl-last-label { color: var(--danger); }
.dl-last--wait .dl-last-label { color: var(--warning); }
.dl-att-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text1); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.dl-att-chip:hover, .dl-att-chip:focus-visible { border-color: var(--primary); color: var(--primary); }
.dl-att-none { color: var(--text3); }

/* الجوال: مجموعة أزرار DevExtreme (مثل أوضاع عرض الجدول الزمني: يوم/أسبوع/شهر/جدول) لا تتجاوز عرض الحاوية — تمرّر أفقياً داخلها بدل الخروج عن الشاشة */
@media (max-width: 767px) {
    .dx-buttongroup { max-width: 100%; }
    .dx-buttongroup-wrapper { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .dx-buttongroup-wrapper::-webkit-scrollbar { display: none; }
}

/* ── شعار dnaXpro (Views/Shared/_BrandWordmark.cshtml): SVG مضمّن، الحروف بلون النص الحالي والـ X ذهبية أكبر من الحروف.
   الحجم من font-size الحاوي؛ خط أساس الحروف يقع .24em فوق أسفل الصورة (ذيل حرف p). ── */
.brand-wordmark { display: inline-block; height: 1.076em; width: auto; vertical-align: -.24em; overflow: visible; }
.brand-wordmark .bw-x { fill: var(--accent); }
.brand-wordmark .bw-x-shade { fill: var(--accent-hover); opacity: .75; }