/* ==========================================================================
   Admin Panel — Design System
   Sky-blue, modern, SaaS-style overlay layer.
   Loaded AFTER style.css so it wins specificity without rewriting legacy CSS.

   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   PHASE 1 — FOUNDATION
     1.  Design Tokens (CSS Variables)
     2.  Typography Scale & Base Resets
     3.  Buttons (primary / secondary / ghost / danger / sizes / focus ring)
     4.  Inputs / Selects / Checkboxes / Select2
     5.  Cards / Panels

   PHASE 2 — CORE LAYOUT
     6.  Layout Sizing Tokens
     7.  Sidebar Wrapper
     8.  Sidebar Menu Items
     9.  Sidebar Header / Logo Lane
     10. Header Bar (top nav)
     11. Header Right — Language + Profile + Balance
     12. Main Content / Page Container

   PHASE 3 — LIST / TABLES UI
     13. Page Title Bar
     14. Search Input (input-with-btn)
     15. Filter Card
     16. Table — clean & minimal (.eg-table)
     17. Status Badges — soft pills
     18. Row Action Buttons (add / edit / delete / view / account)
     19. Pagination
     20. KPI Strip (.eg-card-two refinements)
     21. Empty State Row
     22. Country Flag Chip
     23. Tabs (.tab-area)

   PHASE 4 — FORMS UI
     24. Form Sections (.form-box, .form-box-title)
     25. Labels & Required Indicator
     26. Validation UI
     27. Form Footer (.button-group) + Form Buttons
     28. Outline / Solid Button Variants
     29. Dropzone (file upload)
     30. Bootstrap Tagsinput
     31. Form Switch (toggle)
     32. Summernote Editor
     33. eg-badge variants
     34. Input-group (Bootstrap addons)
     35. Modal

   PHASE 5 — POLISH & CONSISTENCY
     36. Remaining Purple Cleanup (legacy overrides)
     37. Profile Cards (.eg-profile-card)
     38. Profile Area (single-infobox)
     39. Winner / Deposit Cards
     40. Bootstrap Alerts
     41. Bootstrap Accordion
     42. Bootstrap Progress
     43. Bootstrap List Group
     44. Toastr / Cute-alert / SweetAlert
     45. Tooltips & Popovers
     46. Global Custom Scrollbar
     47. Global Focus Ring + Selection
     48. Subtle Entrance Animation
     49. Utility Helpers
     50. RTL Refinements
     51. Print Styles (invoices)
     52. Invoice / Bill Info
     53. Final Consistency

   PHASE 6 — DASHBOARD ACCENT SYSTEM & BOOTSTRAP TOKEN SYNC
     54. Bootstrap CSS Variables sync
     55. Accent Context System (.accent-*)
     56. Dashboard Building Blocks (kpi-strip / kpi-top / kpi-icon / kpi-panel)
     57. Dashboard stat cards
     58. Unread / new row state (.tr-unread)

   PHASE 7 — DARK MODE
     59. Dark Mode Token Overrides
     60. Dark Mode — Component-Specific Adjustments
     61. Theme Toggle Button

   PHASE 8 — AUTH (LOGIN) PAGE
     62. Login Page Body & Background
     63. Login Form Card
     64. Login Form Title
     65. Form Inputs in Login
     66. Login Button + Forgot Pass
     67. Theme Toggle on Login Page
     68. Dark Mode adjustments for login

   PHASE 11 — HYBRID NEUMORPHISM + GLASSMORPHISM (Foundation)
     69. Hybrid Tokens — Soft Surfaces, Neumorphic Shadows, Glass
     70. Soft Gradient Page Background

   PHASE 12 — NEUMORPHIC CARDS
     71. Cards — Neumorphic Depth (low-density containers only)

   PHASE 13 — GLASS OVERLAYS
     72. Top Navbar — Slight Glass
     73. Dropdowns — Glass
     74. Modals — Glass
     75. Tooltips — Glass (subtle)
     76. Toastr / Cute-alert — Glass
     77. KPI Panels & Chart Containers — Glass

   PHASE 14 — PRESERVE MINIMAL (dense data stays flat)
     78. Tables — flat & high-contrast
     79. Form Inputs stay clean (NO neumorphism / NO glass)
     80. Badges & Pagination stay crisp

   PHASE 15 — MICRO-INTERACTIONS
     81. Button press effect
     82. Focus glow (still WCAG visible)
     83. Sidebar active item — soft glow
     84. Smooth transitions on key surfaces

   PHASE 16 — Cross-cutting Safeguards (print, motion, RTL)
     (no numbered subsection — applies broadly)

   PHASE 18 — PERFORMANCE & MOBILE OPTIMIZATION
     85. Tablet (≤1199px) — lighter shadows, weaker blur
     86. Mobile (≤767px) — flatten cards, kill backdrop-filter
     87. Touch devices (no hover) — disable hover lifts
     88. WCAG 2.5.5 AAA — minimum 44×44 touch targets on mobile
     89. GPU rendering hints (will-change, transform: translateZ(0))
     90. Slow-connection / Save-Data fallback (prefers-reduced-data)
     91. Forced-colors mode (Windows High Contrast)

   PHASE 19 — LOADING & EMPTY STATES PATTERN LIBRARY
     92. Skeleton Loader (.skeleton, .skeleton-line, .skeleton-circle, .skeleton-card, .skeleton-kpi, .skeleton-table-row)
     93. Spinners (.spinner, .is-loading on buttons, .spinner-overlay)
     94. Empty State (.empty-state, .empty-state-icon, .empty-state-title, .empty-state-text)
     95. Progress (.progress-linear with .indeterminate variant)

   --------------------------------------------------------------------------
   DESIGN PHILOSOPHY (after Phase 11+)
   --------------------------------------------------------------------------
   * Containers (low-density, e.g., cards / sections / form-boxes)
       → Neumorphic depth: dual shadows, soft gradient surface, hover lift
   * Overlays (floating, e.g., navbar / modal / dropdown / tooltip / KPI panel)
       → Glassmorphic: backdrop-blur + semi-transparent + inner glow
   * Dense data (tables / form inputs / badges / pagination)
       → Flat & high-contrast: NO blur, NO neumorphism, prioritize readability
   * Accessibility: text always opaque (WCAG AA contrast); focus rings always
       visible; @media (prefers-reduced-motion) disables hover lifts;
       @media print strips all glass + neumorphism for clean output.

   --------------------------------------------------------------------------
   QUICK CUSTOMIZATION GUIDE
   --------------------------------------------------------------------------

   * Change the brand color (one place):
       Edit --sb-primary-500 in section 1 (Design Tokens). All sky shades,
       button hovers, focus rings, badges, pagination, etc. will follow.

   * Change the dark-mode brand color:
       Edit --sb-primary inside [data-theme="dark"] (section 59).

   * Add a new domain accent (e.g., for a new product type):
       In section 55, add:
           .accent-mything { --accent: #XXX; --accent-soft: #XXX; --accent-fg: #XXX; }
       Then use it in HTML:
           <div class="card kpi-strip accent-mything">...</div>
           <div class="kpi-panel accent-mything">...</div>

   * Trigger dark mode programmatically:
       document.documentElement.setAttribute('data-theme', 'dark');
       localStorage.setItem('admin-theme', 'dark');
       (Anti-FOUC script in master.blade.php / admin_login.blade.php
        handles initial load.)

   * Disable subtle entrance animation:
       Remove or empty the .eg-card, .eg-card-two, ... rule in section 48.
       (Already respects prefers-reduced-motion.)

   * Re-enable the legacy login-vector decorative image:
       Comment out the .login-page-body .login-vector { display: none; }
       rule in section 62.

   --------------------------------------------------------------------------
   FILES MODIFIED ACROSS THE REDESIGN
   --------------------------------------------------------------------------
   CSS:
     - public/backend/css/admin-theme.css   (this file — the design system)
     - public/backend/css/style.css         (legacy purple → sky in source)
     - public/backend/images/icons/user.svg, password.svg (purple → sky)

   Blade (markup-touching) edits — minimal, by file:
     - resources/views/backend/layouts/master.blade.php  (CSS link + theme JS)
     - resources/views/backend/layouts/header.blade.php  (theme toggle button)
     - resources/views/backend/dashboard/index.blade.php (KPI classes)
     - resources/views/backend/orders/index.blade.php    (.tr-unread)
     - resources/views/backend/contact/index.blade.php   (.tr-unread)
     - resources/views/backend/inquiry/modal.blade.php   (CSS vars in <style>)
     - resources/views/backend/tours/create.blade.php    (CSS vars in <style>)
     - resources/views/backend/tours/edit.blade.php      (CSS vars in <style>)
     - resources/views/auth/admin_login.blade.php        (theme system + toggle)
     - resources/views/js/admin/dashboard.blade.php      (Chart.js color palette)

   Backend logic (PHP / DB / auth / payments / APIs): UNCHANGED.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
    /* Sky-blue brand palette */
    --sb-primary-50:  #F0F9FF;
    --sb-primary-100: #E0F2FE;
    --sb-primary-200: #BAE6FD;
    --sb-primary-300: #7DD3FC;
    --sb-primary-400: #38BDF8;
    --sb-primary-500: #0EA5E9;   /* PRIMARY */
    --sb-primary-600: #0284C7;
    --sb-primary-700: #0369A1;
    --sb-primary-800: #075985;
    --sb-primary-900: #0C4A6E;   /* sidebar deep accent */

    --sb-primary:        var(--sb-primary-500);
    --sb-primary-hover:  var(--sb-primary-600);
    --sb-primary-active: var(--sb-primary-700);
    --sb-primary-soft:   var(--sb-primary-100);

    /* Neutrals (slate) */
    --sb-gray-50:  #F8FAFC;
    --sb-gray-100: #F1F5F9;
    --sb-gray-200: #E2E8F0;
    --sb-gray-300: #CBD5E1;
    --sb-gray-400: #94A3B8;
    --sb-gray-500: #64748B;
    --sb-gray-600: #475569;
    --sb-gray-700: #334155;
    --sb-gray-800: #1E293B;
    --sb-gray-900: #0F172A;

    /* Surfaces */
    --sb-surface:        #FFFFFF;
    --sb-surface-muted:  #F8FAFC;
    --sb-page-bg:        #F1F5F9;
    --sb-border:         #E2E8F0;
    --sb-border-strong:  #CBD5E1;

    /* Text */
    --sb-text:        #0F172A;
    --sb-text-muted:  #475569;
    --sb-text-soft:   #94A3B8;
    --sb-text-invert: #FFFFFF;

    /* States */
    --sb-success:      #10B981;
    --sb-success-soft: #D1FAE5;
    --sb-warning:      #F59E0B;
    --sb-warning-soft: #FEF3C7;
    --sb-danger:       #EF4444;
    --sb-danger-soft:  #FEE2E2;
    --sb-info:         #0EA5E9;
    --sb-info-soft:    #E0F2FE;

    /* Typography scale */
    --sb-font-family: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sb-fs-xs:   12px;
    --sb-fs-sm:   13px;
    --sb-fs-base: 14px;
    --sb-fs-md:   15px;
    --sb-fs-lg:   16px;
    --sb-fs-xl:   18px;
    --sb-fs-2xl:  20px;
    --sb-fs-3xl:  24px;
    --sb-fs-4xl:  30px;

    --sb-fw-regular:  400;
    --sb-fw-medium:   500;
    --sb-fw-semibold: 600;
    --sb-fw-bold:     700;

    --sb-lh-tight: 1.25;
    --sb-lh-base:  1.5;
    --sb-lh-loose: 1.7;

    /* Spacing (4-pt scale) */
    --sb-sp-1:  4px;
    --sb-sp-2:  8px;
    --sb-sp-3:  12px;
    --sb-sp-4:  16px;
    --sb-sp-5:  20px;
    --sb-sp-6:  24px;
    --sb-sp-8:  32px;
    --sb-sp-10: 40px;
    --sb-sp-12: 48px;

    /* Radius */
    --sb-radius-sm: 6px;
    --sb-radius:    10px;
    --sb-radius-lg: 14px;
    --sb-radius-xl: 20px;
    --sb-radius-pill: 999px;

    /* Shadows (soft, layered) */
    --sb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --sb-shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --sb-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --sb-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --sb-shadow-focus: 0 0 0 3px rgba(14, 165, 233, 0.25);

    /* Motion */
    --sb-transition-fast: 0.15s ease;
    --sb-transition:      0.2s ease;
    --sb-transition-slow: 0.35s ease;
}

/* --------------------------------------------------------------------------
   2. Typography Scale & Base Resets
   -------------------------------------------------------------------------- */
body {
    font-family: var(--sb-font-family);
    font-size: var(--sb-fs-base);
    line-height: var(--sb-lh-base);
    color: var(--sb-text);
    background-color: var(--sb-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sb-font-family);
    color: var(--sb-text);
    font-weight: var(--sb-fw-semibold);
    line-height: var(--sb-lh-tight);
    margin-bottom: var(--sb-sp-3);
}

h1, .h1 { font-size: var(--sb-fs-4xl); font-weight: var(--sb-fw-bold); }
h2, .h2 { font-size: var(--sb-fs-3xl); font-weight: var(--sb-fw-bold); }
h3, .h3 { font-size: var(--sb-fs-2xl); font-weight: var(--sb-fw-semibold); }
h4, .h4 { font-size: var(--sb-fs-xl);  font-weight: var(--sb-fw-semibold); }
h5, .h5 { font-size: var(--sb-fs-lg);  font-weight: var(--sb-fw-semibold); }
h6, .h6 { font-size: var(--sb-fs-md);  font-weight: var(--sb-fw-semibold); }

p { color: var(--sb-text-muted); margin-bottom: var(--sb-sp-3); }

a {
    color: var(--sb-primary);
    text-decoration: none;
    transition: color var(--sb-transition);
}
a:hover { color: var(--sb-primary-hover); }

small, .text-small { font-size: var(--sb-fs-sm); }
.text-muted { color: var(--sb-text-muted) !important; }
.text-soft  { color: var(--sb-text-soft)  !important; }

/* Re-tone legacy purple primary to sky blue */
.text--primary { color: var(--sb-primary) !important; }

/* --------------------------------------------------------------------------
   3. Buttons (primary / secondary / ghost / danger / sizes / focus ring)
   -------------------------------------------------------------------------- */
.eg-btn,
.btn {
    font-family: var(--sb-font-family);
    font-weight: var(--sb-fw-semibold);
    font-size: var(--sb-fs-base);
    line-height: 1.2;
    padding: 10px 18px;
    border-radius: var(--sb-radius-sm);
    border: 1px solid transparent;
    transition: background-color var(--sb-transition),
                border-color var(--sb-transition),
                color var(--sb-transition),
                box-shadow var(--sb-transition),
                transform var(--sb-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-sp-2);
    cursor: pointer;
    white-space: nowrap;
}

.eg-btn:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
}

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

.eg-btn:disabled,
.btn:disabled,
.eg-btn.disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Primary — sky blue */
.btn--primary,
.btn-primary {
    background-color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
    color: var(--sb-text-invert) !important;
    box-shadow: var(--sb-shadow-xs);
}
.btn--primary:hover,
.btn-primary:hover {
    background-color: var(--sb-primary-hover) !important;
    border-color: var(--sb-primary-hover) !important;
    color: var(--sb-text-invert) !important;
    box-shadow: var(--sb-shadow-sm);
}
.btn--primary::before,
.btn--dark::before,
.btn--red::before {
    /* disable legacy ::before scale animation in favor of clean hover */
    display: none !important;
}

/* Secondary — outlined sky */
.btn--secondary,
.btn-secondary {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border-strong) !important;
    color: var(--sb-text) !important;
}
.btn--secondary:hover,
.btn-secondary:hover {
    background-color: var(--sb-gray-50) !important;
    border-color: var(--sb-gray-400) !important;
    color: var(--sb-text) !important;
}

/* Ghost / link button */
.btn--ghost {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--sb-primary) !important;
}
.btn--ghost:hover {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-hover) !important;
}

/* Dark */
.btn--dark {
    background-color: var(--sb-gray-800) !important;
    border-color: var(--sb-gray-800) !important;
    color: var(--sb-text-invert) !important;
}
.btn--dark:hover {
    background-color: var(--sb-gray-900) !important;
    border-color: var(--sb-gray-900) !important;
    color: var(--sb-text-invert) !important;
}

/* Danger / red */
.btn--red,
.btn-danger {
    background-color: var(--sb-danger) !important;
    border-color: var(--sb-danger) !important;
    color: var(--sb-text-invert) !important;
}
.btn--red:hover,
.btn-danger:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: var(--sb-text-invert) !important;
}

/* Success / green */
.btn--green,
.btn-success {
    background-color: var(--sb-success) !important;
    border-color: var(--sb-success) !important;
    color: var(--sb-text-invert) !important;
}
.btn--green:hover,
.btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: var(--sb-text-invert) !important;
}

/* Soft buttons (light tint background, colored text) */
.green-light--btn {
    background-color: var(--sb-success-soft) !important;
    color: var(--sb-success) !important;
    font-weight: var(--sb-fw-semibold);
    border-radius: var(--sb-radius-pill);
    padding: 4px 12px !important;
}
.red-light--btn {
    background-color: var(--sb-danger-soft) !important;
    color: var(--sb-danger) !important;
    font-weight: var(--sb-fw-semibold);
    border-radius: var(--sb-radius-pill);
    padding: 4px 12px !important;
}
.warning-light--btn {
    background-color: var(--sb-warning-soft) !important;
    color: var(--sb-warning) !important;
    font-weight: var(--sb-fw-semibold);
    border-radius: var(--sb-radius-pill);
    padding: 4px 12px !important;
}
.primary-light--btn {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary) !important;
    font-weight: var(--sb-fw-semibold);
    border-radius: var(--sb-radius-pill);
    padding: 4px 12px !important;
}

/* Sizes */
.btn-sm,
.eg-btn.btn-sm,
.small-btn {
    padding: 6px 12px !important;
    font-size: var(--sb-fs-sm) !important;
}
.btn-lg,
.eg-btn.btn-lg,
.large-btn {
    padding: 14px 26px !important;
    font-size: var(--sb-fs-lg) !important;
}

/* Bootstrap btn-link tone */
.btn-link { color: var(--sb-primary); }
.btn-link:hover { color: var(--sb-primary-hover); }

/* --------------------------------------------------------------------------
   4. Inputs / Selects / Checkboxes / Select2
   -------------------------------------------------------------------------- */
.form-inner label,
.form-label,
label {
    color: var(--sb-text);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
    margin-bottom: var(--sb-sp-2);
    letter-spacing: 0.1px;
}

.form-inner input:not([type="checkbox"]):not([type="radio"]),
.form-inner textarea,
.form-inner select,
.form-control,
.form-select,
input[type="text"]:not(.iconpicker-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    width: 100%;
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text);
    font-size: var(--sb-fs-base);
    padding: 10px 14px;
    line-height: 1.4;
    box-shadow: var(--sb-shadow-xs);
    transition: border-color var(--sb-transition),
                box-shadow var(--sb-transition),
                background-color var(--sb-transition);
}

.form-inner input::placeholder,
.form-control::placeholder,
textarea::placeholder { color: var(--sb-text-soft); }

.form-inner input:focus,
.form-inner textarea:focus,
.form-inner select:focus,
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--sb-primary);
    box-shadow: var(--sb-shadow-focus);
    background-color: var(--sb-surface);
}

/* Validation */
.form-control.is-invalid,
.form-select.is-invalid,
.is-invalid input,
.is-invalid textarea {
    border-color: var(--sb-danger) !important;
}
.invalid-feedback,
.error-message,
.text-danger {
    color: var(--sb-danger);
    font-size: var(--sb-fs-sm);
}

