/* ============================================================================
   SKYLINE FINANCIAL CENTRE — Oracle Redwood design system
   Canonical theme. Loaded globally AFTER custom_backend.css so it unifies the
   app's look (light surfaces, #1B6DC1 accent, dense professional data tables,
   official statement/report layouts). Page-scoped styles may still override.
   Tokens + reusable .sk-* components for bespoke page rebuilds.
   ============================================================================ */

:root {
    /* Brand / accent (Oracle Redwood blue) */
    --sk-primary:        #1B6DC1;
    --sk-primary-600:    #155aa3;
    --sk-primary-700:    #114a86;
    --sk-primary-050:    #eaf2fb;
    --sk-primary-100:    #d6e6f7;

    /* Surfaces */
    /* was #f4f6f9; slate-50 #f8fafc is dE 1.5 away -- still below the just-
       noticeable threshold -- and is used 725 times. Same reasoning. */
    --sk-bg:             var(--sk-neutral-50);   /* page background */
    --sk-surface:        #ffffff;   /* cards */
    --sk-surface-2:      #fafbfc;   /* subtle alt surface */
    --sk-header-tint:    #f7f9fc;   /* card/table header strip */

    /* Lines */
    /* was #e3e8ef; slate-200 #e2e8f0 is dE 0.6 away -- imperceptible -- and is
       used 1,267 times against this token's 98. Pointing the SEMANTIC token at
       the PRIMITIVE removes one of the app's duplicate neutrals for free. */
    --sk-border:         var(--sk-neutral-200);
    --sk-border-strong:  #d2dae5;

    /* Text */
    --sk-text:           #1c2733;
    --sk-text-2:         #5b6b7c;
    /* tier-3 (subtitles, captions, --text-muted/--text-placeholder): #8a98a8 was 2.94:1,
       below WCAG 1.4.3's 4.5:1. #66727f is 4.91:1 — the lightest blue-grey that passes,
       so it stays as distinct as possible from tier-2 (#5b6b7c, 5.47:1). */
    --sk-text-3:         #66727f;
    --sk-text-invert:    #ffffff;

    /* Semantic — darkened for WCAG 1.4.3: these are used as button/toast fills with
       WHITE text and as status text on white. #1f9d57 (3.49:1) and #c9870a (3.02:1)
       failed the 4.5:1 minimum; #15803d (5.02) and #b45309 (5.02) pass and keep the
       same green/amber hue. Danger #d23f3f (4.64) and info #1B6DC1 (5.24) already pass.
       The light -bg variants below are separate tokens and are unchanged. */
    --sk-success:        #15803d;
    --sk-success-bg:     #e8f6ee;
    --sk-danger:         #d23f3f;
    --sk-danger-bg:      #fbeaea;
    --sk-warning:        #b45309;
    --sk-warning-bg:     #fdf3e2;
    --sk-info:           #1B6DC1;
    --sk-info-bg:        #eaf2fb;

    /* Elevation */
    --sk-shadow-sm:      0 1px 2px rgba(16,32,52,.06), 0 1px 3px rgba(16,32,52,.05);
    --sk-shadow:         0 2px 6px rgba(16,32,52,.06), 0 4px 14px rgba(16,32,52,.06);
    --sk-shadow-lg:      0 8px 28px rgba(16,32,52,.12);

    /* Radius / spacing */
    --sk-radius:         10px;
    --sk-radius-sm:      7px;
    --sk-radius-lg:      14px;

    --sk-font: 'Segoe UI','Open Sans','Lato',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

    /* ------------------------------------------------------------------------
       2026-08-26 — the type set, RECORDED not invented.

       --sk-font above was the only face this file defined, so anything needing a
       display, mono or Arabic face had nowhere canonical to point. 48 different
       first-choice typefaces had accumulated across 3,451 declarations as a
       result. These three tokens describe what the app ALREADY does, measured:

         Outfit             1,209 uses / 377 files, 197 of them on headings,
                            titles, KPI values and brand marks vs 55 elsewhere
                            -> the de-facto DISPLAY face
         Plus Jakarta Sans  1,109 uses / 121 files, 129 on body vs 17 display
                            -> the de-facto page BODY face
         IBM Plex Sans Arabic  chosen by the i18n programme as a UI-grade Arabic
                            face (Cairo and El Messiri are display-first)

       --sk-font itself is deliberately UNCHANGED: it is the shell/chrome face
       that `body` resolves to, and repointing it would restyle every page.
       ------------------------------------------------------------------------ */
    --sk-font-display: 'Outfit', 'Plus Jakarta Sans', var(--sk-font);
    --sk-font-page:    'Plus Jakarta Sans', var(--sk-font);
    --sk-font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
    --sk-font-ar:      'IBM Plex Sans Arabic', 'Noto Naskh Arabic', var(--sk-font);

    /* ------------------------------------------------------------------------
       2026-08-26 — the neutral ramp, RECORDED not invented.

       7,362 literals across the app use Tailwind's slate scale, and they use it
       CONSISTENTLY by role, which is what makes it a system rather than sprawl:

         slate-600  1,658 uses, 1,643 of them `color`        -> body/muted text
         slate-200  1,267 uses, 986 of them a border         -> borders
         slate-500    934 uses, 899 `color`                  -> secondary text
         slate-800    885 uses, 856 `color`                  -> strong text
         slate-50     725 uses, 696 background               -> raised surface
         slate-700    620 uses, 609 `color`

       These are the EXACT Tailwind values, so pointing literals at them changes
       no pixel. Named --sk-neutral-* rather than --sk-slate-*: Tailwind v4 owns
       the --color-* namespace, and an --sk-* name keeps this ours.

       NOT merged with the semantic neutrals above, deliberately. --sk-text-2 is
       #5b6b7c and slate-600 is #475569; --sk-border is #e3e8ef and slate-200 is
       #e2e8f0. They are near-duplicates of each other and the app has voted for
       slate by ~7,000 to a few hundred, but collapsing one into the other WOULD
       move pixels on every page. That is a design call, not a refactor.
       ------------------------------------------------------------------------ */
    --sk-neutral-50:  #f8fafc;
    --sk-neutral-100: #f1f5f9;
    --sk-neutral-200: #e2e8f0;
    --sk-neutral-300: #cbd5e1;
    --sk-neutral-400: #94a3b8;
    --sk-neutral-500: #64748b;
    --sk-neutral-600: #475569;
    --sk-neutral-700: #334155;
    --sk-neutral-800: #1e293b;
    --sk-neutral-900: #0f172a;

    /* ------------------------------------------------------------------------
       2026-08-26 — the status ramps, RECORDED not invented.

       6,161 literals use four Tailwind ramps, and the ROLE pattern is the badge
       idiom used consistently across the app: the light steps are tint fills and
       the dark steps are the label on them.

         *-50 / *-100   97-99% `background`
         *-600..800     54-98% `color`

       Named by HUE, not by meaning. --sk-success already exists as #15803d --
       Tailwind GREEN-700 -- while the app's success colour is EMERALD. Reusing
       the semantic names here would silently bind two different colours to one
       name, the same failure as calling a generic red var(--sk-dt-btn-pdf).
       Mapping semantic -> hue is a design decision and is left open.
       ------------------------------------------------------------------------ */
    --sk-emerald-50:   #ecfdf5;
    --sk-emerald-100:  #d1fae5;
    --sk-emerald-200:  #a7f3d0;
    --sk-emerald-300:  #6ee7b7;
    --sk-emerald-400:  #34d399;
    --sk-emerald-500:  #10b981;
    --sk-emerald-600:  #059669;
    --sk-emerald-700:  #047857;
    --sk-emerald-800:  #065f46;
    --sk-emerald-900:  #064e3b;
    --sk-red-50:   #fef2f2;
    --sk-red-100:  #fee2e2;
    --sk-red-200:  #fecaca;
    --sk-red-300:  #fca5a5;
    --sk-red-400:  #f87171;
    --sk-red-500:  #ef4444;
    --sk-red-600:  #dc2626;
    --sk-red-700:  #b91c1c;
    --sk-red-800:  #991b1b;
    --sk-red-900:  #7f1d1d;
    --sk-amber-50:   #fffbeb;
    --sk-amber-100:  #fef3c7;
    --sk-amber-200:  #fde68a;
    --sk-amber-300:  #fcd34d;
    --sk-amber-400:  #fbbf24;
    --sk-amber-500:  #f59e0b;
    --sk-amber-600:  #d97706;
    --sk-amber-700:  #b45309;
    --sk-amber-800:  #92400e;
    --sk-amber-900:  #78350f;
    --sk-blue-50:   #eff6ff;
    --sk-blue-100:  #dbeafe;
    --sk-blue-200:  #bfdbfe;
    --sk-blue-300:  #93c5fd;
    --sk-blue-400:  #60a5fa;
    --sk-blue-500:  #3b82f6;
    --sk-blue-600:  #2563eb;
    --sk-blue-700:  #1d4ed8;
    --sk-blue-800:  #1e40af;
    --sk-blue-900:  #1e3a8a;

    /* ------------------------------------------------------------------------
       2026-08-26 — the remaining ramps, same rule: measured, then recorded.

       GRAY is a SECOND neutral ramp running alongside slate, and it is the most
       role-consistent set in the app:
         gray-50  100% background   gray-200  90% border   gray-300  93% border
         gray-500  91% color        gray-700  98% color    gray-800  98% color
       Two neutral ramps is itself a finding -- see the note on the slate block.
       Recording both is the honest step; picking one is a design decision.

       TEAL is the CMMS accent, VIOLET the Essentials/analytics accent, SKY the
       informational one. Unlike the neutrals these are used as BOTH fill and
       text (violet 49% color / 45% background), which is normal for an accent
       and is why the token names the colour, not a role.
       ------------------------------------------------------------------------ */
    --sk-gray-50:   #f9fafb;
    --sk-gray-100:  #f3f4f6;
    --sk-gray-200:  #e5e7eb;
    --sk-gray-300:  #d1d5db;
    --sk-gray-400:  #9ca3af;
    --sk-gray-500:  #6b7280;
    --sk-gray-600:  #4b5563;
    --sk-gray-700:  #374151;
    --sk-gray-800:  #1f2937;
    --sk-gray-900:  #111827;
    --sk-teal-50:   #f0fdfa;
    --sk-teal-100:  #ccfbf1;
    --sk-teal-200:  #99f6e4;
    --sk-teal-300:  #5eead4;
    --sk-teal-400:  #2dd4bf;
    --sk-teal-500:  #14b8a6;
    --sk-teal-600:  #0d9488;
    --sk-teal-700:  #0f766e;
    --sk-teal-800:  #115e59;
    --sk-teal-900:  #134e4a;
    --sk-violet-50:   #f5f3ff;
    --sk-violet-100:  #ede9fe;
    --sk-violet-200:  #ddd6fe;
    --sk-violet-300:  #c4b5fd;
    --sk-violet-400:  #a78bfa;
    --sk-violet-500:  #8b5cf6;
    --sk-violet-600:  #7c3aed;
    --sk-violet-700:  #6d28d9;
    --sk-violet-800:  #5b21b6;
    --sk-violet-900:  #4c1d95;
    --sk-sky-50:   #f0f9ff;
    --sk-sky-100:  #e0f2fe;
    --sk-sky-200:  #bae6fd;
    --sk-sky-300:  #7dd3fc;
    --sk-sky-400:  #38bdf8;
    --sk-sky-500:  #0ea5e9;
    --sk-sky-600:  #0284c7;
    --sk-sky-700:  #0369a1;
    --sk-sky-800:  #075985;
    --sk-sky-900:  #0c4a6e;

    /* #1e3a5f is the app's dark navy -- 529 uses, 55% fill / 31% text. It already
       had --sk-dt-head-bg and --sk-dt-btn-print, but both name a DataTable part
       rather than the colour, so neither can be used as a general navy without
       lying about what it is. #c9a84c is the Projects/contracts gold. */
    --sk-navy: #1e3a5f;
    --sk-gold: #c9a84c;

    /* ------------------------------------------------------------------------
       F1 — HSL-triple twins for the Tailwind `sk-*` color namespace
       (tailwind.config.js -> theme.extend.colors.sk uses
        `hsl(var(--sk-*-hsl) / <alpha-value>)`).
       APPEND THIS BLOCK INSIDE THE EXISTING `:root { ... }` OF
       public/css/skyline-erp.css — right after the `--sk-font` line (:53),
       before the closing brace (:54).

       ⚠ EDIT TOGETHER: every --sk-*-hsl triple below MUST stay numerically
       equal to its hex twin above (--sk-primary, --sk-success, ...). If you
       change a hex, recompute the triple (hue sat% light%) and vice-versa —
       otherwise sk-* utilities and the .sk-* component classes will render
       two different colors for the "same" token.
       Triples computed exactly from the hex values on 2026-07-05.
       ------------------------------------------------------------------------ */
    --sk-primary-hsl:      210.4 75.5% 43.1%;  /* == --sk-primary     #1B6DC1 */
    --sk-primary-600-hsl:  210.8 77.2% 36.1%;  /* == --sk-primary-600 #155aa3 */
    --sk-primary-700-hsl:  210.8 77.5% 29.6%;  /* == --sk-primary-700 #114a86 */
    --sk-primary-050-hsl:  211.8 68% 95.1%;    /* == --sk-primary-050 #eaf2fb */
    --sk-primary-100-hsl:  210.9 67.3% 90.4%;  /* == --sk-primary-100 #d6e6f7 */

    /* 2026-08-24 — success/warning drifted. The hex twins above were darkened to pass
       WCAG 1.4.3 (#1f9d57 3.49:1 -> #15803d 5.02:1; #c9870a 3.02:1 -> #b45309 5.02:1)
       but these triples kept the OLD failing values, so the Tailwind `sk-*` utility and
       the `.sk-*` component class resolved to two different greens/ambers for one token
       name. Recomputed from the current hex. Guarded by
       tests/Feature/Ui/TokenIntegrityTest.php so it cannot drift again. */
    --sk-success-hsl:      142.4 71.8% 29.2%;  /* == --sk-success     #15803d */
    --sk-danger-hsl:       0 62% 53.5%;        /* == --sk-danger      #d23f3f */
    --sk-warning-hsl:      26 90.5% 37.1%;     /* == --sk-warning     #b45309 */
    --sk-info-hsl:         210.4 75.5% 43.1%;  /* == --sk-info        #1B6DC1 */

    --sk-bg-hsl:           216 29.4% 96.7%;    /* == --sk-bg          #f4f6f9 */
    --sk-surface-hsl:      0 0% 100%;          /* == --sk-surface     #ffffff */
    --sk-border-hsl:       215 27.3% 91.4%;    /* == --sk-border      #e3e8ef */
    --sk-text-hsl:         211.3 29.1% 15.5%;  /* == --sk-text        #1c2733 */

    /* ------------------------------------------------------------------------
       SK-DT — standard DataTable design tokens (used by section 11).
       Head = the NAVY thead, promoted from a cascade accident (old
       custom_backend.css Part 2) to an official token. Export-button accents
       keep the established WCAG-tuned semantic colours (green=Excel/CSV,
       red=PDF, navy=Print, teal=Columns); their white label reuses
       --sk-text-invert. THESE TOKENS ARE THE DARK-MODE OVERRIDE SURFACE —
       re-point them in a future [data-theme="dark"] block; the rules below
       never hard-code these colours (except the print block, where engines
       drop CSS vars and the literal hex is required).
       ------------------------------------------------------------------------ */
    --sk-dt-head-bg:      #1e3a5f;   /* navy thead background */
    --sk-dt-head-border:  #16304d;   /* navy thead border */
    --sk-dt-head-text:    #ffffff;   /* thead label + sorting icons */
    --sk-dt-btn-csv:      #047857;   /* emerald-700  (white text = 5.48:1) */
    --sk-dt-btn-excel:    #166534;   /* green-800 */
    --sk-dt-btn-pdf:      #dc2626;   /* red-600 */
    --sk-dt-btn-print:    #1e3a5f;   /* navy (matches head) */
    --sk-dt-btn-colvis:   #0f766e;   /* teal-700 */

    /* Additive tokens for the theme system (2026-07-17) — pure additions, no consumer yet */
    --sk-font-num: 'Segoe UI', var(--sk-font);
    --sk-radius-grid: 4px;
    --sk-sp-1: 4px; --sk-sp-2: 8px; --sk-sp-3: 12px; --sk-sp-4: 16px; --sk-sp-6: 24px; --sk-sp-8: 32px;
}

