/*
 * ISA Traders ERP theme
 *
 * Loaded after every other stylesheet, so it wins on specificity ties without
 * needing !important everywhere.
 *
 * The app runs three UI systems at once: AdminLTE 2 skins, the Bootstrap 3 grid,
 * and Tailwind (tw- prefixed) added later. This does not replace them - that
 * would mean rewriting 300+ screens. It puts one consistent surface over the top
 * and fixes what is outright broken underneath.
 *
 * Palette is the SAAMAAN.PK system with the accent shifted to ISA Traders blue: near-black #171717, warm
 * red-orange #1d4ed8, warm peach highlight, light neutral surfaces.
 */

:root {
    /* Brand */
    --sp-ink:            #171717;
    --sp-ink-soft:       #1f1f1f;
    --sp-ink-line:       #2e2e2e;
    --sp-accent:         #1d4ed8;
    --sp-accent-dark:    #1739a8;
    --sp-accent-soft:    #dbe4ff;

    /* Surfaces */
    --sp-bg:             #f4f5f7;
    --sp-surface:        #ffffff;
    --sp-border:         #e4e6ea;
    --sp-border-strong:  #d3d6dc;

    /* Text */
    --sp-text:           #1a1a1a;
    --sp-text-muted:     #6b7280;
    --sp-text-faint:     #9aa1ab;

    /* Status */
    --sp-ok:             #0f9d58;
    --sp-warn:           #f2a900;
    --sp-danger:         #d93025;
    --sp-info:           #2563eb;

    --sp-radius:         10px;
    --sp-radius-sm:      7px;
    --sp-shadow:         0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --sp-shadow-lg:      0 8px 24px rgba(16,24,40,.12);
}

/* ==================================================================
 * 1. FontAwesome 4 -> 5 name aliases
 *
 * 145 icons still use v4 names that were renamed in v5 and rendered blank.
 * Aliasing fixes every occurrence at once, including markup built by
 * JavaScript, instead of editing hundreds of files.
 * ================================================================== */
.fa-money:before           { content: "\f0d6"; }
.fa-dashboard:before       { content: "\f3fd"; }
.fa-close:before           { content: "\f00d"; }
.fa-remove:before          { content: "\f00d"; }
.fa-refresh:before         { content: "\f021"; }
.fa-repeat:before          { content: "\f01e"; }
.fa-pencil:before          { content: "\f303"; }
.fa-trash-o:before         { content: "\f2ed"; }
.fa-sign-out:before        { content: "\f2f5"; }
.fa-sign-in:before         { content: "\f2f6"; }
.fa-clock-o:before         { content: "\f017"; }
.fa-line-chart:before      { content: "\f201"; }
.fa-bar-chart:before       { content: "\f080"; }
.fa-pie-chart:before       { content: "\f200"; }
.fa-file-text:before       { content: "\f15c"; }
.fa-file-text-o:before     { content: "\f15c"; }
.fa-shopping-basket:before { content: "\f291"; }
.fa-automobile:before      { content: "\f1b9"; }
.fa-cab:before             { content: "\f1ba"; }
.fa-support:before         { content: "\f1cd"; }
.fa-warning:before         { content: "\f071"; }

/* The vendor bundle pins .fa to a 34px line-height, which knocks icons
   off-centre inside buttons and cells. */
.btn .fa, td .fa, th .fa, .info-box-icon .fa, .nav .fa, .label .fa {
    line-height: inherit;
}

/* ==================================================================
 * 2. Page canvas
 * ================================================================== */
body { background: var(--sp-bg); color: var(--sp-text); }

#scrollable-container { background: var(--sp-bg); }

.content, .content-header { padding: 16px 20px; }

.content-header > h1 {
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--sp-ink);
    margin: 0 0 2px 0;
}

.content-header > h1 > small,
.content-header > h1 .tw-block {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--sp-text-muted);
    margin-top: 3px;
}

