/* ================================================================
 * AIO ERP — css/bundle-foundation.css
 * Auto-generated by: php artisan css:bundle
 * Generated at: 2026-08-12 22:35:36
 * DO NOT EDIT — edit the source files and re-run the command.
 * ================================================================ */

/* === Source: css/tokens.css === */
/* =============================================================================
   BRAND TOKENS (folded from brand-tokens.css — Phase 8.1 / B6)
   Canonical brand primitives; also still loadable via brand-tokens.css alias.
   ============================================================================= */

/* =============================================================================
   AIO ERP — BRAND TOKENS (single source of truth)
   -----------------------------------------------------------------------------
   Part of the AIO Nexus family design system. AIO ERP = the navy node.
   LOAD THIS FIRST in the cascade, before bundle-foundation.css and all themes.
   Everything downstream consumes these via var(--brand-*).

   Sections:
     1. Brand primitives        — raw palette, never used directly in components
     2. Compatibility shims      — bridge legacy --nx-* / --gold during migration
     3. Module → product colors  — KPI tiles, sidebar glyphs, charts
   Spec: docs/brand-theme/SPEC.md §2
   ============================================================================= */

/* ── 1. BRAND PRIMITIVES ──────────────────────────────────────────────────── */
:root {
  /* Core */
  --brand-ink:        #0A1733;
  --brand-ink-2:      #142849;
  --brand-navy:       #1E3A6F;
  --brand-navy-soft:  #2C4F8A;
  --brand-navy-light: #EEF2F9;
  --brand-gold:       #D4A24C;
  --brand-gold-2:     #B8862E;
  --brand-gold-light: #FAF3E2;
  --brand-blue:       var(--brand-navy); /* legacy alias — navy (was #147CBB); do not reintroduce old blue */

  /* Product / status hues */
  --brand-teal:        #0F766E;
  --brand-teal-light:  #E6F4F2;
  --brand-green:       #15803D;
  --brand-green-light: #E8F5EC;
  --brand-violet:      #6D28D9;
  --brand-violet-light:#F1ECFB;
  --brand-violet-2:    #4C1D95;
  --brand-violet-soft: #7C3AED;
  --brand-red:         #DC2626;
  --brand-red-light:   #FCEDED;
  --brand-wa:          #25D366;

  /* Neutrals + text scale */
  --brand-surface: #F6F8FB;
  --brand-paper:   #FCFCFD;
  --brand-line:    #E5E9F0;
  --brand-line-2:  #D5DBE5;
  --brand-t1:      #0A1733;
  --brand-t2:      #3D4D6B;
  --brand-t3:      #7A8AA6;
  --brand-t4:      #A8B3C6;

  /* Type — Inter for UI, JetBrains Mono for code/currency codes. No italic. */
  --brand-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display font — used for headings, KPIs, hero text. Defaults to sans (no display font). */
  --brand-font-display: var(--brand-font-sans);

  /* Semantic leading scale — role-based line-height aliases */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* Motion */
  --brand-ease: cubic-bezier(.4, 0, .2, 1);
  --brand-dur-fast: 150ms;
  --brand-dur:      250ms;
  --brand-dur-slow: 400ms;
}

/* ── 2. COMPATIBILITY SHIMS ───────────────────────────────────────────────────
   Keep existing pages working while callers migrate to --brand-*.
   Removed in PR-7 once nothing references these directly. */
:root {
  --nx-ink:      var(--brand-ink);
  --nx-ink-2:    var(--brand-ink-2);
  --nx-navy:     var(--brand-navy);
  --nx-navy-soft:var(--brand-navy-soft);
  --nx-gold:     var(--brand-gold);
  --nx-gold-dark:var(--brand-gold-2);
  --nx-surface:  var(--brand-surface);
  --nx-paper:    var(--brand-paper);
  --nx-border:   var(--brand-line);
  --nx-shadow:   var(--brand-shadow-lg);
  --nx-r:        var(--brand-r);
  --nx-r-sm:     var(--brand-r-sm);

  /* Legacy theme-layer alias used widely today */
  --gold: var(--brand-gold);
}

/* ── 3. MODULE → PRODUCT COLOR MAP ────────────────────────────────────────────
   Drives KPI tiles, sidebar module glyphs, and chart series per module. */
:root {
  --mod-erp:        var(--brand-navy);
  --mod-remit:      var(--brand-gold);
  --mod-market:     var(--brand-teal);
  --mod-crm:        var(--brand-green);
  --mod-accounting: var(--brand-violet);
  --mod-tax:        var(--brand-red);
  --mod-legal:      var(--brand-teal);
  --mod-marketing:  var(--brand-gold-2);
  --mod-dev:        var(--brand-navy);
  --mod-hosting:    var(--brand-green);
  --mod-wa-api:     var(--brand-wa);
  --mod-loc-api:    var(--brand-red);
}

/* === end folded brand-tokens === */

/* =============================================================================
   AIO ERP — MASTER DESIGN TOKENS  (tokens.css)
   -----------------------------------------------------------------------------
   Single source of truth for every design value in the app.
   Load this file FIRST in the CSS cascade, before all other app stylesheets.
   All other stylesheets should consume these variables via var(--token-name).
   Theme overrides live in premium-themes.css (per [data-theme] selector).
   Dark-mode component rules live in dark-mode.css.
   =============================================================================
   SECTIONS
   0.  Color Primitives      — raw palette, never used directly in components
   1.  Semantic Color Aliases — light-mode defaults
   2.  Elevation / Shadows
   3.  Shape / Radii
   4.  Spacing Scale
   5.  Typography Scale
   6.  Motion / Transitions
   7.  Z-Index Layers
   8.  Form & Input Tokens
   9.  Button Tokens
   10. Card / Panel Tokens
   11. Sidebar Accent Tokens
   12. Dark-Mode Token Overrides
   ============================================================================= */

/* =============================================================================
   0. COLOR PRIMITIVES
   Raw palette values — only referenced by Section 1 semantic aliases.
   Components must never use primitives directly.
   ============================================================================= */
:root {
    /* Brand blues */
    --palette-blue-50:   #eff6ff;
    --palette-blue-100:  #dbeafe;
    --palette-blue-200:  #bfdbfe;
    --palette-blue-400:  #60a5fa;
    --palette-blue-500:  #3b82f6;
    --palette-blue-600:  #2563eb;
    --palette-blue-700:  #1d4ed8;
    --palette-blue-800:  #1e40af;
    --palette-blue-900:  #1e3a8a;

    /* Brand (AIO house blue) */
    --palette-aio-400:   #2C4F8A;
    --palette-aio-500:   #1E3A6F;
    --palette-aio-600:   #0A1733;
    --palette-aio-100:   #e0f2fe;

    /* Slate neutrals */
    --palette-slate-50:  #f8fafc;
    --palette-slate-100: #f1f5f9;
    --palette-slate-200: #e2e8f0;
    --palette-slate-300: #cbd5e1;
    --palette-slate-400: #94a3b8;
    --palette-slate-500: #64748b;
    --palette-slate-600: #475569;
    --palette-slate-700: #334155;
    --palette-slate-800: #1e293b;
    --palette-slate-900: #0f172a;

    /* Semantic status */
    --palette-green-100: #dcfce7;
    --palette-green-500: #22c55e;
    --palette-green-700: #15803d;
    --palette-green-900: #166534;
    --palette-red-100:   #fee2e2;
    --palette-red-400:   #f87171;
    --palette-red-500:   #ef4444;
    --palette-red-700:   #b91c1c;
    --palette-red-900:   #991b1b;
    --palette-yellow-100:#fef3c7;
    --palette-yellow-500:#f59e0b;
    --palette-yellow-700:#b45309;
    --palette-yellow-900:#92400e;
    --palette-orange-500:#fca424;
    --palette-cyan-100:  #cffafe;
    --palette-cyan-400:  #22d3ee;
    --palette-cyan-500:  #06b6d4;

    /* Dark surfaces */
    --palette-dark-50:   #1e2125;
    --palette-dark-100:  #282c30;
    --palette-dark-200:  #1a1d20;
    --palette-dark-900:  #121416;
}


/* =============================================================================
   1. SEMANTIC COLOR ALIASES — LIGHT-MODE DEFAULTS
   These are what components should reference.  Theme overrides (premium-themes.css)
   will replace these per [data-theme] selector with higher specificity.
   ============================================================================= */
:root {
    /* Brand / Primary — navy house color (ADR-001); do not reintroduce #147cbb here */
    --primary:          var(--palette-aio-500);
    --primary-dark:     var(--palette-aio-600);
    --primary-light:    var(--palette-aio-100);
    --primary-color:    var(--palette-aio-500);   /* was palette-blue-600; aligned to navy 2026-07-30 */
    --accent-color:     #7c3aed;

    /* Secondary & Status */
    --secondary:        var(--palette-slate-500);
    --warning:          var(--palette-orange-500);
    --danger:           var(--palette-red-500);
    --success:          var(--palette-green-500);
    --info:             var(--palette-cyan-500);
    --gold:             #D4A24C;   /* AIO Nexus canonical brand gold — aligned 2026-07-15, was drifted (#bca474) */
    --soft-blue:        #8090b4;
    --highlight:        #ff9048;

    /* Backgrounds */
    --bg-body:          #f3f4f6;
    --bg-surface:       #ffffff;
    --bg-sidebar:       var(--palette-slate-800);
    --bg-input:         #ffffff;
    --bg-white:         #ffffff;
    --bg-card:          #ffffff;
    --bg-card-alt:      #f8fbff;
    --surface-raised:   #ffffff;
    --surface-muted:    #eef4ff;

    /* Text */
    --text-main:        #1f2937;
    --text-color:       #1f2937;             /* premium-themes alias */
    --text-muted:       var(--palette-slate-400);
    --text-inverse:     #ffffff;

    /* Borders */
    --border-color:     var(--palette-slate-200);
    --border-focus:     var(--primary);

    /* Badges */
    --badge-success-bg:   var(--palette-green-100);
    --badge-success-text: var(--palette-green-900);
    --badge-danger-bg:    var(--palette-red-100);
    --badge-danger-text:  var(--palette-red-900);
    --badge-warning-bg:   var(--palette-yellow-100);
    --badge-warning-text: var(--palette-yellow-900);
    --badge-info-bg:      var(--palette-blue-100);
    --badge-info-text:    var(--palette-blue-800);
}


/* =============================================================================
   2. ELEVATION / SHADOWS
   ============================================================================= */
:root {
    --shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.05),
                    0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.05),
                    0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
                    0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-xl:    0 32px 80px rgba(15, 23, 42, 0.14);
}


/* =============================================================================
   3. SHAPE / RADII
   ============================================================================= */
:root {
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-2xl:   32px;
    --radius-full:  9999px;

    /* Aliases used by components */
    --border-radius: 18px;      /* premium-themes default card radius */
}


/* =============================================================================
   4. SPACING SCALE
   ============================================================================= */
:root {
    --space-0:   0px;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
}


/* =============================================================================
   5. TYPOGRAPHY SCALE
   ============================================================================= */
:root {
    --font-primary:        var(--brand-font-sans);
    --font-display:        var(--brand-font-display);

    --font-size-xs:        0.75rem;     /* 12px */
    --font-size-sm:        0.875rem;    /* 14px */
    --font-size-md:        1rem;        /* 16px */
    --font-size-lg:        1.125rem;    /* 18px */
    --font-size-xl:        1.25rem;     /* 20px */
    --font-size-2xl:       1.5rem;      /* 24px */
    --font-size-3xl:       1.875rem;    /* 30px */
    --font-size-4xl:       2.25rem;     /* 36px */

    --font-weight-light:   300;
    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semibold:600;
    --font-weight-bold:    700;
    --font-weight-extrabold:800;

    --line-height-none:    1;
    --line-height-tight:   1.25;
    --line-height-snug:    1.375;
    --line-height-normal:  1.6;
    --line-height-relaxed: 1.75;
    --line-height-loose:   2;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide:   0.025em;
    --letter-spacing-wider:  0.05em;

    /* Semantic type scale — role-based aliases (mirrors brand-tokens.css) */
    /* Headings use fluid clamp() for responsive scaling without media queries. */
    --type-display:  clamp(1.75rem, 3vw + 1rem, 2.25rem);
    --type-headline: clamp(1.5rem, 2.5vw + 0.75rem, 1.875rem);
    --type-title:    clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
    --type-subhead:  clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem);
    --type-body:     var(--font-size-md,  1rem);
    --type-small:    var(--font-size-sm,  0.875rem);
    --type-caption:  var(--font-size-xs,  0.75rem);

    /* Semantic leading scale */
    --leading-tight:   var(--line-height-tight);
    --leading-snug:    var(--line-height-snug);
    --leading-body:    var(--line-height-normal);
    --leading-relaxed: var(--line-height-relaxed);
}


/* =============================================================================
   6. MOTION / TRANSITIONS
   ============================================================================= */
:root {
    --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant:  75ms;
    --duration-fast:     150ms;
    --duration-normal:   300ms;
    --duration-slow:     500ms;
    --duration-slower:   700ms;

    --transition-fast:   0.15s var(--easing-standard);
    --transition-smooth: 0.3s  var(--easing-standard);
    --transition-slow:   0.5s  var(--easing-standard);
    --transition-bounce: 0.4s  var(--easing-spring);
}


/* =============================================================================
   7. Z-INDEX LAYERS
   ============================================================================= */
/* Canonical app-wide stacking scale — matches CLAUDE.md's documented "Z-index
   contract" exactly. This is the single source of truth; aio-dropdowns.css's
   former parallel --aio-z-* scale has been retired in favor of these. Below
   1100 are local/component-scoped tiers (a card's own loading overlay, a
   sticky-within-its-container element) that don't participate in the app-wide
   header/modal/dropdown/toast stack. */
:root {
    --z-below:      -1;
    --z-base:        0;
    --z-raised:     10;
    --z-app-header: 1100;
    --z-modal-backdrop: 1150;
    --z-modal:      1200;
    --z-dropdown:   1300;  /* select2, .dropdown-menu, autocomplete */
    --z-picker:     1310;  /* datepicker / daterangepicker */
    --z-toast:      1400;  /* toastr, notification dropdown, loader overlay */
    --z-tooltip:    1500;
    --z-max:        9999;  /* vendor emergency only — see CLAUDE.md */
}


/* =============================================================================
   8. FORM & INPUT TOKENS
   ============================================================================= */
:root {
    --input-height:     2.375rem;  /* 38px — consistent across all form elements */
    --input-radius:     var(--radius-md);
    --input-border:     var(--border-color);
    --input-bg:         var(--bg-input);
    --input-text:       var(--text-main);
    --input-placeholder:var(--text-muted);
    --input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
    --input-disabled-bg:#f1f5f9;
    --input-disabled-text:var(--text-muted);
}


/* =============================================================================
   9. BUTTON TOKENS
   ============================================================================= */
:root {
    --aio-btn-radius:      12px;
    --aio-btn-height:      40px;
    --aio-btn-padding-x:   16px;
    --aio-btn-shadow:      0 10px 24px rgba(15, 23, 42, 0.10);
    --aio-btn-shadow-hover:0 14px 30px rgba(15, 23, 42, 0.16);
    --aio-btn-border:      rgba(148, 163, 184, 0.24);
    --aio-btn-bg-muted:    #ffffff;
    --aio-btn-text-muted:  #334155;
}


/* =============================================================================
   10. CARD / PANEL TOKENS
   ============================================================================= */