/* Checkbox / radio (Bootstrap) */
.form-check-input {
    border-color: var(--sb-border-strong);
    width: 1.05em;
    height: 1.05em;
}
.form-check-input:focus {
    box-shadow: var(--sb-shadow-focus);
    border-color: var(--sb-primary);
}
.form-check-input:checked {
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
}

/* Select2 visual sync */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    min-height: 42px !important;
    padding: 4px 6px !important;
    box-shadow: var(--sb-shadow-xs);
    transition: border-color var(--sb-transition),
                box-shadow var(--sb-transition);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    color: var(--sb-text) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-focus) !important;
}
.select2-dropdown {
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    box-shadow: var(--sb-shadow-md) !important;
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--sb-primary) !important;
    color: #fff !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--sb-primary-soft) !important;
    border: 1px solid var(--sb-primary-200) !important;
    color: var(--sb-primary-700) !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 2px 10px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 8px 10px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-focus) !important;
    outline: none !important;
}

/* Bootstrap input-group cohesion */
.input-group-text {
    background-color: var(--sb-gray-50);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    border-radius: var(--sb-radius-sm);
}

/* --------------------------------------------------------------------------
   5. Cards / Panels
   -------------------------------------------------------------------------- */
.eg-card,
.eg-profile-card,
.card {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-6);
    margin-bottom: var(--sb-sp-6);
    box-shadow: var(--sb-shadow-sm);
    transition: box-shadow var(--sb-transition);
}

.eg-card:hover,
.card:hover { box-shadow: var(--sb-shadow); }

.eg-card-title,
.eg-card-title-sm,
.card-header {
    border-bottom: 1px solid var(--sb-border);
    margin: calc(-1 * var(--sb-sp-6)) calc(-1 * var(--sb-sp-6)) var(--sb-sp-5);
    padding: var(--sb-sp-4) var(--sb-sp-6);
    background-color: var(--sb-surface);
    border-top-left-radius: var(--sb-radius);
    border-top-right-radius: var(--sb-radius);
}

.eg-card-title h4,
.eg-card-title-sm h4,
.card-header h4,
.card-title {
    font-size: var(--sb-fs-lg);
    font-weight: var(--sb-fw-semibold);
    color: var(--sb-text);
    margin-bottom: 0;
    line-height: 1.4;
}

/* KPI / stat cards (eg-card-two) — keep colored, refine spacing & radius */
.eg-card-two {
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-5) var(--sb-sp-6);
    box-shadow: var(--sb-shadow-sm);
    border: 1px solid transparent;
    transition: transform var(--sb-transition),
                box-shadow var(--sb-transition);
}
.eg-card-two:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-shadow-md);
}
.eg-card-two h5.title { font-size: var(--sb-fs-md); font-weight: var(--sb-fw-semibold); opacity: 0.95; }
.eg-card-two h2.number { font-size: 28px; font-weight: var(--sb-fw-bold); margin-top: var(--sb-sp-3); }

/* Re-tone legacy "primary" KPI variant from purple to sky blue */
.eg-card-two.primary { background: var(--sb-primary) !important; }
.eg-card-two.skyblue { background: linear-gradient(135deg, var(--sb-primary-400), var(--sb-primary-600)) !important; }

/* Section divider line */
hr { border-color: var(--sb-border); opacity: 1; }


/* ==========================================================================
   PHASE 2 — Core Layout (Sidebar / Header / Page Container / Responsive)
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. Layout Sizing Tokens
   -------------------------------------------------------------------------- */
:root {
    --sb-sidebar-w:         280px;   /* desktop */
    --sb-sidebar-w-md:      200px;   /* 992-1199 */
    --sb-sidebar-w-collapsed: 70px;  /* mobile / .slide */
    --sb-header-h:          64px;
    --sb-content-pad-x:     32px;
    --sb-content-pad-y:     28px;

    --sb-sidebar-bg:        #0F172A;   /* slate-900 */
    --sb-sidebar-bg-deep:   #0B1220;   /* logo lane / scrollbar track */
    --sb-sidebar-border:    rgba(255, 255, 255, 0.06);
    --sb-sidebar-text:      #CBD5E1;   /* slate-300 */
    --sb-sidebar-text-muted:#94A3B8;   /* slate-400 */
    --sb-sidebar-hover-bg:  rgba(255, 255, 255, 0.06);
    --sb-sidebar-active-bg: var(--sb-primary);
    --sb-sidebar-active-text:#FFFFFF;
}

/* --------------------------------------------------------------------------
   7. Sidebar Wrapper
   -------------------------------------------------------------------------- */
.sidebar-wrapper {
    background: var(--sb-sidebar-bg) !important;
    max-width: var(--sb-sidebar-w) !important;
    padding: var(--sb-sp-4) var(--sb-sp-3) !important;
    top: var(--sb-header-h) !important;
    border-right: 1px solid var(--sb-sidebar-border);
}
[dir="rtl"] .sidebar-wrapper {
    border-right: 0;
    border-left: 1px solid var(--sb-sidebar-border);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-wrapper { max-width: var(--sb-sidebar-w-md) !important; }
}
@media (max-width: 991px) {
    .sidebar-wrapper {
        max-width: var(--sb-sidebar-w-collapsed) !important;
        padding: var(--sb-sp-3) var(--sb-sp-2) !important;
    }
}
.sidebar-wrapper.slide { max-width: var(--sb-sidebar-w-collapsed) !important; }

/* Refined scrollbar */
.sidebar-wrapper::-webkit-scrollbar { width: 6px; }
.sidebar-wrapper::-webkit-scrollbar-track { background: var(--sb-sidebar-bg-deep); }
.sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
}
.sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   8. Sidebar Menu Items
   -------------------------------------------------------------------------- */
.sidebar-menu-wrapper ul {
    gap: var(--sb-sp-2) !important;
    padding: var(--sb-sp-2) 0 !important;
}

.sidebar-menu-wrapper ul li { max-width: 124px; }

.sidebar-menu-wrapper ul li a {
    background: transparent !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: var(--sb-sp-3) var(--sb-sp-2) !important;
    color: var(--sb-sidebar-text) !important;
    transition: background-color var(--sb-transition),
                color var(--sb-transition),
                transform var(--sb-transition-fast) !important;
    position: relative;
}

.sidebar-menu-wrapper ul li a:hover {
    background: var(--sb-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
}

.sidebar-menu-wrapper ul li a:hover svg {
    transform: scale(1.05) !important;
    transition-delay: 0s !important;
    fill: #FFFFFF !important;
}

.sidebar-menu-wrapper ul li a svg {
    fill: var(--sb-sidebar-text-muted) !important;
    margin-bottom: var(--sb-sp-2) !important;
    width: 24px;
    height: 24px;
    transition: fill var(--sb-transition), transform var(--sb-transition) !important;
}

.sidebar-menu-wrapper ul li a h6 {
    color: inherit !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-medium) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    letter-spacing: 0.1px;
}

/* Active state — sky blue pill */
.sidebar-menu-wrapper ul li.active a {
    background: var(--sb-sidebar-active-bg) !important;
    color: var(--sb-sidebar-active-text) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}
.sidebar-menu-wrapper ul li.active a svg {
    fill: var(--sb-sidebar-active-text) !important;
}
.sidebar-menu-wrapper ul li.active a h6 {
    color: var(--sb-sidebar-active-text) !important;
    font-weight: var(--sb-fw-semibold) !important;
}

/* Collapsed (slide) variant — keep icons only, no chrome */
.sidebar-wrapper.slide .sidebar-menu-wrapper ul li {
    max-width: 50px !important;
    padding: 0 !important;
}
.sidebar-wrapper.slide .sidebar-menu-wrapper ul li a {
    padding: var(--sb-sp-2) !important;
}

/* --------------------------------------------------------------------------
   9. Sidebar Header / Logo Lane
   -------------------------------------------------------------------------- */
.header-area .sidebar-header {
    background: var(--sb-sidebar-bg) !important;
    max-width: var(--sb-sidebar-w) !important;
    min-height: var(--sb-header-h);
    padding: var(--sb-sp-3) var(--sb-sp-5) !important;
    border-right: 1px solid var(--sb-sidebar-border);
    border-bottom: 1px solid var(--sb-sidebar-border);
}
[dir="rtl"] .header-area .sidebar-header {
    border-right: 0;
    border-left: 1px solid var(--sb-sidebar-border);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-area .sidebar-header { max-width: var(--sb-sidebar-w-md) !important; }
}
@media (max-width: 991px) {
    .header-area .sidebar-header {
        max-width: var(--sb-sidebar-w-collapsed) !important;
        padding: var(--sb-sp-3) var(--sb-sp-2) !important;
    }
}
.header-area .sidebar-header.slide {
    max-width: var(--sb-sidebar-w-collapsed) !important;
    padding: var(--sb-sp-3) var(--sb-sp-2) !important;
}

/* Sidebar toggle icon — invert for dark sidebar */
.sidebar-toggle-button {
    filter: invert(1) brightness(1.2);
    opacity: 0.85;
    transition: opacity var(--sb-transition);
    cursor: pointer;
}
.sidebar-toggle-button:hover { opacity: 1; }

/* Logo size constraint */
.header-logo img    { max-height: 32px; max-width: 150px; object-fit: contain; }
.header-logo-icon img { max-height: 32px; max-width: 32px; object-fit: contain; }

/* --------------------------------------------------------------------------
   10. Header Bar (top nav)
   -------------------------------------------------------------------------- */
.header-area .main-conent-header {
    width: calc(100% - var(--sb-sidebar-w)) !important;
    min-height: var(--sb-header-h) !important;
    padding: 0 var(--sb-content-pad-x) !important;
    background: var(--sb-surface) !important;
    box-shadow: var(--sb-shadow-xs) !important;
    border-bottom: 1px solid var(--sb-border);
    gap: var(--sb-sp-4);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-area .main-conent-header {
        width: calc(100% - var(--sb-sidebar-w-md)) !important;
        padding: 0 var(--sb-sp-5) !important;
    }
}
@media (max-width: 991px) {
    .header-area .main-conent-header {
        width: calc(100% - var(--sb-sidebar-w-collapsed)) !important;
        padding: 0 var(--sb-sp-4) !important;
    }
}
.header-area .main-conent-header.slide {
    width: calc(100% - var(--sb-sidebar-w-collapsed)) !important;
}

/* Breadcrumb area */
.header-area .main-conent-header .breadcrumb-area h5 {
    font-size: var(--sb-fs-xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin-bottom: 2px !important;
    line-height: 1.3;
}
.header-area .main-conent-header .breadcrumb-area ol {
    display: flex;
    gap: var(--sb-sp-2);
}
.header-area .main-conent-header .breadcrumb-area ol li {
    font-size: var(--sb-fs-xs) !important;
    color: var(--sb-text-muted) !important;
}
.header-area .main-conent-header .breadcrumb-area ol a {
    color: var(--sb-primary) !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-medium) !important;
    transition: color var(--sb-transition);
}
.header-area .main-conent-header .breadcrumb-area ol a:hover {
    color: var(--sb-primary-hover) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sb-text-soft) !important;
}

/* Header action icons (support / globe / settings) */
.header-area .main-conent-header ul.header-icons {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--sb-sp-1);
    list-style: none;
}
.header-area .main-conent-header ul.header-icons li { margin: 0 !important; }
.header-area .main-conent-header ul.header-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text-muted);
    transition: background-color var(--sb-transition), color var(--sb-transition);
}
.header-area .main-conent-header ul.header-icons li a:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-hover);
}
.header-area .main-conent-header ul.header-icons li a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.header-area .main-conent-header ul.header-icons li a svg path { fill: currentColor; }

/* --------------------------------------------------------------------------
   11. Header Right — Language + Profile + Balance
   -------------------------------------------------------------------------- */
.admin-area {
    position: relative;
}
.admin-area .dropdown-toggle {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: var(--sb-radius-sm);
    transition: background-color var(--sb-transition);
}
.admin-area .dropdown-toggle:hover {
    background-color: var(--sb-gray-100);
}
.admin-area .dropdown-toggle::after { display: none; }

.admin-area .admin-thumb img {
    width: 36px;
    height: 36px;
    border-radius: var(--sb-radius-pill);
    object-fit: cover;
    border: 2px solid var(--sb-border);
}
.admin-area .admin-desig h6 {
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin: 0 !important;
    line-height: 1.2;
}
.admin-area .admin-desig p {
    font-size: var(--sb-fs-xs) !important;
    color: var(--sb-text-muted) !important;
    margin: 0 !important;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .admin-area .admin-desig { display: none; }
}

/* Dropdown menu polish (used by language + profile) */
.dropdown-menu {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-lg);
    padding: var(--sb-sp-2);
    min-width: 200px;
    margin-top: var(--sb-sp-2);
}
.dropdown-menu .dropdown-item {
    padding: var(--sb-sp-2) var(--sb-sp-3);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-medium);
    color: var(--sb-text);
    display: flex;
    align-items: center;
    gap: var(--sb-sp-2);
    transition: background-color var(--sb-transition), color var(--sb-transition);
}
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .bi {
    color: var(--sb-text-muted);
    font-size: 16px;
    margin-right: 0;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-hover);
}
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:hover .bi {
    color: var(--sb-primary-hover);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--sb-primary);
    color: #FFFFFF;
}

/* Merchant balance pill */
.marchant-balance {
    display: inline-flex;
    align-items: center;
    background-color: var(--sb-success-soft);
    color: var(--sb-success);
    border: 1px solid #A7F3D0;
    border-radius: var(--sb-radius-pill);
    padding: 6px 14px;
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
}

/* --------------------------------------------------------------------------
   12. Main Content / Page Container
   -------------------------------------------------------------------------- */
.main-content {
    margin-top: var(--sb-header-h) !important;
    margin-left: var(--sb-sidebar-w) !important;
    max-width: calc(100% - var(--sb-sidebar-w)) !important;
    padding: var(--sb-content-pad-y) var(--sb-content-pad-x) !important;
    background: var(--sb-page-bg) !important;
    min-height: calc(100vh - var(--sb-header-h)) !important;
}
[dir="rtl"] .main-content {
    margin-left: 0 !important;
    margin-right: var(--sb-sidebar-w) !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .main-content {
        margin-left: var(--sb-sidebar-w-md) !important;
        max-width: calc(100% - var(--sb-sidebar-w-md)) !important;
        padding: var(--sb-sp-5) var(--sb-sp-5) !important;
    }
    [dir="rtl"] .main-content {
        margin-left: 0 !important;
        margin-right: var(--sb-sidebar-w-md) !important;
    }
}
@media (max-width: 991px) {
    .main-content {
        margin-left: var(--sb-sidebar-w-collapsed) !important;
        max-width: calc(100% - var(--sb-sidebar-w-collapsed)) !important;
        padding: var(--sb-sp-4) var(--sb-sp-4) !important;
    }
    [dir="rtl"] .main-content {
        margin-left: 0 !important;
        margin-right: var(--sb-sidebar-w-collapsed) !important;
    }
}
.main-content.slide {
    margin-left: var(--sb-sidebar-w-collapsed) !important;
    max-width: calc(100% - var(--sb-sidebar-w-collapsed)) !important;
}
[dir="rtl"] .main-content.slide {
    margin-left: 0 !important;
    margin-right: var(--sb-sidebar-w-collapsed) !important;
}

/* Page footer (if used) */
.footer {
    margin-left: var(--sb-sidebar-w);
    padding: var(--sb-sp-4) var(--sb-content-pad-x);
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
}
@media (min-width: 992px) and (max-width: 1199px) {
    .footer { margin-left: var(--sb-sidebar-w-md); }
}
@media (max-width: 991px) {
    .footer { margin-left: var(--sb-sidebar-w-collapsed); }
}
[dir="rtl"] .footer { margin-left: 0; margin-right: var(--sb-sidebar-w); }
[dir="rtl"] .footer { /* stack rule for medium / small handled via media queries above */ }

/* Smoother layout transitions for sidebar collapse */
.sidebar-wrapper,
.header-area .sidebar-header,
.header-area .main-conent-header,
.main-content {
    transition: max-width var(--sb-transition-slow),
                width var(--sb-transition-slow),
                margin-left var(--sb-transition-slow),
                margin-right var(--sb-transition-slow),
                padding var(--sb-transition-slow) !important;
}


/* ==========================================================================
   PHASE 3 — List / Tables UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. Page Title Bar
   -------------------------------------------------------------------------- */
.page-title h4,
.page-title h5 {
    font-size: var(--sb-fs-2xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin: 0 !important;
    line-height: 1.3;
}
.page-title2 {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-4) var(--sb-sp-5);
    box-shadow: var(--sb-shadow-xs);
}
.page-title2 h5 {
    font-size: var(--sb-fs-xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   14. Search Input (input-with-btn) — clean SaaS look
   -------------------------------------------------------------------------- */
.input-with-btn {
    max-width: 360px;
    width: 100%;
    display: flex;
    align-items: stretch;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    overflow: hidden;
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}
.input-with-btn:focus-within {
    border-color: var(--sb-primary);
    box-shadow: var(--sb-shadow-focus);
}
.input-with-btn input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    padding: 9px 14px !important;
    font-size: var(--sb-fs-base);
    color: var(--sb-text);
    box-shadow: none !important;
    border-radius: 0 !important;
}
.input-with-btn input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.input-with-btn input::placeholder {
    color: var(--sb-text-soft);
    font-size: var(--sb-fs-sm);
}
.input-with-btn button {
    background: var(--sb-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 44px;
    padding: 0 14px;
    transition: background-color var(--sb-transition);
}
.input-with-btn button::before { display: none !important; }
.input-with-btn button:hover {
    background: var(--sb-primary-hover) !important;
    color: #fff !important;
}
.input-with-btn.style2 input {
    background: transparent !important;
    border: none !important;
    padding: 9px 14px !important;
}

/* --------------------------------------------------------------------------
   15. Filter Card (eg-card with form inside)
   -------------------------------------------------------------------------- */
.eg-card form .row > [class*="col-"] { margin-bottom: 0; }
.eg-card form label {
    font-size: var(--sb-fs-xs);
    color: var(--sb-text-muted);
    font-weight: var(--sb-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   16. Table — Clean & Minimal
   -------------------------------------------------------------------------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 0;
    border-radius: var(--sb-radius-sm);
}
.table-responsive { border-radius: var(--sb-radius-sm); }

.eg-table,
table.eg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--sb-surface);
    margin-bottom: 0;
    font-size: var(--sb-fs-base);
}

/* Header — soft, neutral, no heavy purple */
.eg-table thead {
    background: var(--sb-gray-50) !important;
    border-radius: 0;
}
.eg-table thead tr { border-width: 0; }
.eg-table thead tr th {
    background: var(--sb-gray-50) !important;
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 16px !important;
    text-align: start !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid var(--sb-border) !important;
    white-space: nowrap;
}
[dir="rtl"] .eg-table thead tr th { text-align: start !important; }

/* Body rows — minimal divider only */
.eg-table tbody tr {
    background-color: var(--sb-surface) !important;
    border: none !important;
    transition: background-color var(--sb-transition-fast);
}
.eg-table tbody tr:hover {
    background-color: var(--sb-gray-50) !important;
}
.eg-table tbody tr td {
    color: var(--sb-text) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-regular) !important;
    padding: 14px 16px !important;
    text-align: start !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid var(--sb-border) !important;
    line-height: 1.5;
}
.eg-table tbody tr:last-child td { border-bottom: none !important; }

/* Cells centered (numbers, status, actions) — opt-in via Bootstrap util */
.eg-table th.text-center,
.eg-table td.text-center { text-align: center !important; }
.eg-table th.text-end,
.eg-table td.text-end { text-align: end !important; }

/* Numeric / muted helper text inside cells */
.eg-table td small,
.eg-table td .text-muted {
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs);
    display: inline-block;
}
.eg-table td code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--sb-fs-xs);
    color: var(--sb-primary-700);
    background-color: var(--sb-primary-soft);
    padding: 2px 8px;
    border-radius: var(--sb-radius-sm);
}

