/*
 * ============================================================================
 * Confirmilya — Design System
 * ============================================================================
 *
 * A shared harmonisation layer loaded at the end of <head> on every page, so
 * it settles the surface styling of components that each page previously
 * themed on its own.
 *
 * DESIGN RULES OBSERVED HERE (important for future edits)
 * ------------------------------------------------------
 * Every page in this application ships its own large inline <style> block and
 * its own :root palette, and several pages reuse the same class name for
 * structurally different things (`.main-content` is a page wrapper on eight
 * pages but a CSS grid on delivery_status_dashboard.php). Two rules follow:
 *
 *   1. Tokens live in a private `--ds-*` namespace. Pages never declare these,
 *      so components styled here render as intended no matter what a page does
 *      to `--primary-500`, `--neutral-200` and friends.
 *
 *   2. This file only ever sets *surface* properties — colour, border,
 *      radius, shadow, transition, typography, and padding inside components.
 *      It never sets display, position, float, width, height, flex/grid
 *      definitions, or margins on layout containers, because that geometry is
 *      load-bearing for the sidebar collapse and the fixed topbar.
 *
 * Sidebar and topbar chrome is themed in sidebar-styles.css and
 * topbar-styles.css, which load from the document body and therefore win
 * against this file by design.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* -- Brand ------------------------------------------------------------ */
    --ds-brand-900: #0f2440;
    --ds-brand-800: #143054;
    --ds-brand-700: #1a365d;   /* primary brand navy */
    --ds-brand-600: #234a7d;
    --ds-brand-500: #2d5d9c;
    --ds-brand-100: #e3ecf7;
    --ds-brand-50:  #f2f7fc;

    --ds-accent-700: #009e80;
    --ds-accent-600: #00b894;
    --ds-accent-500: #00d4aa;  /* brand teal */
    --ds-accent-100: #d6f7ef;
    --ds-accent-50:  #eafaf6;

    /* -- Neutrals --------------------------------------------------------- */
    --ds-white:      #ffffff;
    --ds-gray-50:    #f8fafc;
    --ds-gray-100:   #f1f5f9;
    --ds-gray-200:   #e5e9f0;
    --ds-gray-300:   #d4dae4;
    --ds-gray-400:   #a8b3c4;
    --ds-gray-500:   #7c8798;
    --ds-gray-600:   #5a6577;
    --ds-gray-700:   #414b5c;
    --ds-gray-800:   #2b3444;
    --ds-gray-900:   #1a2233;

    /* -- Semantic --------------------------------------------------------- */
    --ds-success:       #12996b;
    --ds-success-soft:  #e6f7f0;
    --ds-success-text:  #0b6e4d;
    --ds-warning:       #d98b0a;
    --ds-warning-soft:  #fdf4e3;
    --ds-warning-text:  #8a5900;
    --ds-danger:        #d64550;
    --ds-danger-soft:   #fdecee;
    --ds-danger-text:   #9c2530;
    --ds-info:          #2f7fd1;
    --ds-info-soft:     #e9f2fb;
    --ds-info-text:     #1c5590;

    /* -- Surfaces & text -------------------------------------------------- */
    --ds-surface:          var(--ds-white);
    --ds-surface-sunken:   var(--ds-gray-50);
    --ds-surface-raised:   var(--ds-white);
    --ds-border:           var(--ds-gray-200);
    --ds-border-strong:    var(--ds-gray-300);
    --ds-text:             var(--ds-gray-900);
    --ds-text-muted:       var(--ds-gray-600);
    /*
     * gray-500 on white is 3.64:1 — enough for icons and disabled controls
     * (WCAG 1.4.11 / the 1.4.3 inactive-control exception) but short of the
     * 4.5:1 body-text floor. Reserve this token for those cases and use
     * --ds-text-muted for anything a user has to read.
     */
    --ds-text-subtle:      var(--ds-gray-500);
    --ds-text-inverse:     var(--ds-white);

    /* -- Spacing (4px base) ----------------------------------------------- */
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-8: 2rem;
    --ds-space-10: 2.5rem;

    /* -- Typography ------------------------------------------------------- */
    --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --ds-text-xs:   0.75rem;    /* 12px — meta, table captions */
    --ds-text-sm:   0.8125rem;  /* 13px — dense table content */
    --ds-text-base: 0.875rem;   /* 14px — body default for admin density */
    --ds-text-md:   1rem;       /* 16px — form inputs (avoids iOS zoom) */
    --ds-text-lg:   1.125rem;
    --ds-text-xl:   1.375rem;
    --ds-text-2xl:  1.75rem;

    --ds-leading-tight:  1.25;
    --ds-leading-normal: 1.5;

    /* -- Radii ------------------------------------------------------------ */
    --ds-radius-xs:   4px;
    --ds-radius-sm:   6px;
    --ds-radius-md:   8px;
    --ds-radius-lg:   12px;
    --ds-radius-xl:   16px;
    --ds-radius-full: 999px;

    /* -- Shadows (subtle; avoids the heavy drops used previously) ---------- */
    --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --ds-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --ds-shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, 0.10), 0 4px 8px -4px rgba(16, 24, 40, 0.05);

    /* -- Focus ring ------------------------------------------------------- */
    --ds-focus-ring: 0 0 0 3px rgba(45, 93, 156, 0.35);
    --ds-focus-ring-danger: 0 0 0 3px rgba(214, 69, 80, 0.32);

    /* -- Motion ----------------------------------------------------------- */
    --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-duration-fast: 120ms;
    --ds-duration: 180ms;
    --ds-duration-slow: 260ms;

    /* -- Layering --------------------------------------------------------- */
    --ds-z-dropdown: 1000;
    --ds-z-sticky:   1020;
    --ds-z-topbar:   1030;
    --ds-z-sidebar:  1050;
    --ds-z-modal:    1060;
    --ds-z-toast:    1080;
    --ds-z-loader:   9999;

    /* Minimum comfortable hit area for touch input. */
    --ds-touch-target: 40px;
}