/* ----------------------------------------------------------------------------
   1. BASE — gentle global lift (applies app-wide; tasteful, non-breaking)
   ---------------------------------------------------------------------------- */
body.skin-blue-light,
body.skin-blue,
body.sidebar-mini {
    background: var(--sk-bg);
    font-family: var(--sk-font);
    color: var(--sk-text);
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    background: var(--sk-bg);
}

a { color: var(--sk-primary); }
a:hover, a:focus { color: var(--sk-primary-700); }

/* ----------------------------------------------------------------------------
   2. ADMINLTE BOX → clean Redwood card (global lift for dated pages)
   ---------------------------------------------------------------------------- */
.content-wrapper .box {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow-sm);
    border-top: 1px solid var(--sk-border); /* kill AdminLTE's colored top border */
}
.content-wrapper .box.box-primary,
.content-wrapper .box.box-solid.box-primary { border-top: 3px solid var(--sk-primary); }
.content-wrapper .box.box-success { border-top: 3px solid var(--sk-success); }
.content-wrapper .box.box-danger  { border-top: 3px solid var(--sk-danger); }
.content-wrapper .box.box-warning { border-top: 3px solid var(--sk-warning); }
.content-wrapper .box.box-info    { border-top: 3px solid var(--sk-info); }

.content-wrapper .box > .box-header {
    background: var(--sk-header-tint);
    border-bottom: 1px solid var(--sk-border);
    border-radius: var(--sk-radius) var(--sk-radius) 0 0;
    padding: 14px 18px;
    color: var(--sk-text);
}
.content-wrapper .box > .box-header .box-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1px;
}