/* When eg-table sits inside an eg-card, kill double padding */
.eg-card > .table-responsive,
.eg-card > .table-wrapper {
    margin: calc(-1 * var(--sb-sp-6)) calc(-1 * var(--sb-sp-6)) 0;
    border-top-left-radius: var(--sb-radius);
    border-top-right-radius: var(--sb-radius);
    overflow: hidden;
}
.eg-card > .table-responsive .eg-table thead tr th:first-child,
.eg-card > .table-wrapper .eg-table thead tr th:first-child { padding-left: var(--sb-sp-6) !important; }
.eg-card > .table-responsive .eg-table thead tr th:last-child,
.eg-card > .table-wrapper .eg-table thead tr th:last-child { padding-right: var(--sb-sp-6) !important; }
.eg-card > .table-responsive .eg-table tbody tr td:first-child,
.eg-card > .table-wrapper .eg-table tbody tr td:first-child { padding-left: var(--sb-sp-6) !important; }
.eg-card > .table-responsive .eg-table tbody tr td:last-child,
.eg-card > .table-wrapper .eg-table tbody tr td:last-child { padding-right: var(--sb-sp-6) !important; }

/* Mobile (<=767) — keep legacy stacked behaviour readable */
@media (max-width: 767px) {
    .eg-table tbody tr {
        display: block;
        margin-bottom: var(--sb-sp-4);
        border: 1px solid var(--sb-border) !important;
        border-radius: var(--sb-radius-sm);
        padding: var(--sb-sp-3);
    }
    .eg-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: end !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--sb-border) !important;
    }
    .eg-table tbody tr td:last-child { border-bottom: none !important; }
    .eg-table td:before {
        content: attr(data-label);
        font-size: var(--sb-fs-xs);
        font-weight: var(--sb-fw-semibold);
        color: var(--sb-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        text-align: start;
    }
}

/* --------------------------------------------------------------------------
   17. Status Badges — Soft Pills
   -------------------------------------------------------------------------- */
.eg-table .badge,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-semibold) !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: var(--sb-radius-pill) !important;
    border: 1px solid transparent;
    letter-spacing: 0.2px;
    text-transform: capitalize;
}

.badge.bg-success,
.badge-success {
    background-color: var(--sb-success-soft) !important;
    color: var(--sb-success) !important;
    border-color: rgba(16, 185, 129, 0.2);
}
.badge.bg-warning,
.badge-warning {
    background-color: var(--sb-warning-soft) !important;
    color: #B45309 !important;
    border-color: rgba(245, 158, 11, 0.25);
}
.badge.bg-danger,
.badge-danger {
    background-color: var(--sb-danger-soft) !important;
    color: var(--sb-danger) !important;
    border-color: rgba(239, 68, 68, 0.2);
}
.badge.bg-info,
.badge-info {
    background-color: var(--sb-info-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: rgba(14, 165, 233, 0.2);
}
.badge.bg-primary,
.badge-primary {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: rgba(14, 165, 233, 0.2);
}
.badge.bg-secondary,
.badge-secondary {
    background-color: var(--sb-gray-100) !important;
    color: var(--sb-gray-700) !important;
    border-color: var(--sb-border);
}
.badge.bg-dark {
    background-color: var(--sb-gray-800) !important;
    color: #FFFFFF !important;
}
.badge.bg-light {
    background-color: var(--sb-gray-100) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border);
}

/* Dot indicator before badge text (subtle SaaS detail) */
.badge.bg-success::before,
.badge.bg-warning::before,
.badge.bg-danger::before,
.badge.bg-info::before,
.badge.bg-primary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   18. Row Action Buttons (add / edit / delete / view / account)
   -------------------------------------------------------------------------- */
.add--btn,
.delete--btn,
.account--btn,
.edit--btn,
.view--btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid transparent;
    transition: background-color var(--sb-transition),
                color var(--sb-transition),
                border-color var(--sb-transition) !important;
}
.add--btn::before,
.delete--btn::before,
.account--btn::before { display: none !important; }
.add--btn i,
.delete--btn i,
.account--btn i,
.edit--btn i,
.view--btn i {
    font-size: 14px !important;
}

/* Edit / Add (sky) */
.add--btn,
.edit--btn {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: rgba(14, 165, 233, 0.18);
}
.add--btn:hover,
.edit--btn:hover {
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-primary) !important;
}

/* Delete (red) */
.delete--btn {
    background-color: var(--sb-danger-soft) !important;
    color: var(--sb-danger) !important;
    border-color: rgba(239, 68, 68, 0.18);
}
.delete--btn:hover {
    background-color: var(--sb-danger) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-danger) !important;
}

/* View / Account (green) */
.account--btn,
.view--btn {
    background-color: var(--sb-success-soft) !important;
    color: var(--sb-success) !important;
    border-color: rgba(16, 185, 129, 0.18);
}
.account--btn:hover,
.view--btn:hover {
    background-color: var(--sb-success) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-success) !important;
}

/* Action group container — consistent gap inside table cells */
.eg-table td .d-flex.gap-2,
.eg-table td .d-flex.gap-3 { gap: 6px !important; }

/* Bootstrap form-switch in row — sky tone */
.form-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   19. Pagination — Modern, sky-blue active
   -------------------------------------------------------------------------- */
nav .pagination,
.custom-pagination .pagination,
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-bottom: 0;
}

nav .pagination .page-item,
.pagination .page-item {
    margin: 0 !important;
}

nav .pagination .page-item .page-link,
.pagination .page-item .page-link {
    min-width: 36px;
    height: 36px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text-muted) !important;
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 0 10px !important;
    transition: background-color var(--sb-transition),
                color var(--sb-transition),
                border-color var(--sb-transition),
                box-shadow var(--sb-transition);
}

nav .pagination .page-item:first-child .page-link,
nav .pagination .page-item:last-child .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: var(--sb-radius-sm) !important;
}

nav .pagination .page-item .page-link:hover,
.pagination .page-item .page-link:hover {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: var(--sb-primary-200) !important;
}

nav .pagination .page-item .page-link:focus,
.pagination .page-item .page-link:focus {
    box-shadow: var(--sb-shadow-focus) !important;
    z-index: 2;
}

nav .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-primary) !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
}

nav .pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
    color: var(--sb-text-soft) !important;
    background-color: var(--sb-gray-50) !important;
    border-color: var(--sb-border) !important;
    cursor: not-allowed;
}

.custom-pagination {
    padding: var(--sb-sp-4) 0;
}

/* --------------------------------------------------------------------------
   20. KPI Strip Refinements (eg-card-two when used in row above tables)
   -------------------------------------------------------------------------- */
.eg-card-two {
    overflow: hidden;
}
.eg-card-two svg {
    width: 64px;
    height: 64px;
    opacity: 0.25;
}
.eg-card-two h2.number {
    font-size: 26px !important;
    margin-top: var(--sb-sp-2) !important;
}
.eg-card-two h5.title {
    font-size: var(--sb-fs-sm) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.95;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21. Empty State Row
   -------------------------------------------------------------------------- */
.eg-table tbody tr td.text-center[colspan] {
    padding: var(--sb-sp-10) var(--sb-sp-4) !important;
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-base);
    background-color: var(--sb-surface) !important;
}

/* --------------------------------------------------------------------------
   22. Country flag chip (used in profile cards / table cells)
   -------------------------------------------------------------------------- */
.country-flag {
    /* Reset legacy position:absolute from style.css (line 3284) — that was for
       the old eg-profile-card design. Only re-apply absolute inside profile-img. */
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--sb-gray-50);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-pill);
    padding: 2px 10px;
    font-size: var(--sb-fs-xs);
    font-weight: var(--sb-fw-semibold);
    color: var(--sb-text);
    text-transform: uppercase;
}
.country-flag img {
    width: 16px !important;
    height: 11px !important;
    object-fit: cover;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   23. Tabs (.tab-area .nav, .tab-area button.nav-link)
   -------------------------------------------------------------------------- */
.tab-area .nav {
    background: transparent !important;
    border-bottom: 1px solid var(--sb-border);
    gap: var(--sb-sp-1);
    padding: 0;
}
.tab-area button.nav-link,
.tab-area .nav-link {
    background: transparent !important;
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: color var(--sb-transition), border-color var(--sb-transition);
}
.tab-area button.nav-link:hover,
.tab-area .nav-link:hover {
    color: var(--sb-text) !important;
}
.tab-area button.nav-link.active,
.tab-area .nav-link.active {
    background: transparent !important;
    color: var(--sb-primary) !important;
    border-bottom-color: var(--sb-primary) !important;
}
.tab-area .tab-pane {
    padding: var(--sb-sp-5) 0 !important;
}


/* ==========================================================================
   PHASE 4 — Forms UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   24. Form Sections (.form-box, .form-box-title, .product-card)
   -------------------------------------------------------------------------- */
.eg-card.product-card,
.product-card {
    padding: var(--sb-sp-6) !important;
}

.form-box {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    padding: var(--sb-sp-6) !important;
    margin-bottom: var(--sb-sp-6);
    box-shadow: var(--sb-shadow-xs);
}

/* Section heading right above a .form-box — visually links them */
.form-box-title {
    font-size: var(--sb-fs-md) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin: 0 0 var(--sb-sp-3) !important;
    padding: 0 0 var(--sb-sp-3) !important;
    border-bottom: 1px solid var(--sb-border);
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: var(--sb-sp-2);
}
.form-box-title::before {
    content: '';
    width: 3px;
    height: 18px;
    background: var(--sb-primary);
    border-radius: var(--sb-radius-pill);
    flex-shrink: 0;
}

/* When form-box-title sits OUTSIDE the form-box (current pattern in Blade) */
.form-box + .form-box-title,
h4.form-box-title {
    margin-top: var(--sb-sp-6) !important;
}

/* Field row spacing — neutralize legacy mb-35 chaos */
.form-inner.mb-35 { margin-bottom: var(--sb-sp-5) !important; }
.form-inner { margin-bottom: var(--sb-sp-4); }

/* --------------------------------------------------------------------------
   25. Labels & Required Indicator
   -------------------------------------------------------------------------- */
.form-inner label,
label.form-label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin-bottom: var(--sb-sp-2) !important;
    line-height: 1.3;
}

/* Required asterisk — softer, smaller, aligned */
.form-inner label .text-danger,
label.form-label .text-danger {
    color: var(--sb-danger) !important;
    font-size: 14px;
    line-height: 1;
    font-weight: var(--sb-fw-bold);
}

/* Helper text (small description below input) */
.form-text,
.form-inner .help-text,
.form-inner small.help {
    display: block;
    font-size: var(--sb-fs-xs);
    color: var(--sb-text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   26. Validation UI
   -------------------------------------------------------------------------- */
.form-inner .error,
.form-inner .error.text-danger,
.error.text-danger,
.invalid-feedback {
    display: block;
    color: var(--sb-danger) !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-medium);
    margin-top: 6px;
    line-height: 1.4;
    padding-left: 18px;
    position: relative;
}
.form-inner .error::before,
.error.text-danger::before,
.invalid-feedback::before {
    content: '\f33a'; /* bootstrap-icons exclamation-circle */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
    line-height: 1.3;
}

/* Input-level invalid state */
.form-inner.has-error input,
.form-inner.has-error textarea,
.form-inner.has-error select,
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--sb-danger) !important;
    background-color: #FEF2F2 !important;
}
.form-inner.has-error input:focus,
input.is-invalid:focus,
textarea.is-invalid:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Success state */
input.is-valid,
.form-control.is-valid {
    border-color: var(--sb-success) !important;
}
input.is-valid:focus,
.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* --------------------------------------------------------------------------
   27. Form Footer (.button-group) + Form Buttons
   -------------------------------------------------------------------------- */
.button-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sb-sp-3);
    margin-top: var(--sb-sp-6) !important;
    padding-top: var(--sb-sp-5);
    border-top: 1px solid var(--sb-border);
    flex-wrap: wrap;
}
.button-group .eg-btn,
.button-group .btn,
.button-group input[type="submit"] {
    margin: 0 !important;
}

@media (max-width: 575px) {
    .button-group {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .button-group .eg-btn,
    .button-group .btn,
    .button-group input[type="submit"] { width: 100%; }
}

/* Save / submit button sizing — calmer than legacy 20px font / 7px padding */
.medium-btn {
    padding: 10px 28px !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    border-radius: var(--sb-radius-sm) !important;
    letter-spacing: 0.2px;
}

/* Cancel button — when paired with btn--red turn it into a soft danger ghost */
.cancel-btn {
    padding: 10px 28px !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
}
.btn--red.cancel-btn {
    background-color: transparent !important;
    color: var(--sb-text-muted) !important;
    border: 1px solid var(--sb-border-strong) !important;
}
.btn--red.cancel-btn:hover {
    background-color: var(--sb-danger-soft) !important;
    color: var(--sb-danger) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Back button (top-right, paired with .btn--primary) */
.back-btn {
    padding: 8px 16px !important;
    border-radius: var(--sb-radius-sm) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sb-fs-sm) !important;
}
.back-btn img {
    width: 14px;
    height: 14px;
    margin-right: 0 !important;
    filter: brightness(0) invert(1);
}

/* Submit button — tame width and remove letter-spacing animation */
.submit--btn {
    border-radius: var(--sb-radius-sm) !important;
    padding: 10px 28px !important;
    width: auto;
    max-width: none;
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    transition: background-color var(--sb-transition) !important;
}
.submit--btn:hover {
    background-color: var(--sb-primary-hover) !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   28. Outline / Solid Button Variants
   -------------------------------------------------------------------------- */
.green-outline-btn {
    border: 1px solid var(--sb-success) !important;
    color: var(--sb-success) !important;
    background-color: var(--sb-surface) !important;
    padding: 8px 22px !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    transition: background-color var(--sb-transition), color var(--sb-transition) !important;
}
.green-outline-btn:hover {
    background-color: var(--sb-success-soft) !important;
    color: var(--sb-success) !important;
}

.orange-outline-btn {
    border: 1px solid var(--sb-warning) !important;
    color: var(--sb-warning) !important;
    background-color: var(--sb-surface) !important;
    padding: 8px 22px !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    transition: background-color var(--sb-transition), color var(--sb-transition) !important;
}
.orange-outline-btn:hover {
    background-color: var(--sb-warning-soft) !important;
    color: #B45309 !important;
}

/* (note: legacy class has typo 'priamry' — kept for compatibility) */
.priamry-outline-btn,
.primary-outline-btn {
    border: 1px solid var(--sb-primary) !important;
    color: var(--sb-primary) !important;
    background-color: var(--sb-surface) !important;
    padding: 8px 22px !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    transition: background-color var(--sb-transition), color var(--sb-transition) !important;
}
.priamry-outline-btn:hover,
.primary-outline-btn:hover {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-hover) !important;
}

.red-solid-btn {
    border: 1px solid var(--sb-danger) !important;
    background-color: var(--sb-danger) !important;
    color: #FFFFFF !important;
    padding: 8px 22px !important;
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    transition: background-color var(--sb-transition) !important;
}
.red-solid-btn:hover {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   29. Dropzone (file upload)
   -------------------------------------------------------------------------- */
.form-inner.file-upload { margin-bottom: var(--sb-sp-4); }

.dropzone-wrapper {
    border: 2px dashed var(--sb-border-strong) !important;
    border-radius: var(--sb-radius) !important;
    background-color: var(--sb-gray-50);
    color: var(--sb-text-muted) !important;
    height: 170px !important;
    transition: background-color var(--sb-transition),
                border-color var(--sb-transition);
    position: relative;
    overflow: hidden;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
    background-color: var(--sb-primary-soft) !important;
    border-color: var(--sb-primary) !important;
    color: var(--sb-primary-700) !important;
}

.dropzone-desc {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 var(--sb-sp-4);
    text-align: center;
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-medium);
}
.dropzone-desc i,
.dropzone-desc .glyphicon {
    display: block;
    font-size: 28px !important;
    color: var(--sb-text-soft);
    margin-bottom: var(--sb-sp-2);
}
.dropzone-wrapper:hover .dropzone-desc i,
.dropzone-wrapper.dragover .dropzone-desc i {
    color: var(--sb-primary) !important;
}
.dropzone-desc p {
    margin: 0;
    color: inherit;
    font-size: var(--sb-fs-sm);
}

.dropzone {
    height: 170px !important;
}

/* Dropzone.js library (DZ class) */
.dropzone, div.dropzone,
.dz-default { background-color: transparent !important; }
.dropzone .dz-message,
.dz-default.dz-message { font-size: var(--sb-fs-sm); color: var(--sb-text-muted); }

/* Preview / box thumbnail */
.preview-zone .box,
.gallery-preview-zone .box {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    padding: var(--sb-sp-2);
    margin-top: var(--sb-sp-2);
}
.box-header {
    border-bottom: 1px solid var(--sb-border) !important;
    color: var(--sb-text) !important;
    padding: var(--sb-sp-2) !important;
    margin-bottom: var(--sb-sp-2) !important;
}

.img-thumb {
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid var(--sb-border) !important;
    max-height: 64px;
    padding: 2px;
}

.attach-file {
    color: var(--sb-primary) !important;
    text-decoration: none !important;
    font-size: var(--sb-fs-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--sb-sp-2);
}
.attach-file::before {
    content: '\f490'; /* bootstrap-icons paperclip */
    font-family: 'bootstrap-icons';
}
.attach-file:hover { color: var(--sb-primary-hover) !important; }

/* --------------------------------------------------------------------------
   30. Bootstrap Tagsinput
   -------------------------------------------------------------------------- */
.bootstrap-tagsinput {
    width: 100%;
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 6px 8px !important;
    line-height: 1.6 !important;
    box-shadow: var(--sb-shadow-xs);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.bootstrap-tagsinput:focus-within {
    border-color: var(--sb-primary);
    box-shadow: var(--sb-shadow-focus);
}

.bootstrap-tagsinput .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border: 1px solid var(--sb-primary-200);
    padding: 3px 10px !important;
    border-radius: var(--sb-radius-pill) !important;
    font-size: var(--sb-fs-xs);
    font-weight: var(--sb-fw-semibold);
    margin: 0 !important;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 4px;
    cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]::after {
    content: '\00d7';
    color: var(--sb-primary-700);
    font-size: 14px;
}

.bootstrap-tagsinput input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    flex: 1;
    min-width: 100px;
    font-size: var(--sb-fs-base);
}
.bootstrap-tagsinput input:focus { outline: none !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   31. Form Switch (toggle)
   -------------------------------------------------------------------------- */
.form-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    margin: 0;
    min-height: auto;
    gap: 8px;
}
@media (max-width: 767px) {
    .form-switch { justify-content: flex-end; }
}

.form-switch .form-check-input {
    width: 2.4em !important;
    height: 1.3em !important;
    margin: 0 !important;
    background-color: var(--sb-gray-300);
    border-color: var(--sb-gray-300);
    cursor: pointer;
    transition: background-color var(--sb-transition), border-color var(--sb-transition);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}
.form-switch .form-check-input:focus {
    box-shadow: var(--sb-shadow-focus) !important;
    outline: none !important;
}

.form-check-label {
    font-size: var(--sb-fs-sm);
    color: var(--sb-text);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   32. Summernote Editor
   -------------------------------------------------------------------------- */
.note-editor.note-frame,
.note-editor.note-airframe {
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    overflow: hidden;
    box-shadow: var(--sb-shadow-xs);
    background-color: var(--sb-surface);
}
.note-editor.note-frame:focus-within {
    border-color: var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-focus);
}

.note-toolbar {
    background-color: var(--sb-gray-50) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
}