/* Breakpoints used consistently across this file and the loader:
   1400px  wide desktop
   1200px  desktop
   1024px  small laptop / large tablet
   768px   tablet  (sidebar switches to off-canvas)
   576px   phone
   420px   small phone                                                      */


/* ==========================================================================
   2. Base — rendering quality only, no geometry
   ========================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Long references, emails and customer names should never force the page
   sideways. Applied to text containers rather than layout wrappers. */
h1, h2, h3, h4, h5, h6, p, td, th, li, dd, dt, label, .badge, .btn {
    overflow-wrap: break-word;
}

/* Media and embeds are the most common source of horizontal overflow. */
img, svg, video, canvas, iframe {
    max-width: 100%;
}

/* Charts must be allowed to size themselves; Chart.js manages the canvas box
   directly and a max-width alone is safe, but height must stay untouched. */
canvas {
    max-width: 100%;
}


/* ==========================================================================
   3. Accessibility — focus, contrast, motion
   ========================================================================== */

/* A single, clearly visible focus treatment for keyboard users. :focus-visible
   keeps it from appearing on mouse clicks, so it adds no visual noise. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ds-brand-500);
    outline-offset: 2px;
    border-radius: var(--ds-radius-xs);
}

/* Bootstrap removes outlines on .btn; restore an equivalent ring. */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--ds-brand-500);
    outline-offset: 2px;
    box-shadow: var(--ds-focus-ring);
}

/* Skip-link support for pages that choose to add one. */
.ds-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--ds-space-2);
    z-index: var(--ds-z-loader);
    padding: var(--ds-space-2) var(--ds-space-4);
    background: var(--ds-brand-700);
    color: var(--ds-text-inverse);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-base);
}
.ds-skip-link:focus {
    left: var(--ds-space-2);
}