/* ==================================================================
 * 3. Sidebar - near-black, brand-led
 * ================================================================== */
aside.side-bar { background: var(--sp-ink) !important; border-right: 0; }

/* Brand block at the top */
aside.side-bar > a:first-of-type {
    background: var(--sp-ink) !important;
    border-bottom: 1px solid var(--sp-ink-line);
    border-right: 0 !important;
    height: 58px;
    position: relative;
}

aside.side-bar > a:first-of-type:after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sp-accent), var(--sp-accent-dark));
}

aside.side-bar .side-bar-heading {
    font-size: 15px !important;
    font-weight: 650;
    letter-spacing: .02em;
    color: #fff !important;
}

/* Scrollable menu area */
aside.side-bar #side-bar {
    background: var(--sp-ink);
    border-right: 0 !important;
    padding: 10px 8px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--sp-ink-line) transparent;
}

aside.side-bar #side-bar::-webkit-scrollbar { width: 8px; }
aside.side-bar #side-bar::-webkit-scrollbar-thumb {
    background: var(--sp-ink-line);
    border-radius: 8px;
}

/* Nav links */
aside.side-bar #side-bar a {
    color: #b9bec6 !important;
    border-radius: var(--sp-radius-sm) !important;
    padding: 9px 11px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease;
}

aside.side-bar #side-bar a:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
}

aside.side-bar #side-bar a svg { opacity: .8; }
aside.side-bar #side-bar a:hover svg { opacity: 1; }

/* Active item - accent bar plus lift */
aside.side-bar #side-bar a.tw-bg-gray-200,
aside.side-bar #side-bar a[class*="tw-bg-gray-2"] {
    background: rgba(232,56,13,.14) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--sp-accent);
}

aside.side-bar #side-bar a.tw-bg-gray-200 svg { opacity: 1; }

/* Submenus sit slightly inset and quieter */
aside.side-bar #side-bar .drop_down + div a,
aside.side-bar #side-bar div > div a {
    font-size: 13px !important;
    padding-left: 34px !important;
    color: #9aa1ab !important;
}

/* ==================================================================
 * 4. Mobile navigation drawer
 *
 * The sidebar is tw-hidden below lg, and the existing open state was
 * `display:grid !important; position:absolute` with no offsets or height - on a
 * flex column that produced a misplaced, unusable panel. This makes it a real
 * off-canvas drawer.
 * ================================================================== */
@media (max-width: 1023px) {
    aside.side-bar.small-view-side-active {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 268px;
        max-width: 84vw;
        height: 100vh;
        z-index: 1050;
        box-shadow: var(--sp-shadow-lg);
        animation: sp-slide-in .18s ease-out;
    }

    aside.side-bar.small-view-side-active #side-bar {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .overlay { z-index: 1040 !important; background: rgba(0,0,0,.5) !important; }
}

@keyframes sp-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ==================================================================
 * 5. Header
 * ================================================================== */
header, .main-header {
    background: var(--sp-ink) !important;
    border-bottom: 1px solid var(--sp-ink-line);
}