.note-btn,
.note-toolbar .btn,
.note-toolbar button {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--sb-text) !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 4px 8px !important;
    font-size: var(--sb-fs-sm) !important;
    transition: background-color var(--sb-transition), color var(--sb-transition);
}
.note-btn:hover,
.note-toolbar .btn:hover {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: transparent !important;
}
.note-btn.active,
.note-toolbar .btn.active {
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
}

.note-editable {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    padding: var(--sb-sp-3) var(--sb-sp-4) !important;
    font-family: var(--sb-font-family) !important;
    font-size: var(--sb-fs-base);
}
.note-statusbar {
    background-color: var(--sb-gray-50) !important;
    border-top: 1px solid var(--sb-border) !important;
}

/* --------------------------------------------------------------------------
   33. eg-badge variants (used inside forms / details / cards)
   -------------------------------------------------------------------------- */
.eg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-semibold) !important;
    line-height: 1 !important;
    border-radius: var(--sb-radius-pill) !important;
    border: 1px solid transparent;
    text-transform: capitalize;
}
.eg-badge::before { display: none !important; } /* kill legacy ::before scale */

.eg-badge.green {
    background-color: var(--sb-success-soft) !important;
    color: var(--sb-success) !important;
    border-color: rgba(16, 185, 129, 0.2);
}
.eg-badge.red {
    background-color: var(--sb-danger-soft) !important;
    color: var(--sb-danger) !important;
    border-color: rgba(239, 68, 68, 0.2);
}
.eg-badge.orange {
    background-color: var(--sb-warning-soft) !important;
    color: #B45309 !important;
    border-color: rgba(245, 158, 11, 0.25);
}
.eg-badge.primary {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: rgba(14, 165, 233, 0.2);
}

/* --------------------------------------------------------------------------
   34. Input-group (Bootstrap addons used in forms)
   -------------------------------------------------------------------------- */
.input-group {
    box-shadow: var(--sb-shadow-xs);
    border-radius: var(--sb-radius-sm);
    overflow: hidden;
}
.input-group .form-control,
.input-group .form-select {
    box-shadow: none !important;
}
.input-group:focus-within {
    box-shadow: var(--sb-shadow-focus);
}
.input-group:focus-within .form-control,
.input-group:focus-within .form-select { border-color: var(--sb-primary) !important; }
.conversion-rate .input-group-text {
    padding: 8px 12px !important;
    background-color: var(--sb-gray-50);
    color: var(--sb-text-muted);
}

/* --------------------------------------------------------------------------
   35. Modal — used by validation error modal in master.blade.php
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background-color: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
    padding: var(--sb-sp-4) var(--sb-sp-5);
}
.modal-header .modal-title {
    font-size: var(--sb-fs-lg) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text);
}
.modal-body {
    padding: var(--sb-sp-5);
    color: var(--sb-text);
}
.modal-footer {
    background-color: var(--sb-surface);
    border-top: 1px solid var(--sb-border);
    padding: var(--sb-sp-4) var(--sb-sp-5);
    gap: var(--sb-sp-2);
}
.btn-close {
    opacity: 0.6;
    transition: opacity var(--sb-transition);
}
.btn-close:hover { opacity: 1; }
.btn-close:focus { box-shadow: var(--sb-shadow-focus); opacity: 1; }


/* ==========================================================================
   PHASE 5 — Polish & Consistency
   ========================================================================== */

/* --------------------------------------------------------------------------
   36. Remaining Purple Cleanup (overrides for any legacy hard-coded references)
   -------------------------------------------------------------------------- */

/* Utility helpers */
.text-purple { color: var(--sb-primary) !important; }

/* Sidebar search (rare but exists) */
.sidebar-search input:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-focus) !important;
}
.sidebar-search .bx:hover { color: var(--sb-primary) !important; }

/* Old form-group label hover */
.form-group label:hover {
    color: var(--sb-primary) !important;
    letter-spacing: 0 !important;
}

/* Legacy checkbox + label::before (custom checkbox UI) */
input[type=checkbox]:checked + label::before {
    background-color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
}
input[type=checkbox]:checked + label::after {
    border-color: #FFFFFF !important;
}

/* Page title 2 (purple banner header) */
.page-title2 {
    background-color: var(--sb-primary) !important;
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    padding: var(--sb-sp-4) var(--sb-sp-5) !important;
}
.page-title2 h5 {
    color: #FFFFFF !important;
    font-size: var(--sb-fs-lg) !important;
    font-weight: var(--sb-fw-semibold) !important;
}
.page-title2 .title-logo svg path,
.page-title2 .title-logo svg { fill: #FFFFFF; }

/* Clear cache button (top-right of page-title2) */
a.clear-cache {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-radius: var(--sb-radius-sm);
    padding: 6px 14px;
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
    transition: background-color var(--sb-transition);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
a.clear-cache:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

/* Table-specific username links (customer / merchant / prod-details / ticket) */
.customer-table tbody td a.username,
.merchant-table tbody td a.username,
.prod-details-table tbody td a.username,
.ticket-table tbody td a.username,
.ticket-table tbody td span.subject,
.winner-card .winner-body .winner-details-list span.username,
.deposit-card .winner-body .winner-details-list span.username {
    color: var(--sb-primary) !important;
    font-weight: var(--sb-fw-semibold);
}

/* jQuery UI datepicker / widget */
.ui-widget-header {
    background: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    border-color: var(--sb-primary-200) !important;
    font-weight: var(--sb-fw-semibold);
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
}
.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-widget-header .ui-state-default:hover,
.ui-button:hover {
    background: var(--sb-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-primary) !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-state-highlight {
    background: var(--sb-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-primary) !important;
}
.ui-datepicker {
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    border: 1px solid var(--sb-border) !important;
    padding: var(--sb-sp-3) !important;
    font-family: var(--sb-font-family) !important;
}

/* Login form area (admin login page) */
.login-form-area .form-title h2,
.login-form-area .login-title { color: var(--sb-primary) !important; }
.login-form-area .forgot-pass:hover { color: var(--sb-primary-hover) !important; }

/* Page builder / sortable widgets (#modules) */
#modules .drag.ui-draggable {
    border: 2px solid var(--sb-primary) !important;
    border-radius: var(--sb-radius-sm) !important;
}

/* Tagsinput legacy color (already covered, but safety override) */
.bootstrap-tagsinput .tag {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
}

/* --------------------------------------------------------------------------
   37. Profile Cards (.eg-profile-card)
   -------------------------------------------------------------------------- */
.eg-profile-card {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-5);
    box-shadow: var(--sb-shadow-sm);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
    text-align: center;
}
.eg-profile-card:hover {
    box-shadow: var(--sb-shadow-md);
    transform: translateY(-2px);
}
.eg-profile-card .profile-img {
    position: relative;
    margin-bottom: var(--sb-sp-3);
}
.eg-profile-card .profile-img img {
    width: 88px !important;
    height: 88px !important;
    border-radius: var(--sb-radius-pill);
    border: 3px solid var(--sb-surface);
    box-shadow: 0 0 0 1px var(--sb-border);
    object-fit: cover;
}
.eg-profile-card .profile-img .country-flag {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) translateY(50%);
}
.eg-profile-card .profile-img button.eg-btn {
    position: absolute;
    right: 0;
    top: 0;
}
.eg-profile-card .profile-bio { margin: var(--sb-sp-4) 0 var(--sb-sp-3); }
.eg-profile-card .profile-bio h4,
.eg-profile-card .profile-bio h3 {
    font-size: var(--sb-fs-md) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin-bottom: 4px !important;
}
.eg-profile-card .profile-bio h6,
.eg-profile-card .profile-bio h5 {
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-medium) !important;
    margin: 0 !important;
}
.eg-profile-card .card-action {
    border-top: 1px solid var(--sb-border) !important;
    margin: var(--sb-sp-4) calc(-1 * var(--sb-sp-5)) 0 !important;
    padding: var(--sb-sp-3) var(--sb-sp-5) 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sb-sp-2);
}

/* --------------------------------------------------------------------------
   38. Profile Area (single-infobox details page)
   -------------------------------------------------------------------------- */
.profile-area .profile-img img {
    border-radius: var(--sb-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-xs);
}
.profile-area .small-hints h4,
.profile-area .small-hints h3 {
    font-size: var(--sb-fs-xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
}
.profile-area .small-hints p { color: var(--sb-text-muted) !important; }
.profile-area .small-hints span {
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
}
.profile-area .profile-content .single-infobox {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-4);
    background-color: var(--sb-surface);
    transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}
.profile-area .profile-content .single-infobox:hover {
    border: 1px solid var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-sm);
}
.profile-area .profile-content .single-infobox h6 {
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px !important;
}

/* --------------------------------------------------------------------------
   39. Winner / Deposit Cards
   -------------------------------------------------------------------------- */
.winner-card,
.deposit-card {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    box-shadow: var(--sb-shadow-sm);
    margin-bottom: var(--sb-sp-5);
}
.winner-card .winner-header {
    background: var(--sb-primary) !important;
    padding: var(--sb-sp-4) var(--sb-sp-5);
    color: #FFFFFF;
}
.winner-card .winner-header h4 {
    color: #FFFFFF !important;
    font-size: var(--sb-fs-md) !important;
    font-weight: var(--sb-fw-semibold) !important;
    margin: 0;
}
.winner-card .winner-body,
.deposit-card .winner-body { padding: var(--sb-sp-4) var(--sb-sp-5); }

.winner-card .winner-body .winner-details-list,
.deposit-card .winner-body .winner-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.winner-card .winner-body .winner-details-list li,
.deposit-card .winner-body .winner-details-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sb-sp-2) 0;
    border-bottom: 1px solid var(--sb-border);
    font-size: var(--sb-fs-sm);
}
.winner-card .winner-body .winner-details-list li:last-child,
.deposit-card .winner-body .winner-details-list li:last-child { border-bottom: none; }
.winner-card .winner-body .winner-details-list span:first-child,
.deposit-card .winner-body .winner-details-list span:first-child {
    color: var(--sb-text-muted);
    font-weight: var(--sb-fw-medium);
}
.deposit-card .deopsit-badge {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-700);
    padding: 4px 12px;
    border-radius: var(--sb-radius-pill);
    font-size: var(--sb-fs-xs);
    font-weight: var(--sb-fw-semibold);
    display: inline-block;
}

/* --------------------------------------------------------------------------
   40. Bootstrap Alerts
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--sb-radius-sm);
    border: 1px solid transparent;
    padding: var(--sb-sp-3) var(--sb-sp-4);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-medium);
    display: flex;
    align-items: flex-start;
    gap: var(--sb-sp-2);
    margin-bottom: var(--sb-sp-4);
}
.alert-success {
    background-color: var(--sb-success-soft);
    color: #065F46;
    border-color: rgba(16, 185, 129, 0.25);
}
.alert-warning {
    background-color: var(--sb-warning-soft);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.3);
}
.alert-danger {
    background-color: var(--sb-danger-soft);
    color: #991B1B;
    border-color: rgba(239, 68, 68, 0.25);
}
.alert-info,
.alert-primary {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-700);
    border-color: rgba(14, 165, 233, 0.25);
}
.alert-secondary,
.alert-light {
    background-color: var(--sb-gray-100);
    color: var(--sb-gray-700);
    border-color: var(--sb-border);
}
.alert .alert-link { font-weight: var(--sb-fw-semibold); text-decoration: underline; }
.alert .btn-close { font-size: 12px; opacity: 0.7; padding: 6px; }

/* --------------------------------------------------------------------------
   41. Bootstrap Accordion
   -------------------------------------------------------------------------- */
.accordion {
    --bs-accordion-bg: var(--sb-surface);
    --bs-accordion-color: var(--sb-text);
    --bs-accordion-border-color: var(--sb-border);
    --bs-accordion-border-radius: var(--sb-radius-sm);
    --bs-accordion-active-bg: var(--sb-primary-soft);
    --bs-accordion-active-color: var(--sb-primary-700);
    --bs-accordion-btn-focus-box-shadow: var(--sb-shadow-focus);
}
.accordion-item {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-sm) !important;
    box-shadow: var(--sb-shadow-xs) !important;
    margin-bottom: var(--sb-sp-2);
    overflow: hidden;
}
.accordion-button {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    font-weight: var(--sb-fw-semibold);
    font-size: var(--sb-fs-base);
    padding: var(--sb-sp-3) var(--sb-sp-4);
    box-shadow: none !important;
    transition: background-color var(--sb-transition), color var(--sb-transition);
}
.accordion-button:not(.collapsed) {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
    box-shadow: inset 0 -1px 0 var(--sb-primary-200) !important;
}
.accordion-button:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: var(--sb-shadow-focus) !important;
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230369A1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-body {
    padding: var(--sb-sp-4);
    background-color: var(--sb-surface);
    color: var(--sb-text);
    font-size: var(--sb-fs-base);
    line-height: var(--sb-lh-base);
}

/* --------------------------------------------------------------------------
   42. Bootstrap Progress
   -------------------------------------------------------------------------- */
.progress {
    height: 8px;
    background-color: var(--sb-gray-100);
    border-radius: var(--sb-radius-pill);
    overflow: hidden;
    box-shadow: none;
}
.progress-bar {
    background-color: var(--sb-primary);
    transition: width var(--sb-transition-slow);
}
.progress-bar.bg-success { background-color: var(--sb-success) !important; }
.progress-bar.bg-warning { background-color: var(--sb-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--sb-danger)  !important; }
.progress-bar.bg-info    { background-color: var(--sb-info)    !important; }

/* --------------------------------------------------------------------------
   43. Bootstrap List Group
   -------------------------------------------------------------------------- */
.list-group {
    border-radius: var(--sb-radius-sm);
    box-shadow: var(--sb-shadow-xs);
    overflow: hidden;
}
.list-group-item {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text);
    padding: var(--sb-sp-3) var(--sb-sp-4);
    font-size: var(--sb-fs-base);
    transition: background-color var(--sb-transition);
}
.list-group-item:hover { background-color: var(--sb-gray-50); }
.list-group-item.active {
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
    color: #FFFFFF;
}
.list-group-item-action:focus {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-700);
    box-shadow: var(--sb-shadow-focus);
    z-index: 2;
}

/* --------------------------------------------------------------------------
   44. Toastr Notifications
   -------------------------------------------------------------------------- */
#toast-container > div,
.toast-container > div {
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    opacity: 1 !important;
    padding: var(--sb-sp-3) var(--sb-sp-4) var(--sb-sp-3) 50px !important;
    font-family: var(--sb-font-family) !important;
    font-size: var(--sb-fs-sm) !important;
    background-position: 14px center !important;
    background-size: 22px !important;
    border-left: 4px solid;
}
.toast-success {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-left-color: var(--sb-success) !important;
}
.toast-error {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-left-color: var(--sb-danger) !important;
}
.toast-warning {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-left-color: var(--sb-warning) !important;
}
.toast-info {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-left-color: var(--sb-info) !important;
}
.toast-title {
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    font-size: var(--sb-fs-sm) !important;
    margin-bottom: 2px;
}
.toast-message { color: var(--sb-text-muted) !important; font-size: var(--sb-fs-xs); }

/* Cute alert toast (used by master.blade.php) */
.cute-alert {
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    border: 1px solid var(--sb-border) !important;
    background-color: var(--sb-surface) !important;
}

/* SweetAlert (legacy) */
.swal-modal {
    border-radius: var(--sb-radius-lg) !important;
}
.swal-button {
    background-color: var(--sb-primary) !important;
    border-radius: var(--sb-radius-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
}
.swal-button--cancel {
    background-color: var(--sb-gray-100) !important;
    color: var(--sb-text) !important;
}
.swal-button:hover { background-color: var(--sb-primary-hover) !important; }

/* --------------------------------------------------------------------------
   45. Tooltips & Popovers
   -------------------------------------------------------------------------- */
.tooltip-inner {
    background-color: var(--sb-gray-900);
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-fs-xs);
    font-weight: var(--sb-fw-medium);
    box-shadow: var(--sb-shadow-md);
}
.tooltip-arrow::before,
.tooltip .tooltip-arrow::before { color: var(--sb-gray-900); }

.popover {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-lg);
    font-family: var(--sb-font-family);
}
.popover-header {
    background-color: var(--sb-gray-50);
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
    font-weight: var(--sb-fw-semibold);
    font-size: var(--sb-fs-sm);
}
.popover-body { color: var(--sb-text-muted); font-size: var(--sb-fs-sm); }

/* --------------------------------------------------------------------------
   46. Global Custom Scrollbar (page-level)
   -------------------------------------------------------------------------- */
.main-content::-webkit-scrollbar,
body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { width: 10px; height: 10px; }

.main-content::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track { background: var(--sb-gray-100); }

.main-content::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--sb-gray-300);
    border-radius: var(--sb-radius-pill);
    border: 2px solid var(--sb-gray-100);
}
.main-content::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--sb-gray-400); }

/* Firefox fallback */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-gray-300) var(--sb-gray-100);
}

/* --------------------------------------------------------------------------
   47. Global Focus Ring + Selection
   -------------------------------------------------------------------------- */
*:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
    border-radius: var(--sb-radius-sm);
}
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
}

::selection {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-700);
}

/* --------------------------------------------------------------------------
   48. Subtle Entrance Animation for Cards on Load
   -------------------------------------------------------------------------- */
@keyframes sb-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eg-card,
.eg-card-two,
.eg-profile-card,
.form-box,
.winner-card,
.deposit-card {
    animation: sb-fade-up 0.35s ease-out both;
}

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

/* --------------------------------------------------------------------------
   49. Utility Helpers (consistency wrappers)
   -------------------------------------------------------------------------- */
.text-primary,
.text-sky { color: var(--sb-primary) !important; }
.bg-primary-soft { background-color: var(--sb-primary-soft) !important; }
.border-primary { border-color: var(--sb-primary) !important; }

/* Make sure Bootstrap text utilities don't clash with our tones */
.text-success { color: var(--sb-success) !important; }
.text-warning { color: var(--sb-warning) !important; }
.text-danger  { color: var(--sb-danger)  !important; }
.text-info    { color: var(--sb-info)    !important; }

/* Bootstrap bg utilities — make sure they aren't legacy purple */
.bg-primary { background-color: var(--sb-primary) !important; }

/* --------------------------------------------------------------------------
   50. RTL Refinements
   -------------------------------------------------------------------------- */
[dir="rtl"] .form-box-title::before {
    margin-left: 0;
    margin-right: 0;
}
[dir="rtl"] .button-group { justify-content: flex-end; }
[dir="rtl"] .input-with-btn input { border-radius: 0 !important; }
[dir="rtl"] .input-with-btn button { border-radius: 0 !important; }

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: var(--sb-sp-2);
    padding-left: var(--sb-sp-2);
}

[dir="rtl"] .toast-container > div,
[dir="rtl"] #toast-container > div {
    padding: var(--sb-sp-3) 50px var(--sb-sp-3) var(--sb-sp-4) !important;
    background-position: right 14px center !important;
    border-left: 0;
    border-right: 4px solid;
}

/* --------------------------------------------------------------------------
   51. Print Styles (invoices / orders details)
   -------------------------------------------------------------------------- */