/* Never rely on colour alone: status text keeps its own weight cue. */
.ds-status-text { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   4. Typography harmonisation
   ========================================================================== */

.ds-page-title,
.page-title {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: var(--ds-leading-tight);
}

.ds-page-subtitle,
.page-subtitle {
    font-size: var(--ds-text-base);
    line-height: var(--ds-leading-normal);
}

/* Section label used above card groups and table blocks. */
.ds-section-label {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

/* Figures never jitter while counters animate. */
.ds-num,
.stat-value,
.kpi-value,
.stat-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Truncation helpers for long labels, usernames and references. */
.ds-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================================
   5. Buttons — states only; Bootstrap keeps ownership of colour variants
   ========================================================================== */

.btn {
    --ds-btn-radius: var(--ds-radius-sm);
    border-radius: var(--ds-btn-radius);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease),
                color var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease),
                transform var(--ds-duration-fast) var(--ds-ease);
}

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

/* Disabled must read as unavailable without relying on colour alone. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Icon-only buttons keep an accessible hit area. */
.ds-btn-icon {
    min-width: var(--ds-touch-target);
    min-height: var(--ds-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Destructive actions get a slightly stronger focus ring so the distinction
   from a neutral action survives keyboard-only use. */
.btn-danger:focus-visible,
.btn-outline-danger:focus-visible {
    box-shadow: var(--ds-focus-ring-danger);
}

/*
 * Completed success state. deliveries_simple.php and
 * deliveries_ultra_modern.php swap .btn-create-delivery for
 * .btn-delivery-created once a delivery is created, but neither class was ever
 * styled — the only feedback was the label change. The rule below finishes that
 * state; it pairs a tint with the check icon the script already inserts, so the
 * outcome is not signalled by colour alone.
 */
.btn-delivery-created {
    background-color: var(--ds-success-soft);
    border-color: rgba(18, 153, 107, 0.35);
    color: var(--ds-success-text);
}

/* Groups of actions wrap instead of overflowing on narrow screens. */
.ds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    align-items: center;
}


/* ==========================================================================
   6. Forms
   ========================================================================== */

.form-label {
    font-size: var(--ds-text-base);
    font-weight: 600;
    color: var(--ds-text);
    margin-bottom: var(--ds-space-1);
}

.form-text,
.ds-form-hint {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-muted);
}

.form-control,
.form-select {
    border-radius: var(--ds-radius-sm);
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
    transition: border-color var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease),
                background-color var(--ds-duration) var(--ds-ease);
}

.form-control::placeholder {
    color: var(--ds-text-muted);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--ds-gray-400);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ds-brand-500);
    box-shadow: var(--ds-focus-ring);
    outline: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ds-gray-100);
    color: var(--ds-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* Validation: colour plus an icon-friendly message, never colour alone. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ds-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: var(--ds-focus-ring-danger);
}
.invalid-feedback,
.ds-field-error {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    color: var(--ds-danger-text);
}
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ds-success);
}

.form-check-input {
    border-color: var(--ds-border-strong);
    transition: background-color var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease),
                box-shadow var(--ds-duration) var(--ds-ease);
}
.form-check-input:focus-visible {
    box-shadow: var(--ds-focus-ring);
}
.form-check-input:checked {
    background-color: var(--ds-brand-600);
    border-color: var(--ds-brand-600);
}

/* Checkboxes in dense tables still need a usable target. */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