/* ----------------------------------------------------------------------------
   3. ADMINLTE content-header → Redwood page header (global lift)
   ---------------------------------------------------------------------------- */
.content-header {
    padding: 18px 20px 6px;
}
.content-header > h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--sk-text);
    margin: 0;
    letter-spacing: .2px;
}
.content-header > h1 > small { color: var(--sk-text-3); font-size: 13px; }
.content-header .breadcrumb {
    background: transparent;
    padding: 6px 0 0;
    font-size: 12.5px;
}
.content-header .breadcrumb > li > a { color: var(--sk-text-2); }

/* ----------------------------------------------------------------------------
   4. TABLES — dense, professional, zebra (global lift)
   ---------------------------------------------------------------------------- */
/* thead is NAVY (see §11 SK-DT tokens). This is the plain, non-scrolled form and
   also the base for every non-DataTable .table in the shell; §11 adds the
   .dataTables_scrollHead scroll-clone twin so scrolled tables match. Non-!important
   so cohort overrides (.mod-page-wrap / .custome_table gray heads) still win. */
.content-wrapper .table > thead > tr > th {
    background: var(--sk-dt-head-bg);
    color: var(--sk-dt-head-text);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--sk-dt-head-border);
    border-top: none;
    padding: 10px 12px;
    vertical-align: middle;
}
.content-wrapper .table > tbody > tr > td {
    padding: 9px 12px;
    border-top: 1px solid var(--sk-border);
    color: var(--sk-text);
    vertical-align: middle;
}
.content-wrapper .table-striped > tbody > tr:nth-of-type(odd) { background: var(--sk-surface-2); }
.content-wrapper .table-hover > tbody > tr:hover { background: var(--sk-primary-050); }
.content-wrapper .table > tfoot > tr > td,
.content-wrapper .table > tfoot > tr > th {
    background: var(--sk-header-tint);
    font-weight: 700;
    border-top: 2px solid var(--sk-border-strong);
    padding: 10px 12px;
}

/* ----------------------------------------------------------------------------
   5. BUTTONS / FORMS — Redwood (global lift)
   ---------------------------------------------------------------------------- */
.btn { border-radius: var(--sk-radius-sm); font-weight: 600; }
.btn-primary {
    background: var(--sk-primary);
    border-color: var(--sk-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--sk-primary-600);
    border-color: var(--sk-primary-700);
}
.btn-link { color: var(--sk-primary); }

.form-control {
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    box-shadow: none;
    color: var(--sk-text);
}
.form-control:focus {
    border-color: var(--sk-primary);
    box-shadow: 0 0 0 3px var(--sk-primary-050);
}
label { color: var(--sk-text-2); font-weight: 600; }

/* select2 alignment with Redwood inputs */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--sk-border-strong) !important;
    border-radius: var(--sk-radius-sm) !important;
    height: 34px !important;
}

/* file-input (bootstrap-fileinput): caption and Browse button share the 34px control height.
   The caption is a display:table-cell, so `height` is only a minimum — the cell was sized by its
   content. Its .file-caption-name is an inline-block, which adds ~5px of baseline/descender space
   to the line box (20px -> 25px) and pushed the cell to 39px while the Browse button stayed 34px.
   Making the name a block box removes the strut gap and both sides land on the 34px control grid. */
.file-input .file-caption {
    height: 34px !important;
}
.file-input .file-caption .file-caption-name {
    display: block;
    line-height: 20px;
}
.file-input .input-group-btn > .btn {
    height: 34px !important;
}

/* Grid cells must never be widened by their content. Grid items default to min-width:auto, so a
   wide child (e.g. a raw <select multiple> before select2 enhances it) can blow out its column and
   push the whole card past the page gutter. */
.sk-card .grid > * {
    min-width: 0;
}

/* pre-init flash guard: multi-selects destined for select2 stay control-sized until enhanced */
select.select2[multiple]:not(.select2-hidden-accessible) {
    max-height: 34px;
    width: 100%;
    overflow: hidden;
}

/* Collapsible panels below the product table (Order Tax / Sale Note / Shipping / Discount / Optical).
   Their cells are legacy grid columns carrying their own 15px gutter, which sat ON TOP of the panel
   body's own padding — so the first field started 21px to the RIGHT of the fields in the cards above
   (285px vs 264px) and the panels read as misaligned. Trim the body's side padding to 3px so
   3 + the cell's 15px gutter = the 18px the sk-card bodies use, and everything lines up on one edge.
   Vertical padding stays generous. Add-payment is a plain .box-body (not .collapse) and already
   compensates its own gutter, so it is untouched. */
#add_sell_form .box > .box-body.collapse,
#edit_sell_form .box > .box-body.collapse {
    padding: 18px 3px;
}

/* ── Sale-entry totals strip ────────────────────────────────────────────────────────────────────
   One shared look for the four running totals (net / tax / items / total) on every sale entry
   screen. Replaces both the inline-hex tiles that only Add Sale had and the cramped bordered
   table the direct pages used. Rendered by resources/views/sell/partials/totals_strip.blade.php. */
.sk-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
}
.sk-total {
    flex: 1;
    min-width: 140px;
    background: var(--sk-surface, #fff);
    border: 1px solid var(--sk-border, #e2e8f0);
    border-radius: 8px;
    border-top: 3px solid var(--sk-total-accent, #3b82f6);
    padding: 12px 16px;
}
.sk-total__label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--sk-text-2, #64748b);
    font-weight: 600;
}
.sk-total__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--sk-text, #1e293b);
}
.sk-total--net   { --sk-total-accent: #3b82f6; }
.sk-total--tax   { --sk-total-accent: #f59e0b; }
/* Items and Total are the two an operator checks against the customer's basket — give them the
   two strongest accents so the eye finds them without reading the labels. */
.sk-total--items { --sk-total-accent: #6366f1; }
.sk-total--grand { --sk-total-accent: #10b981; }

/* Below-table panels (components/widget.blade.php → .sky-card) ran a different header language
   than the new sk-cards above them: white header, 18px navy icon, 15px title. Inside the sale
   entry forms only, bring them onto the sk-card head so the page reads as ONE system. */
#add_sell_form .sky-card > .box-header,
#edit_sell_form .sky-card > .box-header {
    background: var(--sk-header-tint);
    border-bottom: 1px solid var(--sk-border);
    padding: 13px 18px;
}
#add_sell_form .sky-card > .box-header .box-title,
#edit_sell_form .sky-card > .box-header .box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sk-text);
}
#add_sell_form .sky-card .sky-card-title-group > i,
#edit_sell_form .sky-card .sky-card-title-group > i,
#add_sell_form .sky-card .sky-card-title-group > .fa,
#edit_sell_form .sky-card .sky-card-title-group > .fa {
    color: var(--sk-primary);
    font-size: 14px;
}

/* The two boxes of the product-scan bar sit side by side but measured 37px (SKU) vs 34px (name/barcode)
   despite identical classes — a visible step in the control a cashier uses dozens of times per sale.
   app.css already pins #search_product to 34px !important, so bring the SKU box onto that same height. */
input#search_product_by_sku {
    height: 34px;
}

/* Date fields are `readonly` only so the datetimepicker owns the value — they ARE clickable. BS3's
   `.form-control[readonly]` rule (sk-vendor.css:798) painted them grey with cursor:not-allowed, so
   operators read them as disabled and don't try to change the sale date. Restore the live look for the
   picker-driven fields only (#transaction_date and the payment rows' .paid_on) — genuinely read-only
   fields (price_group_text, types_of_service_text) keep the grey disabled treatment. */
input#transaction_date[readonly].form-control,
input.paid_on[readonly].form-control {
    background: var(--sk-surface, #fff);
    cursor: pointer;
}

/* Collapsed toggle panels (components/widget_custom with no title: Sale Note, Shipping, Discount,
   Optical, ZATCA discount) rendered as a header-less .box whose only child is a collapsed body —
   leaving a stray 2px sliver stacked under the entry form. Hide the empty shell entirely.
   During the BS3 collapse transition the body carries .collapsing (not .collapse), so this stops
   matching and the panel animates open normally. */
.box:not(:has(> .box-header)):has(> .box-body.collapse:not(.in)) {
    display: none;
}

/* Toggle pill buttons (components/buttonToogle_custom). Their AdminLTE .box-header wrapper adds
   10px padding, which indented the button row 10px off the card gutter that every panel below it
   lines up on. They are buttons, not a box header — strip the chrome. */
div[id='accordion'] > .box-header.with-border {
    padding: 0;
    border-bottom: 0;
}
div[id='accordion'] > .box-header > .box-title {
    margin: 0;
    line-height: 1;
    font-size: inherit;
}

/* jQuery-UI autocomplete (product search suggestions) — Redwood dropdown */
.ui-autocomplete.ui-menu {
    max-width: min(640px, 90vw);
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    padding: 6px;
    z-index: 10050;
}
.ui-autocomplete .ui-menu-item {
    margin: 0 0 2px;
    border-radius: 6px;
    list-style: none;
}
.ui-autocomplete .ui-menu-item > div,
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 7px 10px !important;
    border: 0 !important;
    margin: 0 !important;
    border-radius: 6px;
    line-height: 1.45;
}
.ui-autocomplete .ui-menu-item + .ui-menu-item {
    border-top: 1px solid var(--sk-border);
}
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--sk-primary-050) !important;
    color: var(--sk-text) !important;
}
.ui-autocomplete .ui-state-disabled {
    opacity: 0.55;
    padding: 7px 10px;
}