@media print {
    .header-area,
    .sidebar-wrapper,
    .footer,
    .button-group,
    .back-btn,
    .page-title2 a.clear-cache { display: none !important; }

    .main-content {
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        background: #FFFFFF !important;
    }
    .eg-card,
    .form-box,
    .winner-card,
    .deposit-card {
        box-shadow: none !important;
        border: 1px solid #E5E7EB !important;
        page-break-inside: avoid;
    }
    .eg-table thead { background: #F8FAFC !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge {
        border: 1px solid #CBD5E1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body { background: #FFFFFF !important; color: #000 !important; font-size: 12px; }
    a { color: inherit !important; text-decoration: none !important; }
}

/* --------------------------------------------------------------------------
   52. Invoice / Bill Info section
   -------------------------------------------------------------------------- */
.logo-and-invoice-info,
.bill-info {
    margin-bottom: var(--sb-sp-6);
    gap: var(--sb-sp-6);
}
.logo-and-invoice-info .invoice-info h4 {
    font-size: var(--sb-fs-3xl) !important;
    font-weight: var(--sb-fw-bold) !important;
    color: var(--sb-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bill-info .invoice-col .company-name {
    font-size: var(--sb-fs-xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text);
}
.bill-info .invoice-col span {
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: var(--sb-fw-semibold);
    display: block;
    margin-bottom: 2px;
}
.bill-info .invoice-col address span {
    color: var(--sb-text) !important;
    font-weight: var(--sb-fw-semibold);
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   53. Final Consistency: Tone-down legacy heavy shadows / radii
   -------------------------------------------------------------------------- */
.accordion-item { box-shadow: var(--sb-shadow-xs) !important; }
.widget-name {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-xs) !important;
    border-radius: var(--sb-radius-sm) !important;
    color: var(--sb-text) !important;
}
.widget-name .icon.mb-3 i {
    font-size: 22px !important;
    color: var(--sb-primary) !important;
}
.widget-item {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    height: auto !important;
    max-height: 700px;
}
.sortable-widget-item .section-name {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    font-size: var(--sb-fs-base);
    font-weight: var(--sb-fw-semibold);
    padding: var(--sb-sp-3) var(--sb-sp-4) !important;
    border-bottom: 1px solid var(--sb-border);
}


/* ==========================================================================
   PHASE 6 — Dashboard Accent System & Bootstrap Token Sync
   ========================================================================== */

/* --------------------------------------------------------------------------
   54. Bootstrap CSS Variables — sync to design tokens
        Ensures bg-primary bg-opacity-10, text-primary, etc. respect the theme.
   -------------------------------------------------------------------------- */
:root {
    --bs-primary:        var(--sb-primary);
    --bs-primary-rgb:    14, 165, 233;
    --bs-success-rgb:    16, 185, 129;
    --bs-danger-rgb:     239, 68, 68;
    --bs-warning-rgb:    245, 158, 11;
    --bs-info-rgb:       6, 182, 212;
    --bs-secondary-rgb:  100, 116, 139;
    --bs-dark-rgb:       30, 41, 59;
    --bs-body-color:     var(--sb-text);
    --bs-body-bg:        var(--sb-page-bg);
    --bs-border-color:   var(--sb-border);
    --bs-link-color:     var(--sb-primary);
    --bs-link-hover-color: var(--sb-primary-hover);
}

/* Bootstrap text utility colors aligned with theme */
.text-primary   { color: var(--sb-primary)  !important; }
.text-success   { color: var(--sb-success)  !important; }
.text-warning   { color: var(--sb-warning)  !important; }
.text-danger    { color: var(--sb-danger)   !important; }
.text-info      { color: var(--sb-info)     !important; }
.text-secondary { color: var(--sb-gray-500) !important; }
.text-dark      { color: var(--sb-text)     !important; }

/* Bootstrap Card — used widely on dashboard */
.card {
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-xs);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}
.card.shadow-sm {
    box-shadow: var(--sb-shadow-sm) !important;
}
.card:hover.shadow-sm {
    box-shadow: var(--sb-shadow) !important;
}
.card.border-0 { border: 1px solid var(--sb-border) !important; }

.card-header {
    background-color: var(--sb-surface) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    padding: var(--sb-sp-3) var(--sb-sp-4);
    font-weight: var(--sb-fw-semibold);
    color: var(--sb-text);
    font-size: var(--sb-fs-base);
}
.card-header.bg-white { background-color: var(--sb-surface) !important; }

.card-body {
    color: var(--sb-text);
    padding: var(--sb-sp-4);
}

/* Outline-primary Bootstrap button */
.btn-outline-primary {
    color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sb-primary) !important;
}

/* Bootstrap table-hover & table-light (used in dashboard latest bookings) */
.table {
    --bs-table-bg: var(--sb-surface);
    --bs-table-color: var(--sb-text);
    --bs-table-border-color: var(--sb-border);
    color: var(--sb-text);
    margin-bottom: 0;
}
.table > :not(caption) > * > * {
    border-bottom: 1px solid var(--sb-border);
    padding: 12px 16px;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--sb-gray-50) !important;
    color: var(--sb-text);
}
.table-light,
.table > thead.table-light {
    background-color: var(--sb-gray-50) !important;
}
.table > thead.table-light th {
    background-color: var(--sb-gray-50) !important;
    color: var(--sb-text-muted) !important;
    font-size: var(--sb-fs-xs) !important;
    font-weight: var(--sb-fw-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--sb-border) !important;
}

/* --------------------------------------------------------------------------
   55. Accent Context System
        Set --accent on a parent; child components read it (kpi-strip, kpi-icon,
        kpi-panel, text-accent, border-accent).
   -------------------------------------------------------------------------- */
.accent-primary {
    --accent:      var(--sb-primary);
    --accent-soft: var(--sb-primary-soft);
    --accent-fg:   var(--sb-primary-700);
}
.accent-success {
    --accent:      var(--sb-success);
    --accent-soft: var(--sb-success-soft);
    --accent-fg:   #065F46;
}
.accent-danger {
    --accent:      var(--sb-danger);
    --accent-soft: var(--sb-danger-soft);
    --accent-fg:   #991B1B;
}
.accent-warning {
    --accent:      var(--sb-warning);
    --accent-soft: var(--sb-warning-soft);
    --accent-fg:   #B45309;
}
.accent-info {
    --accent:      #06B6D4;
    --accent-soft: #CFFAFE;
    --accent-fg:   #155E75;
}
.accent-secondary {
    --accent:      var(--sb-gray-500);
    --accent-soft: var(--sb-gray-100);
    --accent-fg:   var(--sb-gray-700);
}
/* Domain-specific accents (consistent palette, not Bootstrap defaults) */
.accent-tours      { --accent: var(--sb-primary); --accent-soft: var(--sb-primary-soft); --accent-fg: var(--sb-primary-700); }
.accent-hotels     { --accent: #14B8A6;            --accent-soft: #CCFBF1;                --accent-fg: #0F766E; }
.accent-activities { --accent: var(--sb-warning); --accent-soft: var(--sb-warning-soft); --accent-fg: #B45309; }
.accent-transports { --accent: #6366F1;            --accent-soft: #E0E7FF;                --accent-fg: #4338CA; }
.accent-visa       { --accent: var(--sb-gray-600); --accent-soft: var(--sb-gray-100);     --accent-fg: var(--sb-gray-700); }

/* --------------------------------------------------------------------------
   56. Dashboard Building Blocks (kpi-strip / kpi-top / kpi-icon / kpi-panel)
   -------------------------------------------------------------------------- */
.kpi-strip {
    border-left: 4px solid var(--accent, var(--sb-primary)) !important;
}
[dir="rtl"] .kpi-strip {
    border-left: none !important;
    border-right: 4px solid var(--accent, var(--sb-primary)) !important;
}

.kpi-top {
    border-top: 3px solid var(--accent, var(--sb-primary)) !important;
}

.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--sb-radius-pill);
    background-color: var(--accent-soft, var(--sb-primary-soft));
    color: var(--accent, var(--sb-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--sb-transition);
}
.kpi-icon i { color: var(--accent, var(--sb-primary)); }

.card:hover .kpi-icon { transform: scale(1.05); }

.kpi-panel {
    background-color: var(--accent-soft, var(--sb-primary-soft));
    border-radius: var(--sb-radius-sm);
    padding: var(--sb-sp-3);
    border: 1px solid color-mix(in srgb, var(--accent, var(--sb-primary)) 18%, transparent);
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.kpi-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-sm);
}
.kpi-panel .kpi-value {
    color: var(--accent-fg, var(--sb-primary-700));
    font-weight: var(--sb-fw-bold);
    font-size: var(--sb-fs-xl);
    line-height: 1.2;
}

/* Generic accent text/border utilities */
.text-accent     { color: var(--accent, var(--sb-primary)) !important; }
.bg-accent-soft  { background-color: var(--accent-soft, var(--sb-primary-soft)) !important; }
.border-accent   { border-color: var(--accent, var(--sb-primary)) !important; }

/* --------------------------------------------------------------------------
   57. Dashboard "stat" cards centered (Tours/Hotels/Transports count)
   -------------------------------------------------------------------------- */
/* When a card has an .accent-* and is centered, give a subtle hover */
.card.accent-primary:hover,
.card.accent-success:hover,
.card.accent-danger:hover,
.card.accent-warning:hover,
.card.accent-info:hover,
.card.accent-tours:hover,
.card.accent-hotels:hover,
.card.accent-activities:hover,
.card.accent-transports:hover,
.card.accent-visa:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-md) !important;
}

/* Smooth canvas containers (Chart.js cards) */
.card-body canvas {
    max-width: 100%;
    height: auto !important;
}

/* Latest bookings table inside .card.border-0 */
.card .table-responsive { border-radius: 0 0 var(--sb-radius) var(--sb-radius); }

/* Fallback for browsers without color-mix() — still renders, just without border */
@supports not (border: 1px solid color-mix(in srgb, red 50%, transparent)) {
    .kpi-panel { border-color: transparent; }
}

/* --------------------------------------------------------------------------
   58. Unread / new row state (orders, contact)
   -------------------------------------------------------------------------- */
.eg-table tr.tr-unread,
table.table tr.tr-unread,
tr.tr-unread {
    background-color: var(--sb-primary-soft) !important;
    position: relative;
}
.eg-table tr.tr-unread td,
table.table tr.tr-unread td,
tr.tr-unread td { font-weight: var(--sb-fw-semibold); }
.eg-table tr.tr-unread:hover,
table.table tr.tr-unread:hover,
tr.tr-unread:hover {
    background-color: var(--sb-primary-100) !important;
}
.eg-table tr.tr-unread td:first-child,
table.table tr.tr-unread td:first-child,
tr.tr-unread td:first-child {
    box-shadow: inset 3px 0 0 var(--sb-primary);
}
[dir="rtl"] .eg-table tr.tr-unread td:first-child,
[dir="rtl"] table.table tr.tr-unread td:first-child,
[dir="rtl"] tr.tr-unread td:first-child {
    box-shadow: inset -3px 0 0 var(--sb-primary);
}


/* ==========================================================================
   PHASE 7 — Dark Mode
   Activation: <html data-theme="dark">  (set by tiny inline script in <head>)
   Strategy: re-define design tokens; component CSS already reads them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   59. Dark Mode Token Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* Brand — slightly brighter for dark contrast */
    --sb-primary:        #38BDF8;
    --sb-primary-hover:  #0EA5E9;
    --sb-primary-active: #0284C7;
    --sb-primary-soft:   rgba(56, 189, 248, 0.14);
    --sb-primary-100:    #1E293B;
    --sb-primary-200:    rgba(56, 189, 248, 0.30);
    --sb-primary-700:    #7DD3FC;

    /* Neutrals — slate inverted */
    --sb-gray-50:  #1E293B;
    --sb-gray-100: #1E293B;
    --sb-gray-200: #334155;
    --sb-gray-300: #475569;
    --sb-gray-400: #64748B;
    --sb-gray-500: #94A3B8;
    --sb-gray-600: #CBD5E1;
    --sb-gray-700: #E2E8F0;
    --sb-gray-800: #F1F5F9;
    --sb-gray-900: #F8FAFC;

    /* Surfaces */
    --sb-surface:       #1E293B;
    --sb-surface-muted: #0F172A;
    --sb-page-bg:       #0F172A;
    --sb-border:        #334155;
    --sb-border-strong: #475569;

    /* Text */
    --sb-text:        #F1F5F9;
    --sb-text-muted:  #94A3B8;
    --sb-text-soft:   #64748B;
    --sb-text-invert: #0F172A;

    /* States — soft variants are now low-alpha tints (work on dark bg) */
    --sb-success:      #34D399;
    --sb-success-soft: rgba(52, 211, 153, 0.14);
    --sb-warning:      #FBBF24;
    --sb-warning-soft: rgba(251, 191, 36, 0.14);
    --sb-danger:       #F87171;
    --sb-danger-soft:  rgba(248, 113, 113, 0.14);
    --sb-info:         #38BDF8;
    --sb-info-soft:    rgba(56, 189, 248, 0.14);

    /* Shadows — deeper, with stronger black blend */
    --sb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --sb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20);
    --sb-shadow:    0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.20);
    --sb-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
    --sb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.25);
    --sb-shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.35);

    /* Sidebar — slightly darker than page surface to feel "set back" */
    --sb-sidebar-bg:        #020617;
    --sb-sidebar-bg-deep:   #000000;
    --sb-sidebar-border:    rgba(255, 255, 255, 0.06);
    --sb-sidebar-text:      #CBD5E1;
    --sb-sidebar-text-muted:#64748B;
    --sb-sidebar-hover-bg:  rgba(255, 255, 255, 0.06);
    --sb-sidebar-active-bg: var(--sb-primary);
    --sb-sidebar-active-text:#0F172A;

    /* Bootstrap RGB sync */
    --bs-primary:       var(--sb-primary);
    --bs-primary-rgb:   56, 189, 248;
    --bs-success-rgb:   52, 211, 153;
    --bs-danger-rgb:    248, 113, 113;
    --bs-warning-rgb:   251, 191, 36;
    --bs-info-rgb:      56, 189, 248;
    --bs-body-color:    var(--sb-text);
    --bs-body-bg:       var(--sb-page-bg);
    --bs-border-color:  var(--sb-border);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   60. Dark Mode — Component-Specific Adjustments
        Most components inherit via tokens; these fix readability gaps.
   -------------------------------------------------------------------------- */
[data-theme="dark"] body { background-color: var(--sb-page-bg); color: var(--sb-text); }

/* Inputs — dark background that contrasts with page */
[data-theme="dark"] .form-inner input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .form-inner textarea,
[data-theme="dark"] .form-inner select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"]:not(.iconpicker-input),
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea {
    background-color: #0F172A;
    border-color: var(--sb-border);
    color: var(--sb-text);
    color-scheme: dark; /* native date pickers go dark */
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-inner input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--sb-text-soft); }

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] input.is-invalid {
    background-color: rgba(248, 113, 113, 0.08) !important;
    border-color: var(--sb-danger) !important;
}