/* Responsive form grid: one column on phones, opt-in multi-column above. */
.ds-form-grid {
    display: grid;
    gap: var(--ds-space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ds-form-grid > .ds-col-span-2 { grid-column: span 2; }

@media (max-width: 576px) {
    .ds-form-grid { grid-template-columns: 1fr; }
    .ds-form-grid > .ds-col-span-2 { grid-column: span 1; }

    /* 16px inputs stop iOS Safari zooming in on focus. */
    .form-control,
    .form-select {
        font-size: var(--ds-text-md);
    }
}


/* ==========================================================================
   7. Tables — harmonised surfaces, with a scrollable shell on small screens
   ========================================================================== */

.table {
    --bs-table-color: var(--ds-text);
    font-size: var(--ds-text-sm);
    margin-bottom: 0;
}

.table > thead th {
    font-size: var(--ds-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    background-color: var(--ds-gray-50);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-space-3) var(--ds-space-3);
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: var(--ds-space-3);
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table-hover > tbody > tr {
    transition: background-color var(--ds-duration-fast) var(--ds-ease);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--ds-brand-50);
}

/* Sortable headers advertise themselves. */
.table th[data-sort] {
    cursor: pointer;
    user-select: none;
}
.table th[data-sort]:hover {
    color: var(--ds-brand-700);
}

/* Horizontal scrolling shell. Every table in the app is already wrapped in
   .table-responsive, so this needs no markup change. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--ds-radius-md);
}

/* Optional sticky header for long lists; opt in per table. */
.ds-table-sticky > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Numeric columns align right for scanability. */
.ds-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Keep action columns compact and out of the text flow. */
.ds-cell-actions {
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 768px) {
    .table { font-size: var(--ds-text-xs); }
    .table > thead th,
    .table > tbody > tr > td {
        padding: var(--ds-space-2);
    }
}


/* ==========================================================================
   8. Cards, panels and statistic tiles
   ========================================================================== */

/*
 * LIGHT-SURFACE SCOPE
 * -------------------
 * Two pages are dark boards (order_confirmation_dashboard.php and
 * delivery_status_dashboard.php) and style .card / .badge themselves. They
 * carry data-ds-theme="dark" on <html>, and the guard below keeps these light
 * defaults off them.
 *
 * The guard is wrapped in :where() so it contributes no specificity — these
 * rules still weigh exactly as much as a bare `.card`, which keeps the cascade
 * predictable for every other page.
 */
:where(html:not([data-ds-theme="dark"])) .card {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface-raised);
    box-shadow: var(--ds-shadow-xs);
}

:where(html:not([data-ds-theme="dark"])) .card-header {
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-space-4);
    font-weight: 600;
}

:where(html:not([data-ds-theme="dark"])) .card-body {
    padding: var(--ds-space-4);
}

:where(html:not([data-ds-theme="dark"])) .card-footer {
    background: var(--ds-surface-sunken);
    border-top: 1px solid var(--ds-border);
    padding: var(--ds-space-3) var(--ds-space-4);
}

/* Reusable surface for page sections that are not Bootstrap cards. */
.ds-panel {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
}
.ds-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
}
.ds-panel-body { padding: var(--ds-space-4); }

/* Responsive statistic grid available to any page. */
.ds-stat-grid {
    display: grid;
    gap: var(--ds-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}


/* ==========================================================================
   9. Badges, chips and status pills
   ========================================================================== */

/* Guarded for the same reason as .card above. */
:where(html:not([data-ds-theme="dark"])) .badge {
    font-weight: 600;
    font-size: var(--ds-text-xs);
    letter-spacing: 0.01em;
    border-radius: var(--ds-radius-full);
    padding: 0.35em 0.7em;
}

/* Soft status pills that pair an accessible text colour with a tinted
   background, so contrast holds without shouting. */
.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ds-pill-success { background: var(--ds-success-soft); color: var(--ds-success-text); border-color: rgba(18, 153, 107, 0.22); }
.ds-pill-warning { background: var(--ds-warning-soft); color: var(--ds-warning-text); border-color: rgba(217, 139, 10, 0.24); }
.ds-pill-danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text);  border-color: rgba(214, 69, 80, 0.22); }
.ds-pill-info    { background: var(--ds-info-soft);    color: var(--ds-info-text);    border-color: rgba(47, 127, 209, 0.22); }
.ds-pill-neutral { background: var(--ds-gray-100);     color: var(--ds-gray-700);     border-color: var(--ds-border); }