:root {
    --card-bg:         var(--bg-surface);
    --card-alt-bg:     var(--bg-card-alt);
    --card-border:     var(--border-color);
    --card-radius:     var(--radius-lg);
    --card-shadow:     none;
    --card-padding:    var(--space-6);

    --panel-header-bg: #f8fbff;
    --panel-header-border: var(--border-color);

    --metric-accent:   linear-gradient(90deg, var(--primary-color, #1E3A6F) 0%, var(--brand-gold, #D4A24C) 100%);
    --widget-icon-bg:  linear-gradient(135deg, var(--primary-dark, #0A1733) 0%, var(--primary-color, #1E3A6F) 100%);

    --header-gradient: linear-gradient(135deg, var(--palette-aio-500, #1E3A6F) 0%, var(--palette-aio-400, #2C4F8A) 100%);
    --sidebar-gradient: var(--bg-sidebar);
    --header-surface:  rgba(255, 255, 255, 0.12);
    --header-surface-hover: rgba(255, 255, 255, 0.2);
    --header-text:     #ffffff;

    --focus-ring:      rgba(37, 99, 235, 0.28);
    --link-color:      var(--palette-aio-500);
    --link-hover-color:var(--palette-aio-600);

    --premium-primary: var(--palette-aio-500);
    --premium-primary-soft: rgba(30, 58, 111, 0.1);
    --premium-accent:  var(--palette-aio-600);
    --premium-bg:      #f4f7fb;
    --premium-surface: #ffffff;
    --premium-border:  #dbe4ef;
    --premium-text:    var(--palette-slate-900);
    --premium-muted:   var(--palette-slate-500);
    --premium-radius-lg: var(--radius-lg);
    --premium-radius-md: var(--radius-md);
    --premium-shadow:  var(--shadow-md);
}


/* =============================================================================
   11. SIDEBAR ACCENT TOKENS
   ============================================================================= */
:root {
    --sb-text:       #cfd6e4;
    --sb-text-hover: #ffffff;
    --sb-accent-1:   #22c1c3;
    --sb-accent-2:   #7b2ff7;
    --sb-accent-3:   #ff4ecd;
    --sb-hover-bg:   rgba(255, 255, 255, 0.04);
    --sb-open-bg:    rgba(255, 255, 255, 0.06);
}


/* =============================================================================
   13. SHADCN/UI v4 CSS VARIABLES  (fully aligned with shadcn/ui 4.1.0)
   All variable names match shadcn's globals.css exactly so any component
   built following shadcn conventions works without remapping.
   ============================================================================= */
:root {
    /* ── Core semantics ─────────────────────────────────────────────────────── */
    --background:               #ffffff;
    --foreground:               #0f172a;
    --card:                     #ffffff;
    /* ── Input group addon — always neutral, never themed ───────────────────── */
    --input-addon-bg:           #f8fafc;   /* light neutral */
    --card-foreground:          #0f172a;
    --popover:                  #ffffff;
    --popover-foreground:       #0f172a;
    --primary:                  #1E3A6F;
    --primary-foreground:       #ffffff;
    --secondary:                #f1f5f9;
    --secondary-foreground:     #1e293b;
    --muted:                    #f1f5f9;
    --muted-foreground:         #64748b;
    --accent:                   #f1f5f9;
    --accent-foreground:        #1e293b;
    --destructive:              #ef4444;
    --destructive-foreground:   #fef2f2;
    --border:                   #e2e8f0;
    --input:                    #e2e8f0;
    --ring:                     #1E3A6F;
    --radius:                   0.625rem;      /* shadcn v4 default */

    /* ── Surface (shadcn v4 new token) ──────────────────────────────────────── */
    --surface:                  #f8fafc;
    --surface-foreground:       #0f172a;

    /* ── Chart tokens (shadcn v4) ───────────────────────────────────────────── */
    --chart-1:                  #3b82f6;
    --chart-2:                  #6366f1;
    --chart-3:                  #8b5cf6;
    --chart-4:                  #ec4899;
    --chart-5:                  #14b8a6;

    /* ── Sidebar token set (shadcn v4 complete) ─────────────────────────────── */
    --sidebar:                  #f8fafc;
    --sidebar-foreground:       #0f172a;
    --sidebar-primary:          #1E3A6F;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent:           #f1f5f9;
    --sidebar-accent-foreground: #1e293b;
    --sidebar-border:           #e2e8f0;

    /* ── Header ─────────────────────────────────────────────────────────────── */
    --header-bg:                #ffffff;
    --header-border:            #e2e8f0;
    --header-text:              #0f172a;
    --header-btn-bg:            transparent;
    --header-btn-bg-hover:      #f1f5f9;
    --header-btn-text:          #475569;
    --header-btn-text-hover:    #0f172a;
    --header-btn-ring:          #e2e8f0;

    /* ── Code block tokens (shadcn v4.1.0) ─────────────────────────────────── */
    --code:                     #f8fafc;
    --code-foreground:          #0f172a;
    --code-highlight:           #f1f5f9;
    --code-number:              #64748b;

    /* ── Selection tokens (shadcn v4.1.0) ───────────────────────────────────── */
    --selection:                #0f172a;
    --selection-foreground:     #ffffff;

    /* ── Legacy sidebar aliases (referenced in shadcn-ui.css) ───────────────── */
    --sidebar-bg:               #0f172a;
    --sidebar-text:             #94a3b8;
    --sidebar-text-hover:       #f1f5f9;
    --sidebar-accent-bg:        rgba(255,255,255,0.06);
    --sidebar-accent-text:      #ffffff;
    --sidebar-logo-border:      rgba(255,255,255,0.08);
}


/* =============================================================================
   12. DARK-MODE TOKEN OVERRIDES
   Applied via both html.dark-mode and body.dark-mode (some selectors need both).
   Component-level dark mode rules remain in dark-mode.css.
   ============================================================================= */
.dark-mode,
html.dark-mode,
html[data-color-mode="dark"] {
    --primary:            #1E3A6F;
    --primary-dark:       #2C4F8A;
    --primary-light:      rgba(30, 58, 111, 0.15);
    --secondary:          #a4a4a4;
    --warning:            #fca424;
    --danger:             #f87171;
    --success:            #4ade80;

    --bg-body:            #121416;
    --bg-surface:         #1e2125;
    --bg-white:           #1e2125;
    --bg-sidebar:         #1a1d20;
    --bg-input:           #282c30;
    --bg-card:            #1e2125;
    --bg-card-alt:        #23272b;
    --surface-raised:     #282c30;
    --surface-muted:      #1a1d20;

    --text-main:          #e1e1e1;
    --text-color:         #e1e1e1;
    --text-muted:         #9ca3af;
    --text-inverse:       #1e2125;

    --border-color:       #3a3f44;
    --border-focus:       #1E3A6F;

    --shadow-sm:          0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.5),
                          0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.5),
                          0 4px 6px -2px rgba(0, 0, 0, 0.3);

    --aio-btn-border:     rgba(148, 163, 184, 0.26);
    --aio-btn-bg-muted:   rgba(30, 41, 59, 0.92);
    --aio-btn-text-muted: #e5e7eb;

    --card-bg:            #1e2125;
    --card-border:        #3a3f44;
    --panel-header-bg:    #23272b;
    --panel-header-border:#3a3f44;

    --premium-bg:         #121416;
    --premium-surface:    #1e2125;
    --premium-border:     #3a3f44;
    --premium-text:       #e1e1e1;
    --premium-muted:      #9ca3af;
    --premium-shadow:     0 4px 6px rgba(0, 0, 0, 0.5);

    --input-bg:           #282c30;
    --input-border:       #3a3f44;
    --input-text:         #e1e1e1;
    --input-placeholder:  #9ca3af;
    --input-disabled-bg:  #1a1d20;

    --input-addon-bg:           #282c30;   /* dark neutral for addons */

    /* ── shadcn v4 complete token set — dark mode ───────────────────────────── */
    --background:               #0f172a;
    --foreground:               #f1f5f9;
    --card:                     #1e2125;
    --card-foreground:          #f1f5f9;
    --popover:                  #1e2125;
    --popover-foreground:       #f1f5f9;
    --primary:                  #2C4F8A;
    --primary-foreground:       #ffffff;
    --secondary:                #1e293b;
    --secondary-foreground:     #f1f5f9;
    --muted:                    #1e293b;
    --muted-foreground:         #94a3b8;
    --accent:                   rgba(255,255,255,0.07);
    --accent-foreground:        #f1f5f9;
    --destructive:              #f87171;
    --destructive-foreground:   #7f1d1d;
    --border:                   rgba(255,255,255,0.10);
    --input:                    rgba(255,255,255,0.15);
    --ring:                     #2C4F8A;

    /* ── Surface (shadcn v4) — dark ─────────────────────────────────────────── */
    --surface:                  #1e2125;
    --surface-foreground:       #94a3b8;

    /* ── Chart tokens — dark (brighter for dark bg) ─────────────────────────── */
    --chart-1:                  #60a5fa;
    --chart-2:                  #818cf8;
    --chart-3:                  #a78bfa;
    --chart-4:                  #f472b6;
    --chart-5:                  #2dd4bf;

    /* ── Code block tokens — dark (shadcn v4.1.0) ──────────────────────────── */
    --code:                     #1e2125;
    --code-foreground:          #94a3b8;
    --code-highlight:           #282c30;
    --code-number:              #64748b;

    /* ── Selection tokens — dark (shadcn v4.1.0) ────────────────────────────── */
    --selection:                #e2e8f0;
    --selection-foreground:     #1e2125;

    /* ── Sidebar token set — dark ───────────────────────────────────────────── */
    --sidebar:                  #1a1d20;
    --sidebar-foreground:       #f1f5f9;
    --sidebar-primary:          #2C4F8A;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent:           rgba(255,255,255,0.06);
    --sidebar-accent-foreground: #f1f5f9;
    --sidebar-border:           rgba(255,255,255,0.08);

    /* ── Header — dark ──────────────────────────────────────────────────────── */
    --header-bg:                #1a1d20;
    --header-border:            #3a3f44;
    --header-text:              #f1f5f9;
    --header-btn-bg:            transparent;
    --header-btn-bg-hover:      rgba(255,255,255,0.06);
    --header-btn-text:          #94a3b8;
    --header-btn-text-hover:    #f1f5f9;
    --header-btn-ring:          #3a3f44;

    color-scheme: dark;
}

/* === Source: css/typography-static.css === */
/* =============================================================================
   AIO ERP — Typography Static Rules  (typography-static.css)
   -----------------------------------------------------------------------------
   Static portions of the typography engine. Extracted from css.blade.php.
   The dynamic parts (--font-primary, font-size px value) remain inline in
   css.blade.php because they depend on per-business PHP settings.
   =============================================================================
   Load order: after tokens.css, before app.css
   ============================================================================= */

/* --- Global Font Inheritance --- */
body,
.content-wrapper {
    font-family:  var(--font-primary) !important;
    font-size:    1rem !important;
}

body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon) {
    font-family: inherit;
}

/* Keep major UI containers tied to the root typography scale */
.main-header,
.main-sidebar,
.content-wrapper,
.main-footer,
.modal,
.dropdown-menu,
.table,
.nav,
.list-group-item,
.pagination,
.select2-container,
.swal-modal,
#toast-container {
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary) !important;
}

/* --- Heading Scale ---
   Uses semantic type tokens so headings scale with the token layer.
   Headings use --font-display (can differ from body font for brand expression).
   !important removed — let the cascade work; utility classes (.aio-text-*)
   can override when needed via their own !important. */
h1, .h1 { font-family: var(--font-display); font-size: var(--type-display);  font-weight: var(--font-weight-bold, 700); }
h2, .h2 { font-family: var(--font-display); font-size: var(--type-headline); font-weight: var(--font-weight-bold, 700); }
h3, .h3 { font-family: var(--font-display); font-size: var(--type-title);    font-weight: var(--font-weight-semibold, 600); }
h4, .h4 { font-family: var(--font-display); font-size: var(--type-subhead);  font-weight: var(--font-weight-semibold, 600); }
h5, .h5 { font-family: var(--font-display); font-size: var(--type-body);     font-weight: var(--font-weight-semibold, 600); }
h6, .h6 { font-family: var(--font-display); font-size: var(--type-small);    font-weight: var(--font-weight-medium, 500); }

/* --- Form Controls & Select2 --- */
.form-control,
.btn,
.input-group-addon,
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-results__option {
    font-size:   1rem !important;
    font-family: var(--font-primary) !important;
}

.select2-container .select2-selection--single,
.input-group-addon,
.form-control {
    height: 2.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.5rem !important;
}

/* --- DataTables --- */
table.table td,
table.table th {
    font-size: 0.95rem !important;
}

/* --- Select native arrow cleanup (prevents double-arrow with Select2) --- */
select.form-control,
select.input-sm,
select.input-lg {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    background-image:   none !important;
    padding-right:      2.4rem !important;
}

select.form-control::-ms-expand,
select.input-sm::-ms-expand,
select.input-lg::-ms-expand {
    display: none;
}

/* --- Select2 custom arrow --- */
.select2-container--default .select2-selection--single {
    background-image: none !important;
    padding-right:    2.2rem !important;
    position:         relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width:      2rem    !important;
    height:     100%    !important;
    right:      0.4rem  !important;
    top:        0       !important;
    background: transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color:  #94a3b8 transparent transparent transparent !important;
    border-style:  solid   !important;
    border-width:  6px 5px 0 5px !important;
    width:  0 !important;
    height: 0 !important;
    margin-left: -5px !important;
    margin-top:  -2px !important;
}

.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow b {
    border-color: transparent transparent #94a3b8 transparent !important;
    border-width: 0 5px 6px 5px !important;
    margin-top:   -3px !important;
}

/* --- Select2 Dark Mode --- */
html.dark-mode select.form-control,
html.dark-mode select.input-sm,
html.dark-mode select.input-lg,
html[data-color-mode="dark"] select.form-control,
html[data-color-mode="dark"] select.input-sm,
html[data-color-mode="dark"] select.input-lg {
    background-image: none !important;
}

html.dark-mode .select2-container--default .select2-selection--single,
html[data-color-mode="dark"] .select2-container--default .select2-selection--single {
    background-color: #1f2937 !important;
    color:            #e5e7eb !important;
    border-color:     rgba(71, 85, 105, 0.95) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-color-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e5e7eb !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-color-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

html.dark-mode .select2-dropdown,
html[data-color-mode="dark"] .select2-dropdown {
    background:   #111827 !important;
    border-color: rgba(71, 85, 105, 0.95) !important;
}

html.dark-mode .select2-search--dropdown .select2-search__field,
html[data-color-mode="dark"] .select2-search--dropdown .select2-search__field {
    background:   #0f172a !important;
    color:        #e5e7eb !important;
    border-color: rgba(71, 85, 105, 0.95) !important;
}

html.dark-mode .select2-results__option,
html[data-color-mode="dark"] .select2-results__option {
    background: transparent !important;
    color:      #e5e7eb     !important;
}

html.dark-mode .select2-results__option--highlighted[aria-selected],
html[data-color-mode="dark"] .select2-results__option--highlighted[aria-selected] {
    background: var(--primary) !important;
    color:      var(--primary-foreground, #ffffff) !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"],
html[data-color-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #1e293b !important;
    color:      #ffffff  !important;
}


/* =============================================================================
   AIO ERP — Semantic Typography Utilities  (.aio-text-*)
   ------------------------------------------------------------------------------
   Role-based utility classes that consume the semantic token layer.
   Use these instead of inline style="font-size:..." so components stay
   theme-aware and maintainable.
   ============================================================================= */

.aio-text-display  { font-size: var(--type-display)   !important; line-height: var(--leading-tight)   !important; }
.aio-text-headline { font-size: var(--type-headline)  !important; line-height: var(--leading-tight)   !important; }
.aio-text-title    { font-size: var(--type-title)     !important; line-height: var(--leading-snug)    !important; }
.aio-text-subhead  { font-size: var(--type-subhead)   !important; line-height: var(--leading-snug)    !important; }
.aio-text-body     { font-size: var(--type-body)      !important; line-height: var(--leading-body)    !important; }
.aio-text-small    { font-size: var(--type-small)     !important; line-height: var(--leading-body)    !important; }
.aio-text-caption  { font-size: var(--type-caption)   !important; line-height: var(--leading-body)    !important; }

/* Weight companions (keep separate so size + weight can be composed) */
.aio-font-light    { font-weight: var(--font-weight-light, 300)    !important; }
.aio-font-normal   { font-weight: var(--font-weight-normal, 400)   !important; }
.aio-font-medium   { font-weight: var(--font-weight-medium, 500)   !important; }
.aio-font-semibold { font-weight: var(--font-weight-semibold, 600) !important; }
.aio-font-bold     { font-weight: var(--font-weight-bold, 700)     !important; }


/* =============================================================================
   AIO ERP — Font Rendering & OpenType Optimizations
   ------------------------------------------------------------------------------
   One-liners that dramatically improve perceived quality:
   - antialiased = crisper text on macOS / Retina
   - optimizeLegibility = better kerning & ligatures
   - font-variant-numeric = tabular figures for financial data
   ============================================================================= */

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

/* Light text on dark backgrounds gets heavier — keep it crisp */
.dark-mode body,
html[data-color-mode="dark"] body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabular numbers: currency amounts, quantities, codes — prevents jitter */
td.numeric,
td.price,
td.qty,
.aio-tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Slashed zero for reference numbers, codes */
.aio-slashed-zero {
    font-variant-numeric: tabular-nums slashed-zero;
}


/* =============================================================================
   AIO ERP — Print Font Quarantine
   ------------------------------------------------------------------------------
   Receipts and print output should NEVER use the user's decorative brand font.
   Thermal printers, PDF generators, and paper need legible, compact fonts.
   This rule overrides --font-primary for all @media print contexts.
   ============================================================================= */

@media print {
    body, .receipt, .invoice, .print_section {
        font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
    }

    /* Force all children to inherit the print-safe font */
    body *,
    .receipt *,
    .invoice *,
    .print_section * {
        font-family: inherit !important;
    }
}

/* === Source: css/app.css === */
/* ==========================================================================
   AIO ERP SOLUTIONS - MAIN STYLESHEET
   Professionalized & Merged | 2025 Edition
   Optimized for Performance & Modern UI (Canvas Mode)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES & BASE SETTINGS
   ========================================================================== */
:root {
    /* --- Brand Identity --- */
    --primary: #1E3A6F;       /* AIO Nexus family accent — Navy */
    --primary-dark: #0A1733;
    --primary-light: #EEF2F9;
    --secondary: #64748b;     /* Modern Slate Grey (Replaces old grey) */
    --warning: #fca424;       /* Orange/Warning */
    --danger: #ef4444;        /* Standardized Red */
    --success: #22c55e;       /* Standardized Green */
    --gold: #D4A24C;      /* AIO Nexus canonical brand gold — aligned 2026-07-15, was drifted (#bca474) */
    --soft-blue: #8090b4;
    --highlight: #ff9048;

    /* --- System Palette --- */
    --bg-body: #f3f4f6;       /* Soft Light Grey */
    --bg-surface: #ffffff;    /* Pure White for Cards */
    --bg-sidebar: #1e293b;    /* Deep Slate */
    --text-main: #1f2937;     /* High Contrast Dark */
    --text-muted: #9ca3af;    /* Medium Grey */
    --border-color: #e2e8f0;  /* Subtle Border */

    /* --- Modern Depth (Soft Shadows) --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

    /* --- Structure --- */
    --radius-sm: 6px;
    --radius-md: 10px;        /* Standard 2025 Radius */
    --radius-lg: 16px;        /* Card Radius */
    
    --input-height: 36px; /* 36px — unified with select2-premium.css */
    
    /* --- Animation --- */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    color-scheme: light !important;
}

/* --- Base Typography & Reset --- */
body {
    font-family: var(--font-primary, var(--brand-font-sans));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.95rem;
    line-height: 1.6;
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    transition: opacity ease-in 0.2s;
}

/* Global Component Backgrounds */
.content-wrapper, .modal-content, .box, .select2-dropdown {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* Link Styling */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--primary-dark); }
::selection { background: var(--primary); color: #fff; }

.action-link, .cursor-pointer { cursor: pointer; }

/* ==========================================================================
   2. UTILITIES & HELPERS
   ========================================================================== */
/* Spacing */
.p-0, .pa-0 { padding: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pb-0 { padding-bottom: 0px !important; }
.p-4 { padding: var(--space-1); }
.p-5-5 { padding: 5px 5px !important; }
.p-10, .padding-10 { padding: var(--space-3) !important; }
.padding-5 { padding: 5px !important; }

.m-2 { margin: 2px !important; }
.m-4 { margin: var(--space-1); }
.m-5 { margin: 5px; }
.m-8 { margin: var(--space-2); }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: var(--space-3); }
.mt-15 { margin-top: var(--space-4); }
.mt-56 { margin-top: 56px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: var(--space-3); }
.mb-12 { margin-bottom: var(--space-3) !important; }
.mb-20, .margin-bottom-20 { margin-bottom: var(--space-5) !important; }
.mb-40 { margin-bottom: var(--space-10) !important; }
.mr-8 { margin-right: var(--space-2) !important; }
.margin-left-10 { margin-left: var(--space-3); }
.spacer { margin-top: var(--space-5); }

/* Text & Alignment */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.f-left { float: left; }
.f-right { float: right; }
.v-center { vertical-align: middle !important; }

.text-bold { font-weight: 700; }
.text-white, .color-white { color: white !important; }
.text-muted-imp { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.color-555 { color: #555555 !important; }
.ws-nowrap { white-space: nowrap; }
.word-wrap { word-wrap: break-word !important; }

/* Financial Indicators */
.text-payable { color: #dc2626 !important; font-weight: 600; }
.text-receivable { color: var(--primary) !important; font-weight: 600; }

/* Font Sizes */
.font-17 { font-size: 17px !important; }
.font-23 { font-size: 23px !important; }
.font-30 { font-size: 30px !important; }
.fs-10 { font-size: 10px; }

/* Sizing */
.width-40 { width: 40% !important; }
.width-50 { width: 50% !important; }
.width-60 { width: 60% !important; }
.width-100 { width: 100% !important; }

/* Colors & Backgrounds */
.bg-white { background-color: var(--bg-white); }
.bg-light-gray { background-color: #f3f4f6 !important; }
.bg-lightgray { background-color: #F0EDED !important; }
.bg-danger { background-color: #fecaca !important; color: #991b1b !important; }
.bg-info { background-color: var(--primary) !important; } 
.bg-info > a { color: #FFFFFF !important; }
.bg-manufacturing { background-color: var(--highlight); }
.bg-aqua-lite { background-color: #7FFFD4; }
.bg-woocommerce { background-color: #9E458B !important; }
.bg-light-green { background-color: #98D973 !important; color: #fff !important; }
.bg-transparent { background-color: transparent !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.jquery-top-scrollbar { height: 6px !important; }
.scroll-top-bottom { width: 100%; overflow: scroll; }

/* Scroll to Top */
.scrolltop {
    display: none; width: 100%; margin: 0 auto; position: fixed; bottom: 20px; right: 10px; z-index: 99;
}
.scroll {
    position: absolute; right: 20px; bottom: 20px;
    background: rgba(30, 58, 111, 0.8); color: #fff;
    padding: 10px 14px; text-align: center; cursor: pointer;
    transition: 0.3s; border-radius: 50%; box-shadow: var(--shadow-md);
}
.scroll:hover { background: var(--primary); transform: translateY(-2px); }
.scroll .fas { font-size: 20px; margin-top: 0; }

/* ==========================================================================
   3. LAYOUT & ARCHITECTURE
   ========================================================================== */
/* Header & Sidebar */
.main-header .sidebar-toggle:before { content: "" !important; }
.main-header .navbar {
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

body .main-sidebar {
    background-color: var(--bg-sidebar) !important;
    background-image: var(--sidebar-gradient, none) !important;
    min-height: 100vh !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: 50px;
}

/* Skin Overrides */
.skin-black .main-header, .skin-black-light .main-header { color: #525f7f !important; }
.skin-black .main-header .navbar .nav .open>a,
.skin-black .main-header .navbar .nav>li>a:hover,
.skin-black .main-header .navbar > .sidebar-toggle:hover { color: #999 !important; }

/* User Menu */
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: var(--shadow-md);
    height: auto; width: 100%; max-height: 120px;
}
html[dir="rtl"] #main_profile_dropdown > ul.tw-absolute { left: 0 !important; right: auto !important; }

.dropdown-menu > li > a > i,
.dropdown-menu > li > a > svg,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .fas {
    margin-right: var(--space-3) !important; min-width: 20px; text-align: center; vertical-align: middle; color: var(--primary);
}
.dropdown-menu > li > a:hover { background-color: #f5f5f5; color: var(--primary-dark); }

/* Notifications */
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu { max-height: 350px; }
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a { white-space: normal; }

/* Treeview Navigation */
.treeview-menu i { display: none !important; }
.treeview-menu a {
    padding-left: var(--space-5) !important; font-size: 13px !important; opacity: 0.8; transition: opacity 0.2s;
}
.treeview-menu a:hover { opacity: 1; }
.treeview-menu a::before { content: "• "; margin-right: 5px; color: var(--primary); font-weight: bold; }

/* Login Page */
.left-col {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.76), rgba(51, 51, 51, 0.32)), url(../img/home-bg.jpg);
    text-align: center; background-size: cover; background-position: center;
}
.right-col { background: linear-gradient(135deg, var(--primary), var(--soft-blue)); height: 100%; }
.login-header { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.login-header a { color: #fff; }

/* Overlays */
.overlay {
    width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8);
    position: fixed; top: 0; left: 0; display: none; z-index: 20;
}
.small-view-side-active {
    display: flex !important; flex-direction: column !important;
    z-index: 1001 !important; position: fixed !important; top: 0; left: 0;
    width: 260px !important; height: 100vh !important;
    background-color: #fff !important; transition: all 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline { width: max-content; margin: 2px; }
#scrollable-container { position: relative; }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */
/* Containers */
.modal-xl { width: 90%; margin-left: auto !important; margin-right: auto !important; }
.modal-content, .box, .info-box, .product_box { 
    border: none !important; border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm); transition: transform 0.2s;
}

/* ADD THIS TO FIX BLEEDING CORNERS */
.modal-content {
    overflow: hidden !important;
}

/* Buttons (Standard) */
.btn-primary, .btn-info, .tw-dw-btn-primary {
    background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important;
}
.btn-success { background-color: #28a745 !important; border-color: #28a745 !important; color: #fff !important; }
.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }

/* Button Hover Effects */
.btn-primary:hover, .btn-info:hover { background-color: var(--primary-dark) !important; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-success:hover { background-color: #218838 !important; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-danger:hover { background-color: #b91c1c !important; box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Icons in Buttons */
.btn-primary i, .btn-info i, .tw-dw-btn-primary i,
.btn-success i, .btn-danger i, .btn-warning i { color: #fff !important; }

/* Special Button Classes */
.btn-big { padding: 10px 30px; font-size: 18px; }
.btn-login { padding: 6px 52px !important; }

/* Table Icon Buttons (No Box Style) */
#commission_rules_table .btn-xs, #commission_tiers_table .btn-xs {
    background-color: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important; outline: none !important;
}
#commission_rules_table .btn-xs:hover, #commission_tiers_table .btn-xs:hover {
    background-color: transparent !important; box-shadow: none !important; transform: scale(1.2);
}
#commission_rules_table thead .btn-primary i { color: var(--primary) !important; font-size: 18px; }
#commission_tiers_table thead .btn-success i { color: #28a745 !important; font-size: 18px; }
#commission_rules_table tbody .btn-danger i, #commission_tiers_table tbody .btn-danger i { color: #dc2626 !important; font-size: 18px; }

/* Tabs */
.nav-tabs { border-bottom: 2px solid #e5e7eb; }
.nav-tabs>li>a {
    border: none; color: var(--text-muted); font-weight: 600; padding: var(--space-3) var(--space-5); font-size: 16px; 
}
.nav-tabs>li.active>a {
    border: none; border-bottom: 2px solid var(--primary); color: var(--primary); background: transparent;
}
.pos-tab .pos-tab-content { display: none; }
.pos-tab .pos-tab-content.active { display: block; }
div.pos-tab-container {
    background-color: #ffffff; padding: 0 !important; border-radius: var(--radius-md);
    border: 1px solid #ddd; margin-bottom: 28px; box-shadow: var(--shadow-md);
}
div.pos-tab-menu div.list-group>a.active {
    background: linear-gradient(to right, var(--primary), var(--soft-blue)); color: #ffffff;
}

/* ==========================================================================
   SWEETALERT2 PROFESSIONAL BRANDING (v11)
   Solid Modal + Frosted Glass Backdrop + Brand Font
   ========================================================================== */

/* 1. The Modal Container: Solid Background & Rounded Corners */
.swal2-popup.aio-standard-modal {
    background-color: var(--bg-body) !important; /* Solid Light Grey */
    border-radius: 20px !important;            /* Force 20px rounded corners */
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
    padding: 2rem 1rem !important;
}

/* 2. Global Brand Font Inheritance */
.swal2-title, 
.swal2-html-container, 
.swal2-confirm, 
.swal2-cancel {
    font-family: var(--font-primary, var(--brand-font-sans)) !important;
}

.swal2-title {
    color: var(--text-main) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* 3. Dark Mode Support for Solid Modal */
html.dark-mode .swal2-popup.aio-standard-modal {
    background-color: #121416 !important; /* Matches app.blade dark-mode body */
    color: #ffffff !important;
}

html.dark-mode .swal2-title,
html.dark-mode .swal2-html-container {
    color: #ffffff !important;
}

/* 4. Branded Action Buttons */
.swal2-styled.swal2-confirm {
    background-color: var(--primary) !important; /* #1E3A6F */
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-6) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--secondary) !important; /* #64748b */
    border-radius: var(--radius-md) !important;
    color: white !important;
}

/* 5. Process Spinner Branding */
.swal2-loader {
    border-color: var(--primary) transparent var(--primary) transparent !important;
}

/* 6. Frosted Glass Backdrop (Applied to Background Only) */
.swal2-backdrop-show {
    backdrop-filter: blur(10px) saturate(180%) !important; /* Frost Effect */
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Dark Mode Frost Adjustment */
html.dark-mode .swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   SWEETALERT2 MOBILE FIX (Robust Centering)
   ========================================================================== */
@media (max-width: 550px) {
    .swal2-popup.aio-standard-modal {
        width: 92% !important;
        margin: 0 auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
    }
}
/* ==========================================================================
   5. FORMS & INPUTS
   ========================================================================== */
/* Global Input Styling */
.form-control,
.input-group-addon,
.input-group-btn .btn,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.btn:not(.btn-file):not(.btn-link),
.button, .dt-button {
    border-radius: var(--radius-md) !important;
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Height Enforcement — single source of truth: var(--input-height) */
.input-group-addon,
.input-group-btn .btn,
.form-control:not(.file-caption):not(textarea):not(.select2-search__field) {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    line-height: 1.5 !important;
}
textarea.form-control { display: block !important; height: auto !important; min-height: 80px !important; }
textarea.form-control[style*="display: none"] { display: none !important; }

/* Focus States */
.form-control:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.input-group-btn .btn:focus,
input[type="file"]:focus, .upload-element:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 111, 0.15) !important;
    outline: none !important;
    z-index: 10;
}

/* Validation States */
.has-error .form-control,
.has-error .select2-selection,
.has-error .select2-selection--single,
.has-error .select2-selection--multiple,
.form-control.is-invalid,
.is-invalid .form-control {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.has-error .help-block,
.has-error .control-label,
.invalid-feedback {
    color: #dc2626 !important;
    font-size: 12px !important;
    display: block;
}
.has-success .form-control,
.form-control.is-valid,
.is-valid .form-control {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}

/* Inline Buttons — match input height in form, filter, and DataTables header contexts */
.form-inline .btn:not(.btn-lg):not(.btn-xs),
.datatable-header-flex .btn:not(.btn-lg):not(.btn-xs),
.filter-box .btn:not(.btn-lg):not(.btn-xs) {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Input Groups (Squared Joints Logic) */
.input-group { display: table !important; width: 100% !important; border-collapse: separate; }
.input-group-addon, .input-group-btn, .input-group .form-control { display: table-cell !important; vertical-align: middle; }
.input-group .select2-container { display: table-cell !important; width: 100% !important; float: none !important; vertical-align: middle; }
.input-group-btn { width: 1% !important; white-space: nowrap; }

/* Input Addons */
.input-group-addon {
    box-shadow: none !important;
    background-color: var(--input-addon-bg, #f8fafc) !important;
    font-weight: 700 !important;
    color: #555;
    min-width: 40px;
    text-align: center;
}
.input-group-addon:not(:first-child) { border-left: 0 !important; }
.input-group .form-control:not(:first-child) { margin-left: -1px; z-index: 2; }
/* btn-default flanking buttons (icon-only) should match the addon tinted background */
.input-group-btn > .btn.btn-default {
    background-color: var(--input-addon-bg, #f8fafc) !important;
}

/* Squared Corners for Groups */
/* Left Elements */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .tw-dw-btn,
.input-group .select2-container:first-child .select2-selection--single,
.input-group .select2-container:first-child .select2-selection--multiple {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Right Elements */
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .tw-dw-btn,
.input-group .select2-container:last-child .select2-selection--single,
.input-group .select2-container:last-child .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}
/* Middle Elements */
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) > .btn,
.input-group-btn:not(:first-child):not(:last-child) > .tw-dw-btn,
.input-group .select2-container:not(:first-child):not(:last-child) .select2-selection {
    border-radius: 0 !important;
}
/* Select2 inside input-group-btn — inherit the btn corner rules */
.input-group-btn:last-child > .select2-container .select2-selection--single,
.input-group-btn:last-child > .select2-container .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}
.input-group-btn:first-child > .select2-container .select2-selection--single,
.input-group-btn:first-child > .select2-container .select2-selection--multiple {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Select2 after Addon Fix */
.input-group-addon + .select2-container--default .select2-selection--single,
.input-group-addon + .select2-container--default .select2-selection--multiple,
.input-group-addon + .select2-container .select2-selection {
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important;
}

/* Select2 Customization — unified z-index via aio-dropdowns.css */
.select2-container--open { z-index: 1300 !important; }

/* File Inputs */
.file-input { width: 100%; position: relative; display: table; }
.file-input .file-caption { height: var(--input-height) !important; min-height: var(--input-height) !important; margin-bottom: 0 !important; }
.file-input .btn-file {
    height: var(--input-height) !important; min-height: var(--input-height) !important; line-height: 24px !important;
    padding: 6px !important; background-color: #eee !important; border: 1px solid #d1d5db !important;
    color: #333 !important; margin-bottom: 0 !important;
}
.file-caption-name { padding-left: var(--space-3) !important; line-height: 1.5 !important; text-align: left !important; color: #555 !important; }

/* Native File Input Styling */
input[type="file"], .upload-element {
    width: 100% !important; height: var(--input-height) !important; min-height: var(--input-height) !important;
    border-radius: var(--radius-md) !important; background-color: var(--bg-white) !important;
    color: var(--text-main) !important; border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important; padding: 6px 10px !important; overflow: hidden;
}
input[type="file"]::file-selector-button, .upload-element::file-selector-button,
input[type="file"]::-webkit-file-upload-button, .upload-element::-webkit-file-upload-button {
    height: calc(var(--input-height) - 2px) !important; margin: -6px 10px -6px -10px;
    padding: 0 var(--space-3) !important; border: 0 !important; border-right: 1px solid var(--border-color) !important;
    background: #eee !important; color: #333 !important; cursor: pointer; transition: background-color 0.15s ease-in-out;
}
input[type="file"]:hover::file-selector-button, .upload-element:hover::file-selector-button { background-color: #e5e7eb !important; }

/* Input Group Height Sync — select2 handled by select2-premium.css */
.input-group > .select2-container,
.input-group > .select2-container--default,
.input-group > .select2-container--classic {
    height: auto !important;
    min-height: auto !important;
}
.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple,
.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .form-control,
.input-group > .input-group-btn > .select2-container .select2-selection--single,
.input-group > .input-group-btn > .select2-container .select2-selection--multiple {
    height: 100% !important;
    min-height: var(--input-height) !important;
}
.input-group > .input-group-btn > .form-control,
.input-group > .input-group-btn > .select2-container .select2-selection--single,
.input-group > .input-group-btn > .select2-container .select2-selection--multiple {
    border-left: 0 !important;
}
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: 0 !important;
}

/* Stretch multi-line and upload groups so addons/buttons match field height */
.input-group:has(textarea.form-control),
.input-group:has(.file-input),
.input-group:has(input[type="file"]) {
    display: flex !important;
    align-items: stretch !important;
}
.input-group:has(textarea.form-control) > .input-group-addon,
.input-group:has(.file-input) > .input-group-addon,
.input-group:has(input[type="file"]) > .input-group-addon,
.input-group:has(textarea.form-control) > .input-group-btn,
.input-group:has(.file-input) > .input-group-btn,
.input-group:has(input[type="file"]) > .input-group-btn {
    display: flex !important;
    align-items: stretch !important;
}
.input-group:has(textarea.form-control) > .input-group-addon,
.input-group:has(.file-input) > .input-group-addon,
.input-group:has(input[type="file"]) > .input-group-addon {
    height: auto !important;
    min-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}
.input-group:has(textarea.form-control) > textarea.form-control,
.input-group:has(.file-input) > .file-input,
.input-group:has(input[type="file"]) > input[type="file"] {
    flex: 1 1 auto !important;
    width: 1% !important;
}

/* File input caption/button alignment */
.file-input {
    display: flex !important;
    align-items: stretch !important;
}
.file-input .file-caption,
.file-input .btn-file {
    display: flex !important;
    align-items: center !important;
}
.file-input .btn-file {
    justify-content: center !important;
}

/* Checkboxes & Radios (Square Blue Style) */
.input-icheck[type="checkbox"], .input-icheck[type="radio"] { display: none !important; }
.icheckbox_square-blue, .iradio_square-blue {
    background: #ffffff !important; border: 1px solid #d1d5db !important;
    border-radius: 4px !important; width: 18px !important; height: 18px !important;
    display: inline-block !important; vertical-align: middle; margin-right: var(--space-2) !important;
    position: relative; transition: all 0.2s ease; cursor: pointer;
}
.iradio_square-blue { border-radius: 50% !important; }
.icheckbox_square-blue.checked { border-color: var(--primary) !important; background-color: var(--primary) !important; }
.icheckbox_square-blue.checked::after {
    content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #ffffff; font-size: 12px; font-weight: bold;
}
.iradio_square-blue.checked { border-color: var(--primary) !important; }
.iradio_square-blue.checked::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; background: var(--primary); border-radius: 50%;
}
.icheckbox_square-blue .iCheck-helper, .iradio_square-blue .iCheck-helper {
    position: absolute !important; top: -20% !important; left: -20% !important;
    width: 140% !important; height: 140% !important; display: block !important;
    opacity: 0 !important; cursor: pointer !important; z-index: 5; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.checkbox label, .radio label { cursor: pointer !important; display: flex !important; align-items: center !important; width: 100% !important; padding: var(--space-2) var(--space-1) !important; }

/* Password Toggle */
.form-group .tw-relative input#password.form-control { padding-right: 2.5rem !important; }
.form-group .tw-relative button#togglePassword {
    position: absolute !important; top: 50% !important; right: 0 !important;
    transform: translateY(-50%) !important; border: none !important; background: transparent !important;
    padding: 0 0.75rem !important; height: 100%; z-index: 5;
}

/* ==========================================================================
   6. TABLES & DATATABLES
   ========================================================================== */

/* Wrapper & Layout */
.dataTables_wrapper { 
    border-radius: 6px !important; /* UPDATED: Reduced Radius */
    background: #fff; padding: var(--space-4);
    box-shadow: var(--shadow-sm); margin-top: var(--space-3); overflow: visible !important; width: 100% !important;
}

/* Table Layout: Separate borders for rounding, transparent background */
table, .table, .dataTable { 
    width: 100% !important; 
    max-width: 100% !important; 
    border-collapse: separate !important; 
    border-spacing: 0 !important; 
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 0 !important; /* CRITICAL: Ensures no margin pushes footer down */
}
.table-responsive { width: 100%; border: none !important; }

/* Background Fix: Remove backgrounds from parents to prevent "boxed" corners */
.table thead, .table tfoot, .table tr, .dataTables_scrollHead, .dataTables_scrollFoot {
    background-color: transparent !important;
    border: none !important;
}

/* Headers & Cells */
.table thead th, .table th, th, .table tfoot th, .table tfoot td, .dataTables_wrapper tfoot th, .dataTables_wrapper tfoot td {
    font-weight: bold !important; font-family: var(--font-primary) !important; color: #1f2937 !important;
    text-transform: none !important; font-size: 13px; 
    background-color: #e0e2e5 !important; 
    border-color: #d1d5db !important; border-bottom: 2px solid #a3a3a3 !important; padding: var(--space-3) var(--space-3) !important;
    background-clip: padding-box !important;
}

/* --- ROUNDED CORNERS (UPDATED TO 6px) --- */

/* Top Left & Right (Header) */
.table thead tr:first-child th:first-child { 
    border-top-left-radius: 6px !important; 
    border-left: 1px solid #d1d5db !important; 
}
.table thead tr:first-child th:last-child { 
    border-top-right-radius: 6px !important; 
    border-right: 1px solid #d1d5db !important;
}

/* Bottom Left & Right (Footer) */
.table tfoot tr:last-child th:first-child, 
.table tfoot tr:last-child td:first-child { 
    border-bottom-left-radius: 6px !important; 
    border-left: 1px solid #d1d5db !important;
}
.table tfoot tr:last-child th:last-child, 
.table tfoot tr:last-child td:last-child { 
    border-bottom-right-radius: 6px !important; 
    border-right: 1px solid #d1d5db !important;
}

/* Standard Borders */
.table tfoot th, .table tfoot td { border-top: 2px solid #a3a3a3 !important; border-bottom: none !important; }
.table tbody td { padding: var(--space-3) var(--space-3) !important; vertical-align: middle; border-color: #f3f4f6 !important; font-size: 14px; }

/* Interactive Rows */
table.dataTable tbody tr { cursor: pointer; }
table.dataTable tbody>tr.selected, table.dataTable tbody tr:hover { background-color: #e0f2fe !important; }

/* --- DataTables Controls --- */
.datatable-header-flex { 
    display: flex !important; flex-direction: column !important; align-items: center !important; 
    justify-content: center !important; gap: 15px; padding-bottom: var(--space-4); width: 100% !important;
}
@media (min-width: 768px) {
    .datatable-header-flex { flex-direction: row !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
    .dt-buttons { flex: 1 !important; display: flex !important; justify-content: center !important; }
    div.dataTables_wrapper .dataTables_filter { flex: 0 0 auto !important; text-align: right !important; display: flex !important; justify-content: flex-end !important; }
    div.dataTables_wrapper .dataTables_length { flex: 0 0 auto !important; }
}
.dt-buttons { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 5px; }
div.dataTables_wrapper .dataTables_length label, div.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important; align-items: center !important; margin: 0 !important; 
    font-weight: normal !important; white-space: nowrap !important; gap: 8px;
}
div.dataTables_wrapper .dataTables_length select, div.dataTables_wrapper .dataTables_filter input[type="search"] {
    height: var(--input-height) !important; min-height: var(--input-height) !important; line-height: 1.5 !important; padding: 0 var(--space-3) !important;
    font-size: 13px !important; border-radius: var(--radius-sm) !important; border: 1px solid #d1d5db !important; background-color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important; color: white !important; border: none !important; border-radius: 4px; box-shadow: var(--shadow-sm);
}
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc {
    background-color: #e5e7eb !important; color: var(--primary) !important; background-position: right 10px center !important;
}

/* --- SCROLL GAP FIX (UPDATED) --- */
.dataTables_scrollBody { 
    border-bottom: none !important; 
    margin-bottom: 0 !important; /* Removes gap from container */
    padding-bottom: 0 !important;
}
.dataTables_scrollBody table {
    margin-bottom: 0 !important; /* Removes gap from table element itself */
}
.dataTables_scrollFoot { 
    background-color: transparent !important;
    margin-top: 0 !important; /* Ensures footer sits tight against body */
    border-top: none !important;
}
.dataTables_scrollFootInner, .dataTables_scrollFootInner table { 
    margin-bottom: 0 !important; padding-bottom: 0 !important; 
}

/* Processing Spinner */
.dataTables_wrapper .dataTables_processing {
    background: transparent !important; border: none !important; box-shadow: none !important;
    position: absolute !important; top: 50% !important; left: 50% !important; 
    transform: translate(-50%, -50%) !important; width: 100%; max-width: 200px; z-index: 200 !important;
}
.table-spinner {
    width: 40px; height: 40px; border: 4px solid rgba(30, 58, 111, 0.1);
    border-left-color: var(--primary); border-radius: 50%; animation: table-spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes table-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Scrollable Tables: Flatten connections */
.dataTables_scrollHead .table-bordered { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom: none !important; }
.dataTables_scrollBody .table-bordered { border-radius: 0 !important; border-top: none !important; border-bottom: none !important; }
.dataTables_scrollFoot .table-bordered { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; }
.dataTables_scrollBody thead { visibility: collapse !important; height: 0 !important; overflow: hidden !important; }

/* Modal Tables */
.modal-xl .table:not(.no-border), .view_modal .table:not(.no-border) {
    border-radius: 6px !important; border-collapse: separate !important; border-spacing: 0 !important;
    overflow: hidden !important; border: 1px solid #d1d5db !important;
}
.modal-xl .table:not(.no-border) > thead > tr > th, .modal-xl .table:not(.no-border) > tbody > tr > td {
    border-top: 1px solid #d1d5db !important; border-bottom: none !important; border-left: none !important; border-right: none !important;
}
.modal-xl .table:not(.no-border) > tbody > tr > th + td, .view_modal .table:not(.no-border) > tbody > tr > th + td {
    text-align: center !important; vertical-align: middle !important;
}

/* ==========================================================================
   7. MODULES: POS & PRODUCTS
   ========================================================================== */
.pos-form-row { margin-left: -5px !important; margin-right: -5px !important; }
.pos-form-row > [class*='col-'] { padding-left: 5px !important; padding-right: 5px !important; }

/* Layout Grid */
.pos_product_div {
    overflow-y: scroll !important; overflow-x: auto !important; height: calc(100vh - 400px) !important; 
    background-color: #f1f5f9; min-height: 300px; border-radius: var(--radius-md); padding: 5px; flex-grow: 1;
}
.pos_product_div table tbody tr, #pos_table tbody tr { background-color: var(--bg-white) !important; }
#product_list_body {
    height: calc(100vh - 220px) !important; overflow-y: scroll; overflow-x: hidden;
    padding-bottom: 120px; padding-right: 5px; flex-grow: 1;
}

/* Product Cards */
.product_box {
    width: 100%; margin-bottom: var(--space-3); text-align: center; cursor: pointer;
    font-weight: 600; background-color: #fff; padding: var(--space-3); border: 1px solid transparent !important; overflow: hidden;
}
.product_box:hover { border-color: var(--primary) !important; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product_box .image-container { height: 50px; margin: auto; width: 100%; margin-bottom: var(--space-1); }
.product_box .image-container img { height: 100%; width: 100%; border-radius: 8px; object-fit: cover; }
.product_box .text {
    width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 14px; font-size: 13px; margin-top: var(--space-2);
}
.discount-badge { position: absolute; top: 6px; right: 10px; font-size: 18px; padding: 7px; }

/* POS Footer & Totals */
.pos-form-actions {
    width: 100%; padding: var(--space-3); position: fixed; bottom: 0; z-index: 300; display: flex;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05); box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
.pos-express-btn { font-size: 23px !important; height: 73px !important; white-space: normal; font-weight: 700; }
.pos-total span.number { font-size: 26px; font-weight: bolder; }
.col-fit-content { width: 1% !important; white-space: nowrap !important; padding-right: var(--space-4) !important; }
.pos-qty-wrapper { display: flex; flex-direction: column; width: 100%; min-width: 110px; }
.pos-qty-wrapper .select2-container { width: 100% !important; min-width: 100% !important; }

/* Product Search (jQuery UI Autocomplete) */
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus {
    background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active *, .ui-autocomplete .ui-state-focus * { color: #ffffff !important; }
.ui-autocomplete .ui-state-active div[style*="background"] { background-color: rgba(255,255,255,0.2) !important; }

/* ==========================================================================
   8. PLUGINS & WIDGETS
   ========================================================================== */
/* ==========================================================================
   9. PAGE LOADER (GLASS EFFECT - CLEAN)
   ========================================================================== */
#page-loader {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* GLASS BACKGROUND */
    /* Semi-transparent white to show colors behind */
    background-color: rgba(255, 255, 255, 0.5) !important; 

    /* Strong Blur for the "Frosted Glass" look */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Was 99999 — CLAUDE.md groups full-page loader overlays with
       toast/notification at the 1400-1500 tier. Fixed as part of B12
       z-index cleanup. */
    z-index: var(--z-toast, 1400);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
}

.loader-content {
    /* REMOVED: Background box, shadows, and borders */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    
    /* LAYOUT: Keep items stacked and centered */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

.loader-spinner {
    border: 3px solid rgba(30, 58, 111, 0.2); 
    border-left-color: var(--primary);
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    animation: spin-animation 1s linear infinite; 
    margin-bottom: var(--space-5);
}

@keyframes spin-animation { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

body:not([unresolved]) #page-loader { 
    opacity: 0; 
    pointer-events: none; 
}
/* ==========================================================================
   MODERN DATEPICKER & DATERANGEPICKER (LIGHT MODE)
   ========================================================================== */
/* z-index here is superseded by aio-dropdowns.css's var(--z-picker) rule
   (loaded later in bundle-shell.css, same picker layer) — normalized from a
   stale 10000 legacy value to the same token rather than leaving a
   misleading higher number (B12 z-index cleanup). */
.datepicker { z-index: var(--z-picker, 1310) !important; }

/* Universal Dropdown Styling */
.daterangepicker, .datepicker.dropdown-menu {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-primary) !important;
    padding: var(--space-3) !important;
    background-color: var(--popover, var(--bg-surface, #ffffff)) !important;
    z-index: var(--z-picker, 1310) !important;
}

/* Month/year selects — visual chrome owned by aio-pickers.css (do not reset here). */

/* Daterangepicker Sidebar (Ranges) — dense ERP list (avoid 16px bloated rows) */
.daterangepicker .ranges li {
    border-radius: var(--radius-sm) !important;
    padding: 4px 10px !important;
    margin-bottom: 2px !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--text-main);
    transition: all var(--transition-fast);
    background-color: transparent !important;
    border: none !important;
}
.daterangepicker .ranges li:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
.daterangepicker .ranges li.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm);
}

/* Calendar Tables & Cells */
.daterangepicker .calendar-table {
    border: none !important;
    background-color: #ffffff !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover,
.datepicker table tr td.active, .datepicker table tr td.active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm);
}
.daterangepicker td.in-range {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border-radius: 0 !important;
}
/* Today's Highlight — soft primary tint (not warning yellow; not same as selected) */
.daterangepicker td.today:not(.active),
.datepicker table tr td.today:not(.active) {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover,
.datepicker table tr td.day:hover, .datepicker table tr th.next:hover, .datepicker table tr th.prev:hover {
    background-color: var(--bg-body) !important;
    border-radius: var(--radius-sm) !important;
}

/* Modernized Buttons */
.daterangepicker .applyBtn {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 18px !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.daterangepicker .cancelBtn {
    background-color: var(--muted, #f1f5f9) !important;
    border-color: var(--border, var(--border-color, #e2e8f0)) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-md) !important;
    padding: 6px 18px !important;
    font-weight: 600;
}
.daterangepicker .cancelBtn:hover {
    background-color: color-mix(in srgb, var(--muted, #f1f5f9) 70%, var(--border, #e2e8f0)) !important;
}

/* ==========================================================================
   GLOBAL STICKY FILTER BOX 
   ========================================================================== */
.aio-global-sticky-filter {
    position: sticky !important;
    top: 50px !important; /* Adjust if your header navbar is taller/shorter */
    z-index: 95 !important; /* Below the pickers, above the table */
    box-shadow: var(--shadow-md) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    background-color: #ffffff !important; /* Solid bg prevents table bleeding through */
    padding: var(--space-4) !important;
    margin-bottom: var(--space-5) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Prevent Select2 dropdowns from getting trapped inside the sticky box */
.aio-global-sticky-filter .select2-container {
    z-index: 96 !important;
}

/* Intl Tel Input */
.iti { display: flex !important; width: 100%; }
.iti__flag-container {
    border: 1px solid var(--border-color); border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important; background-color: #eee;
}
.iti__tel-input.form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; margin-left: -1px; }
.iti.iti-focused .iti__tel-input.form-control { border-color: var(--primary); z-index: 3; }

/* Pattern Lock */
.patt-circ.hovered { background-color: #e0f2fe; border: none; }
.patt-circ.dir { background-image: url("/img/pattern-directionicon-arrow.png"); }

/* ==========================================================================
   9. PRINT STYLES
   ========================================================================== */
.print_section { display: none; }
@media print {
    /* No @page rule previously existed here, so the browser fell back to its
       default page margins and "shrink to fit" scaling — this is what made the
       print-preview window visibly shrink with blank desktop-colored borders
       around it (reported live via DevTools). `size: auto` keeps whatever
       paper size the selected printer/destination actually uses (thermal roll
       or A4) instead of forcing one; `margin: 0` removes the default inset
       that .print_section's own positioning below already assumes is zero. */
    @page { margin: 0; size: auto; }

    /* Print ONLY the active .print_section container(s) (receipts, reports, etc.).
       Previously this block revealed .print_section but never hid the rest of the page,
       so the app shell + DataTable printed alongside the receipt AND the on-screen table
       was left mis-sized after the print dialog closed. Hiding everything else via
       visibility (not display) keeps the printed content's own layout intact, and
       absolute positioning lifts it out of the now-hidden chrome's flow so it doesn't
       create blank leading pages. Kept as .print_section (not #receipt_section) so the
       dedicated report/print pages that use their own .print_section still print. */
    html, body { background: #fff !important; }
    body * { visibility: hidden !important; }
    .print_section, .print_section * { visibility: visible !important; }
    .print_section {
        display: block !important;
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100% !important;
    }
    .print_section .box,
    .print_section .table,
    .print_section .product_box { box-shadow: none !important; border: 1px solid #ddd !important; }
    #toast-container, ::-webkit-scrollbar, a:after { display: none !important; }

    /* #receipt_section lives inside a nested flex/height chain from the app shell
       (layouts/app.blade.php): html/body (height:100%-ish via Tailwind base) ->
       .app-premium-main (display:flex, tw-h-full) -> #scrollable-container
       (flex:1, tw-h-screen/100vh, overflow-y:auto). `height:auto` on just the
       scroll container is not enough — it's a flex item, so its rendered box is
       governed by the flex algorithm (flex-basis/flex-grow) at EVERY ancestor
       level, not by its own `height` property alone. `.print_section`'s
       `position:absolute` positions it relative to the nearest positioned
       ancestor, so as long as any link in this chain still reports a fixed
       viewport-ish height, the browser only prints what fits in that one boxed
       area — a long receipt gets silently clipped after ~1 screen's worth of
       content, with no totals/footer/QR and the print dialog reporting a single
       page. Every level of the chain must be neutralized, not just the innermost
       scroll container. */
    html, body,
    .app-premium-main,
    #scrollable-container,
    .app-premium-scroll {
        display: block !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        flex: none !important;
    }
}

/* ==========================================================================
   10. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
/* Desktops */
@media (min-width: 768px) {
    .datatable-header-flex { flex-wrap: nowrap; }
    .datatable-controls-left { flex: 1; display: flex; justify-content: flex-start; }
    .datatable-controls-center { flex: 0 1 auto; display: flex; justify-content: center; }
    .datatable-controls-right { flex: 1; display: flex; justify-content: flex-end; }
    .pulse-logo { width: 200px; }
    /* Touch devices on desktop (iPad Pro etc) */
    @media (pointer: coarse) {
        .side-bar { display: none !important; }
        .side-bar.small-view-side-active { display: flex !important; }
    }
}

@media (min-width: 992px) {
    .small-view-button { display: none !important; }
}

@media (min-width: 1200px) { 
    .pulse-logo { width: 250px; } 
}

/* Tablets & Mobile */
@media (max-width: 991px) {
    .pos-form-row > .col-md-4, .pos-form-row > .col-md-8 { flex: 1 1 100%; margin-bottom: var(--space-3); }
}

/* Mobile Only (Merged) */
@media (max-width: 768px) {
    .content-wrapper { padding-top: var(--space-3); }
    .modal-xl { width: 95%; }
    
    /* POS Mobile */
    .pos-express-btn { font-size: 16px !important; height: 60px !important; padding: 5px !important; }
    .pos-qty-wrapper { min-width: 90px; }
    .pos-form-row { display: flex; flex-direction: column-reverse; }
    .pos_product_div { height: auto !important; max-height: 40vh !important; min-height: 200px !important; overflow-y: auto !important; }
    #product_list_body { height: auto !important; max-height: 45vh !important; }
    .pos-tab-container .pos-tab-menu .list-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .pos-tab-container .pos-tab-menu .list-group a .tab-txt { display: none; }
    
    /* Responsive Grid fixes */
    .eq-height-row { flex-direction: column; }
    .eq-height-row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .eq-height-row .input-group, .eq-height-row .form-control, .eq-height-row .select2-container, .select2-container {
        width: 100% !important; max-width: 100% !important;
    }
    
    /* Header/DataTables Mobile */
    .main-header .navbar-custom-menu { float: none !important; display: block !important; }
    .datatable-header-flex { flex-direction: column; align-items: center; }
    div.dataTables_wrapper div.dataTables_filter { width: 100%; justify-content: center !important; margin-top: var(--space-3); }
    div.dataTables_wrapper div.dataTables_filter input[type="search"] { width: 100% !important; max-width: 300px; margin-left: 0 !important; }
    .filter-box { position: sticky; top: 0; z-index: 100; background: #fff; padding: var(--space-3); box-shadow: var(--shadow-sm); }

    /* ==========================================================================
       POS TABLE MOBILE & TABLET FIXES
       ========================================================================== */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
        width: 100%;
        border: none !important;
        padding-bottom: var(--space-3); /* Space for the scrollbar */
    }

    #pos_table {
        /* Force the table to maintain a minimum readable width, triggering the horizontal scroll */
        min-width: 850px !important; 
    }

    /* Prevent text in data cells from wrapping and increasing row height awkwardly */
    #pos_table tbody td {
        white-space: nowrap !important;
    }

    /* Exception: The Product Name column should still wrap so long names are readable */
    #pos_table tbody td:first-child,
    #pos_table th.col-product {
        white-space: normal !important;
        min-width: 200px !important;
    }
    
    /* Ensure inputs remain touch-friendly and don't collapse */
    #pos_table tbody td input.form-control {
        min-width: 90px !important;
        height: var(--input-height) !important; 
    }
}
/* ==========================================================================
   SELECT2: TRANSPARENCY FIX + ROUNDED CORNERS
   ========================================================================== */

/* Select2 Dropdown — DELEGATED to select2-premium.css for unified styling */
.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 1300 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    overflow: hidden !important;
}

.select2-search--dropdown {
    background-color: #ffffff !important;
    padding: var(--space-2) !important;
    border-bottom: 1px solid #f3f4f6;
}

.select2-search--dropdown .select2-search__field {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #333 !important;
}

.select2-results {
    background-color: #ffffff !important;
}

.select2-results__option {
    background-color: #ffffff !important;
    color: #333 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary, #1E3A6F) !important;
    color: #ffffff !important;
}

.select2-results__options {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.select2-results__option {
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Balance Color Fix for Dropdowns */
.balance-debit { color: #d9534f !important; font-weight: bold; }
.balance-credit { color: #28a745 !important; font-weight: bold; }

.select2-results__option--highlighted .balance-debit,
.select2-results__option--highlighted .balance-credit {
    background-color: white !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    -webkit-text-fill-color: initial !important; 
}
/* Prevent flicker during theme switch */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}
/* Premium pricing card (uses your brand vars) */
.price_card.aio-price-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth),
              border-color var(--transition-fast);
  will-change: transform;
}

/* Top “premium” accent */
.price_card.aio-price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 999px 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  opacity: 0.95;
}

/* Hover (force it with CSS so it can’t be blocked by utility ordering) */
.price_card.aio-price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-float);
  border-color: rgba(30, 58, 111, 0.25); /* matches your brand blue vibe */
}

/* Soft glow on hover */
.price_card.aio-price-card:hover::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius-lg) + 10px);
  background: radial-gradient(circle at 30% 20%, rgba(30, 58, 111, 0.18), transparent 55%);
  pointer-events: none;
}

/* Popular badge polish */
.price_card .aio-popular-pill {
  background: linear-gradient(135deg, var(--warning), var(--highlight));
  box-shadow: var(--shadow-md);
}

/* Price styling */
.price_card .aio-price {
  letter-spacing: -0.02em;
}

/* Button polish (keeps your gradient, adds premium hover lift) */
.price_card .aio-cta {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.price_card .aio-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  filter: saturate(1.05);
}
@media (max-width: 420px) {
  .input-group { flex-wrap: wrap !important; }

  .input-group-addon,
  .input-group-btn {
    flex: 1 0 100% !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 6px !important;
  }

  .input-group .form-control,
  .input-group .select2-container {
    flex: 1 0 100% !important;
    border-radius: var(--radius-md) !important;
    border-left: 1px solid var(--border-color) !important;
  }
}
/* ==========================================================================
   GLOBAL STATUS LABEL COLORS (Colors only, preserves structure)
   ========================================================================== */
.label-success, .bg-green, .bg-success { background-color: var(--success) !important; color: #ffffff !important; border: none !important; }
.label-danger, .bg-red { background-color: var(--danger) !important; color: #ffffff !important; border: none !important; }
.label-warning, .bg-yellow, .bg-warning { background-color: var(--warning) !important; color: #ffffff !important; border: none !important; }
.label-info, .bg-blue { background-color: var(--primary) !important; color: #ffffff !important; border: none !important; }
.label-default, .bg-gray { background-color: var(--secondary) !important; color: #ffffff !important; border: none !important; }

/* ==========================================================================
   POS TABLE SPECIFIC COLUMN WIDTHS
   ========================================================================== */
#pos_table {
    table-layout: auto; /* Allows browser to adapt widths smoothly */
    width: 100% !important;
}

/* Base Columns */
#pos_table th.col-product { min-width: 240px; width: 35%; text-align: left; }
#pos_table th.col-qty { min-width: 140px; width: 15%; }
#pos_table th.col-price { min-width: 120px; width: 12%; }
#pos_table th.col-total { min-width: 120px; width: 12%; }
#pos_table th.col-action { min-width: 45px; width: 3%; text-align: center; }

/* Dynamic Columns (Discount, Tax, Lot, Warranty) */
#pos_table th.discount_column { min-width: 110px; width: 10%; }
#pos_table th.tax_column { min-width: 110px; width: 10%; }
#pos_table th.lot_details_column { min-width: 130px; width: 12%; }
#pos_table th.warranty_column { min-width: 110px; width: 10%; }

/* Input sizing within the table to respect the min-widths */
#pos_table tbody td input.form-control {
    min-width: 80px;
    width: 100%;
}
.payment-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #ef4444; 
    border: none;
    outline: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.payment-close-btn:hover {
    background-color: #fecaca; 
    color: #dc2626; 
    transform: scale(1.05);
}

/* ==========================================================================
   AGEING REPORT — Semantic status colors (token-driven)
   ========================================================================== */
.text-ageing-current { color: var(--success, #22c55e) !important; }
.text-ageing-1       { color: var(--warning, #fca424) !important; }
.text-ageing-2       { color: var(--color-cta, #ff9048) !important; }
.text-ageing-3       { color: var(--danger, #ef4444) !important; }
.text-ageing-4       { color: #b91c1c !important; }

/* ==========================================================================
   INPUT-GROUP BORDER-RADIUS CORRECTIONS
   Fix three specific junctions where inner-edge corners are wrongly rounded.
   ========================================================================== */

/* 1. Product search bar: the text input sits between two .input-group-btn
      elements so ALL four corners must be flat (no left or right rounding). */
#search_product_input_group #search_product {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius:   0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 2. Payment Terms: the number input is immediately followed by a select
      inside .input-group-btn, so its right corners must be flat. */
.input-group [name="pay_term_number"] {
    border-top-right-radius:    0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 3. Quick Add (+) button: last element in the product search input-group —
      ensure right corners are rounded to close the group cleanly. */
.pos_add_quick_product {
    border-top-left-radius:    0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius:   var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
}

/* 4. Textarea addon height: ensure the :has() flex stretch rule also covers
      the inner flex alignment so the icon addon grows with the textarea.
      Redundant guard for browsers where :has() computes display:table first. */
.input-group:has(textarea.form-control) {
    display:      flex !important;
    align-items:  stretch !important;
    flex-wrap:    nowrap !important;
}
.input-group:has(textarea.form-control) > .input-group-addon {
    display:        flex !important;
    align-items:    center !important;
    justify-content: center !important;
    height:         auto !important;
    min-height:     unset !important;
    align-self:     stretch !important;
}
.input-group:has(textarea.form-control) > textarea.form-control {
    flex:      1 1 auto !important;
    width:     1% !important;
    min-width: 0 !important;
}

/* === Source: css/components.css === */
/* =============================================================================
   AIO ERP — Shared Component Primitives  (components.css)
   -----------------------------------------------------------------------------
   Reusable component classes built on top of design tokens.
   All values use CSS custom properties → fully theme-aware + dark-mode-aware.
   Import order: after tokens.css, before app-premium.css.
   =============================================================================
   SECTIONS
   1.  Page Shell / Layout
   2.  Section Headers
   3.  Cards & Panels
   4.  KPI / Stat Widgets
   5.  Tables
   6.  Badges & Status Pills
   7.  Alerts
   8.  Buttons (extensions)
   9.  Form Primitives
   10. Filters & Filter Bar
   11. Tabs
   12. Modals
   13. Profile / Person Detail Card
   13. Chart Containers
   14. Loading / Skeleton States
   15. Empty States
   16. Error States
   17. Responsive Utilities
   ============================================================================= */


/* =============================================================================
   1. PAGE SHELL / LAYOUT
   ============================================================================= */

.aio-page {
    padding: var(--space-5, 20px);
}

.aio-page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-3, 12px);
    margin-bottom:   var(--space-5, 20px);
}

.aio-page-title {
    font-size:   var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color:       var(--text-main);
    line-height: var(--line-height-tight, 1.25);
    margin:      0;
}

.aio-page-subtitle {
    font-size:  var(--font-size-sm, 0.875rem);
    color:      var(--text-muted);
    margin-top: var(--space-1, 4px);
}

.aio-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-1, 4px);
    font-size:   var(--font-size-sm, 0.875rem);
    color:       var(--text-muted);
}

.aio-breadcrumb a {
    color:      var(--primary);
    transition: color var(--transition-fast);
}

.aio-breadcrumb a:hover { color: var(--primary-dark); }


/* =============================================================================
   2. SECTION HEADERS
   ============================================================================= */

.aio-section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-3, 12px);
    padding-bottom:  var(--space-3, 12px);
    border-bottom:   1px solid var(--border-color);
    margin-bottom:   var(--space-4, 16px);
}

.aio-section-title {
    font-size:   var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--text-main);
    margin:      0;
}

.aio-section-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2, 8px);
    flex-wrap:   wrap;
}


/* =============================================================================
   3. CARDS & PANELS
   ============================================================================= */

.aio-card {
    background:    var(--card-bg, #ffffff);
    border:        1px solid var(--card-border, var(--border-color));
    border-radius: var(--card-radius, var(--radius-lg, 16px));
    box-shadow:    var(--card-shadow, var(--shadow-md));
    overflow:      visible;
    transition:    box-shadow var(--transition-fast),
                   border-color var(--transition-fast);
}

.aio-card:hover {
    border-color: var(--primary, var(--brand-navy));
}

.aio-card-header {
    padding:          var(--space-4, 16px) var(--card-padding, var(--space-6, 24px));
    border-bottom:    1px solid var(--panel-header-border, var(--border-color));
    background:       var(--panel-header-bg, #f8fbff);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              var(--space-3, 12px);
}

.aio-card-title {
    font-size:   var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--text-main);
    margin:      0;
}

.aio-card-body--flush {
    padding: 0;
}

.aio-card-body--no-overflow {
    overflow: visible;
}

.aio-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 16px);
}

@media (max-width: 767px) {
    .aio-grid-2col {
        grid-template-columns: 1fr;
    }
}

.aio-card--flush-header {
    padding-top: 0;
    overflow: visible;
}

.aio-ledger-sidebar-spacer {
    width: 4%;
    padding: 0;
    border: none;
    background: transparent;
}

.aio-ledger-sidebar-content {
    width: 48%;
    vertical-align: top;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #1E3A6F;
    border-radius: 8px;
    background-color: #ffffff;
}

.sms-mode-col {
    width: 55px;
}

.sms-mode-col--actions {
    width: 65px;
}

.aio-table-header-bar {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.aio-table-header-bar h3 {
    margin: 0;
    border: none;
    padding: 0;
    text-transform: none;
    font-size: 14px;
}

@media (max-width: 767px) {
    .aio-ledger-sidebar-spacer,
    .aio-ledger-sidebar-content {
        display: block;
        width: 100%;
    }
}

.aio-card-body {
    padding: var(--card-padding, var(--space-6, 24px));
}

.aio-card-body--flush {
    padding: 0;
}

.aio-card-body--no-overflow {
    overflow: visible;
}

.aio-card-footer {
    padding:       var(--space-4, 16px) var(--card-padding, var(--space-6, 24px));
    border-top:    1px solid var(--panel-header-border, var(--border-color));
    background:    var(--panel-header-bg, #f8fbff);
}


/* --- Utility helpers for card header / icon patterns ----------------------- */
.aio-card-icon {
    margin-right: 6px;
    color: var(--primary);
}
.aio-card-icon--danger  { color: var(--danger); }
.aio-card-icon--success { color: var(--success); }
.aio-card-icon--muted   { color: var(--text-muted); }

.aio-card-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted);
}

.aio-loading-cell {
    padding: var(--space-4, 16px);
    color: var(--text-muted);
}
.aio-loading-cell--success { color: var(--success); }
.aio-loading-cell--danger  { color: var(--danger); }

.aio-service-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-surface);
}

/* =============================================================================
   4. KPI / STAT WIDGETS
   ============================================================================= */

/* KPI canon (Phase 6): prefer `.aio-kpi-grid` + `.aio-kpi-card` for new KPIs,
   or copy Home/Fleet patterns on module dashboards — do not invent a third
   KPI system on the same page. Fleet also uses `.metric-card` on its dash. */

.aio-kpi-grid {
    display:               grid;
    /* Equal columns; incomplete last row keeps blank cells (not stretched leftovers) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   var(--space-4, 16px);
    width:                 100%;
    align-items:           stretch;
}
@media (max-width: 1399px) {
    .aio-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
    .aio-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .aio-kpi-grid { grid-template-columns: 1fr; }
}

.aio-kpi-card {
    background:    var(--card-bg, #ffffff);
    border:        1px solid var(--card-border, var(--border-color));
    border-radius: var(--card-radius, var(--radius-lg, 16px));
    box-shadow:    var(--card-shadow, var(--shadow-md));
    padding:       var(--space-5, 20px);
    position:      relative;
    overflow:      hidden;
    transition:    transform var(--transition-fast),
                   box-shadow var(--transition-fast);
}

.aio-kpi-card:hover {
    border-color: var(--primary, var(--brand-navy));
}

.aio-kpi-icon {
    width:         44px;
    height:        44px;
    border-radius: var(--radius-md, 10px);
    background:    var(--widget-icon-bg);
    display:       flex;
    align-items:   center;
    justify-content:center;
    color:         #ffffff;
    font-size:     1.25rem;
    flex-shrink:   0;
    margin-bottom: var(--space-3, 12px);
}

.aio-kpi-value {
    font-size:   var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color:       var(--text-main);
    line-height: var(--line-height-tight, 1.25);
}

.aio-kpi-label {
    font-size:  var(--font-size-sm, 0.875rem);
    color:      var(--text-muted);
    margin-top: var(--space-1, 4px);
}

.aio-kpi-trend {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1, 4px);
    font-size:   var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    margin-top:  var(--space-2, 8px);
}

.aio-kpi-trend--up   { color: var(--success); }
.aio-kpi-trend--down { color: var(--danger);  }

/* Commission / Sales Representative KPI modifier (AUDIT_MATRIX B8).
   Replaces the deleted parallel skin public/css/commission-kpi.css.
   Base grid/card live above; this only layers report-oriented chrome. */
.aio-kpi-grid--commission {
    margin-bottom: var(--space-5, 20px);
}

.aio-kpi-card--commission {
    padding: var(--space-5, 18px);
}

.aio-kpi-card--commission::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--premium-primary, var(--primary, #1E3A6F)),
        var(--premium-accent, var(--accent, #7c3aed))
    );
}

.aio-kpi-card--commission:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 18px 40px rgba(15, 23, 42, 0.14));
}

.aio-kpi-card--commission .aio-kpi-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 14px);
}

.aio-kpi-card--commission .aio-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 10px);
    margin-bottom: 0;
    display: grid;
    place-items: center;
    background: var(--surface-muted, var(--bg-card-alt, #f1f5f9));
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--primary, var(--brand-navy));
    font-size: var(--font-size-xl, 20px);
}

/* One-accent discipline: neutral tile + brand glyph (no per-metric gradients). */
.aio-kpi-card--commission .aio-kpi-icon--sales,
.aio-kpi-card--commission .aio-kpi-icon--expense,
.aio-kpi-card--commission .aio-kpi-icon--commission,
.aio-kpi-card--commission .aio-kpi-icon--earned,
.aio-kpi-card--commission .aio-kpi-icon--paid,
.aio-kpi-card--commission .aio-kpi-icon--payable {
    background: var(--surface-muted, var(--bg-card-alt, #f1f5f9));
    color: var(--primary, var(--brand-navy));
}

.aio-kpi-card--commission .aio-kpi-content {
    min-width: 0;
}

.aio-kpi-card--commission .aio-kpi-label {
    color: var(--text-muted, var(--muted-foreground));
    font-size: var(--font-size-sm, 0.92rem);
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: var(--space-2, 8px);
    margin-top: 0;
}

.aio-kpi-card--commission .aio-kpi-value {
    color: var(--text-main, var(--foreground));
    font-size: var(--font-size-2xl, 2rem);
    font-weight: var(--font-weight-bold, 800);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.aio-kpi-card--commission .aio-kpi-sub {
    color: var(--text-muted, var(--muted-foreground));
    font-size: var(--font-size-xs, 0.82rem);
    margin-top: var(--space-2, 8px);
}

@media (max-width: 480px) {
    .aio-kpi-card--commission .aio-kpi-value {
        font-size: var(--font-size-xl, 1.7rem);
    }
}


/* =============================================================================
   5. TABLES
   ============================================================================= */

.aio-table-wrapper {
    border-radius: var(--radius-lg, 16px);
    border:        1px solid var(--border-color);
    overflow:      hidden;
    background:    var(--card-bg, #ffffff);
    box-shadow:    var(--shadow-sm);
}

/* Horizontal scroll on small screens */
.aio-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aio-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--font-size-sm, 0.875rem);
}

.aio-table thead tr {
    background:    var(--panel-header-bg, #f8fbff);
    border-bottom: 2px solid var(--border-color);
}

.aio-table thead th {
    padding:     var(--space-3, 12px) var(--space-4, 16px);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--text-muted);
    text-align:  left;
    white-space: nowrap;
    font-size:   var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
}

.aio-table tbody td {
    padding:       var(--space-3, 12px) var(--space-4, 16px);
    color:         var(--text-main);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

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

.aio-table tbody tr:hover {
    background: var(--surface-muted, #eef4ff);
    transition: background var(--transition-fast);
}


/* =============================================================================
   6. BADGES & STATUS PILLS
   ============================================================================= */

.aio-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1, 4px);
    padding:       3px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size:     var(--font-size-xs, 0.75rem);
    font-weight:   var(--font-weight-semibold, 600);
    white-space:   nowrap;
    line-height:   1.4;
}

.aio-badge--success {
    background: var(--badge-success-bg);
    color:      var(--badge-success-text);
}

.aio-badge--danger {
    background: var(--badge-danger-bg);
    color:      var(--badge-danger-text);
}

.aio-badge--warning {
    background: var(--badge-warning-bg);
    color:      var(--badge-warning-text);
}

.aio-badge--info {
    background: var(--badge-info-bg);
    color:      var(--badge-info-text);
}

.aio-badge--neutral {
    background: var(--surface-muted, #eef4ff);
    color:      var(--text-muted);
}


/* =============================================================================
   7. ALERTS
   Optional tokenized alerts. Bootstrap `.alert-*` remains common; prefer one
   system per page when touching alert chrome.
   ============================================================================= */

.aio-alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3, 12px);
    padding:       var(--space-4, 16px);
    border-radius: var(--radius-md, 10px);
    border-left:   4px solid transparent;
    font-size:     var(--font-size-sm, 0.875rem);
    margin-bottom: var(--space-4, 16px);
}

.aio-alert--success {
    background:  var(--badge-success-bg);
    color:       var(--badge-success-text);
    border-color:var(--success);
}

.aio-alert--danger {
    background:  var(--badge-danger-bg);
    color:       var(--badge-danger-text);
    border-color:var(--danger);
}

.aio-alert--warning {
    background:  var(--badge-warning-bg);
    color:       var(--badge-warning-text);
    border-color:var(--warning);
}

.aio-alert--info {
    background:  var(--badge-info-bg);
    color:       var(--badge-info-text);
    border-color:var(--primary);
}

.aio-alert-icon {
    flex-shrink: 0;
    font-size:   1rem;
    margin-top:  2px;
}


/* =============================================================================
   8. BUTTONS (extensions to aio-button-uniform.css)
   =============================================================================
   Canon for new UI: `tw-dw-btn tw-dw-btn-{variant} tw-text-white`.
   `.aio-btn` / `.aio-btn--*` are a **compat bridge** for residual pages only
   (oauth-authorize, commission_statement, PropertyRental). Prefer migrating
   those to tw-dw-btn; do not add new aio-btn usage.
   ============================================================================= */

/* Compat bridge — mirrors primary solid button using live tokens */
.aio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: 8px 14px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.aio-btn--primary,
.aio-btn.aio-btn--primary {
    background: var(--primary, #1E3A6F);
    border-color: var(--primary, #1E3A6F);
    color: #fff;
}
.aio-btn--primary:hover,
.aio-btn--primary:focus {
    background: var(--primary-dark, #0A1733);
    border-color: var(--primary-dark, #0A1733);
    color: #fff;
}
.aio-btn--secondary,
.aio-btn--neutral {
    background: var(--muted, #f1f5f9);
    border-color: var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
}
.aio-btn--danger {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    color: #fff;
}
.aio-btn--sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs, 0.75rem);
}

.aio-btn-group {
    display:   inline-flex;
    flex-wrap: wrap;
    gap:       var(--space-2, 8px);
}

.aio-btn-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--aio-btn-height, 40px);
    height:          var(--aio-btn-height, 40px);
    padding:         0;
    border-radius:   var(--aio-btn-radius, 12px);
    border:          1px solid var(--aio-btn-border);
    background:      var(--aio-btn-bg-muted);
    color:           var(--aio-btn-text-muted);
    box-shadow:      var(--aio-btn-shadow);
    cursor:          pointer;
    transition:      transform .16s ease,
                     box-shadow .16s ease,
                     background .16s ease,
                     border-color .16s ease;
}

.aio-btn-icon:hover {
    transform:  translateY(-1px);
    box-shadow: var(--aio-btn-shadow-hover);
}


/* =============================================================================
   9. FORM PRIMITIVES
   ============================================================================= */

.aio-form-group {
    margin-bottom: var(--space-4, 16px);
}

.aio-form-label {
    display:       block;
    font-size:     var(--font-size-sm, 0.875rem);
    font-weight:   var(--font-weight-medium, 500);
    color:         var(--text-main);
    margin-bottom: var(--space-2, 8px);
}

.aio-form-label.required::after {
    content: ' *';
    color:   var(--danger);
}

.aio-form-hint {
    font-size:  var(--font-size-xs, 0.75rem);
    color:      var(--text-muted);
    margin-top: var(--space-1, 4px);
}

.aio-form-error {
    font-size:  var(--font-size-xs, 0.75rem);
    color:      var(--danger);
    margin-top: var(--space-1, 4px);
}


/* =============================================================================
   10. FILTERS & FILTER BAR
   Live filters: @component('components.filters') adds `.aio-filter-bar` as a
   marker on the premium accordion root. Standalone (non-accordion) filter rows
   may use `.aio-filter-bar` without `.premium-panel` for the flex row chrome.
   ============================================================================= */

/* Standalone filter row (not the accordion component) */
.aio-filter-bar:not(.premium-panel) {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           var(--space-3, 12px);
    padding:       var(--space-4, 16px);
    background:    var(--card-bg, #ffffff);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    margin-bottom: var(--space-4, 16px);
    box-shadow:    var(--shadow-sm);
}

/* Accordion filters component — keep premium-panel layout; marker class only */
.premium-panel.aio-filter-bar {
    /* marker for a11y/scripts; chrome from premium-panel / app-premium.css */
}

.aio-filter-group {
    display:     flex;
    align-items: center;
    gap:         var(--space-2, 8px);
    flex-wrap:   wrap;
}

.aio-filter-label {
    font-size:   var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color:       var(--text-muted);
    white-space: nowrap;
}

/* Active filter chip */
.aio-filter-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1, 4px);
    padding:       var(--space-1, 4px) var(--space-3, 12px);
    background:    var(--primary-light, #e0f2fe);
    color:         var(--primary-dark, #0A1733);
    border-radius: var(--radius-full, 9999px);
    font-size:     var(--font-size-xs, 0.75rem);
    font-weight:   var(--font-weight-medium, 500);
}

.aio-filter-chip button {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       inherit;
    padding:     0;
    line-height: 1;
    opacity:     0.7;
    transition:  opacity var(--transition-fast);
}

.aio-filter-chip button:hover { opacity: 1; }


/* =============================================================================
   11. TABS
   Canon for multi-tab masters: Bootstrap `.nav-tabs-custom` (Vehicles gold).
   `.aio-tabs` / `.aio-tab` are an optional progressive alternative — do not mix
   both systems on one page. Prefer `.nav-tabs-custom` for new ERP admin work.
   ============================================================================= */

.aio-tabs {
    display:       flex;
    border-bottom: 2px solid var(--border-color);
    gap:           var(--space-1, 4px);
    overflow-x:    auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.aio-tabs::-webkit-scrollbar { display: none; }

.aio-tab {
    padding:         var(--space-3, 12px) var(--space-5, 20px);
    font-size:       var(--font-size-sm, 0.875rem);
    font-weight:     var(--font-weight-medium, 500);
    color:           var(--text-muted);
    border:          none;
    background:      none;
    cursor:          pointer;
    border-bottom:   2px solid transparent;
    margin-bottom:   -2px;
    white-space:     nowrap;
    transition:      color var(--transition-fast),
                     border-color var(--transition-fast);
}

.aio-tab:hover { color: var(--primary); }

.aio-tab.active,
.aio-tab[aria-selected="true"] {
    color:        var(--primary);
    border-color: var(--primary);
    font-weight:  var(--font-weight-semibold, 600);
}


/* =============================================================================
   12. MODALS
   Header style: Option B — Quiet surface (product pick 2026-07-20).
   White/surface header, ink title, light border, neutral icon + outline close.
   Brand color lives in primary footer buttons, not a filled header gradient.
   Optional: .aio-modal-header-icon; .aio-modal-header is an alias (same look).
   ============================================================================= */

/* Ensures modals honour theme tokens.
   Tall-modal max-height + body scroll: see aio-dropdowns.css (shell layer wins). */
.modal-content {
    background:    var(--card-bg, #ffffff) !important;
    border:        1px solid var(--border-color) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow:    var(--shadow-xl) !important;
    color:         var(--text-main) !important;
    overflow:      hidden !important; /* clip header/footer to card radius */
    display:       flex !important;
    flex-direction: column !important;
    min-height:    0;
}

/* Base footer chrome (theme tokens — no Blade hex) */
.modal-footer {
    background:  var(--bg-card-alt, var(--muted, #f8fafc)) !important;
    border-top:  1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px) !important;
    padding:     var(--space-4, 16px) var(--space-5, 20px) !important;
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    justify-content: flex-end;
    gap:         var(--space-2, 8px);
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Quiet surface header — ALL .modal-content .modal-header (CSS-first).
   - Always shows AIO ERP mark in a left icon chip (CSS ::before)
   - Close is a plain small ×, top-right (not outlined)
   -------------------------------------------------------------------------- */
.modal-content .modal-header,
.modal-content .modal-header.aio-modal-header {
    position:      relative;
    overflow:      visible;
    border:        0 !important;
    border-bottom: 1px solid var(--border-color, #e5e9f0) !important;
    border-radius: 0 !important;
    background:    var(--bg-surface, var(--card-bg, #ffffff)) !important;
    /* room for absolute close top-right; left pad for AIO chip */
    padding:       14px 44px 14px 18px !important;
    display:       flex !important;
    align-items:   center;
    gap:           10px;
    min-height:    56px;
    flex-shrink:   0;
}
/* Always-on AIO ERP icon chip (all modals) */
.modal-content .modal-header::before,
.modal-content .modal-header.aio-modal-header::before {
    content:        "" !important;
    display:        inline-block !important;
    flex-shrink:    0;
    width:          28px;
    height:         28px;
    border-radius:  8px;
    border:         1px solid var(--border-color, #e5e9f0);
    background-color: var(--bg-body, var(--brand-surface, #F6F8FB));
    background-image: url("/brand/logos/products/aio-erp-contained.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    order: -1;
}
.modal-content .modal-header .modal-title,
.modal-content .modal-header.aio-modal-header .modal-title {
    position:       relative;
    z-index:        1;
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    align-items:    center;
    gap:            var(--space-2, 8px);
    padding-right:  4px;
    font-size:      15px;
    font-weight:    var(--font-weight-semibold, 600) !important;
    letter-spacing: -0.01em;
    color:          var(--foreground, var(--text-main, #0A1733)) !important;
}
/* Hide non-AIO header icons so only the CSS AIO chip shows */
.modal-content .modal-header .aio-modal-header-icon,
.modal-content .modal-header.aio-modal-header .aio-modal-header-icon,
.modal-content .modal-header .modal-title > .aio-modal-header-icon,
.modal-content .modal-header .modal-title > i:first-child,
.modal-content .modal-header .modal-title > .fa:first-child,
.modal-content .modal-header .modal-title > .fas:first-child,
.modal-content .modal-header .modal-title > .far:first-child,
.modal-content .modal-header .modal-title > .glyphicon:first-child,
.modal-content .modal-header > i:first-of-type:not(.close) {
    display: none !important;
}
/* Plain small close — top right, no outline/circle fill */
.modal-content .modal-header .close,
.modal-content .modal-header.aio-modal-header .close {
    position:      absolute !important;
    right:         12px !important;
    top:           12px !important;
    left:          auto !important;
    margin:        0 !important;
    z-index:       5;
    display:       flex !important;
    height:        28px !important;
    width:         28px !important;
    flex-shrink:   0;
    align-items:   center;
    justify-content: center;
    border:        0 !important;
    border-radius: 0 !important;
    background:    transparent !important;
    box-shadow:    none !important;
    color:         var(--muted-foreground, #7A8AA6) !important;
    opacity:       0.65;
    text-shadow:   none !important;
    font-size:     22px !important;
    font-weight:   300 !important;
    line-height:   1 !important;
    padding:       0 !important;
    transition:    opacity var(--duration-fast, 150ms) ease,
                   color var(--duration-fast, 150ms) ease;
}
.modal-content .modal-header .close:hover,
.modal-content .modal-header .close:focus,
.modal-content .modal-header.aio-modal-header .close:hover,
.modal-content .modal-header.aio-modal-header .close:focus {
    background: transparent !important;
    border:     0 !important;
    box-shadow: none !important;
    opacity:    1;
    color:      var(--foreground, #0A1733) !important;
}
.modal-content .modal-header .close span {
    line-height: 1;
}
/* Footer corners: clip under modal-content radius */
.modal-content:has(.modal-header) .modal-footer {
    border-bottom-left-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Footer button recipe (theme-safe): prefer tw-dw-btn; ensure gap/alignment */
.modal-footer .tw-dw-btn,
.modal-footer .btn {
    margin: 0; /* gap handles spacing */
}

/* Modal form busy (aio-form-busy.js) — lock interaction WITHOUT disabled attrs
   (disabled inputs break jQuery.serialize on deferred AJAX submit paths). */
form.aio-form-controls-locked,
.modal.aio-form-controls-locked {
    position: relative;
}
form.aio-form-controls-locked input:not([type="hidden"]),
form.aio-form-controls-locked select,
form.aio-form-controls-locked textarea,
form.aio-form-controls-locked .select2-container,
.modal.aio-form-controls-locked .modal-body {
    pointer-events: none;
    user-select: none;
}

/* Modal form busy (aio-form-busy.js) — button spinner state */
.aio-form-busy-btn.is-aio-busy,
.modal-footer .is-aio-busy {
    cursor: progress !important;
    opacity: 0.9;
    pointer-events: none;
}
.modal.aio-modal-form-busy .modal-body {
    cursor: progress;
}
.modal.aio-modal-form-busy form.aio-form-is-busy {
    /* Fields are disabled in JS; keep a light visual cue without full-page veil */
    opacity: 0.92;
}

/* Contact / AJAX form modals: hide content until Select2 + field toggles settle.
   IMPORTANT: do NOT animate opacity when leaving this class — a 0→1 transition
   while .modal.in is open reads as a blank-then-pop flicker (payment live probe
   2026-07-30: opacity 0 → 0.22 → 1 after aio-modal-initializing removed).
   Payment modals must NOT use this class; they enhance before show (payment.js). */
.modal.aio-modal-initializing > .modal-dialog > .modal-content {
    opacity: 0;
    transition: none !important;
}

/* Transaction show (Sell / AR): mid width between modal-lg (~900px / 56rem premium)
   and legacy modal-xl (90vw). Target ~1152px (72rem) — room for product + payment
   side-by-side without the full-bleed XL dialog. */
.modal-dialog.aio-modal-txn-show {
    width: min(72rem, calc(100vw - 2rem));
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}
body.premium-ui .modal-dialog.aio-modal-txn-show.modal-lg,
body.premium-ui .modal-dialog.aio-modal-txn-show {
    max-width: 72rem;
    width: min(72rem, calc(100vw - 2rem));
}
@media (max-width: 767px) {
    .modal-dialog.aio-modal-txn-show,
    body.premium-ui .modal-dialog.aio-modal-txn-show {
        width: calc(100vw - 1rem);
        max-width: none;
        margin: 0.5rem auto;
    }
}
.modal.contact_modal.aio-contact-initing .modal-body {
    visibility: hidden;
}
.modal.contact_modal.aio-contact-ready:not(.aio-modal-initializing) > .modal-dialog > .modal-content {
    opacity: 1;
    transition: opacity 0.12s ease;
}

/* Theme layers must not reintroduce filled navy headers */
body.premium-ui .modal-content .modal-header,
body.premium-ui .modal-content .modal-header.aio-modal-header,
html.dark-mode body.premium-ui .modal-content .modal-header {
    background: var(--bg-surface, var(--card, #ffffff)) !important;
    border-bottom: 1px solid var(--border, var(--border-color, #e5e9f0)) !important;
}
body.premium-ui .modal-content .modal-header .modal-title,
body.premium-ui .modal-content .modal-header.aio-modal-header .modal-title {
    color: var(--card-foreground, var(--foreground, #0A1733)) !important;
}
body.premium-ui .modal-footer {
    background: var(--bg-card-alt, var(--muted, #f8fafc)) !important;
    border-top: 1px solid var(--border, var(--border-color, #e2e8f0)) !important;
}

/* Dark mode: quiet surface stays a surface, not a gradient */
html.dark-mode .modal-content .modal-header,
html.dark-mode .modal-content .modal-header.aio-modal-header,
body.dark-mode .modal-content .modal-header {
    background: var(--bg-surface, var(--card-bg, #1e293b)) !important;
    border-bottom-color: var(--border-color, #334155) !important;
}
html.dark-mode .modal-content .modal-header .modal-title,
body.dark-mode .modal-content .modal-header .modal-title {
    color: var(--foreground, #f8fafc) !important;
}
html.dark-mode .modal-content .modal-header .close,
body.dark-mode .modal-content .modal-header .close {
    border: 0 !important;
    color: var(--muted-foreground, #94a3b8) !important;
    background: transparent !important;
}
html.dark-mode .modal-content .modal-header::before,
body.dark-mode .modal-content .modal-header::before {
    background-color: var(--bg-body, #0f172a);
    border-color: var(--border-color, #334155);
}

/* =============================================================================
   Offline / network loss (aio-offline.js)
   ============================================================================= */
.aio-offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-family: var(--font-primary, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.aio-offline-banner.is-hidden {
    display: none !important;
}
.aio-offline-banner__icon {
    font-size: 14px;
    line-height: 1;
}
html.aio-offline body,
body.aio-offline {
    /* room for fixed banner */
    padding-top: 0;
}
/* Grey out save/submit when offline — keep dismiss/close usable */
html.aio-offline button[type="submit"],
html.aio-offline input[type="submit"],
body.aio-offline button[type="submit"],
body.aio-offline input[type="submit"],
html.aio-offline .modal-footer .tw-dw-btn-primary,
body.aio-offline .modal-footer .tw-dw-btn-primary,
html.aio-offline .modal-footer button.btn-primary,
body.aio-offline .modal-footer button.btn-primary,
html.aio-offline #pos-save,
body.aio-offline #pos-save,
html.aio-offline button#pos-finalize,
body.aio-offline button#pos-finalize {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    filter: grayscale(0.35);
}
html.aio-offline .modal-footer [data-dismiss="modal"],
body.aio-offline .modal-footer [data-dismiss="modal"],
html.aio-offline .modal-header .close,
body.aio-offline .modal-header .close {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    cursor: pointer !important;
}

/* Payment modal summary/detail card — the contact + balance/amount-due block at
   the top of the add/edit/view payment modals. Tokenized replacement for the
   repeated inline hex so the card is identical across all payment surfaces. */
.aio-payment-summary {
    background:    var(--bg-card-alt, #f8f9fe);
    border:        1px solid var(--border-color, #d2d6de);
    padding:       var(--space-4, 16px);
    border-radius: var(--radius-md, 10px);
}

/* Sell index (and lists): payment method chips — logo-only for brands, text for cash */
.aio-pay-methods {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    line-height: 1.2;
    vertical-align: middle;
}

.aio-pay-method-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 100%;
}

.aio-pay-method-chip--logo {
    width: 28px;
    height: 28px;
    padding: 2px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #fff);
}

/* Mixx wordmark is light; keep chip readable on white list rows */
.aio-pay-method-chip--logo[data-brand-code="mixx"],
.aio-pay-method-chip--logo[data-brand-code="yas"] {
    background: var(--primary-dark, #0A1733);
    border-color: rgba(10, 23, 51, 0.45);
}

.aio-pay-method-chip--logo .aio-payment-brand-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

.aio-pay-method-chip--text {
    font-size: var(--font-size-xs, 12px);
    color: var(--muted-foreground, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
}

@media (max-width: 767px) {
    .aio-pay-method-chip--logo {
        width: 24px;
        height: 24px;
    }

    .aio-pay-method-chip--logo .aio-payment-brand-icon {
        width: 18px;
        height: 18px;
    }

    .aio-pay-method-chip--text {
        max-width: 6.5rem;
    }
}


/* =============================================================================
   13. CHART CONTAINERS
   =============================================================================
   Canon for dashboard chart cards: Home/BI/Fleet use `.bi-chart-modern`
   (aio-dashboard.css). Prefer that for new work. `.aio-chart` / `.aio-chart-modern`
   are aliases of the same surface. `.aio-chart-wrapper` remains a lighter
   generic panel for embedded chart widgets.
   ============================================================================= */

.aio-chart-wrapper {
    position:      relative;
    background:    var(--card-bg, #ffffff);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    box-shadow:    var(--shadow-md);
    overflow:      hidden;
}

.aio-chart-header {
    padding:          var(--space-4, 16px) var(--space-5, 20px);
    border-bottom:    1px solid var(--border-color);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              var(--space-3, 12px);
}

.aio-chart-title {
    font-size:   var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--text-main);
    margin:      0;
}

.aio-chart-subtitle {
    font-size:  var(--font-size-xs, 0.75rem);
    color:      var(--text-muted);
    margin-top: var(--space-1, 4px);
}

.aio-chart-body {
    padding: var(--space-4, 16px) var(--space-5, 20px);
}

/* Chart loading shimmer overlay */
.aio-chart-loading {
    position:        absolute;
    inset:           0;
    background:      var(--card-bg, #ffffff);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         var(--z-raised, 10);
}


/* =============================================================================
   14. LOADING / SKELETON STATES
   ============================================================================= */

@keyframes aio-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.aio-skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-muted, #eef4ff) 25%,
        var(--border-color)           50%,
        var(--surface-muted, #eef4ff) 75%
    );
    background-size: 400px 100%;
    animation:       aio-shimmer 1.4s ease-in-out infinite;
    border-radius:   var(--radius-sm, 6px);
}

.aio-skeleton-text {
    height:        1em;
    margin-bottom: var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
}

.aio-skeleton-text.wide  { width: 75%; }
.aio-skeleton-text.short { width: 45%; }
.aio-skeleton-text.tiny  { width: 25%; }

.aio-skeleton-card {
    height:        120px;
    border-radius: var(--radius-lg, 16px);
}

.aio-skeleton-avatar {
    width:         40px;
    height:        40px;
    border-radius: var(--radius-full, 9999px);
    flex-shrink:   0;
}

/* Show/hide helpers for skeleton states */
.aio-loading    { display: block !important; }
.aio-loaded     { display: block; }
.aio-is-loading .aio-content { visibility: hidden; }
.aio-is-loading .aio-skeleton { display: block; }
.aio-skeleton   { display: none; }
.aio-is-loading .aio-skeleton { display: block; }


/* =============================================================================
   15. EMPTY STATES
   ============================================================================= */

.aio-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         var(--space-16, 64px) var(--space-8, 32px);
    color:           var(--text-muted);
}

.aio-empty-icon {
    font-size:     3rem;
    opacity:       0.35;
    margin-bottom: var(--space-4, 16px);
    line-height:   1;
}

.aio-empty-title {
    font-size:     var(--font-size-lg, 1.125rem);
    font-weight:   var(--font-weight-semibold, 600);
    color:         var(--text-main);
    margin-bottom: var(--space-2, 8px);
}

.aio-empty-description {
    font-size:     var(--font-size-sm, 0.875rem);
    max-width:     360px;
    margin-bottom: var(--space-5, 20px);
}


/* =============================================================================
   16. ERROR STATES
   ============================================================================= */

.aio-error {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         var(--space-12, 48px) var(--space-8, 32px);
}

.aio-error-icon {
    font-size:     3rem;
    color:         var(--danger);
    margin-bottom: var(--space-4, 16px);
}

.aio-error-title {
    font-size:     var(--font-size-xl, 1.25rem);
    font-weight:   var(--font-weight-bold, 700);
    color:         var(--text-main);
    margin-bottom: var(--space-2, 8px);
}

.aio-error-description {
    font-size:     var(--font-size-sm, 0.875rem);
    color:         var(--text-muted);
    max-width:     360px;
    margin-bottom: var(--space-5, 20px);
}


/* =============================================================================
   17. RESPONSIVE UTILITIES
   ============================================================================= */

/* Overflow-safe table wrapper (fixes cramped tables on mobile) */
.aio-responsive-table {
    overflow-x:               auto;
    -webkit-overflow-scrolling: touch;
    border-radius:            var(--radius-lg, 16px);
}

/* Responsive grid that collapses sensibly */
.aio-grid-auto {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--space-4, 16px);
}

.aio-grid-2 { grid-template-columns: repeat(2, 1fr); }
.aio-grid-3 { grid-template-columns: repeat(3, 1fr); }
.aio-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Collapse multi-column grids on tablet */
@media (max-width: 1024px) {
    .aio-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .aio-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Collapse to single column on mobile */
@media (max-width: 640px) {
    .aio-page             { padding: var(--space-3, 12px); }
    .aio-kpi-grid         { grid-template-columns: 1fr; }
    .aio-grid-4,
    .aio-grid-3,
    .aio-grid-2           { grid-template-columns: 1fr; }
    .aio-page-header      { flex-direction: column; align-items: flex-start; }
    .aio-section-header   { flex-direction: column; align-items: flex-start; }
    .aio-card-header      { flex-direction: column; align-items: flex-start; }
    .aio-filter-bar       { flex-direction: column; align-items: stretch; }
    .aio-btn-group        { width: 100%; justify-content: stretch; }
    .aio-btn-group .btn   { flex: 1; }
}

/* Hide overflow text, show ellipsis in table cells on mobile */
@media (max-width: 768px) {
    .aio-table td.aio-truncate {
        max-width:     120px;
    overflow:      visible;
        text-overflow: ellipsis;
        white-space:   nowrap;
    }

    .aio-tabs         { gap: 0; }
    .aio-tab          { padding: var(--space-2, 8px) var(--space-3, 12px); font-size: var(--font-size-xs, 0.75rem); }
    .modal-dialog     { margin: var(--space-3, 12px); }
    .modal-content    { border-radius: var(--radius-md, 10px) !important; }
}

/* Improve touch target size on mobile */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .aio-btn-icon,
    .aio-tab          { min-height: 44px; }
    .aio-table td,
    .aio-table th     { padding: var(--space-4, 16px) var(--space-4, 16px); }
}

/* -----------------------------------------------------------------------------
   Page Heading — standardizes all content-header h1 titles
   Replaces the scattered tw-text-black tw-font-bold pattern across 30+ views.
   ----------------------------------------------------------------------------- */
.aio-page-heading {
    color:       var(--text-main);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.25);
}
.aio-page-heading small,
.aio-page-subheading {
    color:     var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

/* -----------------------------------------------------------------------------
   Stat / KPI Icon circles — replaces hardcoded tw-bg-sky-100 tw-text-sky-500
   Used by components/static.blade.php icon wrapper.
   ----------------------------------------------------------------------------- */
.aio-stat-icon {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border-radius:   9999px;
}
.aio-stat-icon--blue   { background: var(--primary-light, rgba(30, 58, 111,.12)); color: var(--primary); }
.aio-stat-icon--green  { background: rgba(34, 197, 94,  0.12); color: var(--success, #22c55e); }
.aio-stat-icon--amber  { background: rgba(252,164, 36,  0.12); color: var(--warning, #fca424); }
.aio-stat-icon--red    { background: rgba(239,  68, 68, 0.12); color: var(--danger,  #ef4444); }
.aio-stat-icon--purple { background: rgba(139,  92,246, 0.12); color: #8b5cf6; }
.aio-stat-icon--teal   { background: rgba(  6, 182,212, 0.12); color: var(--info,    #06b6d4); }

/* -----------------------------------------------------------------------------
   Action Buttons — theme-aware primary button (replaces hardcoded gradient)
   ----------------------------------------------------------------------------- */
.premium-action-btn {
    background:    var(--primary);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-full, 9999px);
    font-weight:   600;
    transition:    background 0.2s, opacity 0.2s;
}
.premium-action-btn:hover,
.premium-action-btn:focus {
    background: var(--primary-dark);
    color:      #fff;
}

/* -----------------------------------------------------------------------------
   Dropdown Menu — theme-aware surface (replaces tw-bg-white + tw-ring-gray-200)
   ----------------------------------------------------------------------------- */
.premium-dropdown-menu {
    background:    var(--surface-raised);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow:    var(--shadow-md, 0 4px 16px rgba(0,0,0,.12));
    list-style:    none;
    margin:        0;
    padding:       0.5rem;
}

.premium-dropdown-item {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.5rem 0.75rem;
    color:           var(--text-main);
    border-radius:   var(--radius-sm, 6px);
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
}
.premium-dropdown-item:hover,
.premium-dropdown-item:focus {
    background: var(--surface-muted);
    color:      var(--text-main);
    text-decoration: none;
}

/* Print cleanup */
@media print {
    .aio-filter-bar,
    .aio-page-header .aio-section-actions,
    .aio-btn-group    { display: none !important; }
}

/* =============================================================================
   13. Profile / Person Detail Card
   -----------------------------------------------------------------------------
   Shared by Essentials Employee-show and the core user Profile page (§9
   naming: legacy alias classes emp-* / kv-* kept for the existing
   Employee-show markup; new views should prefer the .aio- names).
   ============================================================================= */
.aio-profile-card,
.emp-profile-card {
    background:    var(--bg-surface, #fff);
    border:        1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    padding:       var(--space-6, 24px) var(--space-5, 20px);
    text-align:    center;
}
.aio-profile-card img,
.emp-profile-card img {
    width:         88px;
    height:        88px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--primary, #147cbb);
    margin-bottom: var(--space-3, 12px);
}
.aio-profile-card__name,
.emp-name {
    font-size:   var(--font-size-lg, 18px);
    font-weight: var(--font-weight-semibold, 600);
    color:       var(--foreground, #1e293b);
    margin:      0 0 3px;
}
.aio-profile-card__sub,
.emp-sub {
    font-size:     var(--font-size-sm, 14px);
    color:         var(--muted-foreground, #64748b);
    margin-bottom: 14px;
}

.aio-status-chip {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    font-size:    var(--font-size-xs, 12px);
    font-weight:  var(--font-weight-semibold, 600);
    padding:      3px 10px;
    border-radius: var(--radius-full, 9999px);
}
.aio-status-chip.active   { background: var(--badge-success-bg, #dcfce7); color: var(--badge-success-text, #166534); }
.aio-status-chip.inactive { background: var(--badge-danger-bg, #fee2e2);  color: var(--badge-danger-text, #991b1b); }
.aio-status-chip.pending  { background: var(--badge-warning-bg, #fef3c7); color: var(--badge-warning-text, #92400e); }

/* Detail section cards */
.aio-detail-card,
.emp-card {
    background:    var(--bg-surface, #fff);
    border:        1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    margin-bottom: 14px;
    overflow:      hidden;
}
.aio-detail-card__header,
.emp-card-header {
    padding:       var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size:     var(--font-size-sm, 14px);
    font-weight:   var(--font-weight-semibold, 600);
    color:         var(--primary, #147cbb);
    display:       flex;
    align-items:   center;
    gap:           8px;
}
.aio-detail-card__body,
.emp-card-body { padding: 14px 16px; }

/* Key-value grid used inside detail cards */
.aio-kv-grid,
.kv-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap:                   14px 20px;
}
.aio-kv-grid dt,
.kv-item dt {
    font-size:      var(--font-size-xs, 12px);
    font-weight:    var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--muted-foreground, #64748b);
    margin-bottom:  2px;
}
.aio-kv-grid dd,
.kv-item dd {
    margin:     0;
    font-size:  var(--font-size-sm, 14px);
    color:      var(--foreground, #1e293b);
    word-break: break-word;
}
.aio-kv-grid dd.mono,
.kv-item dd.mono {
    font-family:    'Courier New', monospace;
    font-size:      12px;
    letter-spacing: 0.04em;
}
.aio-kv-grid dd.dim,
.kv-item dd.dim { color: var(--muted-foreground, #94a3b8); font-style: italic; }

/* Sidebar quick-info list */
.aio-sidebar-info,
.sidebar-info { list-style: none; margin: 0; padding: 0; }
.aio-sidebar-info li,
.sidebar-info li {
    display:       flex;
    align-items:   baseline;
    gap:           8px;
    font-size:     var(--font-size-sm, 14px);
    color:         var(--foreground, #334155);
    padding:       5px 0;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.aio-sidebar-info li:last-child,
.sidebar-info li:last-child { border-bottom: none; }
.aio-sidebar-info li i,
.sidebar-info li i { width: 16px; text-align: center; flex-shrink: 0; margin-top: 2px; }

/* =============================================================================
   Product view modal — consistent tables / facts
   ============================================================================= */

.product-view-modal .modal-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    margin: 0;
}

.product-view-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    margin-top: var(--space-2, 8px);
}

.product-view-section {
    margin-top: var(--space-4, 16px);
}

.product-view-section:first-child {
    margin-top: 0;
}

.product-view-section-title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-main, var(--foreground));
    letter-spacing: 0;
    text-transform: none;
}

.product-view-fact {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--text-main, var(--foreground));
}

.product-view-fact b,
.product-view-fact strong {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-muted, var(--muted-foreground));
    margin-right: 0.25em;
}

.product-view-sku {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    background: transparent;
    padding: 0;
    color: inherit;
}

.product-view-divider {
    margin: var(--space-3, 12px) 0;
    border: 0;
    border-top: 1px solid var(--border-color, var(--border));
}

.product-view-description {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
}

.product-view-thumb {
    margin-bottom: var(--space-3, 12px);
}

.product-view-table {
    margin-bottom: 0;
    font-size: var(--font-size-sm, 0.875rem);
}

.product-view-table thead th {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    white-space: normal;
    vertical-align: bottom;
    max-width: 9rem;
}

.product-view-table tbody td {
    font-size: var(--font-size-sm, 0.875rem);
    vertical-align: middle;
}

.product-view-table td.text-right,
.product-view-table th.text-right {
    text-align: right;
    white-space: nowrap;
}

.product-view-group-price {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
    margin-bottom: 0.15rem;
}

.product-view-subunits {
    margin-top: 0.25rem;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.35;
}

.product-view-subunits-sep {
    margin: 0 0.25rem;
}

.product-view-combo-total {
    margin-top: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
}

/* AJAX stock report fragment inside modal */
.product-view-modal #view_product_stock_details .table {
    font-size: var(--font-size-sm, 0.875rem);
}

/* === Source: css/app-premium.css === */
:root {
    --premium-primary: #1E3A6F;
    --premium-primary-soft: rgba(30, 58, 111, 0.1);
    --premium-accent: #0A1733;
    --premium-bg: #f4f7fb;
    --premium-surface: #ffffff;
    --premium-border: #dbe4ef;
    --premium-text: #0f172a;
    --premium-muted: #64748b;
    --premium-radius-lg: 16px;
    --premium-radius-md: 12px;
    --premium-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

body.premium-ui {
    background: linear-gradient(180deg, #f8fbff 0%, var(--premium-bg) 100%);
    color: var(--premium-text);
}

body.premium-ui .app-premium-main,
body.premium-ui .app-premium-scroll {
    background: transparent;
}

body.premium-ui .content-header {
    padding: 18px 20px 8px;
}

body.premium-ui .content {
    padding: 0 var(--space-5) var(--space-5);
}

body.premium-ui .box,
body.premium-ui .card,
body.premium-ui .modal-content,
body.premium-ui .premium-panel {
    background: var(--premium-surface);
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius-lg);
    box-shadow: var(--premium-shadow);
}

/* ADD THIS JUST BELOW */
body.premium-ui .modal-content {
    overflow: hidden !important;
}

body.premium-ui .box-header,
body.premium-ui .card-header {
    border-bottom: 1px solid var(--premium-border);
    border-top-left-radius: var(--premium-radius-lg);
    border-top-right-radius: var(--premium-radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 14px 16px;
}

body.premium-ui .box-title,
body.premium-ui .card-title {
    font-weight: 700;
    color: #1e293b;
}

body.premium-ui .premium-panel {
    margin-bottom: var(--space-4);
}

body.premium-ui .premium-panel .box-body,
body.premium-ui .premium-panel .card-body {
    padding: var(--space-4);
}

body.premium-ui .premium-panel--filters .box-header {
    cursor: pointer;
}

body.premium-ui .premium-panel--filters .box-title a {
    color: #334155;
    font-weight: 700;
}

body.premium-ui .premium-panel--filters .box-title a:hover {
    color: var(--premium-primary);
}

body.premium-ui .nav-tabs-custom {
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius-lg);
    overflow: hidden;
    box-shadow: var(--premium-shadow);
    background: #fff;
}

body.premium-ui .nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--premium-border);
    background: #f8fbff;
    display: flex;
    flex-wrap: wrap;
    overflow: visible !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.premium-ui .nav-tabs-custom > .nav-tabs::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.premium-ui .nav-tabs-custom > .nav-tabs > li {
    float: none;
}

body.premium-ui .nav-tabs-custom > .nav-tabs > li > a {
    border: 0;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-weight: 600;
    padding: 14px 16px;
    white-space: nowrap;
}
body.premium-ui .nav-tabs-custom > .tab-content {
    padding: 20px 18px 18px;
}

body.premium-ui .location-settings-tabs > .tab-content {
    padding: 0;
}

body.premium-ui .location-settings-tabs .location-settings-pane {
    padding: 20px 18px 18px;
}

body.premium-ui .location-settings-tabs .location-settings-pane > .row {
    margin-left: -10px;
    margin-right: -10px;
}

body.premium-ui .location-settings-tabs .location-settings-pane > .row > [class*='col-'] {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

body.premium-ui .dt-nowrap {
    white-space: nowrap !important;
}

/* Sell-index date column canon (applied via aioInitDataTable) */
body.premium-ui table.dataTable th.aio-dt-date,
body.premium-ui table.dataTable td.aio-dt-date,
body.premium-ui table.dataTable th.text-center.ws-nowrap.aio-dt-date,
body.premium-ui table.dataTable td.text-center.ws-nowrap.aio-dt-date {
    text-align: center !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    min-width: 7.5rem;
}

/* Payment accounts name column — Cash & banks (force width past DT auto-layout) */
body.premium-ui #other_account_table th.aio-dt-name,
body.premium-ui #other_account_table td.aio-dt-name,
body.premium-ui table.dataTable th.aio-dt-name,
body.premium-ui table.dataTable td.aio-dt-name {
    white-space: normal !important;
    min-width: 18rem !important;
    width: 28% !important;
    max-width: 36rem;
    word-break: break-word;
    line-height: 1.35;
}
body.premium-ui #other_account_table {
    table-layout: auto;
}

/* Per-account cash flow page identity */
body.premium-ui .aio-cashflow-page .aio-cashflow-kpi {
    min-height: 4.5rem;
}
body.premium-ui .aio-cashflow-table .aio-cf-payment-details {
    font-size: 12px;
    line-height: 1.4;
    max-width: 18rem;
}
body.premium-ui .aio-cashflow-widget > .box-header {
    border-left: 3px solid var(--primary, #1E3A6F);
}

/* Sell index stacked date + muted time */
body.premium-ui table.dataTable .aio-dt-date-stack {
    white-space: nowrap;
    min-width: 5.5rem;
    line-height: 1.25;
}
body.premium-ui table.dataTable .aio-dt-date-day {
    font-weight: 500;
}
body.premium-ui table.dataTable .aio-dt-date-time {
    display: inline-block;
    margin-top: 1px;
    font-size: 11px;
    opacity: 0.85;
}
body.premium-ui .dt-wrap {
    white-space: normal !important;
}

body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a,
body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a:hover,
body.premium-ui .nav-tabs-custom > .nav-tabs > li.active > a:focus {
    color: var(--premium-primary);
    border-bottom-color: var(--premium-primary);
    background: #fff;
}

/* Finance area tabs (Books / Treasury) — match Fleet /vehicles shell exactly */
body.premium-ui .aio-finance-tabs-shell {
    margin: 0 0 20px;
}
/* Soft-nav loading on the active finance pane (tab-pane inside shell) */
body.premium-ui #aio-finance-pane {
    position: relative;
    min-height: 12rem;
    transition: opacity 120ms ease;
}
body.premium-ui #aio-finance-pane.aio-finance-pane--loading {
    opacity: 0.45;
    pointer-events: none;
}
body.premium-ui #aio-finance-pane.aio-finance-pane--loading::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: -0.875rem;
    border: 2px solid var(--border-color, #e2e8f0);
    border-top-color: var(--premium-primary, #1e3a6f);
    border-radius: 50%;
    animation: aio-finance-spin 0.7s linear infinite;
    z-index: 5;
}
@keyframes aio-finance-spin {
    to { transform: rotate(360deg); }
}

body.premium-ui .form-control,
body.premium-ui .input-group-addon,
body.premium-ui .select2-container--default .select2-selection--single,
body.premium-ui .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border, #c9d8e8);
    border-radius: var(--radius, 0.625rem);
    min-height: var(--input-height, 2.25rem);
    background: var(--background, #fff);
    box-shadow: none;
}

body.premium-ui .form-control:focus,
body.premium-ui .select2-container--default.select2-container--focus .select2-selection--single,
body.premium-ui .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: rgba(30, 58, 111, 0.5);
    box-shadow: 0 0 0 3px var(--premium-primary-soft);
}

body.premium-ui .select2-container {
    width: 100% !important;
}

body.premium-ui .btn,
body.premium-ui .tw-dw-btn {
    border-radius: 10px;
    font-weight: 600;
}

body.premium-ui .btn-primary,
body.premium-ui .tw-dw-btn-primary {
    background: linear-gradient(135deg, #1E3A6F, #2C4F8A);
    border-color: #1E3A6F;
}

body.premium-ui .btn-default,
body.premium-ui .tw-dw-btn-neutral {
    border-color: #cfd9e5;
    background: #fff;
    color: #334155;
}

body.premium-ui .table-responsive {
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius-md);
    background: #fff;
}

body.premium-ui table.table {
    margin-bottom: 0;
}

body.premium-ui table.table > thead > tr > th {
    border-bottom: 2px solid #d7e2ef;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f8fbff;
    vertical-align: middle;
}

body.premium-ui table.table > tbody > tr > td {
    border-top: 1px solid #edf2f7;
    vertical-align: middle;
    color: #334155;
}

body.premium-ui .dataTables_wrapper .dataTables_filter input,
body.premium-ui .dataTables_wrapper .dataTables_length select {
    border: 1px solid #c9d8e8;
    border-radius: 8px;
    padding: 6px 10px;
}

body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #d6e1ec !important;
    background: #fff !important;
}

body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-color: #1E3A6F !important;
    color: #1E3A6F !important;
    background: #EEF2F9 !important;
}

body.premium-ui #toast-container {
    /* Redundant with aio-notifications.css's #toast-container rule (both now
       resolve to --z-toast); kept for premium-theme selector specificity
       parity. Fixed from 200000 !important as part of B12/B24 cleanup. */
    z-index: var(--z-toast, 1400) !important;
}

body.premium-ui #toast-container.toast-top-right {
    top: 1rem !important;
    right: 1rem !important;
    bottom: auto !important;
    left: auto !important;
}

body.premium-ui #toast-container > div {
    /* Block layout + reserved left padding so the absolutely-positioned logo
       badge (::before, ~2.35rem at left:1rem) never overlaps the text. The old
       `padding` shorthand reset padding-left to 1rem, putting the logo on top
       of the message. Right padding leaves room for the close button. */
    display: block !important;
    padding: 0.95rem 2.5rem 0.95rem 4.25rem !important;
    background: #fff !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--premium-shadow) !important;
    color: var(--premium-text) !important;
    min-width: 18rem !important;
    max-width: 26rem !important;
    width: auto !important;
    background-image: none !important;
    border-left: 4px solid var(--premium-border) !important;
}

body.premium-ui #toast-container > .toast-success { border-left-color: #16a34a !important; }
body.premium-ui #toast-container > .toast-error { border-left-color: #dc2626 !important; }
body.premium-ui #toast-container > .toast-warning { border-left-color: #f59e0b !important; }
body.premium-ui #toast-container > .toast-info { border-left-color: var(--premium-primary) !important; }

body.premium-ui #toast-container > div .toast-title {
    color: var(--premium-text) !important;
}

body.premium-ui #toast-container > div .toast-message {
    color: var(--premium-muted) !important;
}

body.premium-ui .swal2-popup,
body.premium-ui .swal2-popup.aio-standard-modal {
    width: min(560px, calc(100vw - 2rem)) !important;
    border-radius: 18px !important;
    border: 1px solid var(--premium-border) !important;
    box-shadow: var(--premium-shadow) !important;
}

body.premium-ui .swal2-image {
    width: auto !important;
    max-width: min(200px, 70%) !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

body.premium-ui .swal2-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

body.premium-ui .swal2-icon {
    width: 4.25rem !important;
    height: 4.25rem !important;
}

@media (max-width: 640px) {
    body.premium-ui #toast-container.toast-top-right {
        top: 0.75rem !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
    }

    body.premium-ui #toast-container > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

body.premium-ui .badge,
body.premium-ui .label {
    border-radius: 999px;
}

/* Colors now reference the canonical --badge-*-bg/-text tokens (tokens.css)
   instead of hardcoded hex, resolving the B16 hex-drift audit finding
   (this file's own green/red/amber pairs previously differed from every
   other badge system in the app). */
body.premium-ui .label-success,
body.premium-ui .badge-success {
    background: var(--badge-success-bg, #dcfce7);
    color: var(--badge-success-text, #166534);
}

body.premium-ui .label-danger,
body.premium-ui .badge-danger {
    background: var(--badge-danger-bg, #fee2e2);
    color: var(--badge-danger-text, #991b1b);
}

body.premium-ui .label-warning,
body.premium-ui .badge-warning {
    background: var(--badge-warning-bg, #fef3c7);
    color: var(--badge-warning-text, #92400e);
}

body.premium-ui .app-header {
    border-bottom: 0;
    box-shadow: 0 10px 24px rgba(30, 58, 111, 0.2);
}

body.premium-ui .side-bar {
    border-right: 1px solid #dbe4ef;
    box-shadow: 6px 0 24px rgba(15, 23, 42, 0.04);
}

body.premium-ui .premium-table-head-center th,
body.premium-ui .premium-table-head-center .dataTables_scrollHead thead th,
body.premium-ui .premium-table-head-center .dataTables_scrollHeadInner table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

body.premium-ui .premium-dropdown-menu {
    top: 100%;
    margin-top: 0.5rem;
}

body.premium-ui .premium-shadow-none,
body.premium-ui .premium-surface-wrap {
    box-shadow: none !important;
}

body.premium-ui .premium-scroll-y {
    max-height: 500px;
    overflow-y: auto;
}

body.premium-ui .premium-row-gap {
    margin-bottom: var(--space-2);
}

body.premium-ui .premium-w-100 {
    width: 100% !important;
}

@media (max-width: 991px) {
    body.premium-ui .content-header {
        padding: 14px 14px 6px;
    }

    body.premium-ui .content {
        padding: 0 14px 14px;
    }

    body.premium-ui .box,
    body.premium-ui .card,
    body.premium-ui .modal-content,
    body.premium-ui .premium-panel,
    body.premium-ui .nav-tabs-custom {
        border-radius: 12px;
    }

    body.premium-ui .box-header,
    body.premium-ui .card-header {
        padding: var(--space-3);
    }

    body.premium-ui .nav-tabs-custom > .nav-tabs > li > a {
        padding: var(--space-3);
    }
}

body.premium-ui .premium-tabs-shell {
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
}

/* Contact show: never trap vertical scroll or datepicker inside the tabs shell.
   overflow:hidden on .contact-show-tabs clipped the ledger scroll body and made
   daterangepicker open then dismiss when the calendar was reparented/clipped. */
body.premium-ui .contact-show-page .contact-show-tabs {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}
body.premium-ui .contact-show-page .contact-show-tabs > .tab-content {
    overflow: visible !important;
}
body.premium-ui .contact-show-page .contact-ledger-view,
body.premium-ui .contact-show-page #contact_ledger_div {
    overflow: visible !important;
    max-height: none !important;
}
/* Ledger statement uses page scroll, not DataTables internal scrollY */
body.premium-ui .contact-show-page #contact_ledger_div .dataTables_scrollBody {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.premium-ui .contact-show-page #contact_balance_card_wrap {
    min-height: 3.5rem; /* compact strip; expands when details open */
}

/* Compact customer balance strip (contact show) */
body.premium-ui .aio-cb-card {
    border-left: 4px solid var(--primary, #147cbb);
}
body.premium-ui .aio-cb-card__body {
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
}
body.premium-ui .aio-cb-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4, 16px) var(--space-6, 24px);
}
body.premium-ui .aio-cb-strip__metric {
    display: flex;
    flex-direction: column;
    min-width: 7rem;
    gap: 2px;
}
body.premium-ui .aio-cb-strip__label {
    color: var(--muted-foreground, #64748b);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    line-height: 1.3;
}
body.premium-ui .aio-cb-strip__value {
    font-weight: 700;
    font-size: var(--font-size-lg, 18px);
    line-height: 1.25;
    color: var(--foreground, #0f172a);
}
body.premium-ui .aio-cb-strip__value--danger {
    color: var(--danger, #ef4444);
}
body.premium-ui .aio-cb-strip__meta {
    font-size: var(--font-size-xs, 12px);
    margin-top: 2px;
}
body.premium-ui .aio-cb-strip__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    align-items: center;
}
body.premium-ui .aio-cb-details-toggle .aio-cb-details-toggle__hide {
    display: none;
}
body.premium-ui .aio-cb-details-toggle.is-open .aio-cb-details-toggle__show {
    display: none;
}
body.premium-ui .aio-cb-details-toggle.is-open .aio-cb-details-toggle__hide {
    display: inline;
}
body.premium-ui .aio-cb-details__inner {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-color, #e2e8f0);
}
body.premium-ui .aio-cb-details__hint {
    font-size: var(--font-size-xs, 12px);
    margin: 0 0 var(--space-2, 8px);
}
body.premium-ui .aio-cb-recon {
    margin: var(--space-2, 8px) 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--bg-card-alt, #f8fafc);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm, 14px);
}
body.premium-ui .aio-cb-pending {
    margin: var(--space-2, 8px) 0;
    font-size: var(--font-size-sm, 14px);
}
body.premium-ui .aio-cb-sources {
    margin-top: var(--space-2, 8px);
}
body.premium-ui .aio-cb-sources__label {
    color: var(--muted-foreground, #64748b);
}
body.premium-ui .aio-cb-sources__value {
    font-weight: 600;
}
body.premium-ui .aio-cb-details__footer {
    margin-top: var(--space-3, 12px);
}
@media (max-width: 767px) {
    body.premium-ui .aio-cb-strip__actions {
        margin-left: 0;
        width: 100%;
    }
}

body.premium-ui .aio-main-tabs .nav-tabs,
body.premium-ui #ledger_format_tabs {
    border-bottom: 1px solid var(--premium-border);
    background: #f8fbff;
}

body.premium-ui .aio-main-tabs .nav-tabs > li > a,
body.premium-ui #ledger_format_tabs > li > a {
    color: #64748b;
    font-weight: 600;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0;
}

body.premium-ui .aio-main-tabs .nav-tabs > li.active > a,
body.premium-ui .aio-main-tabs .nav-tabs > li.active > a:hover,
body.premium-ui .aio-main-tabs .nav-tabs > li.active > a:focus,
body.premium-ui #ledger_format_tabs > li.active > a,
body.premium-ui #ledger_format_tabs > li.active > a:hover,
body.premium-ui #ledger_format_tabs > li.active > a:focus {
    color: var(--premium-primary) !important;
    border-bottom-color: var(--premium-primary) !important;
    background: #fff !important;
}

body.premium-ui .premium-logo-img {
    max-height: 40px;
    max-width: 100%;
}

body.premium-ui .premium-business-list {
    max-height: 60vh;
    overflow-y: auto;
}

body.premium-ui .premium-search-portal {
    z-index: 1500;
}

body.premium-ui .premium-search-results {
    max-height: calc(100vh - 150px);
    min-width: 320px;
}

body.premium-ui .premium-mobile-search-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Was 2147483646 (int32 max - 1) — a fullscreen mobile takeover overlay,
       not a dropdown/modal/toast; --z-max is the documented "vendor
       emergency only" ceiling, appropriate here since it must sit above
       everything. Fixed as part of B12/B24 z-index cleanup. */
    z-index: var(--z-max, 9999);
    background: #fff;
}

body.premium-ui .premium-mobile-search-top {
    padding: var(--space-3);
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    gap: 12px;
}

body.premium-ui .premium-mobile-search-input-wrap {
    position: relative;
    flex: 1;
}

body.premium-ui .premium-mobile-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #6b7280;
    pointer-events: none;
}

body.premium-ui .premium-mobile-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
}

body.premium-ui .premium-mobile-search-close {
    padding: 6px;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

body.premium-ui .premium-mobile-search-close:hover {
    background: #f3f4f6;
}

body.premium-ui .premium-mobile-search-close-icon {
    width: 22px;
    height: 22px;
}

body.premium-ui .premium-mobile-search-results {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    min-height: 0;
}

body.premium-ui #purchase_table th {
    white-space: nowrap;
}

body.premium-ui #purchase_table th i.fa,
body.premium-ui #purchase_table th i.fas,
body.premium-ui #purchase_table th i.glyphicon {
    display: inline-block;
    margin-left: 5px;
}

body.premium-ui #contact_table tbody tr[data-href] {
    cursor: pointer;
}

body.premium-ui .premium-inline-gap-right {
    margin-right: 5px;
}

body.premium-ui .premium-padding-0 {
    padding: 0 !important;
}

body.premium-ui .premium-margin-5 {
    margin: 5px;
}

body.premium-ui .premium-mt-15 {
    margin-top: var(--space-4);
}

body.premium-ui .contact-info-overflow-fix .box,
body.premium-ui .contact-info-overflow-fix .box-body {
    overflow: visible !important;
}

/* Contact phone validity badge — reserve height so show/hide does not reflow the form */
#aio_mobile_validity_badge,
.aio-phone-validity-badge {
    display: inline-block;
    min-height: 1.4em;
    margin-top: 6px;
    line-height: 1.4;
    vertical-align: middle;
}
#aio_mobile_validity_badge.aio-phone-badge--idle {
    visibility: hidden;
}

/* Contact show header card — dense info, no empty column stretch / ledger style bleed */
body.premium-ui .contact-show-info__grid {
    margin-left: -8px;
    margin-right: -8px;
}
body.premium-ui .contact-show-info__col {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: var(--space-3, 12px);
}
body.premium-ui .contact-show-info__col p {
    margin-bottom: var(--space-2, 8px);
}
body.premium-ui .contact-show-info__actions {
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--premium-border, var(--border-color, #e2e8f0));
}
/* Merged balance strip inside contact details widget (no second full card) */
body.premium-ui .contact-show-info__balance {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--premium-border, var(--border-color, #e2e8f0));
}
body.premium-ui .contact-show-info__balance > .aio-card {
    border: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
    border-left: 4px solid var(--primary, #147cbb);
    background: transparent;
}
body.premium-ui .contact-show-info__balance > .aio-card .aio-card-body {
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
}
body.premium-ui .contact-show-balance-card {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    margin-bottom: var(--space-4, 16px);
}
body.premium-ui .contact-show-balance-card--embedded {
    margin-bottom: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
    border: none;
    box-shadow: none;
    background: transparent;
}
body.premium-ui .contact-show-balance-card__label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
    font-weight: 600;
}
body.premium-ui .contact-show-balance-card__value {
    font-size: 22px;
    font-weight: 700;
    margin-top: var(--space-1, 4px);
}
/* Per-tab filter toolbar inside contact show panes */
body.premium-ui .contact-show-page .contact-tab-toolbar {
    margin-bottom: var(--space-3, 12px);
    padding: 0 0 var(--space-2, 8px);
    border-bottom: 1px solid var(--premium-border, var(--border-color, #e2e8f0));
}
body.premium-ui .contact-show-page .contact-tab-toolbar .form-group {
    margin-bottom: var(--space-2, 8px);
}
body.premium-ui .contact-show-page .contact-tabs-more.active > a {
    font-weight: 600;
}
/* Widgets on contact show must not inherit ledger print padding */
body.premium-ui .contact-show-page .premium-panel--widget.aio-card,
body.premium-ui #contact_info_section .premium-panel--widget,
/* ledger AJAX can inject unscoped .aio-card rules — neutralize on chrome widgets */
body.premium-ui .premium-panel--widget.aio-card {
    padding: 0 !important;
}

body.premium-ui .contact-payments-table > thead > tr > th:nth-child(1) { width: 18%; }
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(2),
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(3),
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(4),
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(5) { width: 15%; }
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(6) { width: 12%; }
body.premium-ui .contact-payments-table > thead > tr > th:nth-child(7) { width: 10%; }

body.premium-ui .premium-payment-row {
    padding: var(--space-4);
    background: #f8f9fe;
    border: 1px solid #d2d6de;
    border-radius: 8px;
    margin-bottom: var(--space-4);
    position: relative;
}

body.premium-ui .premium-payment-row-remove {
    position: absolute;
    top: 10px;
    right: 10px;
}

body.premium-ui .premium-payment-summary {
    background: #f8f9fe;
    border: 1px solid #d2d6de;
    padding: var(--space-4);
    border-radius: 8px;
}

body.premium-ui .premium-balance-highlight {
    background: #dff0d8;
    padding: var(--space-3);
    border-radius: 6px;
}

body.premium-ui .premium-balance-title {
    font-size: 16px;
}

body.premium-ui .premium-balance-amount {
    font-size: 24px;
}



html.dark-mode body.premium-ui .premium-payment-row,
html.dark-mode body.premium-ui .premium-payment-summary {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.3);
}

html.dark-mode body.premium-ui .premium-balance-highlight {
    background: rgba(22, 101, 52, 0.25);
}

html.dark-mode body.premium-ui .contact-payments-table > thead > tr > th {
    background: rgba(15, 23, 42, 0.65);
}



body.premium-ui .premium-inline-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.premium-ui .premium-nowrap {
    white-space: nowrap;
}

body.premium-ui .premium-contact-subtitle {
    padding-left: 28px;
    display: block;
}

body.premium-ui .premium-contact-info-value {
    padding-left: var(--space-5);
}

body.premium-ui .premium-contact-map {
    height: 450px;
}

body.premium-ui .premium-toolbar-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


@media (max-width: 767px) {
    body.premium-ui .aio-main-tabs .nav-tabs > li > a {
        padding: var(--space-3) var(--space-3);
        font-size: 12px;
    }

    body.premium-ui .premium-payment-row {
        padding: var(--space-3);
    }

    body.premium-ui .premium-payment-row [class*='col-'] {
        margin-bottom: var(--space-2);
    }

    body.premium-ui .dataTables_wrapper .dataTables_filter,
    body.premium-ui .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
    }

    body.premium-ui .dataTables_wrapper .dataTables_paginate {
        text-align: left;
        margin-top: var(--space-2);
    }
}
/* Unified dark-mode selectors for premium system */
html[data-theme="dark"] body.premium-ui,
html.dark-mode body.premium-ui,
body.dark-mode.premium-ui {
    --premium-bg: #0f141a;
    --premium-surface: #151b22;
    --premium-border: rgba(148, 163, 184, 0.28);
    --premium-text: #e2e8f0;
    --premium-muted: #94a3b8;
    background: linear-gradient(180deg, #0f141a 0%, #0b1016 100%);
    color: var(--premium-text);
}

html.dark-mode body.premium-ui .box,
html.dark-mode body.premium-ui .card,
html.dark-mode body.premium-ui .modal-content,
html.dark-mode body.premium-ui .premium-panel,
html.dark-mode body.premium-ui .nav-tabs-custom,
html.dark-mode body.premium-ui .table-responsive,
html[data-theme="dark"] body.premium-ui .box,
html[data-theme="dark"] body.premium-ui .card,
html[data-theme="dark"] body.premium-ui .modal-content,
html[data-theme="dark"] body.premium-ui .premium-panel,
html[data-theme="dark"] body.premium-ui .nav-tabs-custom,
html[data-theme="dark"] body.premium-ui .table-responsive,
body.dark-mode.premium-ui .box,
body.dark-mode.premium-ui .card,
body.dark-mode.premium-ui .modal-content,
body.dark-mode.premium-ui .premium-panel,
body.dark-mode.premium-ui .nav-tabs-custom,
body.dark-mode.premium-ui .table-responsive {
    background: var(--premium-surface);
    border-color: var(--premium-border);
    color: var(--premium-text);
}

html.dark-mode body.premium-ui .box-header,
html.dark-mode body.premium-ui .card-header,
html.dark-mode body.premium-ui .nav-tabs-custom > .nav-tabs,
html.dark-mode body.premium-ui table.table > thead > tr > th,
html[data-theme="dark"] body.premium-ui .box-header,
html[data-theme="dark"] body.premium-ui .card-header,
html[data-theme="dark"] body.premium-ui .nav-tabs-custom > .nav-tabs,
html[data-theme="dark"] body.premium-ui table.table > thead > tr > th,
body.dark-mode.premium-ui .box-header,
body.dark-mode.premium-ui .card-header,
body.dark-mode.premium-ui .nav-tabs-custom > .nav-tabs,
body.dark-mode.premium-ui table.table > thead > tr > th {
    background: rgba(30, 41, 59, 0.72);
    border-color: var(--premium-border);
    color: #cbd5e1;
}

html.dark-mode body.premium-ui table.table > tbody > tr > td,
html[data-theme="dark"] body.premium-ui table.table > tbody > tr > td,
body.dark-mode.premium-ui table.table > tbody > tr > td {
    border-color: rgba(71, 85, 105, 0.35);
    color: var(--premium-text);
}

html.dark-mode body.premium-ui table.table > tbody > tr:hover > td,
html[data-theme="dark"] body.premium-ui table.table > tbody > tr:hover > td,
body.dark-mode.premium-ui table.table > tbody > tr:hover > td {
    background: rgba(51, 65, 85, 0.35);
}

html.dark-mode body.premium-ui .form-control,
html.dark-mode body.premium-ui .input-group-addon,
html.dark-mode body.premium-ui .select2-container--default .select2-selection--single,
html.dark-mode body.premium-ui .select2-container--default .select2-selection--multiple,
html.dark-mode body.premium-ui .dropdown-menu,
html[data-theme="dark"] body.premium-ui .form-control,
html[data-theme="dark"] body.premium-ui .input-group-addon,
html[data-theme="dark"] body.premium-ui .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.premium-ui .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] body.premium-ui .dropdown-menu,
body.dark-mode.premium-ui .form-control,
body.dark-mode.premium-ui .input-group-addon,
body.dark-mode.premium-ui .select2-container--default .select2-selection--single,
body.dark-mode.premium-ui .select2-container--default .select2-selection--multiple,
body.dark-mode.premium-ui .dropdown-menu {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

html.dark-mode body.premium-ui .select2-dropdown,
html.dark-mode body.premium-ui .select2-results__option,
html[data-theme="dark"] body.premium-ui .select2-dropdown,
html[data-theme="dark"] body.premium-ui .select2-results__option,
body.dark-mode.premium-ui .select2-dropdown,
body.dark-mode.premium-ui .select2-results__option {
    background: #1e293b;
    color: #e2e8f0;
}

html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_filter input,
html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_length select,
body.dark-mode.premium-ui .dataTables_wrapper .dataTables_filter input,
body.dark-mode.premium-ui .dataTables_wrapper .dataTables_length select {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button,
html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-mode.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #cbd5e1 !important;
}

html.dark-mode body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] body.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode.premium-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(30, 58, 111, 0.22) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
}

html.dark-mode body.premium-ui .dropdown-menu > li > a,
html.dark-mode body.premium-ui .select2-container--default .select2-results__option,
html[data-theme="dark"] body.premium-ui .dropdown-menu > li > a,
html[data-theme="dark"] body.premium-ui .select2-container--default .select2-results__option,
body.dark-mode.premium-ui .dropdown-menu > li > a,
body.dark-mode.premium-ui .select2-container--default .select2-results__option {
    color: #e2e8f0;
}

/* .modal-header .close override removed — components.css's .aio-modal-header
   .close already sets the correct light-on-gradient close-button color/opacity
   regardless of theme (B10 modal-header consolidation). */

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}
body.premium-ui .premium-balance-footer {
    text-align: right;
    width: 100%;
    font-weight: 700;
}

body.premium-ui .premium-option-strong {
    font-weight: 700;
}
body.premium-ui .premium-flex-row-full {
    display: flex;
    width: 100%;
}

body.premium-ui .premium-mb-4 {
    margin-bottom: var(--space-1);
}

body.premium-ui .premium-mb-5 {
    margin-bottom: 5px;
}

body.premium-ui .premium-mt-20 {
    margin-top: var(--space-5);
}

body.premium-ui .permission-table {
    margin-bottom: var(--space-5);
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.premium-ui .permission-table thead > tr > th {
    background-color: #f9f9f9;
    font-weight: 600;
    border-bottom-width: 2px;
    border-color: #ddd;
}

body.premium-ui .permission-table > tbody > tr > td:first-child {
    font-weight: 600;
    vertical-align: top;
    width: 25%;
    padding: var(--space-4);
}

body.premium-ui .permission-table > tbody > tr > td:last-child {
    vertical-align: top;
    padding: var(--space-3) var(--space-4);
}

body.premium-ui .permission-table .permission-group-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -5px;
    margin-right: -5px;
}

body.premium-ui .permission-table .permission-group-row > [class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
}

body.premium-ui .permission-table hr {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    border-color: #eee;
    width: 100%;
}

body.premium-ui .permission-table .check_all_row {
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
    body.premium-ui .permission-table {
        font-size: 14px;
    }

    body.premium-ui .permission-table > tbody > tr > td:first-child {
        width: 100% !important;
        display: block;
        padding: var(--space-3) var(--space-3);
        border-bottom: 1px solid #eee;
        background-color: #f8f9fa;
    }

    body.premium-ui .permission-table > tbody > tr > td:last-child {
        display: block;
        width: 100% !important;
        padding: var(--space-3) var(--space-3);
    }

    body.premium-ui .permission-table .permission-group-row {
        margin-left: 0;
        margin-right: 0;
    }

    body.premium-ui .permission-table .permission-group-row > [class*='col-'] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-2);
        padding-left: 0;
        padding-right: 0;
    }

    body.premium-ui .permission-table .permission-group-row > .col-md-4,
    body.premium-ui .permission-table .permission-group-row > .col-md-6,
    body.premium-ui .permission-table .permission-group-row > .col-md-8,
    body.premium-ui .permission-table .permission-group-row > .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.premium-ui .permission-group-row .checkbox,
    body.premium-ui .permission-group-row .radio {
        margin-bottom: var(--space-3);
        padding: var(--space-2);
        border: 1px solid #f0f0f0;
        border-radius: 6px;
        background: #fff;
    }

    body.premium-ui .permission-table label {
        display: flex !important;
        align-items: center;
        padding: var(--space-2) var(--space-1);
        margin: 0 !important;
        min-height: 44px;
        cursor: pointer;
    }

    body.premium-ui .permission-table strong {
        display: block;
        margin-bottom: var(--space-3);
        font-size: 15px;
        color: #333;
    }

    body.premium-ui .permission-table hr {
        margin: var(--space-4) 0;
    }

    body.premium-ui .text-center .btn {
        width: 100%;
        margin-bottom: var(--space-3);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body.premium-ui .permission-table .permission-group-row > .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    body.premium-ui .permission-table > tbody > tr > td:first-child {
        width: 30%;
    }
}

html.dark-mode body.premium-ui .permission-table,
html[data-theme='dark'] body.premium-ui .permission-table,
body.dark-mode.premium-ui .permission-table {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 2px 6px rgba(2, 6, 23, 0.45);
}

html.dark-mode body.premium-ui .permission-table thead > tr > th,
html[data-theme='dark'] body.premium-ui .permission-table thead > tr > th,
body.dark-mode.premium-ui .permission-table thead > tr > th {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

html.dark-mode body.premium-ui .permission-table > tbody > tr > td:first-child,
html[data-theme='dark'] body.premium-ui .permission-table > tbody > tr > td:first-child,
body.dark-mode.premium-ui .permission-table > tbody > tr > td:first-child {
    background: rgba(30, 41, 59, 0.35);
    color: #e2e8f0;
}
body.premium-ui .premium-module-shell {
    padding-top: var(--space-1);
}

/* AdvancedReports renderer cleanup utilities */
body.premium-ui .premium-ar-card {
    flex: 0 1 var(--premium-ar-card-width, calc(25% - 8px));
    min-width: 200px;
    margin-bottom: var(--space-3);
}

body.premium-ui .premium-ar-info-box {
    margin: 0;
}

body.premium-ui .premium-ar-text-xs {
    font-size: 11px;
}

body.premium-ui .premium-ar-text-sm {
    font-size: 12px;
}

body.premium-ui .premium-ar-text-md {
    font-size: 14px;
}

body.premium-ui .premium-ar-text-lg {
    font-size: 16px;
}

body.premium-ui .premium-ar-progress-3 {
    height: 3px;
}

body.premium-ui .premium-ar-progress-4 {
    height: 4px;
}

body.premium-ui .premium-ar-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.premium-ui .premium-ar-table-row {
    font-size: 12px;
}

body.premium-ui .premium-ar-invoice {
    font-size: 11px;
}

body.premium-ui .premium-ar-label {
    font-size: 10px;
}

body.premium-ui .premium-ar-product-ellipsis {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.premium-ui .premium-ar-total-row {
    font-weight: 700;
}

body.premium-ui .premium-ar-td-center {
    text-align: center;
}

body.premium-ui .premium-ar-td-right {
    text-align: right;
}

html.dark-mode body.premium-ui .premium-ar-product-ellipsis,
html[data-theme='dark'] body.premium-ui .premium-ar-product-ellipsis,
body.dark-mode.premium-ui .premium-ar-product-ellipsis {
    color: #e2e8f0;
}

html.dark-mode body.premium-ui .premium-ar-table-row .label,
html[data-theme='dark'] body.premium-ui .premium-ar-table-row .label,
body.dark-mode.premium-ui .premium-ar-table-row .label {
    filter: brightness(0.92) saturate(1.1);
}

@media (max-width: 992px) {
    body.premium-ui .premium-ar-card {
        flex-basis: calc(50% - 8px);
        min-width: 180px;
    }
}

@media (max-width: 576px) {
    body.premium-ui .premium-ar-card {
        flex-basis: 100%;
        min-width: 160px;
    }
}

body.premium-ui .premium-ar-table-scroll {
    max-height: 400px;
    overflow-y: auto;
}

body.premium-ui .premium-ar-sticky-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f5f7fb;
}

body.premium-ui .premium-ar-col-80 {
    width: 80px;
}

body.premium-ui .premium-ar-col-90 {
    width: 90px;
}

body.premium-ui .premium-ar-col-100 {
    width: 100px;
}

body.premium-ui .premium-ar-col-120 {
    width: 120px;
}

body.premium-ui .premium-ar-col-min-200 {
    min-width: 200px;
}

html.dark-mode body.premium-ui .premium-ar-sticky-head,
html[data-theme='dark'] body.premium-ui .premium-ar-sticky-head,
body.dark-mode.premium-ui .premium-ar-sticky-head {
    background: #1f2937;
}

/* POS/plain-layout runtime hardening utilities */
body.premium-ui .premium-pos-hidden {
    display: none !important;
}

body.premium-ui .premium-pos-z-4000 {
    z-index: 4000;
}

body.premium-ui .premium-pos-title-tight {
    margin-bottom: 0 !important;
    margin-top: 5px;
}

body.premium-ui .premium-pos-title-reset {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: inherit;
    font-weight: inherit;
}

body.premium-ui .premium-pos-card-body-tight {
    margin-bottom: -20px;
}

body.premium-ui .premium-pos-inline-link {
    padding: 0 5px;
}

body.premium-ui .premium-pos-label-top {
    padding-top: 5px;
}

body.premium-ui .premium-pos-history-info {
    display: none;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

body.premium-ui .premium-pos-history-image {
    max-height: 60px;
    border-radius: 8px;
}

body.premium-ui .premium-pos-text-13 {
    font-size: 13px;
}

body.premium-ui .premium-pos-tabs-hidden {
    display: none;
}

body.premium-ui .premium-pos-tab-content {
    padding-top: var(--space-4);
}

body.premium-ui .premium-pos-loading {
    display: none;
    text-align: center;
    padding: 50px;
}

body.premium-ui .premium-pos-step-hidden {
    display: none;
}

body.premium-ui .premium-pos-mt-20 {
    margin-top: var(--space-5);
}

html.dark-mode body.premium-ui .premium-pos-history-info,
html[data-theme='dark'] body.premium-ui .premium-pos-history-info,
body.dark-mode.premium-ui .premium-pos-history-info {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.45);
}
/* ==========================================================================
   FIX: FORCE ROUNDED CORNERS ON PANELS & INNER BODIES
   ========================================================================== */

/* 1. Force the main panel to clip any square children */
body.premium-ui .premium-panel {
    overflow: hidden !important;
}

/* 2. Explicitly round the bottom of the inner content areas just in case */
body.premium-ui .premium-panel .panel-collapse,
body.premium-ui .premium-panel .box-body {
    border-bottom-left-radius: var(--premium-radius-lg) !important;
    border-bottom-right-radius: var(--premium-radius-lg) !important;
}
/* ==========================================================================
   FIX: RESTORE DROPDOWN ARROWS
   ========================================================================== */
body.premium-ui select.form-control {
    /* Re-add the custom SVG arrow (native selects only — select2 keeps its own
       native triangle; adding the chevron here too caused a double arrow). */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; 
    background-position: right 12px center !important; 
    background-size: 16px !important;
    padding-right: 30px !important; 
    
    /* Hide default browser styling */
    -webkit-appearance: none !important; 
    -moz-appearance: none !important; 
    appearance: none !important;
}

/* Dark Mode: Use a lighter colored arrow so it shows up on dark backgrounds */
html.dark-mode body.premium-ui select.form-control,
html[data-theme='dark'] body.premium-ui select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e") !important;
}
/* ==========================================================================
   FIX: TABLE & NOTES ROUNDED CORNERS (Prevent Bleeding)
   ========================================================================== */

/* 1. Force table wrappers to allow horizontal scroll while clipping vertical overflow */
body.premium-ui .table-responsive {
    border-radius: var(--premium-radius-md) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--premium-border) !important;
    background-color: var(--premium-surface) !important;
}

/* 2. Ensure the table sits flush inside the wrapper without double borders */
body.premium-ui .table-responsive .table {
    margin-bottom: 0 !important;
    border-style: hidden !important; 
}

/* 3. Round the corners of the "Notes" sections (.well) */
body.premium-ui .well {
    border-radius: var(--premium-radius-md) !important;
    border: 1px solid var(--premium-border) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}


/* ========================================================================== 
   PREMIUM SETTINGS MODULE
   ========================================================================== */

body.premium-ui .pos-tab-content.premium-settings-pane { display: none; }
body.premium-ui .pos-tab-content.premium-settings-pane.active { display: block; }

body.premium-ui .premium-settings-nav-shell { overflow: visible; }

body.premium-ui .premium-settings-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--premium-muted) !important;
    background: var(--premium-surface) !important;
    border: 1px solid var(--premium-border) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-2);
}

body.premium-ui .premium-settings-tab:hover {
    background: var(--premium-primary-soft) !important;
    color: var(--premium-primary) !important;
}

body.premium-ui .premium-settings-tab.active {
    background: linear-gradient(135deg, var(--premium-primary), #1b8dd2) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(30, 58, 111, 0.25) !important;
}

body.premium-ui .premium-settings-tab.active i { color: #fff !important; opacity: 1 !important; }
body.premium-ui .premium-settings-pane { padding: 2px; }

body.premium-ui .premium-settings-hero {
    margin-bottom: 18px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid rgba(30, 58, 111, 0.10);
    background: linear-gradient(135deg, rgba(30, 58, 111,.12), rgba(30, 58, 111,.04));
}

body.premium-ui .premium-settings-hero__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--premium-text);
}

body.premium-ui .premium-settings-hero__desc {
    margin: var(--space-2) 0 0;
    color: var(--premium-muted);
    font-size: 13px;
    line-height: 1.65;
}

body.premium-ui .premium-settings-card {
    margin-bottom: 18px;
    padding: var(--space-5);
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background: var(--premium-surface);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}

body.premium-ui .premium-settings-card__title {
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--premium-text);
}

body.premium-ui .premium-settings-section-label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--premium-muted);
}

body.premium-ui .premium-settings-subcard {
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--premium-border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.9));
}

body.premium-ui .premium-settings-subcard__title {
    margin: 0 0 var(--space-3);
    font-size: 15px;
    font-weight: 700;
}

body.premium-ui .premium-settings-muted { color: var(--premium-muted); font-size: 13px; }

body.premium-ui .premium-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

body.premium-ui .premium-settings-tip {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    background: rgba(59, 130, 246, 0.07);
    color: #1e3a8a;
}

body.premium-ui .premium-settings-tip--soft { margin-top: 0; }

body.premium-ui .premium-settings-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--premium-border);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    font-weight: 600;
}

body.premium-ui .premium-settings-collapse-box {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--premium-border);
    border-radius: 16px;
    background: rgba(248, 250, 252, .75);
}

/* Settings layout discipline */
body.premium-ui .premium-settings-pane .row,
body.premium-ui .premium-settings-card .row,
body.premium-ui .premium-settings-subcard .row,
body.premium-ui .premium-settings-collapse-box .row {
    margin-left: -10px;
    margin-right: -10px;
}

body.premium-ui .premium-settings-pane .row > [class*='col-'],
body.premium-ui .premium-settings-card .row > [class*='col-'],
body.premium-ui .premium-settings-subcard .row > [class*='col-'],
body.premium-ui .premium-settings-collapse-box .row > [class*='col-'] {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

body.premium-ui .premium-settings-pane .form-group,
body.premium-ui .premium-settings-card .form-group,
body.premium-ui .premium-settings-subcard .form-group,
body.premium-ui .premium-settings-collapse-box .form-group {
    margin-bottom: 18px;
}

body.premium-ui .premium-settings-pane .input-group,
body.premium-ui .premium-settings-card .input-group,
body.premium-ui .premium-settings-subcard .input-group,
body.premium-ui .premium-settings-collapse-box .input-group {
    width: 100%;
    table-layout: fixed;
}

body.premium-ui .premium-settings-pane .input-group .form-control,
body.premium-ui .premium-settings-card .input-group .form-control,
body.premium-ui .premium-settings-subcard .input-group .form-control,
body.premium-ui .premium-settings-collapse-box .input-group .form-control,
body.premium-ui .premium-settings-pane .select2-container,
body.premium-ui .premium-settings-card .select2-container,
body.premium-ui .premium-settings-subcard .select2-container,
body.premium-ui .premium-settings-collapse-box .select2-container {
    width: 100% !important;
}

body.premium-ui .premium-settings-pane .input-group-addon,
body.premium-ui .premium-settings-card .input-group-addon,
body.premium-ui .premium-settings-subcard .input-group-addon,
body.premium-ui .premium-settings-collapse-box .input-group-addon {
    min-width: 44px;
    width: 44px;
    padding: 0 var(--space-3);
    text-align: center;
    vertical-align: middle;
}

/* File input fixes */
body.premium-ui .premium-file-input-group {
    width: 100%;
    table-layout: fixed;
}

body.premium-ui .premium-file-input-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border, #c9d8e8);
    border-left: 0;
    border-radius: 0 var(--radius, 0.625rem) var(--radius, 0.625rem) 0;
    min-height: var(--input-height, 2.25rem);
    background: var(--background, #fff);
}

body.premium-ui .premium-file-input {
    display: block;
    width: 100%;
    min-height: var(--input-height, 2.25rem);
    padding: var(--space-2) var(--space-3);
}

body.premium-ui .premium-settings-file-group .help-block { margin-top: var(--space-2); }

/* Custom labels arrangement */
body.premium-ui .premium-custom-labels-card { height: 100%; }
body.premium-ui .premium-custom-label-split { display: flex; width: 100%; gap: 0; }
body.premium-ui .premium-custom-label-split__main { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
body.premium-ui .premium-custom-label-split__side { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 115px; }
body.premium-ui .premium-custom-label-options { background: #fffbea; }
body.premium-ui .premium-custom-label-checks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-3); }
body.premium-ui .premium-custom-label-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #475569; }
body.premium-ui .premium-add-field-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--premium-primary);
    font-weight: 700;
}
body.premium-ui .premium-add-field-btn .count-text { color: var(--premium-muted); font-weight: 600; }

@media (max-width: 1199px) {
    body.premium-ui .pos-tab-menu { margin-bottom: var(--space-5); }
    body.premium-ui .nav-pills-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 4px 2px 10px !important;
        scroll-behavior: smooth;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    body.premium-ui .nav-pills-mobile::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
    body.premium-ui .premium-settings-tab { min-width: max-content; padding: var(--space-3) var(--space-4) !important; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body.premium-ui .business-settings-modern .pos-tab-menu {
        margin-bottom: 0;
    }

    body.premium-ui .business-settings-modern .nav-pills-mobile {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
        padding: var(--space-3) var(--space-2) !important;
        scrollbar-width: thin !important;
    }

    body.premium-ui .business-settings-modern .premium-settings-tab {
        min-width: 0 !important;
        width: 100% !important;
        padding: 9px 12px !important;
    }
}

@media (max-width: 767px) {
    body.premium-ui .premium-settings-hero { padding: var(--space-4); }
    body.premium-ui .premium-settings-card { padding: var(--space-4); }
    body.premium-ui .premium-settings-hero__title { font-size: 18px; }
    body.premium-ui .premium-settings-pane .row,
    body.premium-ui .premium-settings-card .row,
    body.premium-ui .premium-settings-subcard .row,
    body.premium-ui .premium-settings-collapse-box .row { margin-left: -6px; margin-right: -6px; }
    body.premium-ui .premium-settings-pane .row > [class*='col-'],
    body.premium-ui .premium-settings-card .row > [class*='col-'],
    body.premium-ui .premium-settings-subcard .row > [class*='col-'],
    body.premium-ui .premium-settings-collapse-box .row > [class*='col-'] { padding-left: 6px; padding-right: 6px; }
}

html.dark-mode body.premium-ui .premium-settings-tab,
html[data-theme='dark'] body.premium-ui .premium-settings-tab,
body.dark-mode.premium-ui .premium-settings-tab { color: #cbd5e1 !important; }

html.dark-mode body.premium-ui .premium-settings-tab:hover,
html[data-theme='dark'] body.premium-ui .premium-settings-tab:hover,
body.dark-mode.premium-ui .premium-settings-tab:hover { background-color: rgba(51, 65, 85, 0.5) !important; color: #7dd3fc !important; }

html.dark-mode body.premium-ui .premium-settings-tab.active,
html[data-theme='dark'] body.premium-ui .premium-settings-tab.active,
body.dark-mode.premium-ui .premium-settings-tab.active {
    background: linear-gradient(135deg, var(--premium-primary), #0f5b8a) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(15, 91, 138, 0.4) !important;
}

html.dark-mode body.premium-ui .premium-settings-card,
html[data-theme='dark'] body.premium-ui .premium-settings-card,
body.dark-mode.premium-ui .premium-settings-card,
html.dark-mode body.premium-ui .premium-settings-subcard,
html[data-theme='dark'] body.premium-ui .premium-settings-subcard,
body.dark-mode.premium-ui .premium-settings-subcard,
html.dark-mode body.premium-ui .premium-settings-collapse-toggle,
html[data-theme='dark'] body.premium-ui .premium-settings-collapse-toggle,
body.dark-mode.premium-ui .premium-settings-collapse-toggle,
html.dark-mode body.premium-ui .premium-settings-collapse-box,
html[data-theme='dark'] body.premium-ui .premium-settings-collapse-box,
body.dark-mode.premium-ui .premium-settings-collapse-box,
html.dark-mode body.premium-ui .premium-file-input-wrap,
html[data-theme='dark'] body.premium-ui .premium-file-input-wrap,
html[data-theme='premium-dark'] body.premium-ui .premium-file-input-wrap,
html[data-theme='midnight-gold'] body.premium-ui .premium-file-input-wrap,
body.dark-mode.premium-ui .premium-file-input-wrap {
    background: var(--background, rgba(15, 23, 42, 0.7));
    border-color: var(--border, rgba(148, 163, 184, 0.18));
    color: var(--foreground, #e2e8f0);
}

html.dark-mode body.premium-ui .premium-settings-hero,
html[data-theme='dark'] body.premium-ui .premium-settings-hero,
body.dark-mode.premium-ui .premium-settings-hero {
    background: linear-gradient(135deg, rgba(30, 58, 111,.16), rgba(15,23,42,.9));
    border-color: rgba(56, 189, 248, 0.18);
}

html.dark-mode body.premium-ui .premium-settings-hero__title,
html[data-theme='dark'] body.premium-ui .premium-settings-hero__title,
body.dark-mode.premium-ui .premium-settings-hero__title { color: #f8fafc; }

html.dark-mode body.premium-ui .premium-settings-tip,
html[data-theme='dark'] body.premium-ui .premium-settings-tip,
body.dark-mode.premium-ui .premium-settings-tip {
    background: rgba(30, 64, 175, 0.16);
    border-color: rgba(96, 165, 250, 0.24);
    color: #bfdbfe;
}

body.premium-ui .premium-report-shell {
    display: grid;
    gap: 1.5rem;
}

body.premium-ui .premium-report-table {
    width: 100% !important;
}

body.premium-ui .premium-report-date-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
    min-width: 85px;
}

body.premium-ui .premium-report-date-cell__time {
    display: block;
    font-size: 12px;
}

body.premium-ui .premium-report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

body.premium-ui .premium-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

body.premium-ui .premium-report-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.premium-ui .premium-report-metric-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
}

body.premium-ui .premium-report-metric-card__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.85;
    text-transform: uppercase;
}

body.premium-ui .premium-report-metric-card__value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

body.premium-ui .premium-report-metric-card__meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 13px;
    opacity: 0.92;
}

body.premium-ui .premium-report-metric-card--blue { background: linear-gradient(135deg, #0f4c81, #2b8ac6); }
body.premium-ui .premium-report-metric-card--red { background: linear-gradient(135deg, #a61b3f, #e15368); }
body.premium-ui .premium-report-metric-card--green { background: linear-gradient(135deg, #0f6b53, #22b07d); }
body.premium-ui .premium-report-metric-card--gold { background: linear-gradient(135deg, #9a6400, #f0aa2b); }
body.premium-ui .premium-report-metric-card--slate { background: linear-gradient(135deg, #334155, #64748b); }
body.premium-ui .premium-report-metric-card--teal { background: linear-gradient(135deg, #155e75, #22c1c3); }

body.premium-ui .premium-report-stat-table > tbody > tr > th,
body.premium-ui .premium-report-stat-table > tbody > tr > td {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0.95rem 0.75rem;
}

body.premium-ui .premium-report-stat-table > tbody > tr:first-child > th,
body.premium-ui .premium-report-stat-table > tbody > tr:first-child > td {
    border-top: 0;
}

body.premium-ui .premium-report-highlight {
    font-weight: 700;
    color: #1E3A6F;
}

body.premium-ui .premium-report-negative {
    color: #dc2626;
}

body.premium-ui .premium-report-total-row {
    background: rgba(30, 58, 111, 0.08) !important;
    font-weight: 700;
}

body.premium-ui .premium-report-kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

body.premium-ui .premium-report-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body.premium-ui .premium-report-empty {
    padding: 2rem;
    text-align: center;
    color: #64748b;
}

body.premium-ui .premium-report-inline-spacer {
    margin-top: 0.75rem;
}

body.premium-ui .premium-report-header-note {
    color: #64748b;
    font-size: 0.95em;
    font-weight: 600;
}

body.premium-ui .premium-report-modal-loader {
    padding: 2.5rem 1rem;
    text-align: center;
}

html.dark-mode body.premium-ui .premium-report-total-row,
html[data-theme="dark"] body.premium-ui .premium-report-total-row,
body.dark-mode.premium-ui .premium-report-total-row {
    background: rgba(96, 165, 250, 0.12) !important;
}

html.dark-mode body.premium-ui .premium-report-empty,
html[data-theme="dark"] body.premium-ui .premium-report-empty,
body.dark-mode.premium-ui .premium-report-empty,
html.dark-mode body.premium-ui .premium-report-header-note,
html[data-theme="dark"] body.premium-ui .premium-report-header-note,
body.dark-mode.premium-ui .premium-report-header-note {
    color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   Premium Header Notifications + Select2 Width Hardening
   -------------------------------------------------------------------------- */
body.premium-ui .app-header {
    position: relative;
    z-index: 1100;
    overflow: visible;
    isolation: isolate;
}

body.premium-ui .app-header-actions,
body.premium-ui .app-header-notifications,
body.premium-ui .app-header-notification,
body.premium-ui .navbar-custom-menu,
body.premium-ui .navbar-nav {
    position: relative;
    overflow: visible;
}

/* Keep the notification dropdown closed until Bootstrap toggles the `.open`
   class. The rules below force `display: flex` for layout, which would
   otherwise override Bootstrap's default `display: none` and leave the
   dropdown permanently visible. */
.notifications-menu:not(.open) > .app-header-notification-menu {
    display: none !important;
}

body.premium-ui .app-header-notification-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 20rem;
    max-width: min(24rem, calc(100vw - 24px));
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 1500 !important;
    border: 1px solid var(--premium-border);
    border-radius: var(--premium-radius-md);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}

body.premium-ui .app-header-notification-menu > li {
    flex: 0 0 auto;
}

body.premium-ui .app-header-notification-menu > li.notif-list-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.premium-ui #notifications_list.app-header-notification-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    padding: 0.25rem;
    margin: 0;
}

body.premium-ui .app-header-notification-list > li.notification-li {
    padding: 0;
    margin: 0;
}

body.premium-ui .app-header-notification-list > li.notification-li.unread {
    background: rgba(30, 58, 111, 0.07);
    border-radius: var(--premium-radius-md);
}

body.premium-ui .app-header-notification-list .notif-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    color: var(--premium-text);
    text-decoration: none;
    border-radius: var(--premium-radius-md);
    transition: background 0.15s ease;
}

body.premium-ui .app-header-notification-list .notif-link:hover,
body.premium-ui .app-header-notification-list .notif-link:focus {
    background: rgba(15, 23, 42, 0.05);
    outline: none;
}

body.premium-ui .app-header-notification-list .notif-main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

body.premium-ui .app-header-notification-list .notif-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    margin-right: 0 !important;
    font-size: 0.85rem;
    color: inherit;
}

body.premium-ui .app-header-notification-list .notif-info {
    flex: 1 1 auto;
    line-height: 1.45;
    word-break: break-word;
}

body.premium-ui .app-header-notification-list .notif-time {
    font-size: 0.75rem;
    color: #64748b;
    padding-left: 1.35rem;
}

body.premium-ui .app-header-notification-list > li.no-notification {
    padding: 0.75rem;
    color: #64748b;
}

body.premium-ui .sell-location-select2-dropdown {
    box-sizing: border-box;
    max-width: 100%;
}

body.premium-ui #select_location_id + .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Preserve semantic status colors from feature markup instead of premium recoloring. */
body.premium-ui .label-success,
body.premium-ui .bg-green,
body.premium-ui .bg-success {
    background: #00a65a !important;
    color: #ffffff !important;
    border-color: #00a65a !important;
}

body.premium-ui .label-danger,
body.premium-ui .bg-red,
body.premium-ui .bg-danger {
    background: #dd4b39 !important;
    color: #ffffff !important;
    border-color: #dd4b39 !important;
}

body.premium-ui .label-warning,
body.premium-ui .bg-yellow,
body.premium-ui .bg-warning {
    background: #f39c12 !important;
    color: #ffffff !important;
    border-color: #f39c12 !important;
}

body.premium-ui .label-info,
body.premium-ui .bg-aqua,
body.premium-ui .bg-blue,
body.premium-ui .bg-info {
    background: #00c0ef !important;
    color: #ffffff !important;
    border-color: #00c0ef !important;
}

/* --------------------------------------------------------------------------
   Unified Select + Select2 Form System
   -------------------------------------------------------------------------- */
body.premium-ui {
    --premium-select-height: 40px;
    --premium-select-radius: var(--premium-radius-md);
    --premium-select-padding-x: 12px;
    --premium-select-padding-right: 36px;
    --premium-select-border: #c9d8e8;
    --premium-select-border-hover: #b8cbe0;
    --premium-select-bg: #ffffff;
    --premium-select-text: #334155;
    --premium-select-placeholder: #64748b;
    --premium-select-disabled-bg: #f8fafc;
    --premium-select-disabled-text: #94a3b8;
    --premium-select-error: #dc2626;
    --premium-select-error-ring: rgba(220, 38, 38, 0.14);
    --premium-select-dropdown-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
    --premium-select-option-hover: #f8fbff;
    --premium-select-option-selected: #ecf6fd;
    --premium-select-tag-bg: #e0f2fe;
    --premium-select-tag-border: #bae6fd;
    --premium-select-tag-text: #0f5b8a;
}

body.premium-ui select.form-control,
body.premium-ui .dataTables_wrapper .dataTables_length select,
body.premium-ui .select2-container--default .select2-selection--single,
body.premium-ui .select2-container--default .select2-selection--multiple,
body.premium-ui .select2-dropdown,
body.premium-ui .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--premium-select-border) !important;
    border-radius: var(--premium-select-radius) !important;
    background: var(--premium-select-bg) !important;
    color: var(--premium-select-text) !important;
    box-shadow: none !important;
}

body.premium-ui select.form-control,
body.premium-ui .dataTables_wrapper .dataTables_length select,
body.premium-ui .select2-container--default .select2-selection--single {
    min-height: var(--premium-select-height) !important;
    height: var(--premium-select-height) !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple {
    min-height: var(--premium-select-height) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 4px 36px 4px 8px !important;
}

body.premium-ui select.form-control,
body.premium-ui .dataTables_wrapper .dataTables_length select {
    padding: 8px var(--premium-select-padding-right) 8px var(--premium-select-padding-x) !important;
    line-height: 1.4 !important;
    background-color: var(--premium-select-bg) !important;
}

body.premium-ui select.form-control:not([multiple]):not([size]),
body.premium-ui .dataTables_wrapper .dataTables_length select {
    background-position: right 12px center !important;
    background-size: 16px !important;
}

body.premium-ui .select2-container {
    width: 100% !important;
}

body.premium-ui .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    padding: 0 36px 0 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.4 !important;
    color: var(--premium-select-text) !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.premium-ui .select2-container--default .select2-search--inline .select2-search__field::placeholder,
body.premium-ui .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--premium-select-placeholder) !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 100% !important;
    right: 4px !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--premium-select-placeholder) transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 5px 0 5px !important;
    margin: 0 !important;
    position: static !important;
}

body.premium-ui .select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--premium-select-placeholder) transparent !important;
    border-width: 0 5px 5px 5px !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--premium-select-placeholder) !important;
    font-size: 16px;
    line-height: 1;
    margin-right: var(--space-2) !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 0 !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: var(--premium-select-tag-bg) !important;
    border: 1px solid var(--premium-select-tag-border) !important;
    color: var(--premium-select-tag-text) !important;
    line-height: 1.4 !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: inherit !important;
    margin-right: 6px;
    border: 0 !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    color: var(--premium-select-text) !important;
}

body.premium-ui select.form-control:hover,
body.premium-ui .dataTables_wrapper .dataTables_length select:hover,
body.premium-ui .select2-container--default:hover .select2-selection--single,
body.premium-ui .select2-container--default:hover .select2-selection--multiple {
    border-color: var(--premium-select-border-hover) !important;
}

body.premium-ui select.form-control:focus,
body.premium-ui .dataTables_wrapper .dataTables_length select:focus,
body.premium-ui .select2-container--default.select2-container--open .select2-selection--single,
body.premium-ui .select2-container--default.select2-container--focus .select2-selection--single,
body.premium-ui .select2-container--default.select2-container--focus .select2-selection--multiple,
body.premium-ui .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(30, 58, 111, 0.5) !important;
    box-shadow: 0 0 0 3px var(--premium-primary-soft) !important;
    outline: none !important;
}

body.premium-ui .has-error select.form-control,
body.premium-ui .has-error .select2-container--default .select2-selection--single,
body.premium-ui .has-error .select2-container--default .select2-selection--multiple,
body.premium-ui select.form-control.is-invalid,
body.premium-ui .is-invalid + .select2-container .select2-selection--single,
body.premium-ui .is-invalid + .select2-container .select2-selection--multiple {
    border-color: var(--premium-select-error) !important;
}

body.premium-ui .has-error select.form-control:focus,
body.premium-ui .has-error .select2-container--default.select2-container--focus .select2-selection--single,
body.premium-ui .has-error .select2-container--default.select2-container--focus .select2-selection--multiple,
body.premium-ui select.form-control.is-invalid:focus,
body.premium-ui .is-invalid + .select2-container.select2-container--focus .select2-selection--single,
body.premium-ui .is-invalid + .select2-container.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 3px var(--premium-select-error-ring) !important;
}

body.premium-ui select.form-control[disabled],
body.premium-ui select.form-control[readonly],
body.premium-ui .select2-container--default.select2-container--disabled .select2-selection--single,
body.premium-ui .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: var(--premium-select-disabled-bg) !important;
    color: var(--premium-select-disabled-text) !important;
    border-color: #dbe4ef !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__rendered,
body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__placeholder,
body.premium-ui .select2-container--default.select2-container--disabled .select2-selection__choice {
    color: var(--premium-select-disabled-text) !important;
}

body.premium-ui .select2-dropdown {
    border-radius: var(--premium-select-radius) !important;
    box-shadow: var(--premium-select-dropdown-shadow) !important;
    overflow: hidden !important;
    z-index: 1300 !important;
}

body.premium-ui .select2-search--dropdown {
    padding: var(--space-2) !important;
    background: var(--premium-select-bg) !important;
    border-bottom: 1px solid #edf2f7 !important;
}

body.premium-ui .select2-search--dropdown .select2-search__field {
    min-height: 36px !important;
    padding: var(--space-2) var(--space-3) !important;
}

body.premium-ui .select2-results {
    background: var(--premium-select-bg) !important;
}

body.premium-ui .select2-results__options {
    padding: 6px !important;
}

body.premium-ui .select2-results__option {
    padding: 9px 10px !important;
    border-radius: 6px !important;
    color: var(--premium-select-text) !important;
    background: transparent !important;
}

body.premium-ui .select2-results__option[aria-disabled='true'] {
    color: var(--premium-select-disabled-text) !important;
}

body.premium-ui .select2-container--default .select2-results__option[aria-selected='true'] {
    background: var(--premium-select-option-selected) !important;
    color: var(--premium-select-tag-text) !important;
}

body.premium-ui .select2-container--default .select2-results__option--highlighted[aria-selected],
body.premium-ui .select2-results__option:hover {
    background: var(--premium-primary) !important;
    color: #ffffff !important;
}

body.premium-ui .select2-container--default .select2-results__option--highlighted[aria-selected] *,
body.premium-ui .select2-results__option:hover * {
    color: inherit !important;
}

/* Hierarchical location filters — source mirror; authoritative rules also in
   select2-premium.css (loads after bundles so indent always wins). */
.select2-results__option .aio-loc-group-header {
    display: block;
    padding-top: 2px;
    font-size: 0.92em;
    letter-spacing: 0.01em;
}
.select2-results__option .aio-loc-group-header strong {
    font-weight: 700;
}
.select2-results__option:not(:first-child) .aio-loc-group-header {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.select2-results__option .aio-loc-group-child {
    display: block !important;
    padding-left: 1.25rem !important;
    margin-left: 0.25rem !important;
    border-left: 2px solid rgba(30, 58, 111, 0.22) !important;
}

/* --------------------------------------------------------------------------
   Header seam + connected dropdown polish
   -------------------------------------------------------------------------- */
body.premium-ui {
    --app-header-sidebar-bleed: 250px;
    --app-dropdown-connected-radius: var(--premium-radius-md);
    --app-dropdown-option-hover-bg: #f3f8ff;
    --app-dropdown-option-selected-bg: #e8f3ff;
    --app-dropdown-option-selected-text: var(--premium-primary);
    --app-dropdown-option-accent: rgba(30, 58, 111, 0.78);
}

body.sidebar-collapse.premium-ui {
    --app-header-sidebar-bleed: 86px;
}

body.premium-ui .app-header-notification-badge:empty {
    display: none !important;
}

body.premium-ui .app-header-search-input {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

body.premium-ui .dropdown-menu,
body.premium-ui .tw-dw-menu,
body.premium-ui .select2-dropdown {
    overflow: hidden;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--app-dropdown-connected-radius) !important;
    border-bottom-right-radius: var(--app-dropdown-connected-radius) !important;
}

body.premium-ui .dropdown-menu > li > a,
body.premium-ui .tw-dw-menu > li > a,
body.premium-ui .select2-results__option {
    position: relative;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

body.premium-ui .dropdown-menu > li > a:hover,
body.premium-ui .dropdown-menu > li > a:focus,
body.premium-ui .tw-dw-menu > li > a:hover,
body.premium-ui .tw-dw-menu > li > a:focus,
body.premium-ui .select2-results__option--highlighted[aria-selected],
body.premium-ui .select2-results__option--highlighted[aria-selected="false"] {
    background: var(--app-dropdown-option-hover-bg) !important;
    color: var(--premium-text) !important;
    box-shadow: inset 3px 0 0 rgba(30, 58, 111, 0.34);
}

body.premium-ui .dropdown-menu > .active > a,
body.premium-ui .dropdown-menu > .active > a:hover,
body.premium-ui .tw-dw-menu > li.active > a,
body.premium-ui .tw-dw-menu > li.active > a:hover,
body.premium-ui .select2-results__option[aria-selected="true"] {
    background: var(--app-dropdown-option-selected-bg) !important;
    color: var(--app-dropdown-option-selected-text) !important;
    box-shadow: inset 3px 0 0 var(--app-dropdown-option-accent);
}

body.premium-ui .dropdown-menu > li > a:focus-visible,
body.premium-ui .tw-dw-menu > li > a:focus-visible,
body.premium-ui .select2-results__option:focus-visible {
    outline: none !important;
    box-shadow: inset 3px 0 0 var(--app-dropdown-option-accent), 0 0 0 3px rgba(30, 58, 111, 0.16) !important;
}

/* --------------------------------------------------------------------------
   Force themed app header surface
   -------------------------------------------------------------------------- */
body.premium-ui .app-header.app-header--blended {
    color: #ffffff;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, var(--palette-blue-700) 0%, var(--palette-blue-600) 42%, var(--accent-color) 100%) !important;
    background-color: var(--palette-blue-700) !important;
}

body.premium-ui .app-header.app-header--blended,
body.premium-ui .app-header.app-header--blended > div,
body.premium-ui .app-header.app-header--blended .app-header-actions {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Final select arrow normalization + stable header search visibility
   -------------------------------------------------------------------------- */
body.premium-ui select.form-control,
body.premium-ui .dataTables_wrapper .dataTables_length select {
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

body.premium-ui select.form-control::-ms-expand,
body.premium-ui .dataTables_wrapper .dataTables_length select::-ms-expand {
    display: none !important;
}

body.premium-ui .select2-container--default .select2-selection--single,
body.premium-ui .select2-container--default .select2-selection--multiple {
    background-image: none !important;
}

body.premium-ui .select2-container--default .select2-selection--single::before,
body.premium-ui .select2-container--default .select2-selection--single::after,
body.premium-ui .select2-container--default .select2-selection--multiple::before,
body.premium-ui .select2-container--default .select2-selection--multiple::after {
    content: none !important;
    display: none !important;
}

body.premium-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex !important;
    background: none !important;
}

body.premium-ui .select2-container--default .select2-selection--multiple {
    padding-right: var(--space-2) !important;
}

body.premium-ui .app-header-search-shell .app-header-search-panel {
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.premium-ui .app-header-search-shell.is-open .app-header-search-panel {
    width: clamp(160px, 34vw, 600px) !important;
    max-width: min(600px, 70vw) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* ==========================================================================
   RESTORE ROUNDED CORNERS (Forms, Select2, Dropdowns, Input Groups)
   ========================================================================== */

/* 1. Fully round Dropdown Menus and Select2 lists (removes the flat tops) */
body.premium-ui .dropdown-menu,
body.premium-ui .tw-dw-menu,
body.premium-ui .select2-dropdown {
    border-radius: 12px !important;
    margin-top: var(--space-1) !important; /* Adds a small gap so it floats nicely */
}

/* 2. Standardize all individual inputs, selects, and Select2 containers */
body.premium-ui .form-control,
body.premium-ui select.form-control,
body.premium-ui .input-group-addon,
body.premium-ui .input-group-text,
body.premium-ui .select2-container--default .select2-selection--single,
body.premium-ui .select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
}

/* 3. Keep Input Groups connected but ensure outer corners are perfectly rounded */
body.premium-ui .input-group > .form-control:not(:first-child),
body.premium-ui .input-group > .input-group-addon:not(:first-child),
body.premium-ui .input-group > .select2-container:not(:first-child) .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body.premium-ui .input-group > .form-control:not(:last-child),
body.premium-ui .input-group > .input-group-addon:not(:last-child),
body.premium-ui .input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.premium-ui .input-group > .form-control:first-child,
body.premium-ui .input-group > .input-group-addon:first-child,
body.premium-ui .input-group > .select2-container:first-child .select2-selection {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

body.premium-ui .input-group > .form-control:last-child,
body.premium-ui .input-group > .input-group-addon:last-child,
body.premium-ui .input-group > .select2-container:last-child .select2-selection {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
/* =============================================================================
   GLOBAL DARK-MODE + THEME-AWARE OVERRIDES
   Added systematically — do not duplicate or split across files.

   SECTION A: Tailwind hardcoded color utility overrides for dark mode
   SECTION B: Gradient button → theme-primary normalization (30+ buttons)
   SECTION C: app-premium.css hardcoded hex → design token corrections
   ============================================================================= */

/* --------------------------------------------------------------------------
   A. Dark-mode Tailwind utility overrides
   Tailwind compiles to hardcoded values that don't respond to .dark-mode.
   These selectors re-map the most harmful hardcoded utilities to CSS tokens
   so every page gains dark-mode readability without touching Blade files.
   -------------------------------------------------------------------------- */

/* Text colors */
.dark-mode .tw-text-black       { color: var(--text-main) !important; }
.dark-mode .tw-text-gray-900    { color: var(--text-main) !important; }
.dark-mode .tw-text-gray-800    { color: var(--text-main) !important; }
.dark-mode .tw-text-gray-700    { color: var(--text-main) !important; }
.dark-mode .tw-text-gray-600    { color: var(--text-muted) !important; }
.dark-mode .tw-text-gray-500    { color: var(--text-muted) !important; }
.dark-mode .tw-text-gray-400    { color: var(--text-muted) !important; }

/* Background colors — exclude interactive elements that deliberately need white */
.dark-mode .tw-bg-white:not(.tw-dw-btn):not(button):not(a):not(input):not(select) {
    background-color: var(--surface-raised) !important;
}

/* Ring / border utilities */
.dark-mode .tw-ring-gray-200 { --tw-ring-color: var(--border-color) !important; }
.dark-mode .tw-ring-gray-300 { --tw-ring-color: var(--border-color) !important; }

/* Hover utilities */
.dark-mode .hover\:tw-bg-gray-100:hover { background-color: var(--surface-muted) !important; }
.dark-mode .hover\:tw-bg-gray-50:hover  { background-color: var(--surface-muted) !important; }

/* Status / colored icon backgrounds in dark mode */
.dark-mode .tw-bg-sky-100    { background-color: rgba(30, 58, 111, 0.18) !important; }
.dark-mode .tw-bg-sky-50     { background-color: rgba(30, 58, 111, 0.10) !important; }
.dark-mode .tw-text-sky-500,
.dark-mode .tw-text-sky-600  { color: var(--primary) !important; }

.dark-mode .tw-bg-green-100  { background-color: rgba(34,  197, 94, 0.18) !important; }
.dark-mode .tw-bg-green-50   { background-color: rgba(34,  197, 94, 0.10) !important; }
.dark-mode .tw-text-green-500,
.dark-mode .tw-text-green-600 { color: var(--success) !important; }

.dark-mode .tw-bg-amber-100,
.dark-mode .tw-bg-yellow-100 { background-color: rgba(252, 164, 36, 0.18) !important; }
.dark-mode .tw-text-amber-500,
.dark-mode .tw-text-yellow-500 { color: var(--warning) !important; }

.dark-mode .tw-bg-red-100    { background-color: rgba(239, 68, 68, 0.18) !important; }
.dark-mode .tw-text-red-500,
.dark-mode .tw-text-red-600  { color: var(--danger) !important; }

.dark-mode .tw-bg-purple-100  { background-color: rgba(139, 92, 246, 0.18) !important; }
.dark-mode .tw-text-purple-500 { color: #a78bfa !important; }

.dark-mode .tw-bg-indigo-100  { background-color: rgba(99, 102, 241, 0.18) !important; }
.dark-mode .tw-text-indigo-500 { color: #818cf8 !important; }

/* Table stripe / alternate rows */
.dark-mode .tw-bg-gray-50,
.dark-mode .tw-bg-gray-100   { background-color: var(--surface-muted) !important; }

/* Dividers and borders */
.dark-mode .tw-border-gray-200,
.dark-mode .tw-border-gray-300 { border-color: var(--border-color) !important; }
.dark-mode .tw-divide-gray-200 > :not(:first-child) { border-color: var(--border-color) !important; }

/* --------------------------------------------------------------------------
   B. Gradient action button → theme-primary normalization
   Every "Add" button in 30+ views uses tw-from-indigo-600 tw-to-blue-500.
   We override the Tailwind gradient CSS custom properties to inject the
   active theme's primary color without touching any Blade file.
   -------------------------------------------------------------------------- */

.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600,
a.tw-dw-btn.tw-from-indigo-600,
button.tw-dw-btn.tw-from-indigo-600 {
    --tw-gradient-from:  var(--primary) !important;
    --tw-gradient-to:    var(--primary-dark) !important;
    --tw-gradient-stops: var(--primary), var(--primary-dark) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover,
.tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:focus {
    --tw-gradient-from:  var(--primary-dark) !important;
    --tw-gradient-to:    var(--primary) !important;
}

/* --------------------------------------------------------------------------
   C. Fix hardcoded hex values inside app-premium.css premium-ui rules
   Replace literals that were written before tokens existed.
   -------------------------------------------------------------------------- */

body.premium-ui .box-title,
body.premium-ui .card-title {
    color: var(--text-main);
}

body.premium-ui .box-header,
body.premium-ui .card-header {
    background: var(--surface-raised) !important;
    border-bottom-color: var(--border-color) !important;
}

body.premium-ui .premium-panel--filters .box-title a,
body.premium-ui .premium-panel--filters .box-title a:hover {
    color: var(--text-main);
}

body.premium-ui .premium-panel,
body.premium-ui .box,
body.premium-ui .card {
    border-color: var(--border-color);
}

/* ==========================================================================
   FIX: FORM INPUT STYLE CONSISTENCY
   Standardize border-radius and font-size across all internal forms
   to match the premium login form aesthetics.
   ========================================================================== */

body.premium-ui .form-control,
body.premium-ui .input-group .form-control,
body.premium-ui select.form-control {
    border-radius: 8px !important;
    font-size: 13px !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

body.premium-ui .input-group > .form-control:not(:last-child) {
    border-radius: 8px 0 0 8px !important;
}

body.premium-ui .input-group > .form-control:last-child,
body.premium-ui .input-group > .input-group-addon + .form-control {
    border-radius: 0 8px 8px 0 !important;
}

body.premium-ui .form-control:focus,
body.premium-ui select.form-control:focus {
    border-color: var(--primary, #1E3A6F) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1E3A6F) 12%, transparent) !important;
    outline: none !important;
}

body.premium-ui label {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   FIX 6: SIDEBAR MENU ITEM TEXT TRUNCATION
   Allow long menu labels (e.g. "Business Intelligence") to wrap instead
   of being clipped with ellipsis.
   ========================================================================== */

body.premium-ui .side-bar a span,
body.premium-ui .side-bar .nav-item a span,
body.premium-ui .side-bar .tree-menu a span,
body.premium-ui .side-bar a .nav-text,
body.premium-ui .side-bar [class*="menu"] a span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

/* ==========================================================================
   FIX 7: DARK MODE TOGGLE BUTTON — NEUTRAL COLOR
   Override the business theme-color on the theme-toggle button so it
   always uses a neutral slate background regardless of session theme.
   ========================================================================== */

body.premium-ui #theme-toggle,
body.premium-ui button[data-theme-toggle] {
    background-color: rgba(100, 116, 139, 0.15) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

body.premium-ui #theme-toggle:hover,
body.premium-ui button[data-theme-toggle]:hover {
    background-color: rgba(100, 116, 139, 0.25) !important;
}

/* ==========================================================================
   FIX 8: INACTIVE TAB CONTRAST (WCAG AA)
   Darken inactive nav-tab text from ~3.5:1 to >4.5:1 contrast ratio.
   ========================================================================== */

body.premium-ui .nav-tabs > li > a,
body.premium-ui .nav-tabs .nav-link:not(.active) {
    color: #475569 !important; /* slate-600, ~5.9:1 on white */
}

body.premium-ui .nav-tabs > li > a:hover,
body.premium-ui .nav-tabs .nav-link:not(.active):hover {
    color: #1e293b !important;
}

/* ==========================================================================
   FIX 10: INLINE ALERT DISMISS BUTTON
   Ensure Bootstrap dismissible alerts have a visible close button.
   ========================================================================== */

body.premium-ui .alert:not(.alert-dismissible) {
    padding-right: 2.5rem;
    position: relative;
}

body.premium-ui .alert .close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    opacity: 0.6;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

body.premium-ui .alert .close:hover {
    opacity: 1;
}