/* Select2 — dark surface */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #0F172A !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sb-text) !important; }
[data-theme="dark"] .select2-dropdown {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .select2-results__option { color: var(--sb-text); }
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #0F172A !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Bootstrap-tagsinput */
[data-theme="dark"] .bootstrap-tagsinput {
    background-color: #0F172A !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}

/* Summernote */
[data-theme="dark"] .note-editor.note-frame { background-color: var(--sb-surface); }
[data-theme="dark"] .note-toolbar { background-color: #0F172A !important; border-color: var(--sb-border) !important; }
[data-theme="dark"] .note-editable {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}
[data-theme="dark"] .note-statusbar { background-color: #0F172A !important; border-color: var(--sb-border) !important; }
[data-theme="dark"] .note-btn { color: var(--sb-text) !important; }

/* Dropzone */
[data-theme="dark"] .dropzone-wrapper {
    background-color: #0F172A;
    border-color: var(--sb-border-strong) !important;
    color: var(--sb-text-muted) !important;
}
[data-theme="dark"] .dropzone-wrapper:hover,
[data-theme="dark"] .dropzone-wrapper.dragover {
    background-color: var(--sb-primary-soft) !important;
    border-color: var(--sb-primary) !important;
    color: var(--sb-primary) !important;
}

/* Tables — header tone */
[data-theme="dark"] .eg-table thead,
[data-theme="dark"] .eg-table thead tr th {
    background: #0F172A !important;
}
[data-theme="dark"] .eg-table tbody tr { background-color: var(--sb-surface) !important; }
[data-theme="dark"] .eg-table tbody tr:hover { background-color: #283448 !important; }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table > thead.table-light,
[data-theme="dark"] .table > thead.table-light th { background-color: #0F172A !important; }

/* Code chip inside cells */
[data-theme="dark"] .eg-table td code {
    background-color: rgba(56, 189, 248, 0.12);
    color: #7DD3FC;
}

/* Modals */
[data-theme="dark"] .modal-content { background-color: var(--sb-surface); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { background-color: var(--sb-surface); border-color: var(--sb-border); }
[data-theme="dark"] .btn-close { filter: invert(1) brightness(2); }

/* Toastr — dark surface */
[data-theme="dark"] #toast-container > div,
[data-theme="dark"] .toast-container > div {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}

/* Cute alert / SweetAlert */
[data-theme="dark"] .cute-alert,
[data-theme="dark"] .swal-modal {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}
[data-theme="dark"] .swal-text { color: var(--sb-text-muted) !important; }
[data-theme="dark"] .swal-title { color: var(--sb-text) !important; }

/* Tooltip */
[data-theme="dark"] .tooltip-inner {
    background-color: #F1F5F9;
    color: #0F172A;
}
[data-theme="dark"] .tooltip-arrow::before { color: #F1F5F9; }

/* Datepicker / jQuery UI */
[data-theme="dark"] .ui-datepicker {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
[data-theme="dark"] .ui-state-default,
[data-theme="dark"] .ui-widget-content .ui-state-default {
    background: #0F172A !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Cards & panels — automatic via tokens, but enforce for bs cards */
[data-theme="dark"] .card,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item {
    background-color: var(--sb-surface);
    color: var(--sb-text);
    border-color: var(--sb-border);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header.bg-white {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text);
    border-bottom-color: var(--sb-border) !important;
}
[data-theme="dark"] .accordion-button {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: var(--sb-primary) !important;
}
[data-theme="dark"] .list-group-item:hover {
    background-color: #283448 !important;
}

/* Filter card form labels — keep contrast */
[data-theme="dark"] .eg-card form label,
[data-theme="dark"] .form-inner label,
[data-theme="dark"] label.form-label {
    color: var(--sb-text);
}

/* Progress bars */
[data-theme="dark"] .progress { background-color: #0F172A; }

/* Form switch */
[data-theme="dark"] .form-switch .form-check-input {
    background-color: #334155;
    border-color: #334155;
}
[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
}

/* Header bar */
[data-theme="dark"] .header-area .main-conent-header {
    background-color: var(--sb-surface) !important;
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .header-area .main-conent-header .breadcrumb-area h5 { color: var(--sb-text) !important; }
[data-theme="dark"] .admin-area .dropdown-toggle:hover { background-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .admin-area .admin-thumb img { border-color: var(--sb-border); }

/* Header icons hover (sky-blue soft on dark) */
[data-theme="dark"] .header-area .main-conent-header ul.header-icons li a {
    color: var(--sb-text-muted);
}
[data-theme="dark"] .header-area .main-conent-header ul.header-icons li a:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
}

/* Dropdown menus — dark surface with primary hover */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
}
[data-theme="dark"] .dropdown-menu .dropdown-item { color: var(--sb-text); }
[data-theme="dark"] .dropdown-menu .dropdown-item i,
[data-theme="dark"] .dropdown-menu .dropdown-item .bi { color: var(--sb-text-muted); }
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
}

/* Pagination */
[data-theme="dark"] .pagination .page-item .page-link,
[data-theme="dark"] nav .pagination .page-item .page-link {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text-muted) !important;
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .pagination .page-item .page-link:hover,
[data-theme="dark"] nav .pagination .page-item .page-link:hover {
    background-color: var(--sb-primary-soft) !important;
    color: var(--sb-primary) !important;
}
[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] nav .pagination .page-item.active .page-link {
    background-color: var(--sb-primary) !important;
    color: var(--sb-text-invert) !important;
}

/* eg-card-two KPI strip — keep colored variants but adjust for dark */
[data-theme="dark"] .eg-card-two.skyblue {
    background: linear-gradient(135deg, #0EA5E9, #075985) !important;
}
[data-theme="dark"] .eg-card-two.primary { background: var(--sb-primary-active) !important; }

/* tr-unread on dark */
[data-theme="dark"] tr.tr-unread,
[data-theme="dark"] .eg-table tr.tr-unread,
[data-theme="dark"] table.table tr.tr-unread {
    background-color: rgba(56, 189, 248, 0.08) !important;
}
[data-theme="dark"] tr.tr-unread:hover,
[data-theme="dark"] .eg-table tr.tr-unread:hover,
[data-theme="dark"] table.table tr.tr-unread:hover {
    background-color: rgba(56, 189, 248, 0.14) !important;
}

/* --------------------------------------------------------------------------
   61. Theme Toggle Button (in header)
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sb-radius-sm);
    border: none;
    background-color: transparent;
    color: var(--sb-text-muted);
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition);
    padding: 0;
}
.theme-toggle-btn:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-hover);
}
.theme-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
}

/* Show sun icon in light mode, moon in dark mode */
.theme-toggle-btn .icon-moon { display: inline-block; }
.theme-toggle-btn .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-sun  { display: inline-block; }

/* Smooth color transition on theme switch */
html {
    transition: background-color var(--sb-transition), color var(--sb-transition);
}
.eg-card,
.card,
.form-box,
.eg-profile-card,
.winner-card,
.deposit-card,
.dropdown-menu,
.modal-content,
.sidebar-wrapper,
.header-area .sidebar-header,
.header-area .main-conent-header,
.main-content {
    transition-property: background-color, color, border-color, box-shadow,
                         max-width, width, margin-left, margin-right, padding;
    transition-duration: var(--sb-transition);
}


/* ==========================================================================
   PHASE 8 — Auth (Login) Page
   Applied to <body class="login-page-body"> only — does not affect admin pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   62. Login Page Body & Background
   -------------------------------------------------------------------------- */
.login-page-body {
    background-color: var(--sb-page-bg) !important;
    margin: 0;
    min-height: 100vh;
    font-family: var(--sb-font-family);
    color: var(--sb-text);
}

.login-page-body .login-bg {
    background-image: none !important;            /* override legacy login-bg.png */
    background: linear-gradient(135deg,
                var(--sb-primary-50) 0%,
                var(--sb-page-bg) 60%,
                var(--sb-page-bg) 100%) !important;
    min-height: 100vh;
    padding: var(--sb-sp-6) var(--sb-sp-4) !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .login-page-body .login-bg {
    background: radial-gradient(
        circle at 20% 20%,
        rgba(56, 189, 248, 0.12) 0%,
        var(--sb-page-bg) 50%,
        var(--sb-page-bg) 100%) !important;
}

/* Hide the decorative login-vector image (cleaner SaaS-modern look).
   Comment out this rule if you prefer to keep it visible. */
.login-page-body .login-vector {
    display: none !important;
}

/* --------------------------------------------------------------------------
   63. Login Form Card
   -------------------------------------------------------------------------- */
.login-page-body .login-form-area {
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-lg) !important;
    padding: var(--sb-sp-10) var(--sb-sp-8) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    width: 100%;
    max-width: 460px !important;
    text-align: center;
    position: relative;
    margin: 0 auto;
}

@media (max-width: 575px) {
    .login-page-body .login-form-area {
        padding: var(--sb-sp-6) var(--sb-sp-5) !important;
        max-width: 100% !important;
    }
}

/* Kill the legacy decorative ::before / ::after wings — they look dated */
.login-page-body .login-form-area::before,
.login-page-body .login-form-area::after {
    display: none !important;
    content: none !important;
}

/* --------------------------------------------------------------------------
   64. Login Form Title (brand greeting)
   -------------------------------------------------------------------------- */
.login-page-body .login-form-area .form-title {
    background-image: none !important;
    margin-bottom: var(--sb-sp-8) !important;
    padding: 0;
}
.login-page-body .login-form-area .form-title h4 {
    font-size: var(--sb-fs-3xl) !important;
    font-weight: var(--sb-fw-bold) !important;
    color: var(--sb-text) !important;
    margin-bottom: var(--sb-sp-2) !important;
    line-height: 1.3;
}
.login-page-body .login-form-area .form-title h4 span {
    font-size: var(--sb-fs-3xl) !important;
    font-weight: var(--sb-fw-bold) !important;
    color: var(--sb-primary) !important;
    display: inline;
}
.login-page-body .login-form-area .form-title p {
    font-size: var(--sb-fs-md) !important;
    font-weight: var(--sb-fw-regular) !important;
    color: var(--sb-text-muted) !important;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   65. Form Inputs in Login (override absolute icon + spacing)
   -------------------------------------------------------------------------- */
.login-page-body .login-form-area .form-inner {
    text-align: start !important;
    margin-bottom: var(--sb-sp-4) !important;
    position: relative;
}

.login-page-body .login-form-area .form-inner.mb-35 { margin-bottom: var(--sb-sp-4) !important; }
.login-page-body .login-form-area .form-inner.mb-25 { margin-bottom: var(--sb-sp-4) !important; }

.login-page-body .login-form-area .form-inner label {
    display: block;
    text-align: start;
    color: var(--sb-text);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
    margin-bottom: var(--sb-sp-2);
}

.login-page-body .login-form-area form input {
    padding: 11px 14px !important;
    padding-right: 14px !important; /* drop legacy reservation for floating icon */
}
[dir="rtl"] .login-page-body .login-form-area form input {
    padding-left: 14px !important;
}

/* Icon overlay — keep but reposition cleanly inside the input on the right */
.login-page-body .login-form-area .input-icon {
    position: absolute !important;
    right: 12px !important;
    bottom: auto !important;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 0 !important;
    opacity: 0.55;
    pointer-events: none;
    object-fit: contain;
}
[dir="rtl"] .login-page-body .login-form-area .input-icon {
    right: auto !important;
    left: 12px !important;
}
/* When icon is present, reserve space inside the input so text doesn't overlap */
.login-page-body .login-form-area form input[type="text"],
.login-page-body .login-form-area form input[type="email"],
.login-page-body .login-form-area form input[type="password"] {
    padding-right: 40px !important;
}
[dir="rtl"] .login-page-body .login-form-area form input[type="text"],
[dir="rtl"] .login-page-body .login-form-area form input[type="email"],
[dir="rtl"] .login-page-body .login-form-area form input[type="password"] {
    padding-right: 14px !important;
    padding-left: 40px !important;
}

/* invalid-feedback in login: keep aligned with field */
.login-page-body .login-form-area .invalid-feedback {
    display: block;
    text-align: start;
    color: var(--sb-danger);
    font-size: var(--sb-fs-xs);
    margin-top: 6px;
    padding-left: 0;
}
.login-page-body .login-form-area .invalid-feedback::before {
    content: none; /* don't double up the icon since login form is compact */
}
.login-page-body .login-form-area input.is-invalid {
    background-color: rgba(239, 68, 68, 0.04) !important;
}

/* --------------------------------------------------------------------------
   66. Login Button + Forgot Pass + secondary links
   -------------------------------------------------------------------------- */
.login-page-body .login-form-area .login-btn,
.login-page-body .login-form-area button[type="submit"].eg-btn {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: var(--sb-fs-base) !important;
    font-weight: var(--sb-fw-semibold) !important;
    border-radius: var(--sb-radius-sm) !important;
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--sb-transition), box-shadow var(--sb-transition);
    margin-top: var(--sb-sp-3);
}
.login-page-body .login-form-area .login-btn:hover,
.login-page-body .login-form-area button[type="submit"].eg-btn:hover {
    background-color: var(--sb-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28);
    color: #FFFFFF !important;
}
.login-page-body .login-form-area .login-btn img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    margin-right: 0 !important;
    vertical-align: middle;
}

.login-page-body .login-form-area .forgot-pass {
    display: inline-block;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-medium) !important;
    color: var(--sb-text-muted) !important;
    margin-top: var(--sb-sp-3);
    text-decoration: none;
    transition: color var(--sb-transition) !important;
    letter-spacing: 0 !important;
}
.login-page-body .login-form-area .forgot-pass:hover {
    color: var(--sb-primary) !important;
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   67. Theme Toggle on Login Page (top-right corner)
   -------------------------------------------------------------------------- */
.theme-toggle-btn.login-theme-toggle {
    position: fixed;
    top: var(--sb-sp-4);
    right: var(--sb-sp-4);
    z-index: 20;
    background-color: var(--sb-surface);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}
[dir="rtl"] .theme-toggle-btn.login-theme-toggle {
    right: auto;
    left: var(--sb-sp-4);
}
.theme-toggle-btn.login-theme-toggle:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
}

/* --------------------------------------------------------------------------
   68. Dark Mode adjustments for login page
   -------------------------------------------------------------------------- */
[data-theme="dark"] .login-page-body .login-form-area {
    background-color: var(--sb-surface) !important;
    border-color: var(--sb-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .login-page-body .login-form-area form input {
    background-color: #0F172A !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .login-page-body .login-form-area .input-icon {
    filter: invert(1) brightness(1.5);
    opacity: 0.4;
}


/* ==========================================================================
   PHASE 11 — HYBRID NEUMORPHISM + GLASSMORPHISM (Foundation)
   New tokens layered ON TOP of Phase 1 tokens. Existing components keep
   working; sections 12-15 then opt-into the new look on container/overlay.
   Dense data (tables/forms/badges) stays flat per Phase 14.
   ========================================================================== */

/* --------------------------------------------------------------------------
   69. Hybrid Tokens — Soft Surfaces, Neumorphic Shadows, Glass
   -------------------------------------------------------------------------- */
:root {
    --neuro-surface:        #EFF3F8;
    --neuro-surface-deep:   #E6EBF1;
    --neuro-page-grad-1:    #EEF2F6;
    --neuro-page-grad-2:    #F6F8FB;
    --neuro-highlight:      rgba(255, 255, 255, 0.95);
    --neuro-shadow:         rgba(15, 23, 42, 0.10);
    --neuro-shadow-soft:    rgba(15, 23, 42, 0.05);

    --neuro-elevated:
        -8px -8px 18px var(--neuro-highlight),
         8px  8px 18px var(--neuro-shadow);
    --neuro-elevated-sm:
        -4px -4px 10px var(--neuro-highlight),
         4px  4px 10px var(--neuro-shadow);
    --neuro-pressed:
        inset  4px  4px 8px var(--neuro-shadow-soft),
        inset -4px -4px 8px var(--neuro-highlight);
    --neuro-flat-hover:
        -10px -10px 24px var(--neuro-highlight),
         10px  10px 24px var(--neuro-shadow);

    --glass-bg:           rgba(255, 255, 255, 0.65);
    --glass-bg-strong:    rgba(255, 255, 255, 0.78);
    --glass-bg-soft:      rgba(255, 255, 255, 0.45);
    --glass-border:       rgba(255, 255, 255, 0.40);
    --glass-border-strong:rgba(255, 255, 255, 0.65);
    --glass-blur:         12px;
    --glass-blur-strong:  20px;
    --glass-shadow:       0 8px 32px rgba(15, 23, 42, 0.08);
    --glass-inner-glow:   inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] {
    --neuro-surface:        #1A2333;
    --neuro-surface-deep:   #131B28;
    --neuro-page-grad-1:    #0F172A;
    --neuro-page-grad-2:    #131B28;
    --neuro-highlight:      rgba(255, 255, 255, 0.04);
    --neuro-shadow:         rgba(0, 0, 0, 0.45);
    --neuro-shadow-soft:    rgba(0, 0, 0, 0.30);

    --glass-bg:           rgba(30, 41, 59, 0.55);
    --glass-bg-strong:    rgba(30, 41, 59, 0.75);
    --glass-bg-soft:      rgba(30, 41, 59, 0.35);
    --glass-border:       rgba(255, 255, 255, 0.06);
    --glass-border-strong:rgba(255, 255, 255, 0.10);
    --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-inner-glow:   inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* --------------------------------------------------------------------------
   70. Soft Gradient Page Background
   -------------------------------------------------------------------------- */
body {
    background:
        radial-gradient(circle at 0% 0%,   rgba(14, 165, 233, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
        linear-gradient(135deg, var(--neuro-page-grad-1) 0%, var(--neuro-page-grad-2) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 0% 0%,   rgba(56, 189, 248, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 45%),
        linear-gradient(135deg, var(--neuro-page-grad-1) 0%, var(--neuro-page-grad-2) 100%) !important;
}

.main-content {
    background-color: transparent !important;
}

/* Reusable utility classes */
.neuro       { box-shadow: var(--neuro-elevated)    !important; background: var(--neuro-surface); border: none; border-radius: var(--sb-radius-lg); }
.neuro-sm    { box-shadow: var(--neuro-elevated-sm) !important; background: var(--neuro-surface); border: none; border-radius: var(--sb-radius); }
.neuro-pressed { box-shadow: var(--neuro-pressed) !important; background: var(--neuro-surface-deep); border: none; }

.glass {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner-glow) !important;
}
.glass-strong {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner-glow) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .glass-strong { background-color: var(--sb-surface) !important; }
}


/* ==========================================================================
   PHASE 12 — NEUMORPHIC CARDS
   ========================================================================== */

/* --------------------------------------------------------------------------
   71. Cards — Neumorphic Depth (low-density containers only)
   -------------------------------------------------------------------------- */
.eg-card,
.card,
.eg-profile-card,
.form-box,
.winner-card,
.deposit-card {
    background: var(--neuro-surface) !important;
    border: 1px solid transparent !important;
    border-radius: var(--sb-radius-lg) !important;
    box-shadow: var(--neuro-elevated) !important;
    transition: box-shadow var(--sb-transition),
                transform var(--sb-transition);
}
.eg-card:hover,
.card:hover,
.eg-profile-card:hover,
.form-box:hover,
.winner-card:hover,
.deposit-card:hover {
    box-shadow: var(--neuro-flat-hover) !important;
    transform: translateY(-2px);
}

.eg-card-two {
    border-radius: var(--sb-radius-lg) !important;
    box-shadow: var(--neuro-elevated-sm) !important;
}
.eg-card-two:hover {
    box-shadow: var(--neuro-flat-hover) !important;
    transform: translateY(-3px) scale(1.005);
}

.eg-card.product-card,
.product-card { padding: var(--sb-sp-6) !important; }

.eg-card-title,
.eg-card-title-sm,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .eg-card,
[data-theme="dark"] .card,
[data-theme="dark"] .eg-profile-card,
[data-theme="dark"] .form-box,
[data-theme="dark"] .winner-card,
[data-theme="dark"] .deposit-card { background: var(--neuro-surface) !important; }
[data-theme="dark"] .eg-card-title,
[data-theme="dark"] .card-header { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }


/* ==========================================================================
   PHASE 13 — GLASS OVERLAYS (floating elements)
   ========================================================================== */

/* --------------------------------------------------------------------------
   72. Top Navbar — Slight Glass
   -------------------------------------------------------------------------- */
.header-area .main-conent-header {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 24px rgba(15,23,42,0.04) !important;
}
[data-theme="dark"] .header-area .main-conent-header {
    background: rgba(15, 23, 42, 0.7) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 24px rgba(0,0,0,0.30) !important;
}

/* --------------------------------------------------------------------------
   73. Dropdowns — Glass
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner-glow) !important;
}
[data-theme="dark"] .dropdown-menu { background-color: rgba(30, 41, 59, 0.85) !important; }

.select2-dropdown {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner-glow) !important;
}
[data-theme="dark"] .select2-dropdown { background-color: rgba(30, 41, 59, 0.85) !important; }

/* --------------------------------------------------------------------------
   74. Modals — Glass
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.18), var(--glass-inner-glow) !important;
}
[data-theme="dark"] .modal-content { background-color: rgba(30, 41, 59, 0.88) !important; }
.modal-backdrop.show { opacity: 0.4 !important; }
.modal-header,
.modal-footer {
    background: transparent !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.06) !important; }

/* --------------------------------------------------------------------------
   75. Tooltips — Glass (subtle)
   -------------------------------------------------------------------------- */
.tooltip-inner {
    background-color: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.20) !important;
}

/* --------------------------------------------------------------------------
   76. Toastr / Cute-alert — Glass
   -------------------------------------------------------------------------- */
#toast-container > div,
.toast-container > div {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
}
[data-theme="dark"] #toast-container > div,
[data-theme="dark"] .toast-container > div { background-color: rgba(30, 41, 59, 0.88) !important; }

.cute-alert {
    background-color: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
}

/* --------------------------------------------------------------------------
   77. KPI Panels & Chart Containers — Glass
   -------------------------------------------------------------------------- */
.kpi-panel {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow), var(--glass-inner-glow) !important;
    transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.kpi-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.10), var(--glass-inner-glow) !important;
}
[data-theme="dark"] .kpi-panel { background-color: rgba(30, 41, 59, 0.45) !important; }

/* Chart card wrapper */
.card:has(canvas),
.eg-card:has(canvas) {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--neuro-elevated-sm), var(--glass-inner-glow) !important;
}
[data-theme="dark"] .card:has(canvas),
[data-theme="dark"] .eg-card:has(canvas) { background: rgba(30, 41, 59, 0.72) !important; }


/* ==========================================================================
   PHASE 14 — PRESERVE MINIMAL (dense data stays flat)
   ========================================================================== */

/* --------------------------------------------------------------------------
   78. Tables — flat & high-contrast
   -------------------------------------------------------------------------- */
.eg-table,
table.eg-table,
.table {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.eg-table thead,
.eg-table thead tr,
.eg-table thead tr th,
.table > thead.table-light,
.table > thead.table-light th {
    background-color: rgba(15, 23, 42, 0.03) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.eg-table tbody tr {
    background-color: transparent !important;
    box-shadow: none !important;
}
.eg-table tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.04) !important;
    transform: none !important;
}
.eg-table tbody tr td { box-shadow: none !important; }

.eg-card > .table-responsive,
.eg-card > .table-wrapper,
.card-body .table-responsive { background: transparent !important; }

[data-theme="dark"] .eg-table thead,
[data-theme="dark"] .eg-table thead tr th,
[data-theme="dark"] .table > thead.table-light,
[data-theme="dark"] .table > thead.table-light th {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .eg-table tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.08) !important;
}

/* --------------------------------------------------------------------------
   79. Form Inputs stay clean (NO neumorphism / NO glass)
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.form-inner input:not([type="checkbox"]):not([type="radio"]),
.form-inner textarea,
.form-inner select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    background-color: var(--sb-surface) !important;
    box-shadow: var(--sb-shadow-xs) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-inner input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .form-inner textarea,
[data-theme="dark"] textarea { background-color: #0F172A !important; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--sb-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #0F172A !important;
}

.bootstrap-tagsinput,
.note-editable {
    background-color: var(--sb-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .bootstrap-tagsinput,
[data-theme="dark"] .note-editable { background-color: #0F172A !important; }

/* --------------------------------------------------------------------------
   80. Badges & Pagination stay crisp
   -------------------------------------------------------------------------- */
.badge,
.eg-badge,
.eg-table .badge,
.green-light--btn,
.red-light--btn,
.warning-light--btn,
.primary-light--btn {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.pagination .page-item .page-link,
nav .pagination .page-item .page-link {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.pagination .page-item.active .page-link,
nav .pagination .page-item.active .page-link {
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25) !important;
}


/* ==========================================================================
   PHASE 15 — MICRO-INTERACTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   81. Button press effect
   -------------------------------------------------------------------------- */
.eg-btn,
.btn {
    transition: background-color var(--sb-transition),
                border-color var(--sb-transition),
                color var(--sb-transition),
                box-shadow var(--sb-transition),
                transform 0.08s ease !important;
}
.eg-btn:active,
.btn:active {
    transform: translateY(1px) scale(0.99) !important;
    box-shadow: var(--neuro-pressed), 0 0 0 0 transparent !important;
}

/* --------------------------------------------------------------------------
   82. Focus glow (still WCAG visible)
   -------------------------------------------------------------------------- */
*:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(14, 165, 233, 0.25),
        0 0 16px 2px rgba(14, 165, 233, 0.18) !important;
}
[data-theme="dark"] *:focus-visible {
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.30),
        0 0 16px 2px rgba(56, 189, 248, 0.22) !important;
}

.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    box-shadow: var(--sb-shadow-focus) !important;
}

/* --------------------------------------------------------------------------
   83. Sidebar active item — soft glow
   -------------------------------------------------------------------------- */
.sidebar-menu-wrapper ul li.active a {
    box-shadow:
        0 6px 16px rgba(14, 165, 233, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* --------------------------------------------------------------------------
   84. Smooth transitions on key surfaces
   -------------------------------------------------------------------------- */
.eg-card,
.card,
.eg-profile-card,
.form-box,
.winner-card,
.deposit-card,
.kpi-panel,
.dropdown-menu,
.modal-content {
    transition-property: background-color, box-shadow, transform, border-color;
    transition-duration: var(--sb-transition);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   PHASE 16 — Cross-cutting Safeguards (print, motion, RTL)
   ========================================================================== */
@media print {
    body { background: #FFFFFF !important; }
    .eg-card,
    .card,
    .form-box,
    .eg-profile-card,
    .winner-card,
    .deposit-card,
    .kpi-panel,
    .dropdown-menu,
    .modal-content,
    .header-area .main-conent-header {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #FFFFFF !important;
        border: 1px solid #E5E7EB !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-card:hover,
    .card:hover,
    .eg-profile-card:hover,
    .form-box:hover,
    .winner-card:hover,
    .deposit-card:hover,
    .kpi-panel:hover,
    .eg-card-two:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   PHASE 18 — PERFORMANCE & MOBILE OPTIMIZATION
   Tier the visual richness by viewport width and input modality so low-end
   devices remain smooth and touch UIs are usable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   85. Tablet (≤1199px) — lighter shadows, weaker blur
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    :root {
        --neuro-elevated:
            -5px -5px 12px var(--neuro-highlight),
             5px  5px 12px var(--neuro-shadow);
        --neuro-elevated-sm:
            -3px -3px  8px var(--neuro-highlight),
             3px  3px  8px var(--neuro-shadow);
        --neuro-flat-hover:
            -7px -7px 16px var(--neuro-highlight),
             7px  7px 16px var(--neuro-shadow);
        --glass-blur:        8px;
        --glass-blur-strong: 12px;
    }
}

/* --------------------------------------------------------------------------
   86. Mobile (≤767px) — flatten cards, kill backdrop-filter (GPU-heavy)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        /* Use a single, gentler shadow instead of dual neumorphic shadows.
           This gives a clean depth cue without taxing the GPU on scroll. */
        --neuro-elevated:    0 2px 8px var(--neuro-shadow);
        --neuro-elevated-sm: 0 1px 4px var(--neuro-shadow-soft);
        --neuro-pressed:     inset 0 1px 3px var(--neuro-shadow);
        --neuro-flat-hover:  0 4px 12px var(--neuro-shadow);
    }

    /* Disable backdrop-filter on mobile — it can drop frame rates on
       low-end devices, especially with many overlays open at once.
       Each overlay falls back to a near-opaque solid surface. */
    .header-area .main-conent-header,
    .dropdown-menu,
    .select2-dropdown,
    .modal-content,
    #toast-container > div,
    .toast-container > div,
    .cute-alert,
    .kpi-panel,
    .card:has(canvas),
    .eg-card:has(canvas) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: var(--sb-surface) !important;
    }
    [data-theme="dark"] .header-area .main-conent-header,
    [data-theme="dark"] .dropdown-menu,
    [data-theme="dark"] .select2-dropdown,
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] #toast-container > div,
    [data-theme="dark"] .toast-container > div,
    [data-theme="dark"] .cute-alert,
    [data-theme="dark"] .kpi-panel,
    [data-theme="dark"] .card:has(canvas),
    [data-theme="dark"] .eg-card:has(canvas) {
        background-color: var(--sb-surface) !important;
    }

    /* Simpler page background — drop the radial gradients (less repaint area) */
    body {
        background:
            linear-gradient(180deg,
                var(--neuro-page-grad-1) 0%,
                var(--neuro-page-grad-2) 100%) !important;
    }

    /* Compact card padding on small screens */
    .eg-card,
    .card,
    .eg-profile-card,
    .form-box,
    .winner-card,
    .deposit-card {
        padding: var(--sb-sp-4) !important;
        border-radius: var(--sb-radius) !important;
    }

    /* Page Title Bar tightens up */
    .page-title h4,
    .page-title h5 {
        font-size: var(--sb-fs-xl) !important;
    }
}

/* --------------------------------------------------------------------------
   87. Touch devices (no hover) — disable hover lifts to avoid sticky states
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .eg-card:hover,
    .card:hover,
    .eg-profile-card:hover,
    .form-box:hover,
    .winner-card:hover,
    .deposit-card:hover,
    .eg-card-two:hover,
    .kpi-panel:hover,
    .eg-table tbody tr:hover {
        transform: none !important;
        box-shadow: var(--neuro-elevated) !important;
    }

    /* Action icons in tables — keep their soft state, no swap */
    .add--btn:hover,
    .delete--btn:hover,
    .account--btn:hover,
    .edit--btn:hover,
    .view--btn:hover {
        transform: none !important;
    }

    /* Buttons — keep hover BG but cancel scale (touch users can't see micro-press) */
    .eg-btn:hover,
    .btn:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   88. WCAG 2.5.5 AAA — minimum 44×44 touch targets on mobile
        Keeps icon-only action buttons tappable on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .add--btn,
    .delete--btn,
    .account--btn,
    .edit--btn,
    .view--btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .pagination .page-item .page-link,
    nav .pagination .page-item .page-link {
        min-width: 40px;
        height: 40px;
    }

    .eg-btn,
    .btn,
    .input-with-btn button,
    .login-btn,
    .submit--btn,
    .medium-btn,
    .cancel-btn,
    .back-btn {
        min-height: 40px;
    }

    .form-check-input { width: 1.25em !important; height: 1.25em !important; }
    .form-switch .form-check-input { width: 2.6em !important; height: 1.4em !important; }

    .theme-toggle-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Header icons need a bigger tap target */
    .header-area .main-conent-header ul.header-icons li a {
        width: 40px !important;
        height: 40px !important;
    }
}

/* --------------------------------------------------------------------------
   89. GPU rendering hints — promote heavy elements to their own layer
        Keeps scroll smooth on pages with many cards/charts.
   -------------------------------------------------------------------------- */
.header-area .main-conent-header,
.sidebar-wrapper,
.modal-content,
.dropdown-menu.show {
    will-change: transform;
    transform: translateZ(0); /* layer hint without affecting layout */
}

/* Don't pin will-change on hover-cards permanently — it's expensive.
   Promote on hover only. */
.eg-card:hover,
.card:hover,
.eg-profile-card:hover,
.eg-card-two:hover,
.kpi-panel:hover {
    will-change: transform, box-shadow;
}

/* --------------------------------------------------------------------------
   90. Slow-connection / Save-Data fallback (Chrome / Edge)
        When user has Data Saver on, drop expensive effects entirely.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-data: reduce) {
    body { background: var(--sb-page-bg) !important; }
    .eg-card,
    .card,
    .form-box,
    .eg-profile-card,
    .winner-card,
    .deposit-card,
    .eg-card-two {
        box-shadow: var(--sb-shadow-sm) !important;
    }
    .header-area .main-conent-header,
    .dropdown-menu,
    .select2-dropdown,
    .modal-content,
    #toast-container > div,
    .toast-container > div,
    .cute-alert,
    .kpi-panel,
    .card:has(canvas),
    .eg-card:has(canvas) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: var(--sb-surface) !important;
    }
}

/* --------------------------------------------------------------------------
   91. Forced-colors mode (Windows High Contrast) — ensure visibility
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .eg-card,
    .card,
    .form-box,
    .modal-content,
    .dropdown-menu {
        border: 1px solid CanvasText !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .badge, .eg-badge { border: 1px solid CanvasText !important; }
    *:focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
}


/* ==========================================================================
   PHASE 19 — LOADING & EMPTY STATES PATTERN LIBRARY
   Reusable patterns: skeleton placeholders, spinners, empty-state messages.
   Usage:
     <div class="skeleton skeleton-line"></div>          (text placeholder)
     <div class="skeleton skeleton-circle"></div>        (avatar placeholder)
     <div class="skeleton-card"> ... </div>              (full card skeleton)
     <div class="empty-state"> ... </div>                (empty list state)
     <span class="spinner"></span>                       (small inline spinner)
     <div class="spinner-overlay"> ... </div>            (full-section overlay)
   ========================================================================== */

/* --------------------------------------------------------------------------
   92. Skeleton Loader — Shimmer Animation
   -------------------------------------------------------------------------- */
@keyframes sb-shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position:  1000px 0; }
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--sb-gray-100) 0%,
        var(--sb-gray-200) 50%,
        var(--sb-gray-100) 100%);
    background-size: 1000px 100%;
    animation: sb-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--sb-radius-sm);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 1000px 100%;
}

/* Skeleton primitives */
.skeleton-line {
    height: 14px;
    width: 100%;
    margin-bottom: var(--sb-sp-2);
    border-radius: var(--sb-radius-pill);
}
.skeleton-line.short  { width: 30%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long   { width: 90%; }
.skeleton-line.lg     { height: 20px; }
.skeleton-line.xl     { height: 28px; }

.skeleton-circle {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.skeleton-circle.sm { width: 32px; height: 32px; }
.skeleton-circle.lg { width: 72px; height: 72px; }

.skeleton-rect {
    width: 100%;
    height: 120px;
    border-radius: var(--sb-radius);
}
.skeleton-rect.tall { height: 200px; }

.skeleton-button {
    height: 40px;
    width: 110px;
    border-radius: var(--sb-radius-sm);
}

/* Composite: full card placeholder */
.skeleton-card {
    background: var(--neuro-surface);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--neuro-elevated-sm);
    padding: var(--sb-sp-5);
    display: flex;
    gap: var(--sb-sp-4);
    align-items: flex-start;
    margin-bottom: var(--sb-sp-4);
}
.skeleton-card .skeleton-body { flex: 1; }
.skeleton-card .skeleton-line:last-child { margin-bottom: 0; }

/* Composite: KPI card placeholder */
.skeleton-kpi {
    background: var(--neuro-surface);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--neuro-elevated-sm);
    padding: var(--sb-sp-5);
    display: flex;
    align-items: center;
    gap: var(--sb-sp-3);
    margin-bottom: var(--sb-sp-3);
}

/* Composite: table-row skeleton */
.skeleton-table-row {
    display: flex;
    gap: var(--sb-sp-3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--sb-border);
}
.skeleton-table-row .skeleton-line { margin: 0; flex: 1; }

/* Reduced-motion: disable shimmer animation but keep visible placeholder */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none !important;
        background: var(--sb-gray-100) !important;
    }
    [data-theme="dark"] .skeleton {
        background: rgba(255, 255, 255, 0.06) !important;
    }
}