/* ==========================================================================
   10. Modals and drawers — fit and scroll on small screens
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-space-4) var(--ds-space-5);
}

.modal-title {
    font-size: var(--ds-text-lg);
    font-weight: 700;
}

.modal-body { padding: var(--ds-space-5); }

.modal-footer {
    border-top: 1px solid var(--ds-border);
    padding: var(--ds-space-3) var(--ds-space-5);
    gap: var(--ds-space-2);
}

.modal-backdrop.show { opacity: 0.5; }

/* A tall modal must never push its actions off screen: cap the body and let
   it scroll instead of the page. */
@media (max-width: 768px) {
    .modal-dialog {
        margin: var(--ds-space-2);
        max-width: calc(100% - var(--ds-space-4));
    }
    .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--ds-space-4);
    }
    .modal-header,
    .modal-footer {
        padding-left: var(--ds-space-4);
        padding-right: var(--ds-space-4);
    }
    /* Stacked, full-width actions are easier to hit on a phone. */
    .modal-footer > .btn {
        flex: 1 1 auto;
        min-height: var(--ds-touch-target);
    }
}


/* ==========================================================================
   11. Tabs and accordions
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--ds-border);
    gap: var(--ds-space-1);
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ds-text-muted);
    font-weight: 600;
    font-size: var(--ds-text-base);
    padding: var(--ds-space-2) var(--ds-space-3);
    transition: color var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease);
}
.nav-tabs .nav-link:hover { color: var(--ds-brand-700); }
.nav-tabs .nav-link.active {
    color: var(--ds-brand-700);
    border-bottom-color: var(--ds-brand-700);
    background: transparent;
}

.nav-pills .nav-link {
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: var(--ds-text-base);
    color: var(--ds-text-muted);
}
.nav-pills .nav-link.active {
    background-color: var(--ds-brand-700);
    color: var(--ds-text-inverse);
}

.accordion-item {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    margin-bottom: var(--ds-space-2);
    overflow: hidden;
}
.accordion-button {
    font-weight: 600;
    font-size: var(--ds-text-base);
    padding: var(--ds-space-3) var(--ds-space-4);
}
.accordion-button:not(.collapsed) {
    background: var(--ds-brand-50);
    color: var(--ds-brand-700);
    box-shadow: none;
}
.accordion-button:focus-visible {
    box-shadow: var(--ds-focus-ring);
}


/* ==========================================================================
   12. Pagination
   ========================================================================== */

.pagination {
    gap: var(--ds-space-1);
    flex-wrap: wrap;
    margin-bottom: 0;
}

.page-link {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text);
    font-size: var(--ds-text-base);
    font-weight: 500;
    min-width: var(--ds-touch-target);
    min-height: var(--ds-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ds-duration) var(--ds-ease),
                color var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease);
}
.page-link:hover {
    background: var(--ds-brand-50);
    border-color: var(--ds-brand-100);
    color: var(--ds-brand-700);
}
.page-item.active .page-link {
    background: var(--ds-brand-700);
    border-color: var(--ds-brand-700);
    color: var(--ds-text-inverse);
}
.page-item.disabled .page-link {
    color: var(--ds-text-subtle);
    background: var(--ds-gray-50);
    opacity: 0.7;
}

/* Page-level pagination used outside Bootstrap markup. */
.ds-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-3) 0;
}
.ds-pager-info {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-muted);
}


/* ==========================================================================
   13. Alerts, notifications and toasts
   ========================================================================== */

/*
 * Surface only. `display` is deliberately left alone: eleven alerts in the app
 * wrap block-level children, and switching them to flex would lay those out in
 * a row. Alerts that want the icon-beside-text treatment already opt in with
 * Bootstrap's own `d-flex align-items-center` utilities.
 */
.alert {
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-base);
    padding: var(--ds-space-3) var(--ds-space-4);
}