/* ============================================================================
   6. SK COMPONENT LIBRARY — for bespoke page rebuilds (dashboard, ledgers,
      reports, sales, admin). Build pages with these, not raw AdminLTE.
   ============================================================================ */

/* 6.1 Page header ---------------------------------------------------------- */
.sk-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow-sm);
    padding: 16px 20px;
    margin: 16px 0 18px;
    position: relative;
    overflow: hidden;
}
.sk-page-head::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--sk-primary);
}
.sk-page-head__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sk-page-head__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sk-primary-050); color: var(--sk-primary);
    font-size: 19px;
}
.sk-page-head__title { font-size: 19px; font-weight: 800; color: var(--sk-text); margin: 0; line-height: 1.2; letter-spacing: .2px; }
.sk-page-head__sub { font-size: 12.5px; color: var(--sk-text-3); margin-top: 2px; }
.sk-page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 6.2 Buttons (explicit) --------------------------------------------------- */
.sk-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--sk-radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--sk-border-strong); background: var(--sk-surface);
    color: var(--sk-text-2); text-decoration: none; transition: all .15s ease;
    line-height: 1;
}
.sk-btn:hover { background: var(--sk-surface-2); color: var(--sk-text); border-color: var(--sk-text-3); text-decoration: none; }
.sk-btn--primary { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.sk-btn--primary:hover { background: var(--sk-primary-600); border-color: var(--sk-primary-700); color: #fff; }
.sk-btn--ghost { background: var(--sk-primary-050); border-color: var(--sk-primary-100); color: var(--sk-primary-700); }
.sk-btn--danger { background: var(--sk-danger); border-color: var(--sk-danger); color: #fff; }
.sk-btn--danger:hover { background: #b53535; border-color: #b53535; color: #fff; }

/* 6.3 KPI tiles ------------------------------------------------------------ */
.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sk-kpi {
    background: var(--sk-surface); border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm);
    padding: 16px 18px; position: relative; overflow: hidden;
}
.sk-kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sk-primary); opacity: .9; }
.sk-kpi--success::after { background: var(--sk-success); }
.sk-kpi--danger::after  { background: var(--sk-danger); }
.sk-kpi--warning::after { background: var(--sk-warning); }
.sk-kpi__row { display: flex; align-items: center; justify-content: space-between; }
.sk-kpi__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sk-text-3); }
.sk-kpi__icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--sk-primary-050); color: var(--sk-primary); font-size: 15px; }
.sk-kpi--success .sk-kpi__icon { background: var(--sk-success-bg); color: var(--sk-success); }
.sk-kpi--danger  .sk-kpi__icon { background: var(--sk-danger-bg); color: var(--sk-danger); }
.sk-kpi--warning .sk-kpi__icon { background: var(--sk-warning-bg); color: var(--sk-warning); }
.sk-kpi__value { font-size: 24px; font-weight: 800; color: var(--sk-text); margin-top: 10px; letter-spacing: -.3px; }
.sk-kpi__meta { font-size: 12px; color: var(--sk-text-3); margin-top: 3px; }
.sk-kpi__meta .up { color: var(--sk-success); font-weight: 700; }
.sk-kpi__meta .down { color: var(--sk-danger); font-weight: 700; }

/* 6.4 Card / panel --------------------------------------------------------- */
.sk-card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm); margin-bottom: 18px; }
.sk-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--sk-border); background: var(--sk-header-tint); border-radius: var(--sk-radius) var(--sk-radius) 0 0; }
.sk-card__title { font-size: 14px; font-weight: 700; color: var(--sk-text); display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The head is a flex row: without these, a long actions slot (e.g. the "Simplified Invoice" badge in
   the Customer card) overflows the card on narrow columns, and the title can't shrink to make room. */
.sk-card__head { flex-wrap: wrap; }
.sk-card__actions { flex-shrink: 0; margin-left: auto; }
.sk-card__title i { color: var(--sk-primary); }
.sk-card__body { padding: 18px; }
.sk-card__body--flush { padding: 0; }

/* 6.5 Toolbar / filter bar ------------------------------------------------- */
.sk-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm); padding: 14px 16px; margin-bottom: 18px; }
.sk-field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.sk-field > label { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--sk-text-3); font-weight: 700; margin: 0; }

/* 6.6 Charts grid ---------------------------------------------------------- */
.sk-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.sk-chart-grid--2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 992px){ .sk-chart-grid--2 { grid-template-columns: 1fr; } }

/* 6.7 Data table (bespoke) ------------------------------------------------- */
.sk-table { width: 100%; border-collapse: collapse; }
.sk-table thead th { background: var(--sk-header-tint); color: var(--sk-text-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 11px 12px; text-align: left; border-bottom: 2px solid var(--sk-border-strong); white-space: nowrap; }
.sk-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--sk-border); color: var(--sk-text); font-size: 14px; }
.sk-table tbody tr:nth-child(even) { background: var(--sk-surface-2); }
.sk-table tbody tr:hover { background: var(--sk-primary-050); }
.sk-table .num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.sk-table tfoot td { background: var(--sk-header-tint); font-weight: 800; border-top: 2px solid var(--sk-border-strong); padding: 11px 12px; }

/* 6.8 Badges --------------------------------------------------------------- */
.sk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.sk-badge--success { background: var(--sk-success-bg); color: var(--sk-success); }
.sk-badge--danger  { background: var(--sk-danger-bg);  color: var(--sk-danger); }
.sk-badge--warning { background: var(--sk-warning-bg); color: var(--sk-warning); }
.sk-badge--info    { background: var(--sk-info-bg);    color: var(--sk-info); }
.sk-badge--muted   { background: #eef1f5; color: var(--sk-text-2); }

/* ============================================================================
   7. OFFICIAL STATEMENT / REPORT layout (customer/supplier ledgers + reports)
      Use .sk-statement for the printable, official document body.
   ============================================================================ */
.sk-statement { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow); overflow: hidden; }
.sk-statement__bar { height: 4px; background: linear-gradient(90deg, var(--sk-primary) 0%, var(--sk-primary-600) 100%); }
.sk-statement__head { display: flex; justify-content: space-between; gap: 24px; padding: 24px 28px; border-bottom: 1px solid var(--sk-border); flex-wrap: wrap; }
.sk-statement__org { max-width: 55%; }
.sk-statement__org h2 { font-size: 18px; font-weight: 800; color: var(--sk-text); margin: 0 0 4px; }
.sk-statement__org p { font-size: 12.5px; color: var(--sk-text-2); margin: 1px 0; line-height: 1.5; }
.sk-statement__doc { text-align: right; }
.sk-statement__doc .doc-type { font-size: 17px; font-weight: 800; color: var(--sk-primary); text-transform: uppercase; letter-spacing: 1px; }
.sk-statement__doc .doc-meta { font-size: 12.5px; color: var(--sk-text-2); margin-top: 6px; line-height: 1.7; }
.sk-statement__doc .doc-meta b { color: var(--sk-text); }

/* party + summary strip */
.sk-statement__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--sk-border); }
.sk-statement__party { padding: 16px 28px; }
.sk-statement__party + .sk-statement__party { border-left: 1px solid var(--sk-border); }
.sk-statement__party .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--sk-text-3); font-weight: 700; margin-bottom: 4px; }
.sk-statement__party .nm { font-size: 14px; font-weight: 700; color: var(--sk-text); }
.sk-statement__party .dt { font-size: 12.5px; color: var(--sk-text-2); margin-top: 2px; }