/* --------------------------------------------------------------------------
   93. Spinners (inline, page-level, button-loading)
   -------------------------------------------------------------------------- */
@keyframes sb-spin {
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}
.spinner.spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner.spinner-primary { color: var(--sb-primary); }
.spinner.spinner-white   { color: #FFFFFF; }
.spinner.spinner-muted   { color: var(--sb-text-muted); }

/* Loading state for buttons */
.eg-btn.is-loading,
.btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
    position: relative;
    color: transparent !important;
}
.eg-btn.is-loading::after,
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

/* Spinner overlay (covers a section while content loads) */
.spinner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sb-sp-3);
    z-index: 10;
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-medium);
}
[data-theme="dark"] .spinner-overlay {
    background-color: rgba(15, 23, 42, 0.7);
}
.spinner-overlay .spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
    color: var(--sb-primary);
}
/* Parent must be position:relative for spinner-overlay to anchor */
.has-spinner-overlay { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .spinner,
    .eg-btn.is-loading::after,
    .btn.is-loading::after {
        animation-duration: 1.6s !important;
    }
}

/* --------------------------------------------------------------------------
   94. Empty State Pattern
       Markup:
         <div class="empty-state">
             <div class="empty-state-icon"><i class="bi bi-inbox"></i></div>
             <h4 class="empty-state-title">No orders yet</h4>
             <p class="empty-state-text">Once customers start booking, you'll see them listed here.</p>
             <a href="..." class="eg-btn btn--primary">Create First Order</a>
         </div>
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--sb-sp-12) var(--sb-sp-6);
    color: var(--sb-text-muted);
    max-width: 480px;
    margin: 0 auto;
}
.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--sb-sp-4);
    border-radius: var(--sb-radius-pill);
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}
.empty-state-icon i { line-height: 1; }
.empty-state-icon.success { background-color: var(--sb-success-soft); color: var(--sb-success); }
.empty-state-icon.warning { background-color: var(--sb-warning-soft); color: var(--sb-warning); }
.empty-state-icon.danger  { background-color: var(--sb-danger-soft);  color: var(--sb-danger); }
.empty-state-icon.muted   { background-color: var(--sb-gray-100);    color: var(--sb-text-muted); }

.empty-state-title {
    font-size: var(--sb-fs-xl) !important;
    font-weight: var(--sb-fw-semibold) !important;
    color: var(--sb-text) !important;
    margin: 0 0 var(--sb-sp-2) !important;
    line-height: 1.3;
}
.empty-state-text {
    font-size: var(--sb-fs-base) !important;
    color: var(--sb-text-muted) !important;
    margin: 0 0 var(--sb-sp-4) !important;
    line-height: 1.5;
}
.empty-state .eg-btn,
.empty-state .btn {
    margin: 0 var(--sb-sp-1);
}

/* Compact empty state inside table cells (for forelse fallback rows) */
.eg-table tbody tr td.empty-row {
    padding: var(--sb-sp-10) var(--sb-sp-4) !important;
    text-align: center !important;
}
.eg-table tbody tr td.empty-row .empty-state {
    padding: 0;
}
.eg-table tbody tr td.empty-row .empty-state-icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
    margin-bottom: var(--sb-sp-3);
}

/* --------------------------------------------------------------------------
   95. Progress (linear) bar — inline progress indicator
        Useful for upload progress, multi-step forms, completion meters.
   -------------------------------------------------------------------------- */
.progress-linear {
    width: 100%;
    height: 6px;
    background-color: var(--sb-gray-100);
    border-radius: var(--sb-radius-pill);
    overflow: hidden;
    position: relative;
}
.progress-linear > .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sb-primary-400), var(--sb-primary-600));
    border-radius: var(--sb-radius-pill);
    transition: width var(--sb-transition-slow);
}

/* Indeterminate progress (no known percentage) */
.progress-linear.indeterminate > .progress-bar {
    width: 30% !important;
    animation: sb-progress-slide 1.4s ease-in-out infinite;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--sb-primary) 50%,
        transparent 100%);
}
@keyframes sb-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%);  }
}

[data-theme="dark"] .progress-linear { background-color: rgba(255,255,255,0.08); }
@media (prefers-reduced-motion: reduce) {
    .progress-linear.indeterminate > .progress-bar { animation: none; transform: translateX(0); width: 100% !important; }
}


/* ==========================================================================
   PHASE 23 — SIDEBAR REDESIGN (vertical groups + user info)
   Replaces the legacy 2-column tile grid with a modern accordion sidebar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   96. Sidebar wrapper resize + scrollable content
   -------------------------------------------------------------------------- */
.sidebar-wrapper {
    background: var(--sb-sidebar-bg) !important;
    max-width: var(--sb-sidebar-w) !important;
    width: 100% !important;
    padding: 0 !important;             /* let the inner sections own padding */
    top: 0 !important;                 /* sidebar covers full height (no header bar above it) */
    bottom: 0 !important;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;       /* the inner .sidebar-menu-wrapper scrolls */
    border-right: 1px solid var(--sb-sidebar-border);
}
[dir="rtl"] .sidebar-wrapper {
    border-right: 0;
    border-left: 1px solid var(--sb-sidebar-border);
}
.sidebar-wrapper > .sidebar {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* Hide the small sidebar-header logo lane completely on the new layout */
.header-area .sidebar-header {
    background: transparent !important;
    max-width: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible;
    position: relative;
}
.header-area .sidebar-header .sidebar-toggle-button {
    position: absolute;
    top: 12px;
    left: var(--sb-sp-3);
    z-index: 5;
    background: transparent;
    border: none;
    color: var(--sb-text-muted);
    width: 36px; height: 36px;
    border-radius: var(--sb-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 20px;
    filter: none !important;
    opacity: 1 !important;
}
[dir="rtl"] .header-area .sidebar-header .sidebar-toggle-button {
    left: auto; right: var(--sb-sp-3);
}
.header-area .sidebar-header .sidebar-toggle-button:hover {
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
}

/* --------------------------------------------------------------------------
   97. Sidebar User Info (top of sidebar)
   -------------------------------------------------------------------------- */
.sidebar-user {
    flex-shrink: 0;
    padding: var(--sb-sp-4) var(--sb-sp-4) var(--sb-sp-3);
    border-bottom: 1px solid var(--sb-sidebar-border);
    position: relative;
}
.sidebar-user-toggle {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-2) var(--sb-sp-2);
    display: flex;
    align-items: center;
    gap: var(--sb-sp-3);
    cursor: pointer;
    transition: background-color var(--sb-transition);
    color: var(--sb-sidebar-text);
}
.sidebar-user-toggle:hover {
    background-color: var(--sb-sidebar-hover-bg);
}
.sidebar-user-toggle:focus-visible {
    outline: none;
    border-color: var(--sb-primary);
    box-shadow: var(--sb-shadow-focus);
}
.sidebar-user-toggle::after { display: none; }    /* kill bootstrap caret */

.sidebar-user-avatar img {
    width: 38px; height: 38px;
    border-radius: var(--sb-radius-pill);
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.10);
}
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    overflow: hidden;
}
.sidebar-user-info .name {
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.sidebar-user-info .role {
    font-size: var(--sb-fs-xs);
    color: var(--sb-sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.sidebar-user-chevron {
    color: var(--sb-sidebar-text-muted);
    font-size: 14px;
    transition: transform var(--sb-transition);
}
.sidebar-user-toggle[aria-expanded="true"] .sidebar-user-chevron {
    transform: rotate(180deg);
}

/* User dropdown — sits over the sidebar */
.sidebar-user-menu {
    width: calc(100% - 2 * var(--sb-sp-4));
    margin: 4px var(--sb-sp-4) 0 !important;
    background-color: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    padding: var(--sb-sp-2) !important;
}
[data-theme="dark"] .sidebar-user-menu { background-color: var(--sb-surface) !important; }
.sidebar-user-menu .dropdown-item {
    padding: var(--sb-sp-2) var(--sb-sp-3);
    font-size: var(--sb-fs-sm);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text);
}
.sidebar-user-menu .dropdown-item i { margin-right: 8px; color: var(--sb-text-muted); }
[dir="rtl"] .sidebar-user-menu .dropdown-item i { margin-right: 0; margin-left: 8px; }
.sidebar-user-menu .dropdown-item:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
}
.sidebar-user-menu .dropdown-item:hover i { color: var(--sb-primary); }
.sidebar-user-menu .dropdown-item.text-danger { color: var(--sb-danger); }
.sidebar-user-menu .dropdown-item.text-danger:hover {
    background-color: var(--sb-danger-soft);
    color: var(--sb-danger) !important;
}
.sidebar-user-menu .dropdown-item.text-danger:hover i { color: var(--sb-danger); }
.sidebar-user-menu .dropdown-divider { border-color: var(--sb-border); margin: var(--sb-sp-1) 0; }

/* --------------------------------------------------------------------------
   98. Sidebar nav (scrollable region)
   -------------------------------------------------------------------------- */
.sidebar-menu-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sb-sp-3);
}
.side-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.side-menu-list .nav-item { width: 100%; max-width: 100% !important; }