/* Give the opt-in flex alerts a consistent gap. */
.alert.d-flex {
    gap: var(--ds-space-2);
}
.alert-success { background: var(--ds-success-soft); border-color: rgba(18,153,107,.25); color: var(--ds-success-text); }
.alert-warning { background: var(--ds-warning-soft); border-color: rgba(217,139,10,.25); color: var(--ds-warning-text); }
.alert-danger  { background: var(--ds-danger-soft);  border-color: rgba(214,69,80,.25);  color: var(--ds-danger-text); }
.alert-info    { background: var(--ds-info-soft);    border-color: rgba(47,127,209,.25); color: var(--ds-info-text); }

.toast, .notyf__toast {
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
}


/* ==========================================================================
   14. Empty and error states
   ========================================================================== */

.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-10) var(--ds-space-4);
    color: var(--ds-text-muted);
}
.ds-empty-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--ds-gray-400);
    margin-bottom: var(--ds-space-1);
}
.ds-empty-title {
    font-size: var(--ds-text-lg);
    font-weight: 700;
    color: var(--ds-text);
}
.ds-empty-text {
    font-size: var(--ds-text-base);
    max-width: 42ch;
}

.ds-error-state {
    border: 1px solid rgba(214, 69, 80, 0.28);
    background: var(--ds-danger-soft);
    color: var(--ds-danger-text);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-4);
    font-size: var(--ds-text-base);
}


/* ==========================================================================
   15. Scrollbars
   ========================================================================== */

* { scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ds-gray-300);
    border-radius: var(--ds-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ds-gray-400); background-clip: content-box; }


/* ==========================================================================
   16. Dropdowns
   ========================================================================== */

.dropdown-menu {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-lg);
    padding: var(--ds-space-1);
    font-size: var(--ds-text-base);
}
.dropdown-item {
    border-radius: var(--ds-radius-xs);
    padding: var(--ds-space-2) var(--ds-space-3);
    font-weight: 500;
    transition: background-color var(--ds-duration-fast) var(--ds-ease),
                color var(--ds-duration-fast) var(--ds-ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ds-brand-50);
    color: var(--ds-brand-700);
}
.dropdown-divider { border-top-color: var(--ds-border); margin: var(--ds-space-1) 0; }


/* ==========================================================================
   17. Filter and search areas
   ========================================================================== */

.ds-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
}
.ds-toolbar-grow { flex: 1 1 220px; min-width: 0; }

/* Search field with room for a leading icon. */
.ds-search { position: relative; }
.ds-search .form-control { padding-left: 2.25rem; }
.ds-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-subtle);
    pointer-events: none;
}


/* ==========================================================================
   18. Responsive guards
   ========================================================================== */

@media (max-width: 768px) {
    /* Interactive controls reach a comfortable tap size on touch screens. */
    .btn,
    .form-control,
    .form-select,
    .page-link {
        min-height: var(--ds-touch-target);
    }

    /* Dense action groups become full-width stacks rather than overflowing. */
    .ds-actions > .btn { flex: 1 1 auto; }
}

@media (max-width: 576px) {
    .card-body,
    .ds-panel-body,
    .ds-panel-header { padding: var(--ds-space-3); }

    .ds-empty { padding: var(--ds-space-6) var(--ds-space-3); }
}


/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
    .sidebar-ultra,
    .topbar-ultra,
    .sidebar-overlay,
    .floating-toggle,
    .ds-loader-overlay,
    #loadingScreen {
        display: none !important;
    }
    .card, .ds-panel { box-shadow: none; border-color: #ccc; }
}


/* ==========================================================================
   20. Shared page furniture
   --------------------------------------------------------------------------
   The sections above harmonise Bootstrap's components, but the classes that
   actually fill these screens are bespoke names each page redefines. Before
   this section they diverged badly:

     .page-header   8 pages, each with a different saturated gradient
                    (navy→teal, green→dark green, primary, success), 24px
                    radius, 2rem padding, white text
     .stat-card     5 pages: glassmorphism blur on two, shadow-lg on one,
                    shadow-md on another, 2rem padding and 16px radius on a
                    fifth
     .btn-modern    6 pages: white-translucent in some, solid in others
     radii          --radius-xl (12px), --radius-2xl (16px) and
                    --radius-3xl (24px) all in use for the same kind of box

   Harmonising them here is what makes the redesign visible: one calm surface
   treatment, one radius, one shadow, one header style across the whole app.

   Everything is guarded with the dark-theme scope in :where() so the two dark
   boards keep their own styling and specificity stays flat.
   ========================================================================== */