.sk-statement__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); border-bottom: 1px solid var(--sk-border); }
.sk-statement__sumcell { padding: 14px 20px; border-right: 1px solid var(--sk-border); }
.sk-statement__sumcell:last-child { border-right: none; }
.sk-statement__sumcell .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--sk-text-3); font-weight: 700; }
.sk-statement__sumcell .val { font-size: 19px; font-weight: 800; color: var(--sk-text); margin-top: 6px; font-variant-numeric: tabular-nums; }
.sk-statement__sumcell .val.pos { color: var(--sk-success); }
.sk-statement__sumcell .val.neg { color: var(--sk-danger); }

.sk-statement__body { padding: 0; }
.sk-statement__body .sk-table thead th { position: sticky; top: 0; }
.sk-statement__foot { padding: 16px 28px; border-top: 1px solid var(--sk-border); font-size: 12px; color: var(--sk-text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------------------------
   8. PRINT — official statements print clean (white, no chrome)
   ---------------------------------------------------------------------------- */
@media print {
    body { background: #fff !important; }
    .no-print, .sk-page-head__actions, .sk-toolbar { display: none !important; }
    .sk-statement { border: none !important; box-shadow: none !important; border-radius: 0 !important; }
    .sk-statement__bar { background: var(--sk-primary) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sk-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 6.9 Empty state ---------------------------------------------------------- */
.sk-empty { text-align: center; padding: 36px 20px; color: var(--sk-text-3); }
.sk-empty > i { font-size: 34px; opacity: .5; display: block; margin-bottom: 12px; }
.sk-empty > p { margin: 0; font-size: 13px; }

/* ----------------------------------------------------------------------------
   9. Small utilities
   ---------------------------------------------------------------------------- */
.sk-muted { color: var(--sk-text-3); }
.sk-right { text-align: right; }
.sk-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sk-pos { color: var(--sk-success); font-weight: 700; }
.sk-neg { color: var(--sk-danger); font-weight: 700; }

/* ============================================================================
   10. DESIGN POLISH — 2026-07-06 (meaningful refresh; additive, revert-safe)
       A finish pass that ripples through every sk-kit page (done + future).
       Depth / transition / accent only — NO layout shifts and NO transforms on
       cards or table rows, so DataTables / select2 / dropdowns / popovers keep
       their stacking context intact. Revert = delete this block (skyline-erp.css
       is a static linked file — no webpack rebuild; just bump asset_version).
   ============================================================================ */
:root {
    --sk-radius:    12px;   /* 10 -> 12 : softer, more modern corners */
    --sk-radius-sm: 8px;    /*  7 ->  8 */
    --sk-shadow-sm: 0 1px 2px rgba(16,32,52,.05), 0 2px 6px rgba(16,32,52,.06);
    --sk-shadow:    0 4px 12px rgba(16,32,52,.07), 0 10px 26px rgba(16,32,52,.06);
}
/* Cards / KPIs / toolbars: gentle lift on hover (box-shadow only, no transform) */
.sk-card, .sk-kpi, .sk-toolbar { transition: box-shadow .18s ease, border-color .18s ease; }
.sk-card:hover  { box-shadow: var(--sk-shadow); border-color: var(--sk-border-strong); }
.sk-kpi:hover   { box-shadow: var(--sk-shadow); border-color: var(--sk-border-strong); }
/* Card header: soft top-to-tint gradient for a crisper edge */
.sk-card__head  { background: linear-gradient(180deg, var(--sk-surface) 0%, var(--sk-header-tint) 100%); }
/* Page header: gradient accent bar (was a flat 4px block) */
.sk-page-head::before { background: linear-gradient(180deg, var(--sk-primary) 0%, var(--sk-primary-600) 100%); }
/* KPI accent bar: a hair wider + gradient for presence */
.sk-kpi::after  { width: 4px; background: linear-gradient(180deg, var(--sk-primary) 0%, var(--sk-primary-600) 100%); }
.sk-kpi__value  { font-size: 25px; }
/* Buttons: primary gets a subtle shadow affordance; press feedback on all */
.sk-btn--primary       { box-shadow: 0 1px 2px rgba(27,109,193,.25); }
.sk-btn--primary:hover { box-shadow: 0 3px 9px rgba(27,109,193,.32); }
.sk-btn:active         { transform: translateY(1px); }
/* Table: smoother row-hover transition (row hover colour already defined above) */
.sk-table tbody tr { transition: background-color .12s ease; }

/* ============================================================================
   11. SK-DT — STANDARD DATATABLE DESIGN
       The single source of truth for how DataTables look app-wide. Absorbs the
       navy-thead / zebra / pagination / toolbar / export-button chrome that used
       to live (and fight) across custom_backend.css "Part 2", app.css and the
       legacy datatable-buttons stylesheet — all removed in the same change.

       DESIGN (approved): navy thead, dense body, surface-2 zebra, primary-050
       hover, PALE header-tint tfoot. All values come from the --sk-* / --sk-dt-*
       tokens (the DARK-MODE OVERRIDE SURFACE — re-point tokens, don't fork rules).

       SCROLL-CLONE RULE: DataTables scrollX clones the header/footer into
       .dataTables_scrollHead / .dataTables_scrollFoot and STRIPS the table id, so
       id-scoped rules go blind. Every head/foot rule therefore pairs its plain
       form with the scroll-clone twin, and selectors are class/element-level only.
       Zebra/hover need no twin: the scrolling body keeps table.dataTable.

       SPECIFICITY: vendor.css sets NO thead/tfoot background and this section
       loads after it, so navy/pale win WITHOUT !important — which lets the
       .mod-page-wrap / .custome_table cohort grays (their own !important, still in
       custom_backend.css) keep overriding. !important is used only where a rule
       must beat a DataTables .odd/.even row fill, a print reset, or an inline
       sizing style — each is commented.
       Pagination chips are owned by sk-vendor.css §pagination + its
       li.paginate_button neutralizer; this section only spaces the container.
   ============================================================================ */

/* 11.1 thead — scroll-clone twin of §4 (navy). Plain form is §4:166. --------- */
.content-wrapper .dataTables_scrollHead thead th {
    background: var(--sk-dt-head-bg);
    color: var(--sk-dt-head-text);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--sk-dt-head-border);
    border-top: none;
    padding: 10px 12px;
    vertical-align: middle;
}

/* 11.2 sorting icons — white on the navy head (plain + scroll-clone twins).
   vendor.css renders them as :after glyphs that inherit color; we force white
   and cover ::before too. vendor keeps opacity:.5 → soft white arrows. */
.content-wrapper .table thead th.sorting::after,
.content-wrapper .table thead th.sorting_asc::after,
.content-wrapper .table thead th.sorting_desc::after,
.content-wrapper .table thead th.sorting::before,
.content-wrapper .table thead th.sorting_asc::before,
.content-wrapper .table thead th.sorting_desc::before,
.content-wrapper .dataTables_scrollHead thead th.sorting::after,
.content-wrapper .dataTables_scrollHead thead th.sorting_asc::after,
.content-wrapper .dataTables_scrollHead thead th.sorting_desc::after,
.content-wrapper .dataTables_scrollHead thead th.sorting::before,
.content-wrapper .dataTables_scrollHead thead th.sorting_asc::before,
.content-wrapper .dataTables_scrollHead thead th.sorting_desc::before {
    color: var(--sk-dt-head-text);
}

/* 11.3 zebra — DataTables' own .odd/.even row classes (the .table-striped
   nth-of-type path is §4:184). No scroll-clone twin needed: the scrolling table
   keeps table.dataTable, so this matches inside .dataTables_scrollBody too.
   Specificity 0,3,3 ties datatable.min.css's stripe rule and wins on load order
   (this file loads after it) — so no !important. */
.content-wrapper table.dataTable tbody tr.odd  { background: var(--sk-surface-2); }
.content-wrapper table.dataTable tbody tr.even { background: var(--sk-surface); }

/* 11.4 hover — covers DataTables rows that carry no .table-hover class
   (.table-hover path is §4:185). !important: must beat the .odd/.even fills above
   AND datatable.min.css's order-column .sorting_1/2/3 cell backgrounds (0,4,4). */
.content-wrapper table.dataTable tbody tr:hover > td,
.content-wrapper table.dataTable tbody tr:hover {
    background: var(--sk-primary-050) !important;
}

/* 11.5 tfoot — PALE. Scroll-clone twin of §4:186 (the visible foot clone lives in
   .dataTables_scrollFoot). Dark text on header-tint, strong top border. */
.content-wrapper .dataTables_scrollFoot tfoot td,
.content-wrapper .dataTables_scrollFoot tfoot th {
    background: var(--sk-header-tint);
    color: var(--sk-text-2);
    font-weight: 700;
    border-top: 2px solid var(--sk-border-strong);
    padding: 10px 12px;
}

/* 11.6 scrollX duplicate-tfoot hide (functional; moved verbatim from app.css).
   With scrollX, DataTables also keeps the <tfoot> inside .dataTables_scrollBody
   for sizing; it must stay hidden or the totals render twice. !important beats the
   inline/base display DataTables gives that clone. */
.content-wrapper .dataTables_scrollBody tfoot,
.content-wrapper .dataTables_scrollBody table tfoot {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
.content-wrapper .dataTables_scrollBody tfoot tr,
.content-wrapper .dataTables_scrollBody tfoot td,
.content-wrapper .dataTables_scrollBody tfoot th {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.content-wrapper .dataTables_scrollBody { margin-bottom: 0 !important; } /* no gap between scroll containers */
.content-wrapper .dataTables_scrollFoot { margin-top: 0 !important; }

/* 11.7 .dataTables_wrapper chrome — filter / length / info / processing -------- */
.content-wrapper .dataTables_filter input {
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    padding: 6px 12px;
    font-size: 14px;
    color: var(--sk-text);
    transition: border-color .2s, box-shadow .2s;
}
.content-wrapper .dataTables_filter input:focus {
    border-color: var(--sk-primary);
    box-shadow: 0 0 0 3px var(--sk-primary-050);
    outline: none;
}
.content-wrapper .dataTables_length select {
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    padding: 4px 8px;
    font-size: 14px;
    color: var(--sk-text);
}
.content-wrapper .dataTables_length label { color: var(--sk-text-2); font-weight: 600; }
.content-wrapper .dataTables_info { font-size: 13px; color: var(--sk-text-2); padding-top: 10px; }
.content-wrapper .dataTables_processing {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-sm);
    box-shadow: var(--sk-shadow);
    color: var(--sk-text-2);
}

/* 11.8 pagination — chips are owned by sk-vendor.css §pagination + its
   li.paginate_button neutralizer (do NOT re-add box chrome on the <li> here, it
   reintroduces the "stripe" slivers). Only space the container. */
.content-wrapper .dataTables_paginate { padding-top: 8px; }

/* 11.9 controls — .skyline-dt-toolbar frame + one export-button style ---------- */
/* Toolbar frame. common.js builds it as a bootstrap `.row` of col-sm 2 | 7 | 3
   (length | export buttons | filter), so column widths come from the grid; this
   only supplies the card frame. */
.skyline-dt-toolbar {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow-sm);
    padding: 10px 16px;
    margin-bottom: 16px;
    align-items: center;
}
/* Export buttons — one shared shape, semantic accent per type. Real classes are
   .btn-export-* (emitted by common.js, gated on #view_export_buttons). */
.dt-export-buttons .dt-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.dt-export-buttons .dt-buttons .btn {
    border-radius: var(--sk-radius-sm);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.dt-export-buttons .dt-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sk-shadow-sm);
}
/* Page-supplied buttons (e.g. "Custom Print") carry no btn-export-* colour:
   give them the neutral outline treatment so they aren't naked text. */
.dt-export-buttons .dt-buttons .btn:not([class*="btn-export-"]) {
    background: var(--sk-surface);
    color: var(--sk-text-2);
    border: 1px solid var(--sk-border-strong);
}
.dt-export-buttons .dt-buttons .btn:not([class*="btn-export-"]):hover {
    background: var(--sk-surface-2);
    color: var(--sk-text);
    border-color: var(--sk-text-3);
}
.dt-export-buttons .dt-buttons .btn-export-csv    { background: var(--sk-dt-btn-csv);    color: var(--sk-text-invert); }
.dt-export-buttons .dt-buttons .btn-export-excel  { background: var(--sk-dt-btn-excel);  color: var(--sk-text-invert); }
.dt-export-buttons .dt-buttons .btn-export-pdf    { background: var(--sk-dt-btn-pdf);    color: var(--sk-text-invert); }
.dt-export-buttons .dt-buttons .btn-export-print  { background: var(--sk-dt-btn-print);  color: var(--sk-text-invert); }
.dt-export-buttons .dt-buttons .btn-export-colvis { background: var(--sk-dt-btn-colvis); color: var(--sk-text-invert); }
/* One hover shade for all coloured buttons (darken, keep white label). */
.dt-export-buttons .dt-buttons [class*="btn-export-"]:hover {
    filter: brightness(0.9);
    color: var(--sk-text-invert);
}
/* Column-visibility dropdown (opened by the Columns export button). */
.dt-button-collection {
    position: absolute;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-sm);
    box-shadow: var(--sk-shadow);
    padding: 6px 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 2050;
}
.dt-button-collection .dt-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--sk-text-2);
    font-size: 13px;
    cursor: pointer;
}
.dt-button-collection .dt-button:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.dt-button-collection .dt-button.active { background: var(--sk-primary-050); color: var(--sk-primary-700); font-weight: 600; }
.dt-button-collection .dt-button.active span::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    margin-right: 8px;
    font-size: 12px;
}
.dt-button-collection .dt-button:not(.active) span::before {
    content: "";
    display: inline-block;
    width: 19px;
}
/* NOTE: the report pages that relocate the length control into their own
   length-selector container box style it entirely in the page-owned report
   styles component (x-report.styles) — no global rule here, and no #id
   selectors anywhere in this section per the scroll-clone contract. */