/* --------------------------------------------------------------------------
   99. Sidebar single nav-link
   -------------------------------------------------------------------------- */
.side-menu-list .nav-link,
.side-menu-list .nav-toggle {
    width: 100%;
    background: transparent !important;
    border: none;
    color: var(--sb-sidebar-text) !important;
    padding: 10px 12px !important;
    border-radius: var(--sb-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 12px !important;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-medium) !important;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--sb-transition), color var(--sb-transition);
    text-decoration: none;
}
.side-menu-list .nav-link:hover,
.side-menu-list .nav-toggle:hover {
    background-color: var(--sb-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
}
.side-menu-list .nav-link.active {
    background-color: var(--sb-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30);
}

.side-menu-list .nav-icon {
    font-size: 18px;
    line-height: 1;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
}
.side-menu-list .nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
}

/* --------------------------------------------------------------------------
   100. Group toggles (the parent rows that expand)
   -------------------------------------------------------------------------- */
.side-menu-list .nav-toggle {
    width: 100%;
}
.side-menu-list .nav-chevron {
    font-size: 12px;
    color: var(--sb-sidebar-text-muted);
    transition: transform var(--sb-transition);
    flex-shrink: 0;
}
.side-menu-list .nav-toggle[aria-expanded="true"] .nav-chevron,
.side-menu-list .nav-group.open > .nav-toggle .nav-chevron {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* When group has an active descendant, highlight the parent toggle subtly */
.side-menu-list .nav-group.active > .nav-toggle {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}
.side-menu-list .nav-group.active > .nav-toggle .nav-icon {
    color: var(--sb-primary);
}

/* --------------------------------------------------------------------------
   101. Nested children (.nav-tree)
   -------------------------------------------------------------------------- */
.side-menu-list .nav-tree {
    list-style: none;
    margin: 4px 0 4px 0;
    padding: 4px 0 4px 32px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}
[dir="rtl"] .side-menu-list .nav-tree { padding: 4px 32px 4px 0; }

/* Tree-line decoration (the vertical line) */
.side-menu-list .nav-tree::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.08);
}
[dir="rtl"] .side-menu-list .nav-tree::before { left: auto; right: 22px; }

.side-menu-list .nav-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-sidebar-text-muted);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-medium);
    transition: background-color var(--sb-transition), color var(--sb-transition);
    text-decoration: none;
    position: relative;
}
.side-menu-list .nav-sublink i {
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.side-menu-list .nav-sublink:hover {
    background-color: var(--sb-sidebar-hover-bg);
    color: #FFFFFF;
}
.side-menu-list .nav-sublink.active {
    background-color: rgba(14, 165, 233, 0.15);
    color: #FFFFFF;
}
.side-menu-list .nav-sublink.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sb-primary);
    box-shadow: 0 0 8px var(--sb-primary);
}
[dir="rtl"] .side-menu-list .nav-sublink.active::before { left: auto; right: -10px; }

/* Badge inside sidebar (e.g., unread contacts) */
.nav-badge {
    margin-left: auto;
    background-color: var(--sb-danger);
    color: #FFFFFF;
    border-radius: var(--sb-radius-pill);
    padding: 1px 7px;
    font-size: 11px;
    font-weight: var(--sb-fw-semibold);
    line-height: 1.4;
    flex-shrink: 0;
}
[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }
.nav-badge.inline {
    margin-left: auto;
    background-color: rgba(239, 68, 68, 0.20);
    color: var(--sb-danger);
}

/* --------------------------------------------------------------------------
   102. Sidebar footer (logout / external link buttons)
   -------------------------------------------------------------------------- */
.sidebar-footer {
    flex-shrink: 0;
    padding: var(--sb-sp-3) var(--sb-sp-4);
    border-top: 1px solid var(--sb-sidebar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-sp-2);
}
.sidebar-footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-sidebar-text-muted);
    transition: background-color var(--sb-transition), color var(--sb-transition);
    text-decoration: none;
}
.sidebar-footer-link i { font-size: 16px; }
.sidebar-footer-link:hover {
    background-color: var(--sb-sidebar-hover-bg);
    color: #FFFFFF;
}
.sidebar-footer-logout:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: var(--sb-danger);
}

/* --------------------------------------------------------------------------
   103. Header bar adjustment (no logo lane → push left)
   -------------------------------------------------------------------------- */
.header-area .main-conent-header {
    padding-left: 64px !important;     /* leave space for the toggle button */
}
[dir="rtl"] .header-area .main-conent-header {
    padding-left: var(--sb-content-pad-x) !important;
    padding-right: 64px !important;
}

/* New header action group + buttons */
.header-actions {
    flex-shrink: 0;
}
.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text-muted);
    background: transparent;
    border: none;
    transition: background-color var(--sb-transition), color var(--sb-transition);
    text-decoration: none;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
}
.header-action-btn:hover {
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary);
}
.header-action-btn:focus-visible {
    outline: none;
    box-shadow: var(--sb-shadow-focus);
}

/* Language button (dual content: flag + code) */
.header-language .header-language-btn {
    width: auto !important;
    padding: 0 12px !important;
    gap: 6px;
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
}
.header-language .header-language-btn img {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

/* Merchant balance pill — refined */
.merchant-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--sb-success-soft), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--sb-success);
    padding: 6px 14px;
    border-radius: var(--sb-radius-pill);
    font-size: var(--sb-fs-sm);
    font-weight: var(--sb-fw-semibold);
    white-space: nowrap;
}
.merchant-balance i { font-size: 14px; }
.merchant-balance .balance-label { color: var(--sb-text-muted); font-weight: var(--sb-fw-medium); }

@media (max-width: 991px) {
    .merchant-balance .balance-label { display: none; }
    .header-language .header-language-btn span.text-uppercase { display: none; }
}

/* --------------------------------------------------------------------------
   104. Mobile (≤991px) — collapsed sidebar by default with overlay open
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .sidebar-wrapper {
        max-width: var(--sb-sidebar-w) !important;
        transform: translateX(-100%);
        transition: transform var(--sb-transition-slow) !important;
        z-index: 1000;
    }
    [dir="rtl"] .sidebar-wrapper {
        transform: translateX(100%);
    }
    .sidebar-wrapper.show-mobile {
        transform: translateX(0);
    }

    .main-content,
    [dir="rtl"] .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    .header-area .main-conent-header,
    .header-area .main-conent-header.slide {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   105. Mobile sidebar overlay
   -------------------------------------------------------------------------- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--sb-transition);
}
.sidebar-overlay.show-mobile {
    display: block;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   106. Neutralize legacy .slide behavior (from main.js / Phase 2 rules)
        The new sidebar doesn't support icon-only collapse mode; the toggle
        button is mobile-only. Override any leftover Phase 2 rules that
        would shrink the new layout when main.js adds .slide classes.
   -------------------------------------------------------------------------- */
.sidebar-wrapper.slide {
    max-width: var(--sb-sidebar-w) !important;
    width: 100% !important;
    transform: none;
}
.main-content.slide {
    margin-left: var(--sb-sidebar-w) !important;
    max-width: calc(100% - var(--sb-sidebar-w)) !important;
}
[dir="rtl"] .main-content.slide {
    margin-left: 0 !important;
    margin-right: var(--sb-sidebar-w) !important;
}
.header-area .main-conent-header.slide {
    width: calc(100% - var(--sb-sidebar-w)) !important;
}
.header-area .sidebar-header.slide {
    max-width: 0 !important;
    padding: 0 !important;
}
@media (max-width: 991px) {
    .sidebar-wrapper.slide,
    .sidebar-wrapper.slide.show-mobile {
        max-width: var(--sb-sidebar-w) !important;
    }
    .main-content.slide,
    [dir="rtl"] .main-content.slide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    .header-area .main-conent-header.slide {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   107. Toggle button — desktop hidden, mobile visible (fixed position)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .header-area .sidebar-header,
    .header-area .sidebar-header .sidebar-toggle-button {
        display: none !important;
    }
    .header-area .main-conent-header {
        padding-left: var(--sb-content-pad-x) !important;
        padding-right: var(--sb-content-pad-x) !important;
    }
    [dir="rtl"] .header-area .main-conent-header {
        padding-left: var(--sb-content-pad-x) !important;
        padding-right: var(--sb-content-pad-x) !important;
    }
}

@media (max-width: 991px) {
    /* Show the toggle button as a small floating square in the top-left */
    .header-area .sidebar-header {
        display: block !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        z-index: 1001;
    }
    [dir="rtl"] .header-area .sidebar-header {
        left: auto !important;
        right: 12px !important;
    }
    .header-area .sidebar-header .sidebar-toggle-button {
        position: static !important;
        background: var(--glass-bg-strong, var(--sb-surface)) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--sb-border) !important;
        box-shadow: var(--sb-shadow-sm);
    }
    [data-theme="dark"] .header-area .sidebar-header .sidebar-toggle-button {
        background: rgba(15, 23, 42, 0.85) !important;
        border-color: var(--sb-border) !important;
    }

    /* Header bar must reserve space on the left for the floating toggle */
    .header-area .main-conent-header {
        padding-left: 64px !important;
    }
    [dir="rtl"] .header-area .main-conent-header {
        padding-left: var(--sb-sp-4) !important;
        padding-right: 64px !important;
    }
}

/* --------------------------------------------------------------------------
   108. CRITICAL OVERRIDES — defeat legacy tile-grid styles from style.css
        The original sidebar was a 2-column tile grid. Its rules
        (`.sidebar-menu-wrapper ul li a { background; padding; flex-column; }`)
        have higher specificity than `.side-menu-list .nav-link`, so they
        bleed into the new vertical layout. Force-reset them here.
   -------------------------------------------------------------------------- */

/* Reset the legacy <li> width cap (was 124px tile) */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list > li,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree > li {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Reset the legacy tile <a> background, centering, vertical layout */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink {
    background: transparent !important;
    text-align: start !important;
    padding: 10px 12px !important;
    border-radius: var(--sb-radius-sm) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sublinks specifically — slightly smaller padding for compact tree */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink {
    padding: 7px 10px !important;
    font-size: var(--sb-fs-sm) !important;
    color: var(--sb-sidebar-text-muted) !important;
    gap: 10px !important;
}

/* Hover for top-level + sublinks — soft white tint on hover */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link:hover,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle:hover {
    background: var(--sb-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
    transform: none !important;
}
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink:hover {
    background: var(--sb-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* The legacy `.sidebar-menu-wrapper ul li.active a` rule has higher specificity
   than `.side-menu-list .nav-link.active`. Override it explicitly. */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link.active {
    background: var(--sb-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30) !important;
}
/* Sublinks inside an "active" parent — DO NOT inherit the parent's blue bg.
   Reset to the muted look so only the *current* sublink shows highlighted. */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-group.active .nav-tree .nav-sublink {
    background: transparent !important;
    color: var(--sb-sidebar-text-muted) !important;
    box-shadow: none !important;
}
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-group.active .nav-tree .nav-sublink:hover {
    background: var(--sb-sidebar-hover-bg) !important;
    color: #FFFFFF !important;
}
/* Only the truly-current sublink lights up */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink.active {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #FFFFFF !important;
    font-weight: var(--sb-fw-semibold) !important;
}

/* --------------------------------------------------------------------------
   109. FIX collapse behavior — let Bootstrap's .collapse hide closed groups
        Previously .nav-tree always had `display: flex`, defeating the
        Bootstrap `.collapse:not(.show) { display: none }` rule.
   -------------------------------------------------------------------------- */
.side-menu-list .nav-tree {
    display: none;          /* default: hidden */
    flex-direction: column;
    list-style: none;
    margin: 4px 0;
    padding: 4px 0 4px 32px;
    gap: 1px;
    position: relative;
}
[dir="rtl"] .side-menu-list .nav-tree {
    padding: 4px 32px 4px 0;
}
/* When Bootstrap adds .show or while .collapsing, render it */
.side-menu-list .nav-tree.show,
.side-menu-list .nav-tree.collapsing {
    display: flex;
}

/* Hide overflow on the closed state during collapse animation */
.side-menu-list .nav-tree.collapsing {
    overflow: hidden;
    transition: height 0.25s ease;
}

/* --------------------------------------------------------------------------
   110. CLICK FEEDBACK / RIPPLE — visual highlight on press
   -------------------------------------------------------------------------- */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink {
    position: relative;
    overflow: hidden;
    transition: background-color var(--sb-transition),
                color var(--sb-transition),
                transform 0.08s ease,
                box-shadow var(--sb-transition) !important;
}

/* Subtle "press" effect on click */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link:active,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle:active,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink:active {
    transform: scale(0.98) !important;
    background-color: rgba(14, 165, 233, 0.20) !important;
    color: #FFFFFF !important;
}

/* Ripple effect (CSS-only via ::after) */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link::after,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle::after,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.35) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link:active::after,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle:active::after,
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink:active::after {
    opacity: 1;
    transition: opacity 0s;
}

/* Disable ripple under reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link::after,
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle::after,
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink::after {
        display: none;
    }
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-link:active,
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle:active,
    .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-sublink:active {
        transform: none !important;
    }
}

/* Active sublink — small dot indicator on the LEFT (start) of the row
   (replaces the old ::before that anchored to the tree-line) */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-primary);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.7);
    opacity: 1;
    z-index: 2;
}
[dir="rtl"] .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink.active::before {
    left: auto;
    right: -10px;
}

/* Reset the ::after ripple position so it doesn't conflict with the dot */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-tree .nav-sublink.active::after {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   111. Group toggle visual when its children are active (parent indicator)
   -------------------------------------------------------------------------- */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-group.active > .nav-toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #FFFFFF !important;
}
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-group.active > .nav-toggle .nav-icon {
    color: var(--sb-primary);
}

/* Chevron rotation reflecting expanded/collapsed state */
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle .nav-chevron {
    transition: transform var(--sb-transition);
    color: var(--sb-sidebar-text-muted);
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
}
[dir="rtl"] .sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle .nav-chevron {
    margin-left: 0;
    margin-right: auto;
}
.sidebar-wrapper .sidebar-menu-wrapper .side-menu-list .nav-toggle[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   112. Settings pages — vertical pill tabs polish (.tab-area.settings-area)
        Used by backend_setting & frontend_setting — they use Bootstrap
        nav-pills with horizontal layout + flex-wrap for many tabs.
   -------------------------------------------------------------------------- */
.tab-area.settings-area .nav,
.tab-area.settings-area .nav-pills {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    padding: 6px !important;
    gap: 4px !important;
    margin-bottom: var(--sb-sp-4);
    flex-wrap: wrap;
    box-shadow: var(--sb-shadow-xs);
}

.tab-area.settings-area .nav-link,
.tab-area.settings-area .nav-pills .nav-link {
    color: var(--sb-text-muted) !important;
    font-weight: var(--sb-fw-medium) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--sb-radius-sm) !important;
    padding: 8px 16px !important;
    font-size: var(--sb-fs-sm) !important;
    transition: background-color var(--sb-transition), color var(--sb-transition) !important;
}

.tab-area.settings-area .nav-link:hover {
    background: var(--sb-primary-soft) !important;
    color: var(--sb-primary-700) !important;
}

.tab-area.settings-area .nav-link.active,
.tab-area.settings-area .nav-pills .nav-link.active,
.tab-area.settings-area .nav-pills .show > .nav-link {
    background: var(--sb-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
    border-bottom-color: transparent !important;
}

[data-theme="dark"] .tab-area.settings-area .nav,
[data-theme="dark"] .tab-area.settings-area .nav-pills {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
}

/* tab-pane padding for settings layout */
.tab-area.settings-area .tab-content {
    padding: 0;
}

/* System info table inside backend_setting (key-value pairs, no thead) */
.system-information .eg-table tbody tr td:first-child {
    width: 40%;
    color: var(--sb-text-muted);
    font-weight: var(--sb-fw-semibold);
}
.system-information .eg-table tbody tr td:last-child {
    color: var(--sb-text);
}

/* Color picker addon button (frontend_setting / colorpicker) */
.input-group.primary-color .input-group-text,
.input-group.secondary-color .input-group-text,
.input-group[class*="-color"] .input-group-text {
    background: var(--sb-gray-50);
    border: 1px solid var(--sb-border);
    cursor: pointer;
    width: 42px;
    justify-content: center;
}
.input-group.primary-color .input-group-text i,
.input-group.secondary-color .input-group-text i,
.input-group[class*="-color"] .input-group-text i {
    font-size: 18px;
    line-height: 1;
}

/* page-title2 inside settings — refine logo spacing */
.page-title2 {
    margin-bottom: var(--sb-sp-5);
}
.page-title2 .title-logo {
    width: 32px;
    height: 32px;
    margin-right: var(--sb-sp-3);
    flex-shrink: 0;
    filter: brightness(0) invert(1);  /* white on sky background */
}
[dir="rtl"] .page-title2 .title-logo {
    margin-right: 0;
    margin-left: var(--sb-sp-3);
}

/* --------------------------------------------------------------------------
   113. Bilingual fields partial — language tabs for admin forms
        Used by: backend/layouts/bilingual_fields.blade.php
   -------------------------------------------------------------------------- */
.bilingual-fields {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: var(--sb-sp-4);
    margin-bottom: var(--sb-sp-5);
    box-shadow: var(--sb-shadow-xs);
}

.bilingual-fields .bilingual-tabs {
    border-bottom: 1px solid var(--sb-border);
    margin: calc(-1 * var(--sb-sp-4)) calc(-1 * var(--sb-sp-4)) var(--sb-sp-4);
    padding: 0 var(--sb-sp-4);
    gap: 4px;
    flex-wrap: wrap;
}
.bilingual-fields .bilingual-tabs .nav-link {
    background: transparent !important;
    color: var(--sb-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 18px !important;
    font-size: var(--sb-fs-sm) !important;
    font-weight: var(--sb-fw-semibold) !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    transition: color var(--sb-transition), border-color var(--sb-transition), background-color var(--sb-transition);
    cursor: pointer;
    margin-bottom: -1px;
}
.bilingual-fields .bilingual-tabs .nav-link:hover {
    color: var(--sb-primary-700) !important;
    background-color: var(--sb-primary-soft) !important;
}
.bilingual-fields .bilingual-tabs .nav-link.active {
    color: var(--sb-primary) !important;
    border-bottom-color: var(--sb-primary) !important;
    background: transparent !important;
}
.bilingual-fields .bilingual-flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
.bilingual-fields .bilingual-lang-name {
    line-height: 1;
}

/* Tab content area */
.bilingual-fields .bilingual-tab-content {
    padding-top: var(--sb-sp-2);
}
.bilingual-fields .bilingual-pane {
    animation: bilingualFadeIn 0.2s ease;
}
@keyframes bilingualFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* RTL pane: ensure the inputs flip nicely without affecting the parent form */
.bilingual-fields .bilingual-pane-rtl input[type="text"],
.bilingual-fields .bilingual-pane-rtl textarea {
    text-align: right;
    direction: rtl;
}
.bilingual-fields .bilingual-pane-rtl .form-inner label {
    text-align: right;
    display: block;
}

/* Small badge after the field label showing the language code (e.g., "EN" / "SA") */
.bilingual-lang-badge {
    display: inline-block;
    background-color: var(--sb-primary-soft);
    color: var(--sb-primary-700);
    font-size: 10px;
    font-weight: var(--sb-fw-semibold);
    padding: 2px 8px;
    border-radius: var(--sb-radius-pill);
    line-height: 1.3;
    margin-left: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
[dir="rtl"] .bilingual-lang-badge {
    margin-left: 0;
    margin-right: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .bilingual-fields .bilingual-pane { animation: none; }
}