/* -- Page header: from gradient hero to a clean, readable header ----------- */

:where(html:not([data-ds-theme="dark"])) .page-header {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
    color: var(--ds-text);
    padding: var(--ds-space-5) var(--ds-space-6);
    margin-bottom: var(--ds-space-5);
    overflow: visible;
}

/*
 * Each of those headers carried a 200x200 translucent white blob in ::before
 * as a highlight for the gradient. With a white surface it has nothing to
 * highlight, so it is retired rather than left as an invisible painted layer.
 */
:where(html:not([data-ds-theme="dark"])) .page-header::before,
:where(html:not([data-ds-theme="dark"])) .page-header::after {
    display: none;
}

:where(html:not([data-ds-theme="dark"])) .page-header .page-title {
    color: var(--ds-text);
    margin-bottom: var(--ds-space-1);
    gap: var(--ds-space-3);
}

:where(html:not([data-ds-theme="dark"])) .page-header .page-title i {
    color: var(--ds-brand-700);
}

:where(html:not([data-ds-theme="dark"])) .page-header .page-subtitle {
    color: var(--ds-text-muted);
    opacity: 1;
    margin-bottom: 0;
}

/*
 * Bootstrap's white-text and opacity utilities were used inside these headers
 * because the background was dark. dashboard.php uses .text-white-50 and
 * shopify_supervisor.php uses .opacity-75/.opacity-90; remap them so the text
 * stays readable now that the surface is light.
 */
:where(html:not([data-ds-theme="dark"])) .page-header .text-white,
:where(html:not([data-ds-theme="dark"])) .page-header .text-white-50 {
    color: var(--ds-text-muted) !important; /* the utilities themselves are !important */
}

:where(html:not([data-ds-theme="dark"])) .page-header .opacity-75,
:where(html:not([data-ds-theme="dark"])) .page-header .opacity-90 {
    opacity: 1 !important;
    color: var(--ds-text-muted);
}

/* The status pill in the deliveries headers had a white 10% background that
   disappears on a light surface. */
:where(html:not([data-ds-theme="dark"])) .page-header .connection-status {
    background: var(--ds-gray-100);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-full);
}

/* -- Header actions -------------------------------------------------------- */

/*
 * .btn-modern and .btn-outline-modern were styled white-on-gradient inside the
 * header on dashboard.php, deliveries_ultra_modern.php and others. They become
 * a proper primary/secondary pair, which also gives the pages a clear action
 * hierarchy they did not have before.
 */
:where(html:not([data-ds-theme="dark"])) .page-header .btn-modern,
:where(html:not([data-ds-theme="dark"])) .page-header a.btn-modern {
    background: var(--ds-brand-700);
    border: 1px solid var(--ds-brand-700);
    color: var(--ds-text-inverse);
    border-radius: var(--ds-radius-sm);
    padding: 0.5rem 0.875rem;
    font-size: var(--ds-text-base);
    font-weight: 600;
}

:where(html:not([data-ds-theme="dark"])) .page-header .btn-modern:hover {
    background: var(--ds-brand-800);
    border-color: var(--ds-brand-800);
    color: var(--ds-text-inverse);
}

:where(html:not([data-ds-theme="dark"])) .page-header .btn-outline-modern,
:where(html:not([data-ds-theme="dark"])) .page-header a.btn-outline-modern {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-text);
    border-radius: var(--ds-radius-sm);
    padding: 0.5rem 0.875rem;
    font-size: var(--ds-text-base);
    font-weight: 600;
}

:where(html:not([data-ds-theme="dark"])) .page-header .btn-outline-modern:hover {
    background: var(--ds-brand-50);
    border-color: var(--ds-brand-100);
    color: var(--ds-brand-700);
}