/* 11.10 RTL — thead/tbody align right; filter flips; export/colvis flow rtl.
   Pagination chip mechanics stay with sk-vendor.css. */
[dir="rtl"] .content-wrapper .table thead th,
[dir="rtl"] .content-wrapper .dataTables_scrollHead thead th,
body.rtl .content-wrapper .table thead th,
body.rtl .content-wrapper .dataTables_scrollHead thead th { text-align: right; }
[dir="rtl"] .content-wrapper .table > tbody > tr > td,
body.rtl .content-wrapper .table > tbody > tr > td { text-align: right; }
[dir="rtl"] .content-wrapper .dataTables_filter,
body.rtl .content-wrapper .dataTables_filter { text-align: left; }
[dir="rtl"] .content-wrapper .dataTables_paginate .pagination,
body.rtl .content-wrapper .dataTables_paginate .pagination { direction: rtl; }
[dir="rtl"] .dt-export-buttons .dt-buttons,
body.rtl .dt-export-buttons .dt-buttons { direction: rtl; }
[dir="rtl"] .dt-button-collection .dt-button,
body.rtl .dt-button-collection .dt-button { text-align: right; }

/* 11.11 Print — hide interactive chrome; thead keeps its navy. Print engines drop
   CSS custom properties, so the navy is written as literal hex here, with
   print-color-adjust so the fill actually renders. */