header a, header button, header .tw-text-white { color: #e8eaed !important; }
header a:hover, header button:hover { color: #fff !important; }

/* ==================================================================
 * 6. Cards / boxes
 * ================================================================== */
.box, .widget, .info-box, .nav-tabs-custom {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    margin-bottom: 16px;
}

/* AdminLTE puts a thick coloured strip on top of every box; make it a thin
   accent so a screen of boxes does not look like a paint chart. */
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default {
    border-top: 2px solid var(--sp-border-strong);
}
.box.box-primary { border-top-color: var(--sp-ink); }
.box.box-success { border-top-color: var(--sp-ok); }
.box.box-warning { border-top-color: var(--sp-warn); }
.box.box-danger  { border-top-color: var(--sp-danger); }
.box.box-info    { border-top-color: var(--sp-info); }

.box-header {
    border-bottom: 1px solid var(--sp-border);
    padding: 13px 16px;
}

.box-header .box-title {
    font-size: 14.5px;
    font-weight: 620;
    color: var(--sp-ink);
}

.box-body { padding: 16px; }

/* ==================================================================
 * 7. Summary tiles
 * ================================================================== */
.info-box { min-height: 84px; display: flex; align-items: stretch; overflow: hidden; }

.info-box-icon {
    width: 74px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    border-radius: 0;
}

.info-box-content {
    margin-left: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-box-text {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    white-space: normal;
    line-height: 1.3;
}

.info-box-number {
    font-size: 24px;
    font-weight: 680;
    color: var(--sp-ink);
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
}

/* Tile icon colours, softened from AdminLTE's originals */
.info-box-icon.bg-red    { background: var(--sp-danger) !important; }
.info-box-icon.bg-yellow { background: var(--sp-warn) !important; }
.info-box-icon.bg-green  { background: var(--sp-ok) !important; }
.info-box-icon.bg-aqua   { background: var(--sp-info) !important; }
.info-box-icon.bg-blue   { background: var(--sp-info) !important; }

/* ==================================================================
 * 8. Tables
 * ================================================================== */
.table { margin-bottom: 0; }

.table > thead > tr > th {
    background: #fafbfc;
    border-bottom: 1px solid var(--sp-border-strong) !important;
    font-size: 12px;
    font-weight: 620;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sp-text-muted);
    white-space: nowrap;
    padding: 10px 12px;
}

.table > tbody > tr > td {
    padding: 10px 12px;
    border-top: 1px solid var(--sp-border);
    vertical-align: middle;
    font-size: 13.5px;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: #fcfcfd; }
.table-hover > tbody > tr:hover { background: #f6f8fa; }

/* Figures should line up. */
.table td.text-right, .table th.text-right,
.table td.text-center, .table th.text-center { font-variant-numeric: tabular-nums; }

/* ==================================================================
 * 9. Buttons
 * ================================================================== */
.btn {
    border-radius: var(--sp-radius-sm);
    font-weight: 560;
    font-size: 13.5px;
    padding: 7px 14px;
    border-width: 1px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:focus, .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px rgba(232,56,13,.22); }

.btn-primary {
    background: var(--sp-ink);
    border-color: var(--sp-ink);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sp-accent);
    border-color: var(--sp-accent);
    color: #fff;
}

.btn-success { background: var(--sp-ok);     border-color: var(--sp-ok); }
.btn-danger  { background: var(--sp-danger); border-color: var(--sp-danger); }
.btn-warning { background: var(--sp-warn);   border-color: var(--sp-warn); color: #fff; }
.btn-info    { background: var(--sp-info);   border-color: var(--sp-info); }

.btn-default {
    background: #fff;
    border-color: var(--sp-border-strong);
    color: var(--sp-text);
}
.btn-default:hover { background: #f6f8fa; border-color: var(--sp-text-faint); }

/* ==================================================================
 * 10. Forms
 * ================================================================== */
.form-control, .select2-container .select2-selection--single {
    border-radius: var(--sp-radius-sm);
    border-color: var(--sp-border-strong);
    height: 38px;
    font-size: 13.5px;
    box-shadow: none;
    color: var(--sp-text);
}

.form-control:focus {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(232,56,13,.14);
}

label, .control-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 5px;
}

.help-block { font-size: 12px; color: var(--sp-text-muted); }

/* select2 sizing to match native inputs */
.select2-container--default .select2-selection--single { height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ==================================================================
 * 11. Badges, labels, alerts
 * ================================================================== */
.label, .badge {
    font-size: 11.5px;
    font-weight: 620;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: .01em;
}

.label-success { background: rgba(15,157,88,.13);  color: #0b7a44; }
.label-danger  { background: rgba(217,48,37,.12);  color: #b3261e; }
.label-warning { background: rgba(242,169,0,.16);  color: #96690a; }
.label-info    { background: rgba(37,99,235,.12);  color: #1d4ed8; }
.label-primary { background: rgba(23,23,23,.09);   color: var(--sp-ink); }

.alert {
    border-radius: var(--sp-radius);
    border: 1px solid transparent;
    font-size: 13.5px;
    padding: 12px 15px;
}
.alert-success { background: #ecfdf3; border-color: #c3ecd4; color: #0b7a44; }
.alert-danger  { background: #fef3f2; border-color: #f5c6c2; color: #b3261e; }
.alert-warning { background: #fffaeb; border-color: #f5dfa6; color: #96690a; }
.alert-info    { background: #eff6ff; border-color: #c3d9fd; color: #1d4ed8; }

/* ==================================================================
 * 12. Modals, tabs, pagination
 * ================================================================== */
.modal-content { border-radius: var(--sp-radius); border: 0; box-shadow: var(--sp-shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--sp-border); padding: 14px 18px; }
.modal-header .modal-title { font-size: 16px; font-weight: 640; color: var(--sp-ink); }
.modal-footer  { border-top: 1px solid var(--sp-border); padding: 12px 18px; }

.nav-tabs { border-bottom: 1px solid var(--sp-border); }
.nav-tabs > li > a { border: 0; color: var(--sp-text-muted); font-weight: 560; font-size: 13.5px; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    border: 0;
    color: var(--sp-ink);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--sp-accent);
}

.pagination > li > a { color: var(--sp-text); border-color: var(--sp-border); }
.pagination > .active > a,
.pagination > .active > a:hover {
    background: var(--sp-ink);
    border-color: var(--sp-ink);
}

/* ==================================================================
 * 13. Responsive
 * ================================================================== */

/* Wide report tables scroll inside their own box rather than dragging the page. */
@media (max-width: 1199px) {
    .box-body > .table,
    .widget-body > .table,
    .table-responsive > .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table td, .table th { white-space: nowrap; }
    .table td.wrap, .table th.wrap { white-space: normal; }
}

/* DataTables controls stack instead of overlapping. */
@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
}

/* Filter columns need breathing room once stacked. */
@media (max-width: 991px) {
    .box-body > .row > [class^="col-"],
    .box-body > .row > [class*=" col-"],
    .filters [class^="col-"] { margin-bottom: 10px; }

    /* select2 is given an inline pixel width that overflows small screens. */
    .select2-container { width: 100% !important; }
}

@media (max-width: 767px) {
    .content, .content-header { padding: 12px 12px; }
    .content-header > h1 { font-size: 18px; }
    .box-body { padding: 12px; }

    .info-box { min-height: 72px; }
    .info-box-icon { width: 58px; font-size: 21px; }
    .info-box-number { font-size: 20px; }

    /* Never let one wide element scroll the whole shell sideways. */
    #scrollable-container { overflow-x: hidden; }

    .row { margin-left: -8px; margin-right: -8px; }
    .row > [class^="col-"], .row > [class*=" col-"] { padding-left: 8px; padding-right: 8px; }

    /* Action buttons in list headers wrap instead of overflowing. */
    .box-header .box-tools { position: static; float: none; margin-top: 8px; }
    .btn-group { flex-wrap: wrap; }
}

/* ==================================================================
 * 14. Print
 * ================================================================== */
@media print {
    aside.side-bar, header, .main-header, .overlay, .box-tools { display: none !important; }
    .box { border: 0; box-shadow: none; }
    #scrollable-container { overflow: visible !important; height: auto !important; }
}

/* ==================================================================
 * 15. Dark mode
 *
 * Everything above is driven by the custom properties in :root, so dark mode is
 * a token swap rather than a second stylesheet. Set data-theme="dark" on <html>.
 * ================================================================== */
html[data-theme="dark"] {
    --sp-bg:            #14161a;
    --sp-surface:       #1b1e24;
    --sp-border:        #2a2f37;
    --sp-border-strong: #363c46;

    --sp-text:          #e6e8ec;
    --sp-text-muted:    #9aa1ad;
    --sp-text-faint:    #6f7784;

    --sp-ink:           #0f1115;
    --sp-ink-soft:      #171a1f;
    --sp-ink-line:      #262b33;
}

html[data-theme="dark"] body { background: var(--sp-bg); color: var(--sp-text); }

html[data-theme="dark"] .box,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .nav-tabs-custom {
    background: var(--sp-surface);
    border-color: var(--sp-border);
}

html[data-theme="dark"] .box-header { border-bottom-color: var(--sp-border); }
html[data-theme="dark"] .box-header .box-title,
html[data-theme="dark"] .content-header > h1,
html[data-theme="dark"] .info-box-number,
html[data-theme="dark"] .modal-title { color: var(--sp-text); }

html[data-theme="dark"] .table > thead > tr > th {
    background: #20242b;
    color: var(--sp-text-muted);
    border-bottom-color: var(--sp-border-strong) !important;
}
html[data-theme="dark"] .table > tbody > tr > td {
    border-top-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #1e2228; }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background: #242931; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-dropdown {
    background: #1f232a;
    border-color: var(--sp-border-strong);
    color: var(--sp-text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--sp-text-faint); }
html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--sp-text); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background: var(--sp-accent);
}

html[data-theme="dark"] .btn-default {
    background: #232830;
    border-color: var(--sp-border-strong);
    color: var(--sp-text);
}
html[data-theme="dark"] .btn-default:hover { background: #2a303a; }

html[data-theme="dark"] label,
html[data-theme="dark"] .control-label { color: var(--sp-text); }

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--sp-border); }

html[data-theme="dark"] .pagination > li > a {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

/* Row highlights on the reorder screen need to work on a dark canvas too. */
html[data-theme="dark"] .bg-red-custom    { background-color: rgba(217,48,37,.18) !important; }
html[data-theme="dark"] .bg-yellow-custom { background-color: rgba(242,169,0,.16) !important; }

/* ==================================================================
 * 16. Hover and feedback
 * ================================================================== */
.box, .info-box { transition: box-shadow .18s ease, transform .18s ease; }
.box:hover, .info-box:hover { box-shadow: var(--sp-shadow-lg); }

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.table > tbody > tr { transition: background .12s ease; }

aside.side-bar #side-bar a { position: relative; }

/* Rows that can be opened should say so. */
.table > tbody > tr[data-href], .table > tbody > tr.clickable { cursor: pointer; }

/* ------------------------------------------------------------------
 * Tooltips
 *
 * Any element with data-sp-tip="..." gets a styled tooltip. Pure CSS, so it
 * works on content rendered by DataTables after page load.
 * ------------------------------------------------------------------ */
[data-sp-tip] { position: relative; }

[data-sp-tip]:after {
    content: attr(data-sp-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0f1115;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    padding: 7px 10px;
    border-radius: 7px;
    box-shadow: var(--sp-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1080;
}

[data-sp-tip]:before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #0f1115;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1080;
}

[data-sp-tip]:hover:after,
[data-sp-tip]:focus-visible:after,
[data-sp-tip]:hover:before,
[data-sp-tip]:focus-visible:before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* A small "why" marker next to headings and figures. */
.sp-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--sp-border-strong);
    color: var(--sp-surface);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
.sp-hint:hover { background: var(--sp-accent); }

/* Theme toggle button in the header */
#sp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #e8eaed;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
#sp-theme-toggle:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
#sp-theme-toggle svg { width: 17px; height: 17px; }

/* ==================================================================
 * 17. Phone
 * ================================================================== */
@media (max-width: 767px) {
    /* Comfortable touch targets - 44px is the usual minimum. */
    .btn, .form-control, .select2-container .select2-selection--single {
        min-height: 42px;
    }
    .btn-sm, .btn-xs { min-height: 36px; padding: 7px 12px; font-size: 13px; }

    .table > tbody > tr > td, .table > thead > tr > th { padding: 11px 10px; }

    /* Action buttons in table rows are usually a dropdown; let it breathe. */
    .table .btn-group > .btn { padding: 7px 10px; }

    /* Modals should use the screen, not float in the middle of it. */
    .modal-dialog { margin: 8px; }
    .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }

    /* Tooltips near the screen edge would clip; keep them inside. */
    [data-sp-tip]:after { max-width: 74vw; }

    /* Stop iOS zooming the page when a field is focused. */
    input, select, textarea { font-size: 16px !important; }

    /* Header controls wrap rather than overflow. */
    header .tw-flex-wrap { row-gap: 8px; }
}

@media (max-width: 480px) {
    .content, .content-header { padding: 10px; }
    .info-box-icon { width: 52px; font-size: 19px; }
    .info-box-number { font-size: 18px; }
    .info-box-text { font-size: 10.5px; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==================================================================
 * 18. Brand palette override for the Tailwind "primary" scale
 *
 * The header, mobile dashboard and sidebar brand block are coloured by compiled
 * Tailwind utilities holding a hardcoded blue (#0040c1), not by the AdminLTE
 * skin - so restyling .box and header alone left those screens blue. These are
 * every primary utility present in the bundle, remapped to SAAMAAN.PK.
 * ================================================================== */
.tw-bg-primary-800,
.tw-bg-primary-700,
.tw-bg-primary-600 {
    background-color: var(--sp-ink) !important;
}

.tw-bg-primary-50,
.tw-bg-primary-100 {
    background-color: #f4f5f7 !important;
}

/* Headings and body text carry the ink colour; the accent is reserved for
   things that are actually interactive or need attention, otherwise a whole
   page turns orange. */
.tw-text-primary-700,
.tw-text-primary-800,
.tw-text-primary-600 {
    color: var(--sp-ink) !important;
}

a.tw-text-primary-700,
a.tw-text-primary-800,
button.tw-text-primary-700 {
    color: var(--sp-accent) !important;
}

.tw-border-primary-500,
.tw-border-primary-800 {
    border-color: var(--sp-ink-line) !important;
}

/* Gradients used across the mobile dashboard and header */
.tw-from-primary-800 { --tw-gradient-from: #171717 var(--tw-gradient-from-position) !important; }
.tw-to-primary-900   { --tw-gradient-to:   #0f0f0f var(--tw-gradient-to-position) !important; }
.tw-via-primary-800  { --tw-gradient-via:  #171717 !important; }

/* Some screens paint the canvas with the gradient directly. */
.tw-bg-gradient-to-b.tw-from-primary-800,
.tw-bg-gradient-to-r.tw-from-primary-800,
.tw-bg-gradient-to-br.tw-from-primary-800 {
    background-image: linear-gradient(to bottom, #171717, #0f0f0f) !important;
}

/* The mobile dashboard sits on the primary colour with white cards on top.
   Keep the cards, calm the canvas. */
@media (max-width: 1023px) {
    body .tw-bg-primary-800,
    body [class*="tw-from-primary"] {
        background-color: var(--sp-ink) !important;
    }
}

/* Welcome heading and mobile stat cards */
.tw-text-white { color: #f2f3f5 !important; }

.tw-bg-white.tw-rounded-2xl,
.tw-bg-white.tw-rounded-xl,
.tw-bg-white.tw-rounded-lg {
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
}

html[data-theme="dark"] .tw-bg-white.tw-rounded-2xl,
html[data-theme="dark"] .tw-bg-white.tw-rounded-xl,
html[data-theme="dark"] .tw-bg-white.tw-rounded-lg,
html[data-theme="dark"] .tw-bg-white {
    background-color: var(--sp-surface) !important;
    border-color: var(--sp-border);
    color: var(--sp-text);
}
html[data-theme="dark"] .tw-text-gray-500,
html[data-theme="dark"] .tw-text-gray-600 { color: var(--sp-text-muted) !important; }
html[data-theme="dark"] .tw-text-gray-900,
html[data-theme="dark"] .tw-text-black    { color: var(--sp-text) !important; }

/* ==================================================================
 * 19. Expanded sidebar groups
 *
 * The submenu markup (.chiled) and its guide line were built for a light
 * sidebar - a grey panel with dark text - so an open group appeared as a pale
 * block inside the dark rail, and the open parent picked up a Tailwind grey
 * background that the accent tint turned pink.
 * ================================================================== */
aside.side-bar #side-bar .chiled,
aside.side-bar #side-bar .chiled > div {
    background: transparent !important;
}

/* The vertical guide line beside a submenu */
aside.side-bar #side-bar .chiled .tw-bg-gray-200,
aside.side-bar #side-bar .chiled [class*="tw-bg-gray-"] {
    background: rgba(255, 255, 255, .13) !important;
}

/* Submenu links */
aside.side-bar #side-bar .chiled a {
    color: #9ca3ad !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    display: block;
}

aside.side-bar #side-bar .chiled a:hover,
aside.side-bar #side-bar .chiled a:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .07) !important;
}

/* The currently open page inside a submenu */
aside.side-bar #side-bar .chiled a[class*="tw-bg-gray-2"],
aside.side-bar #side-bar .chiled a.active {
    color: #ffffff !important;
    background: rgba(232, 56, 13, .16) !important;
    box-shadow: inset 2px 0 0 var(--sp-accent);
}

/* Parent of an open group: a quiet lift plus the accent bar, never a tint that
   reads pink against the dark rail. */
aside.side-bar #side-bar a.drop_down {
    background: transparent !important;
    color: #b9bec6 !important;
}

aside.side-bar #side-bar a.drop_down:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
}

aside.side-bar #side-bar a.drop_down.active,
aside.side-bar #side-bar a.drop_down[aria-expanded="true"],
aside.side-bar #side-bar a.drop_down[class*="tw-bg-gray-2"] {
    background: rgba(255, 255, 255, .09) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 var(--sp-accent);
}

/* The chevron */
aside.side-bar #side-bar a.drop_down svg.svg { color: #7e858f !important; opacity: 1; }
aside.side-bar #side-bar a.drop_down:hover svg.svg,
aside.side-bar #side-bar a.drop_down.active svg.svg { color: #ffffff !important; }

/* Any stray light-grey utility inside the rail */
aside.side-bar #side-bar [class*="hover:tw-bg-gray-1"]:hover {
    background: rgba(255, 255, 255, .07) !important;
}

/* ==================================================================
 * 20. Serial numbers on a POS row
 *
 * The row's serial button is a fixed "Select Serial" label, so a scanned
 * serial produced no visible change and operators assumed the scan had
 * failed. updateSerialUI() now flips the button and lists what is attached;
 * these are the styles for that state.
 * ================================================================== */
.serial-chosen {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.serial-chosen .serial-count {
    font-size: 11px;
    font-weight: 650;
    color: var(--sp-ok);
    white-space: nowrap;
}

.serial-chosen .serial-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
}

.serial-chosen .serial-chip {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--sp-border-strong);
    border-radius: 999px;
    background: var(--sp-surface);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--sp-text);
    white-space: nowrap;
}

/* The attached state reads as done, not as another action waiting to happen. */
#pos_table .open-serial-modal.btn-success {
    background: var(--sp-ok) !important;
    border-color: var(--sp-ok) !important;
    color: #fff !important;
}

html[data-theme="dark"] .serial-chosen .serial-chip {
    background: var(--sp-surface);
    border-color: var(--sp-border);
}