/* Consistent button shape outside the header too. */
:where(html:not([data-ds-theme="dark"])) .btn-modern,
:where(html:not([data-ds-theme="dark"])) .btn-outline-modern {
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: var(--ds-text-base);
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    text-decoration: none;
    transition: background-color var(--ds-duration) var(--ds-ease),
                border-color var(--ds-duration) var(--ds-ease),
                color var(--ds-duration) var(--ds-ease);
}

/* -- One surface treatment for every panel -------------------------------- *
 * Replaces per-page glassmorphism, three different radii and two shadow
 * weights with a single calm card. `backdrop-filter: none` removes the blur
 * that agents.php, categories.php and dashboard.php applied — it cost a
 * repaint on every scroll and read as muddy over a light background.
 */
:where(html:not([data-ds-theme="dark"])) .stat-card,
:where(html:not([data-ds-theme="dark"])) .stat-card-ultra,
:where(html:not([data-ds-theme="dark"])) .content-card,
:where(html:not([data-ds-theme="dark"])) .filters-card,
:where(html:not([data-ds-theme="dark"])) .filter-card,
:where(html:not([data-ds-theme="dark"])) .chart-container,
:where(html:not([data-ds-theme="dark"])) .kpi-card {
    background: var(--ds-surface-raised);
    backdrop-filter: none;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
}

/*
 * dashboard.php declares .content-card with !important on background, border,
 * border-radius and box-shadow (16 !important declarations in that page), so
 * matching it is the only way to bring that page in line.
 */
:where(html:not([data-ds-theme="dark"])) .content-card {
    background: var(--ds-surface-raised) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-xs) !important;
}

:where(html:not([data-ds-theme="dark"])) .stat-card,
:where(html:not([data-ds-theme="dark"])) .stat-card-ultra,
:where(html:not([data-ds-theme="dark"])) .filters-card,
:where(html:not([data-ds-theme="dark"])) .filter-card {
    /* 1.5rem/2rem inconsistency across pages collapses to one value. */
    padding: var(--ds-space-5);
}

:where(html:not([data-ds-theme="dark"])) .table-container {
    border-radius: var(--ds-radius-lg);
}

/* Card headers inside those panels. */
:where(html:not([data-ds-theme="dark"])) .card-header-modern,
:where(html:not([data-ds-theme="dark"])) .table-header {
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
}

/* -- Statistic grids and figures ------------------------------------------ *
 * 280px minimum columns left large gaps on laptop widths; 220px fits more
 * cards per row, which suits a dashboard read all day. Gap tightens from
 * 1.5rem to 1rem for the same reason.
 */
:where(html:not([data-ds-theme="dark"])) .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
}

:where(html:not([data-ds-theme="dark"])) .stat-value {
    font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ds-text);
}

:where(html:not([data-ds-theme="dark"])) .stat-label {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
}

/* -- Filter areas --------------------------------------------------------- */

:where(html:not([data-ds-theme="dark"])) .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--ds-space-3);
}

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 768px) {
    :where(html:not([data-ds-theme="dark"])) .page-header {
        padding: var(--ds-space-4);
        margin-bottom: var(--ds-space-4);
    }

    :where(html:not([data-ds-theme="dark"])) .stat-card,
    :where(html:not([data-ds-theme="dark"])) .stat-card-ultra,
    :where(html:not([data-ds-theme="dark"])) .filters-card,
    :where(html:not([data-ds-theme="dark"])) .filter-card {
        padding: var(--ds-space-4);
    }

    :where(html:not([data-ds-theme="dark"])) .stats-grid {
        gap: var(--ds-space-3);
    }

    /* Header actions go full width so they stay easy to tap. */
    :where(html:not([data-ds-theme="dark"])) .page-header .btn-modern,
    :where(html:not([data-ds-theme="dark"])) .page-header .btn-outline-modern {
        min-height: var(--ds-touch-target);
        justify-content: center;
    }
}