@media print {
    .content-wrapper .dataTables_filter,
    .content-wrapper .dataTables_length,
    .content-wrapper .dataTables_info,
    .content-wrapper .dataTables_paginate,
    .dt-buttons,
    .dt-export-buttons { display: none !important; }
    .content-wrapper .table thead th,
    .content-wrapper .dataTables_scrollHead thead th {
        background: #1e3a5f !important;   /* == --sk-dt-head-bg; vars die under print reset */
        color: #ffffff !important;         /* == --sk-dt-head-text */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   12. SK ENTRY FORMS — Add Purchase (#add_purchase_form) / Add Product (#product_add_form)
   2026-07-14 redesign: both pages moved off inline-styled AdminLTE boxes onto x-sk.card sections.
   Conventions checked against Oracle Redwood token docs and Fluent 2 / Dynamics 365 form guidance:
   flat white section cards on the page background, ONE accent (--sk-primary), labels above inputs
   (600 / --sk-text-2), secondary tasks behind collapsible panels, totals as .sk-total tiles.
   Scope note (deliberate): the #add_purchase_form / #product_add_form ids are ALSO the form ids on
   purchase/edit, purchase_order/create+edit and product/edit — the id-scoped rules here reach those
   markup twins on purpose so the whole family drifts toward the standard together (their entry
   tables/partials share the same classes). Anything that must NOT reach the twins needs an extra
   create-page hook, not just the form id. The entry-table navy thead needs NO rule here — stripping
   the per-<th> inline hexes from the blades lets §4/§11 paint it from --sk-dt-head-bg.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 12.1 Collapsible panel bodies (components/widget_custom → headless .box). AdminLTE gives the
   body 10px padding; match the 18px sk-card__body gutter so panel fields align with card fields.
   (The sell forms solved the same seam at §"Collapsible panels" above with 3px because their
   cells still carry legacy 15px gutters; these two forms use Tailwind gap grids, so full 18px.) */
#add_purchase_form .box > .box-body.collapse,
#product_add_form .box > .box-body.collapse {
    padding: 18px;
}

/* 12.2 Toggle chip row (buttonToogle_custom pills). One tokenized chip replaces the per-page
   rainbow btnStyle hexes. Blade call sites pass no btnStyle, so these rules own the look; the
   vendor .btn-primary fill is out-specified by the compound selector. */
.sk-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.sk-chip-row div[id='accordion'] .box-title > a.btn {
    background: var(--sk-primary-050, #eaf2fb);
    border: 1px solid var(--sk-primary-100, #d6e6f7);
    color: var(--sk-primary-700, #114a86);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sk-chip-row div[id='accordion'] .box-title > a.btn:hover,
.sk-chip-row div[id='accordion'] .box-title > a.btn:focus {
    background: var(--sk-primary-100, #d6e6f7);
    color: var(--sk-primary-700, #114a86);
}
.sk-chip-row div[id='accordion'] .box-title > a.btn i {
    color: var(--sk-primary, #1B6DC1);
}

/* 12.3 Entry/pricing tables — cell rhythm only (colour is §4/§11's job). */
#add_purchase_form #purchase_entry_table > thead > tr > th {
    white-space: nowrap;
    padding: 10px 8px;
}
#add_purchase_form #purchase_entry_table > tbody > tr > td {
    /* top-align: cells mixing input+subtext (qty/unit-cost) and bare inputs now start controls
       on ONE line instead of three (measured 747/752/777 before) */
    vertical-align: top;
}
#product_add_form .add-product-price-table th {
    white-space: nowrap;
}
#product_add_form .add-product-price-table td {
    padding: 10px 8px;
    /* cells mix labelled (exc/inc) and bare inputs; bottom-align so the controls sit on one line */
    vertical-align: bottom;
}

/* 12.4 Totals tiles — purchase-summary variants on top of the sale-entry base set above. */
.sk-total--discount { --sk-total-accent: var(--sk-danger, #d23f3f); }
.sk-total--due      { --sk-total-accent: var(--sk-danger, #d23f3f); }
.sk-total__value--danger  { color: var(--sk-danger, #d23f3f); }
.sk-total__value--success { color: var(--sk-success, #15803d); }
.sk-total__value--warning { color: var(--sk-warning, #b45309); }

/* 12.5 Sub-section heading inside a card (Opening Stock, Rack Details) — quiet Redwood strip. */
.sk-subhead {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sk-text-2, #5b6b7c);
    padding: 7px 12px;
    border-left: 3px solid var(--sk-primary, #1B6DC1);
    background: linear-gradient(90deg, var(--sk-primary-050, #eaf2fb), transparent 70%);
    border-radius: 0 4px 4px 0;
    margin: 2px 0 10px;
}
.sk-subhead i {
    color: var(--sk-primary, #1B6DC1);
    margin-right: 6px;
}
[dir="rtl"] .sk-subhead,
body.rtl .sk-subhead {
    border-left: 0;
    border-right: 3px solid var(--sk-primary, #1B6DC1);
    border-radius: 4px 0 0 4px;
}
[dir="rtl"] .sk-subhead i,
body.rtl .sk-subhead i {
    margin-right: 0;
    margin-left: 6px;
}

/* 12.6 Checkbox tiles (Manage Stock, IMEI, Not-for-selling…) — bordered Fluent-style option tile.
   The label wraps the live iCheck input; <label><input class=input-icheck>…</label> order is a JS
   contract (iCheck injects its own div as first child), only the chrome here is new. */
.sk-check-tile > label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    padding: 6px 12px;
    background: var(--sk-surface-2, #fafbfc);
    border: 1px solid var(--sk-border, #e3e8ef);
    border-radius: var(--sk-radius-sm, 8px);
    cursor: pointer;
    font-weight: 600;
    color: var(--sk-text, #1c2733);
}
.sk-check-tile > label:hover {
    border-color: var(--sk-primary, #1B6DC1);
    background: var(--sk-primary-050, #eaf2fb);
}
.sk-check-tile .help-block {
    margin: 4px 0 0;
}

/* 12.7 Help text under controls — body-xs muted (Redwood assistive-text pattern). */
#add_purchase_form .help-block,
#product_add_form .help-block {
    color: var(--sk-text-3, #66727f);
    font-size: 12px;
    margin: 4px 0 0;
}

/* 12.8 Form action bar — the ONE place a form is saved from (Fluent: single primary per surface).
   Sticky so the action stays reachable on these 2,000px forms; z stays under select2/datepicker. */
.sk-form-actions {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--sk-surface, #fff);
    border: 1px solid var(--sk-border, #e3e8ef);
    border-radius: var(--sk-radius, 12px);
    box-shadow: var(--sk-shadow, 0 4px 12px rgba(16, 32, 52, .07));
    margin: 4px 0 18px;
}
.sk-form-actions .btn {
    /* flex gap spaces the icon from the label — direction-agnostic, unlike a margin (RTL) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 26px;
}
.sk-form-actions .btn-primary {
    box-shadow: 0 2px 8px rgba(27, 109, 193, .3);
}
.sk-form-actions .sk-btn-soft {
    background: var(--sk-surface, #fff);
    border: 1px solid var(--sk-border-strong, #d2dae5);
    color: var(--sk-text, #1c2733);
}
.sk-form-actions .sk-btn-soft:hover,
.sk-form-actions .sk-btn-soft:focus {
    background: var(--sk-primary-050, #eaf2fb);
    border-color: var(--sk-primary-100, #d6e6f7);
    color: var(--sk-primary-700, #114a86);
}
.sk-form-actions .sk-btn-soft[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* 12.9 Barcode aliases block renders as ONE cell of the 3-col product grid, so its 45/22/18%
   inputs resolved against a third of the page. Give it the full row, capped for readability. */
#product_add_form #barcode_aliases_section {
    grid-column: 1 / -1;
    max-width: 900px;
}

/* 12.10 EN↔AR translate chips on the product-name fields (markup keeps the legacy ids/classes
   the inline JS binds to; only the look is provided here). */
#product_add_form .translate-direction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-primary-700, #114a86);
    background: var(--sk-primary-050, #eaf2fb);
    border: 1px solid var(--sk-primary-100, #d6e6f7);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}
#product_add_form .translate-direction:hover {
    background: var(--sk-primary-100, #d6e6f7);
}

/* 12.11 Items-card toolbar (purchase create/edit) — one 34px baseline: import button |
   [icon|SKU] | product scan field | add-product link. Replaces the old 2/8/2 grid whose
   mb-4-wrapped cells and nested .5fr/1fr sub-grid left the controls misaligned, jammed the
   two search inputs together seamlessly-unseamed, and centered lone buttons in oversized
   columns. */
.sk-items-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sk-items-toolbar .sk-items-sku,
.sk-items-toolbar .sk-items-product {
    display: flex;
}
.sk-items-toolbar .sk-items-sku {
    flex: 0 1 240px;
    min-width: 180px;
}
.sk-items-toolbar .sk-items-product {
    flex: 1 1 280px;
    min-width: 220px;
}
.sk-items-toolbar .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
.sk-items-toolbar .btn {
    margin: 0;
    white-space: nowrap;
}

/* 12.12 Field-grid rhythm — Tailwind gap-4 resolves to 10px at the 10px root, which reads
   cramped between adjacent fields. Give the section grids a 14px row / 18px column rhythm
   (compound selector out-specifies the unlayered gap-4 utility). Only DIRECT child grids of
   card/panel bodies move — nested sub-grids (dpp exc/inc pair etc.) keep their own gaps. */
#add_purchase_form .sk-card__body > .grid,
#product_add_form .sk-card__body > .grid,
#add_purchase_form .box > .box-body.collapse > .grid,
#product_add_form .box > .box-body.collapse > .grid {
    gap: 14px 18px;
}

/* 12.13 Paired inputs (pay-term number + unit) — 8px of air between the two controls.
   app.css .width-40/.width-60 are !important floats, so the calc must be !important too. */
#add_purchase_form .multi-input .width-60 {
    width: calc(60% - 8px) !important;
    margin-left: 8px;
}

/* 12.14 Label truncation — Redwood/Fluent truncate long field labels with an ellipsis instead
   of letting them wrap, because a wrapped label pushes ITS control below the neighbours' and
   the whole row reads misaligned (probe: rack-location labels spread rows by 20-80px, custom
   field labels by 20-60px at 768). One line, ellipsis, 24px reserved so a trailing tooltip
   icon stays on the label line instead of dropping to its own. Check tiles keep their flex
   label (excluded), and only direct field-wrapper labels move — nested labels (dpp exc/inc
   pair inside the pricing table) are untouched. */
@media (min-width: 1024px) {
    /* wide cells: truncation is rare and alignment is guaranteed */
    #add_purchase_form .sk-card__body .grid .mb-4:not(.sk-check-tile) > label,
    #product_add_form .sk-card__body .grid .mb-4:not(.sk-check-tile) > label,
    #product_add_form .sk-card__body .grid .mb-3:not(.sk-check-tile) > label,
    #add_purchase_form .box-body .grid .mb-4:not(.sk-check-tile) > label,
    #product_add_form .box-body .grid .mb-4:not(.sk-check-tile) > label,
    #product_add_form .box-body .grid .mb-3:not(.sk-check-tile) > label,
    #add_purchase_form .multi-input > label,
    #product_add_form .multi-input > label {
        display: inline-block;
        max-width: calc(100% - 24px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
}
/* below lg the cells are narrow: wrapping keeps label MEANING ("Purchase Date" vs "Purchase
   Status" both truncated to "Purchase …" was worse than a modest row offset). Two exceptions
   stay truncated at every width because their text is redundant there: rack-detail labels
   repeat the location name, and the translate rows are disambiguated by their EN↔AR chips. */
#product_add_form label[for^="rack_"],
#product_add_form .translate_container label {
    display: inline-block;
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* 12.15 Check tiles sit in rows next to labelled fields; without a label of their own they
   hugged the row top while the neighbour's control started ~24px lower (label 19px + 5px
   margin). Reserve the label band so the tile's box aligns with the sibling controls. */
#add_purchase_form .sk-check-tile,
#product_add_form .sk-check-tile {
    padding-top: 24px;
}

/* 12.16 Translate-chip rows (product name EN/AR): the chip used to share the label line in
   a flex row, so in narrow cells it wrapped BELOW the label and the name inputs started up to
   32px lower than the SKU input beside them. Take the chip out of the flow entirely — pinned
   to the field's top-right over the label band — so the band is one label line at EVERY width.
   Label reserves the chip's width so the two never overlap. */
#product_add_form .translate_container {
    display: block;
    position: relative;
    margin-top: 0;
    min-height: 0;
}
#product_add_form .translate_container > div:last-child {
    position: absolute;
    top: 0;
    right: 0;
}
[dir="rtl"] #product_add_form .translate_container > div:last-child,
body.rtl #product_add_form .translate_container > div:last-child {
    right: auto;
    left: 0;
}
#product_add_form .translate_container label {
    max-width: calc(100% - 72px);
    margin-bottom: 5px;
}
#product_add_form .translate-direction {
    padding: 0 6px;
    font-size: 12px;
    line-height: 17px;
}

/* 12.17 Entry/pricing tables — inputs must never clip their own values ("11.5|", "1,900.0|",
   tax select collapsed to a bare caret). The tables sit in .overflow-x-auto wrappers, so
   min-widths just widen the horizontal scroll instead of breaking the card. */
#add_purchase_form #purchase_entry_table td input.form-control:not([type=hidden]) {
    min-width: 90px;
}
#add_purchase_form #purchase_entry_table td select.form-control {
    min-width: 110px;
}
#product_add_form .add-product-price-table {
    min-width: 700px;
}

/* 12.18 Toggle chips — active state. sk-widgets mirrors aria-expanded on every toggle, and
   buttonToogle_custom now renders the initial state from its $closed param, so an open
   panel's chip reads filled (the chip row otherwise looked like a tab strip with no active
   tab while its panels sat open below). */
.sk-chip-row div[id='accordion'] .box-title > a.btn[aria-expanded="true"] {
    background: var(--sk-primary, #1B6DC1);
    border-color: var(--sk-primary, #1B6DC1);
    color: #fff;
}
.sk-chip-row div[id='accordion'] .box-title > a.btn[aria-expanded="true"] i {
    color: #fff;
}

/* 12.19 Check tiles — the @show_tooltip icon rendered on its own line below the tile (the
   flex label is block-level). Make the tile itself the flex row: label flexes, tooltip icon
   sits inline beside it, help text takes the full width below. */
#add_purchase_form .sk-check-tile,
#product_add_form .sk-check-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#add_purchase_form .sk-check-tile > label,
#product_add_form .sk-check-tile > label {
    /* basis 0: a long label wraps inside the tile instead of pushing the tooltip icon to wrap */
    flex: 1 1 0%;
    min-width: 0;
}
#add_purchase_form .sk-check-tile > .help-block,
#product_add_form .sk-check-tile > .help-block {
    flex-basis: 100%;
    margin: 0;
}
.sk-check-tile .icheckbox_square-blue {
    flex-shrink: 0;
}

/* 12.20 select2 discipline — select2 measures its width while panels are hidden and can bake
   a bogus inline px width (status select at 922px, KOT printers running off the viewport).
   The forms only ever want full-cell selects; chips get an ellipsis instead of a hard clip. */
#add_purchase_form .select2-container,
#product_add_form .select2-container {
    width: 100% !important;
    max-width: 100%;
}
#add_purchase_form .select2-selection__choice,
#product_add_form .select2-selection__choice {
    max-width: 96%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 12.21 Supplier address block — a bold "Address:" label with nothing under it read as a
   rendering bug before a supplier was chosen. Hidden until purchase.js fills the div. */
.sk-supplier-address:has(> #supplier_address_div:empty) {
    display: none;
}
.sk-supplier-address {
    font-size: 12.5px;
    color: var(--sk-text-2, #5b6b7c);
}

/* 12.22 Additional-expenses table sat right-pinned (col-start-5) leaving a dead left half in
   the shipping panel. Centered without touching the Tailwind build (no new JIT classes). */
@media (min-width: 768px) {
    #add_purchase_form #additional_expenses_div {
        grid-column: 3 / span 8;
    }
}

/* 12.23 Entry-row action cluster — literal "X | v | ^" pipes and mismatched icon sizes read
   as unfinished. Even 15px icon buttons, gap instead of pipes (markup keeps the i.up/i.down/
   i.remove_purchase_entry_row tag-qualified hooks). */
.sk-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.sk-row-actions i {
    font-size: 15px;
    cursor: pointer;
    color: var(--sk-text-2, #5b6b7c);
}
.sk-row-actions i:hover {
    color: var(--sk-primary, #1B6DC1);
}
.sk-row-actions i.remove_purchase_entry_row {
    color: var(--sk-danger, #d23f3f);
}
.sk-row-actions i.remove_purchase_entry_row:hover {
    color: #b53535;
}


/* 12.24 Totals-tile values — currency spans carry data-currency_symbol=true, which several
   legacy sheets (global.css, app.css:32, custom_backend.css:42) style with the GLYPH-ONLY
   `saudi_riyal` font and no fallback; when the runtime-injected fallback rule doesn't fire
   (PO pages) every digit falls through to the browser's SERIF default. Pin the full stack at
   higher specificity than all of them. */
.sk-totals .sk-total__value {
    font-family: 'saudi_riyal', var(--sk-font, 'Open Sans', sans-serif) !important;
}

/* 12.25 Barcode-aliases heading is a label with its long helper <small> inside — exempt it
   from the 12.14 one-line ellipsis (it was truncating the whole second sentence at 1600px). */
#product_add_form #barcode_aliases_section label {
    display: block;
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* 12.26 Entry-row tax chip was text-xs = 7.5px at the 10px root — half the size of every
   other number in the row. */
#add_purchase_form #purchase_entry_table .purchase_product_unit_tax_text {
    font-size: 12px;
}

/* 12.27 Tablet band (768-1023): the 12-col detail grids rendered 4-across in ~110px cells
   (pay-term showed "Pa", dates cut their year). Drop them to 6 tracks so span-3 fields sit
   2-across; full-width children (span-12/span-8) stretch the row. The additional-expenses
   block loses its desktop centering and goes full-width in this band. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    #add_purchase_form .sk-card__body > .grid[class*="md:grid-cols-12"],
    #product_add_form .sk-card__body > .grid[class*="md:grid-cols-12"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    #add_purchase_form .sk-card__body > .grid[class*="md:grid-cols-12"] > [class*="col-span-12"],
    #product_add_form .sk-card__body > .grid[class*="md:grid-cols-12"] > [class*="col-span-12"],
    #add_purchase_form .sk-card__body > .grid[class*="md:grid-cols-12"] > [class*="col-span-8"],
    #product_add_form .sk-card__body > .grid[class*="md:grid-cols-12"] > [class*="col-span-8"] {
        grid-column: 1 / -1;
    }
    #add_purchase_form #additional_expenses_div {
        grid-column: 1 / -1;
    }
}

/* 12.28 Informational field hints (exchange-rate currency note) — muted, not cyan/red. */
.sk-hint {
    color: var(--sk-text-3, #66727f);
}