/* ==========================================================================
   STORA WHATSAPP CRM - MASTER DESIGN SYSTEM (OFFICIAL WHATSAPP & WHATSAPP BUSINESS)
   Supports Dual-Mode: WhatsApp Dark (OLED Optimized) & WhatsApp Light (Official UI)
   Strict WCAG AAA High Contrast Standard: Minimum 10:1 Contrast Across All Surfaces
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORE PALETTE & CSS VARIABLES: DARK MODE (DEFAULT / OLED OPTIMIZED)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"],
body[data-theme="dark"],
body.theme-dark {
  --stora-theme: dark;

  /* Surfaces & Canvas */
  --stora-bg-page: #0b141a;          /* Canvas/Background: Deep obsidian black */
  --stora-bg-card: #111b21;          /* Cards & Panels: Dark slate card */
  --stora-bg-card-header: #182229;   /* Elevated card header */
  --stora-bg-appbar: #202c33;        /* Headers & AppBar: WhatsApp Dark AppBar */
  --stora-bg-input: #182229;         /* High-contrast form control */
  --stora-bg-input-focus: #111b21;
  --stora-bg-bubble-in: #202c33;     /* Incoming bubble surface */
  --stora-bg-bubble-out: #005c4b;    /* Outgoing bubble surface / success cards */

  /* Borders & Outlines */
  --stora-border-main: #202c33;      /* Subtle dark separator */
  --stora-border-light: #2a3942;     /* Medium dark outline border */
  --stora-border-focus: #25d366;     /* WhatsApp green active focus */

  /* High-Contrast Typography */
  --stora-text-primary: #e9edef;     /* Primary text: Pure crisp off-white */
  --stora-text-secondary: #8696a0;   /* Secondary text */
  --stora-text-muted: #8696a0;       /* Muted helper text */
  --stora-text-dim: #667781;         /* Dim labels */
  --stora-text-heading: #f3cf55;     /* Gold / Green heading */
  --stora-text-link: #53bdeb;        /* WhatsApp link blue */

  /* Accents & CTA */
  --stora-accent-wa-green: #25d366;  /* Official WhatsApp Green */
  --stora-accent-teal: #00a884;      /* WhatsApp Business Teal */
  --stora-accent-emerald: #10b981;   /* Emerald accent */
  --stora-accent-gold: #f3cf55;      /* Luminous gold accent */
  --stora-accent-gold-hover: #ffe066;/* Highlight gold */
  --stora-accent-gold-dark: #c59b27; /* Shadow gold for gradients */
  --stora-accent-green: #25d366;
  --stora-accent-green-dark: #005c4b;

  /* Interactive Button Palettes */
  --stora-btn-gold-bg: #f3cf55;
  --stora-btn-gold-text: #000000;    /* Pure black on luminous gold */
  --stora-btn-dark-bg: #202c33;
  --stora-btn-dark-border: #3b4a54;
  --stora-btn-dark-text: #e9edef;
  --stora-btn-danger-bg: #7f1d1d;
  --stora-btn-danger-border: #ef4444;
  --stora-btn-danger-text: #ffffff;
  --stora-btn-success-bg: #005c4b;
  --stora-btn-success-border: #25d366;
  --stora-btn-success-text: #ffffff;

  /* Data Table Surfaces */
  --stora-table-bg: #111b21;
  --stora-table-border: #2a3942;
  --stora-table-th-bg: #182229;
  --stora-table-th-text: #f3cf55;
  --stora-table-th-border: #f3cf55;
  --stora-table-tr-odd: #111b21;
  --stora-table-tr-even: #17242c;
  --stora-table-tr-hover: #1f2f3a;
  --stora-table-hover-accent: #f3cf55;
  --stora-table-text: #e9edef;

  /* Status Badges */
  --stora-badge-green-bg: #005c4b;
  --stora-badge-green-border: #25d366;
  --stora-badge-green-text: #ffffff;
  --stora-badge-gold-bg: #3b2803;
  --stora-badge-gold-border: #f3cf55;
  --stora-badge-gold-text: #ffffff;
  --stora-badge-blue-bg: #1e3a8a;
  --stora-badge-blue-border: #3b82f6;
  --stora-badge-blue-text: #ffffff;
  --stora-badge-red-bg: #450a0a;
  --stora-badge-red-border: #ef4444;
  --stora-badge-red-text: #ffffff;

  /* Sidebar Palette */
  --stora-sidebar-bg: #111b21;
  --stora-sidebar-text: #e9edef;
  --stora-sidebar-border: #202c33;
  --stora-sidebar-hover-bg: rgba(37, 211, 102, 0.12);
  --stora-sidebar-hover-text: #25d366;
  --stora-sidebar-active-bg: rgba(37, 211, 102, 0.22);
  --stora-sidebar-active-text: #25d366;
  --stora-sidebar-active-border: #25d366;

  /* Scrollbars */
  --stora-scrollbar-track: #0b141a;
  --stora-scrollbar-thumb: #2a3942;
  --stora-scrollbar-thumb-hover: #f3cf55;

  /* Sizing & Elevation */
  --stora-radius-sm: 8px;
  --stora-radius-md: 12px;
  --stora-radius-lg: 16px;
  --stora-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   2. CORE PALETTE & CSS VARIABLES: LIGHT MODE (OFFICIAL WHATSAPP LIGHT UI)
   -------------------------------------------------------------------------- */
html[data-theme="light"],
body[data-theme="light"],
body.theme-light,
[data-theme="light"] {
  --stora-theme: light;

  /* Surfaces & Canvas */
  --stora-bg-page: #efeae2;          /* Canvas: WhatsApp chat wallpaper tone (#efeae2 / #f0f2f5) */
  --stora-bg-card: #ffffff;          /* Cards & Panels: Pure white card */
  --stora-bg-card-header: #f0f2f5;   /* Elevated card header */
  --stora-bg-appbar: #008069;        /* Headers & AppBar: Official WhatsApp emerald green */
  --stora-bg-input: #ffffff;         /* Crisp white input */
  --stora-bg-input-focus: #ffffff;
  --stora-bg-bubble-in: #ffffff;     /* Incoming bubble surface: pure white */
  --stora-bg-bubble-out: #d9fdd3;    /* Outgoing bubble surface: official soft mint */

  /* Borders & Outlines */
  --stora-border-main: #e9edef;      /* WhatsApp light border separator */
  --stora-border-light: #d1d7db;     /* Outline border: light slate outline */
  --stora-border-focus: #008069;     /* Active focus: WhatsApp emerald */

  /* High-Contrast Typography */
  --stora-text-primary: #111b21;     /* Primary text: WhatsApp deep slate */
  --stora-text-secondary: #667781;   /* Secondary text: WhatsApp muted gray */
  --stora-text-muted: #667781;       /* Muted text */
  --stora-text-dim: #8696a0;         /* Dim text */
  --stora-text-heading: #008069;     /* Heading: WhatsApp emerald */
  --stora-text-link: #008069;        /* Link: WhatsApp emerald */

  /* Accents & CTA */
  --stora-accent-wa-green: #25d366;  /* WhatsApp Green */
  --stora-accent-teal: #008069;      /* WhatsApp Primary Emerald Teal */
  --stora-accent-emerald: #008069;   /* Emerald */
  --stora-accent-gold: #c59b27;      /* Warm golden accent on light */
  --stora-accent-gold-hover: #d4a31e;
  --stora-accent-gold-dark: #8c6d12;
  --stora-accent-green: #008069;
  --stora-accent-green-dark: #005c4b;

  /* Interactive Button Palettes */
  --stora-btn-gold-bg: #008069;
  --stora-btn-gold-text: #ffffff;    /* White text on emerald */
  --stora-btn-dark-bg: #f0f2f5;
  --stora-btn-dark-border: #d1d7db;
  --stora-btn-dark-text: #111b21;
  --stora-btn-danger-bg: #fee2e2;
  --stora-btn-danger-border: #ef4444;
  --stora-btn-danger-text: #b91c1c;
  --stora-btn-success-bg: #d9fdd3;
  --stora-btn-success-border: #25d366;
  --stora-btn-success-text: #005c4b;

  /* Data Table Surfaces */
  --stora-table-bg: #ffffff;
  --stora-table-border: #e2e8f0;
  --stora-table-th-bg: #008069;
  --stora-table-th-text: #ffffff;
  --stora-table-th-border: #005c4b;
  --stora-table-tr-odd: #ffffff;
  --stora-table-tr-even: #f8fafc;
  --stora-table-tr-hover: #e7f7ef;
  --stora-table-hover-accent: #008069;
  --stora-table-text: #111b21;

  /* Status Badges */
  --stora-badge-green-bg: #d9fdd3;
  --stora-badge-green-border: #25d366;
  --stora-badge-green-text: #005c4b;
  --stora-badge-gold-bg: #fef3c7;
  --stora-badge-gold-border: #f59e0b;
  --stora-badge-gold-text: #92400e;
  --stora-badge-blue-bg: #e0f2fe;
  --stora-badge-blue-border: #0284c7;
  --stora-badge-blue-text: #0369a1;
  --stora-badge-red-bg: #fee2e2;
  --stora-badge-red-border: #ef4444;
  --stora-badge-red-text: #b91c1c;

  /* Sidebar Palette */
  --stora-sidebar-bg: #ffffff;
  --stora-sidebar-text: #111b21;
  --stora-sidebar-border: #d1d7db;
  --stora-sidebar-hover-bg: #e7f7ef;
  --stora-sidebar-hover-text: #008069;
  --stora-sidebar-active-bg: #d9fdd3;
  --stora-sidebar-active-text: #005c4b;
  --stora-sidebar-active-border: #25d366;

  /* Scrollbars */
  --stora-scrollbar-track: #efeae2;
  --stora-scrollbar-thumb: #ced0d1;
  --stora-scrollbar-thumb-hover: #008069;

  /* Sizing & Elevation */
  --stora-radius-sm: 8px;
  --stora-radius-md: 12px;
  --stora-radius-lg: 16px;
  --stora-shadow-card: 0 2px 10px rgba(11, 20, 26, 0.08);
}

/* --------------------------------------------------------------------------
   3. WHATSAPP BUSINESS FUNCTIONAL PALETTE & LABEL SYSTEM
   -------------------------------------------------------------------------- */
:root {
  --wa-label-customer: #00a884;     /* New Customer */
  --wa-label-order: #0088cc;        /* New Order */
  --wa-label-payment: #ffbc38;      /* Pending Payment */
  --wa-label-paid: #25d366;         /* Paid */
  --wa-label-complete: #a470ff;     /* Order Complete */
  --wa-meta-verified: #0064e0;      /* Meta Verified Badge */
}

/* WhatsApp Business Badge Classes */
.wa-label, .wa-badge, .wa-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  user-select: none !important;
}
.wa-label:hover, .wa-badge:hover, .wa-tag:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Label 1: New Customer (#00A884) */
.wa-label-customer, .wa-badge-customer, .wa-tag-customer, [data-wa-label="customer"] {
  background-color: #00a884 !important;
  color: #ffffff !important;
  border: 1px solid #00a884 !important;
}
html[data-theme="light"] .wa-label-customer,
body[data-theme="light"] .wa-label-customer,
body.theme-light .wa-label-customer {
  background-color: #e6f7f3 !important;
  color: #007a60 !important;
  border: 1.5px solid #00a884 !important;
}

/* Label 2: New Order (#0088CC) */
.wa-label-order, .wa-badge-order, .wa-tag-order, [data-wa-label="order"] {
  background-color: #0088cc !important;
  color: #ffffff !important;
  border: 1px solid #0088cc !important;
}
html[data-theme="light"] .wa-label-order,
body[data-theme="light"] .wa-label-order,
body.theme-light .wa-label-order {
  background-color: #e5f3fa !important;
  color: #006699 !important;
  border: 1.5px solid #0088cc !important;
}

/* Label 3: Pending Payment (#FFBC38) */
.wa-label-payment, .wa-badge-payment, .wa-tag-payment, [data-wa-label="payment"] {
  background-color: #ffbc38 !important;
  color: #000000 !important;
  border: 1px solid #e09f18 !important;
}
html[data-theme="light"] .wa-label-payment,
body[data-theme="light"] .wa-label-payment,
body.theme-light .wa-label-payment {
  background-color: #fff9e6 !important;
  color: #996c00 !important;
  border: 1.5px solid #ffbc38 !important;
}

/* Label 4: Paid (#25D366) */
.wa-label-paid, .wa-badge-paid, .wa-tag-paid, [data-wa-label="paid"] {
  background-color: #25d366 !important;
  color: #000000 !important;
  border: 1px solid #1fa851 !important;
}
html[data-theme="light"] .wa-label-paid,
body[data-theme="light"] .wa-label-paid,
body.theme-light .wa-label-paid {
  background-color: #d9fdd3 !important;
  color: #005c4b !important;
  border: 1.5px solid #25d366 !important;
}

/* Label 5: Order Complete (#A470FF) */
.wa-label-complete, .wa-badge-complete, .wa-tag-complete, [data-wa-label="complete"] {
  background-color: #a470ff !important;
  color: #ffffff !important;
  border: 1px solid #8e50f7 !important;
}
html[data-theme="light"] .wa-label-complete,
body[data-theme="light"] .wa-label-complete,
body.theme-light .wa-label-complete {
  background-color: #f3edff !important;
  color: #6c2bd9 !important;
  border: 1.5px solid #a470ff !important;
}

/* Meta Verified Badge (#0064E0) */
.wa-meta-verified, .wa-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0064e0 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
}
.wa-meta-verified svg, .wa-verified-badge svg {
  width: 16px !important;
  height: 16px !important;
  fill: #0064e0 !important;
}
.wa-meta-verified i, .wa-verified-badge i {
  color: #0064e0 !important;
  font-size: 15px !important;
  vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   4. GLOBAL DUAL-MODE CUSTOM SCROLLBARS
   -------------------------------------------------------------------------- */
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: var(--stora-scrollbar-thumb) var(--stora-scrollbar-track);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background-color: var(--stora-scrollbar-track);
}

::-webkit-scrollbar-track {
  background: var(--stora-scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--stora-scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--stora-scrollbar-track);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--stora-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--stora-scrollbar-track);
}

.table-responsive::-webkit-scrollbar,
.stora-combo-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.debug-log::-webkit-scrollbar,
.category-section::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* --------------------------------------------------------------------------
   5. GLOBAL LAYOUT & DYNAMIC SCREEN-FIT TRANSITION
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  background-color: var(--stora-bg-page) !important;
  color: var(--stora-text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

#content-wrapper, .content-wrapper {
  background-color: var(--stora-bg-page) !important;
  color: var(--stora-text-primary) !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  transition: margin-left .3s cubic-bezier(0.4, 0, 0.2, 1), max-width .3s cubic-bezier(0.4, 0, 0.2, 1), width .3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease !important;
}

@media (min-width: 768px) {
  body:not(.sidebar-collapse) #content-wrapper,
  body:not(.sidebar-collapse) .content-wrapper,
  body.sidebar-open #content-wrapper,
  body.sidebar-open .content-wrapper,
  body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded #content-wrapper,
  body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded .content-wrapper {
    margin-left: 260px !important;
    max-width: calc(100% - 260px) !important;
    width: calc(100% - 260px) !important;
    padding: 20px 24px !important;
  }
  body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) #content-wrapper,
  body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) .content-wrapper {
    margin-left: 73px !important;
    max-width: calc(100% - 73px) !important;
    width: calc(100% - 73px) !important;
    padding: 20px 24px !important;
  }
}

@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-sidebar,
  .main-sidebar::before,
  body:not(.sidebar-open) .main-sidebar,
  body:not(.sidebar-open) .main-sidebar::before,
  body.sidebar-collapse .main-sidebar,
  body:not(.sidebar-collapse) .main-sidebar {
    margin-left: -260px !important;
    left: 0 !important;
    width: 260px !important;
    transform: translate3d(-260px, 0, 0) !important;
    box-shadow: none !important;
  }

  body.sidebar-open .main-sidebar,
  body.sidebar-open .main-sidebar::before {
    margin-left: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.45) !important;
  }

  #content-wrapper, .content-wrapper,
  html body #content-wrapper,
  html body .content-wrapper,
  body #content-wrapper,
  body .content-wrapper,
  body.sidebar-mini #content-wrapper,
  body.sidebar-mini .content-wrapper,
  body.sidebar-mini.sidebar-collapse #content-wrapper,
  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body:not(.sidebar-collapse) #content-wrapper,
  body:not(.sidebar-collapse) .content-wrapper,
  body.sidebar-collapse #content-wrapper,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-open #content-wrapper,
  body.sidebar-open .content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
  }
}

/* Mobile Screen Space Maximizer (< 640px) - Strict 94-98% Screen Utilization */
@media (max-width: 640px) {
  #content-wrapper,
  .content-wrapper,
  body #content-wrapper,
  body .content-wrapper,
  .content-wrapper.p-4,
  #content-wrapper.p-4,
  .content-wrapper.p-3,
  #content-wrapper.p-3,
  .content-wrapper.p-4.sm\:p-6,
  #content-wrapper.p-4.sm\:p-6,
  .stora-whatsapp-ajax-root {
    padding: 6px 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .container,
  .container-fluid,
  .card,
  .mil-card,
  .stora-outline-card,
  .form-container,
  .custom-form-card,
  .user-card,
  .template-maker-card,
  .user-table-card,
  .instruction-card,
  .filter-card,
  .chart-card,
  .summary-card,
  .mil-user-banner,
  .template-block,
  .category-section-card,
  div.max-w-4xl,
  div.max-w-2xl,
  div.max-w-xl,
  div.max-w-md,
  .container.max-w-2xl {
    padding: 10px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .content-wrapper > .container-fluid,
  #content-wrapper > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .card-body,
  .card-header,
  .card-footer,
  .filter-card .card-body,
  .header {
    padding: 10px 10px !important;
  }

  .content-header {
    margin-bottom: 10px !important;
    padding: 0 4px !important;
  }

  .content-header h1 {
    font-size: 1.25rem !important;
  }

  #campaignForm .p-4,
  form .p-4,
  .card .p-4,
  .p-4.rounded-xl,
  .p-5,
  .sm\:p-7,
  .p-6,
  .sm\:p-8,
  .p-4.p-sm-5,
  .p-3.p-sm-4,
  .scroller-box {
    padding: 10px 10px !important;
  }

  .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.75rem !important;
  }

  #gateway-status,
  div[style*="Sender Mobile:"] {
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
    margin-bottom: 10px !important;
  }

  textarea#contacts,
  textarea.form-control,
  input.form-control,
  select.form-select,
  .sheet-body input,
  .sheet-body select,
  .sheet-body textarea,
  .mil-modal-textarea,
  .search-box {
    padding: 8px 10px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .modal .sheet,
  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    box-sizing: border-box !important;
  }
  .sheet-body {
    padding: 10px 8px !important;
  }
  .sheet-header {
    padding: 10px 12px !important;
  }
  .sheet-footer {
    padding: 10px 12px !important;
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .sheet-footer .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-sm,
  .modal-dialog-centered,
  .modal-dialog.modal-dialog-centered {
    margin: 8px 4px !important;
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
  }
  .modal-content {
    border-radius: 12px !important;
    padding: 0 !important;
  }
  .modal-header,
  .modal-footer {
    padding: 10px 12px !important;
  }
  .modal-body {
    padding: 10px 10px !important;
  }

  .mil-modal-backdrop {
    padding: 4px !important;
  }
  .mil-modal-dialog {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    margin: 4px !important;
    border-radius: 12px !important;
  }
  .mil-modal-body {
    padding: 10px 8px !important;
  }
  .mil-modal-footer {
    padding: 10px 12px !important;
  }

  .table-responsive,
  .table-wrap,
  .mil-table-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 10px !important;
    padding: 0 !important;
  }

  .controls,
  .table-toolbar,
  .mil-controls-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
}

.max-w-2xl,
.container.max-w-2xl,
div.max-w-2xl {
  max-width: 42rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.form-container-wide, .stora-widescreen-form {
  max-width: 100% !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .form-container-wide, .stora-widescreen-form {
    max-width: min(100%, 1400px) !important;
  }
}

.max, .w-full-crm {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
}

h1, .page-title, .card-title, .title, .sheet-title, .content-header h1 {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem) !important;
  font-weight: 800 !important;
  color: var(--stora-text-heading) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

.content-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 1300px) {
  .content-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* --------------------------------------------------------------------------
   6. CARD ARCHITECTURE & UNIVERSAL OUTLINE BORDERS
   -------------------------------------------------------------------------- */
.card, .panel, .box,
.template-maker-card, .category-section-card,
.instruction-card, .filter-card, .table-card, .user-card,
.stora-outline-card, .form-container, .sheet,
form.stora-outline-form, fieldset, .category-section,
.custom-form-card {
  background-color: var(--stora-bg-card) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-md) !important;
  color: var(--stora-text-primary) !important;
  box-shadow: var(--stora-shadow-card) !important;
  margin-bottom: 20px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease !important;
}

.card:hover, .panel:hover, .box:hover,
.template-maker-card:hover, .category-section-card:hover,
.instruction-card:hover, .filter-card:hover, .user-card:hover,
.stora-outline-card:hover, .custom-form-card:hover {
  border-color: var(--stora-border-focus) !important;
}

.card:focus-within, .panel:focus-within, .box:focus-within,
.template-maker-card:focus-within, .filter-card:focus-within,
.user-card:focus-within, .stora-outline-card:focus-within,
.modal-content:focus-within, .sheet:focus-within,
form.stora-outline-form:focus-within, .custom-form-card:focus-within {
  border-color: var(--stora-border-focus) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.4), 0 0 12px rgba(37, 211, 102, 0.2) !important;
}

.card-header, .panel-heading, .box-header, .sheet-header {
  background-color: var(--stora-bg-card-header) !important;
  border-bottom: 1.5px solid var(--stora-border-light) !important;
  padding: 14px 20px !important;
  border-top-left-radius: var(--stora-radius-md) !important;
  border-top-right-radius: var(--stora-radius-md) !important;
  color: var(--stora-text-heading) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.card-header .card-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 {
  color: var(--stora-text-heading) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}

.card-body, .panel-body, .box-body {
  background-color: var(--stora-bg-card) !important;
  color: var(--stora-text-primary) !important;
  padding: 20px !important;
}

.card-footer, .panel-footer, .box-footer {
  background-color: var(--stora-bg-card-header) !important;
  border-top: 1.5px solid var(--stora-border-main) !important;
  border-bottom-left-radius: var(--stora-radius-md) !important;
  border-bottom-right-radius: var(--stora-radius-md) !important;
  padding: 14px 20px !important;
}

/* --------------------------------------------------------------------------
   7. BUTTONS & ACTION CONTROLS (HIGH CONTRAST)
   -------------------------------------------------------------------------- */
/* Primary Action Button (Gold / Emerald) */
.btn-custom, .btn-gold, .btn-primary:not(.btn-wa-dark):not(.btn-wa-danger) {
  background: linear-gradient(135deg, var(--stora-btn-gold-bg), var(--stora-accent-gold-dark, #005c4b)) !important;
  border: 1px solid var(--stora-btn-gold-bg) !important;
  color: var(--stora-btn-gold-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  border-radius: var(--stora-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-custom:hover, .btn-gold:hover, .btn-primary:not(.btn-wa-dark):not(.btn-wa-danger):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.45) !important;
}

/* Secondary Button */
.btn-wa-dark, .btn-secondary, .btn-dark {
  background-color: var(--stora-btn-dark-bg) !important;
  border: 1.5px solid var(--stora-btn-dark-border) !important;
  color: var(--stora-btn-dark-text) !important;
  font-weight: 600 !important;
  border-radius: var(--stora-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-wa-dark:hover, .btn-secondary:hover, .btn-dark:hover {
  border-color: var(--stora-border-focus) !important;
  color: var(--stora-accent-wa-green) !important;
  transform: translateY(-1px) !important;
}

/* Danger Button */
.btn-wa-danger, .btn-danger {
  background-color: var(--stora-btn-danger-bg) !important;
  border: 1.5px solid var(--stora-btn-danger-border) !important;
  color: var(--stora-btn-danger-text) !important;
  font-weight: 700 !important;
  border-radius: var(--stora-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-wa-danger:hover, .btn-danger:hover {
  border-color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Success Button */
.btn-success {
  background-color: var(--stora-btn-success-bg) !important;
  border: 1.5px solid var(--stora-btn-success-border) !important;
  color: var(--stora-btn-success-text) !important;
  font-weight: 700 !important;
  border-radius: var(--stora-radius-sm) !important;
  padding: 8px 18px !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.btn-success:hover {
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Official WhatsApp Send Campaign Button */
.custom-send {
  background: linear-gradient(135deg, var(--stora-accent-wa-green, #25d366), var(--stora-btn-success-bg, #005c4b)) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--stora-accent-wa-green, #25d366) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  padding: 12px 36px !important;
  border-radius: var(--stora-radius-md) !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.custom-send:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
}

/* --------------------------------------------------------------------------
   8. FORM CONTROLS & INPUTS
   -------------------------------------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="search"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="email"], input[type="password"],
textarea {
  background-color: var(--stora-bg-input) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm) !important;
  color: var(--stora-text-primary) !important;
  padding: 9px 14px !important;
  font-size: 0.95rem !important;
  color-scheme: var(--stora-theme, dark) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.25s ease !important;
}

select:not(.stora-combo-hidden) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--stora-bg-input) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm) !important;
  color: var(--stora-text-primary) !important;
  padding: 9px 38px 9px 14px !important;
  font-size: 0.95rem !important;
  color-scheme: var(--stora-theme, dark) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325d366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

html[data-theme="light"] select:not(.stora-combo-hidden),
body[data-theme="light"] select:not(.stora-combo-hidden),
body.theme-light select:not(.stora-combo-hidden) {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008069' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--stora-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.25) !important;
  outline: none !important;
  color: var(--stora-text-primary) !important;
  background-color: var(--stora-bg-input-focus, var(--stora-bg-input)) !important;
}

select:not(.stora-combo-hidden) option {
  background-color: var(--stora-bg-card) !important;
  color: var(--stora-text-primary) !important;
  padding: 10px 14px !important;
}

.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--stora-text-dim) !important;
  opacity: 0.8 !important;
}

/* Native Date and Time Picker Indicators */
html:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator,
html:not([data-theme="light"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html:not([data-theme="light"]) input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.9) sepia(1) saturate(5) hue-rotate(90deg) !important;
  cursor: pointer !important;
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
body[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  cursor: pointer !important;
}

/* Checkboxes & Radios */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--stora-accent-wa-green) !important;
  cursor: pointer !important;
  width: 18px !important;
  height: 18px !important;
  vertical-align: -3px !important;
  margin-right: 6px !important;
  outline: 1.5px solid var(--stora-border-light) !important;
  outline-offset: 1px !important;
  border-radius: 4px !important;
  background-color: var(--stora-bg-input) !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="file"] {
  background-color: var(--stora-bg-input) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm) !important;
  color: var(--stora-text-muted) !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
}
input[type="file"]::file-selector-button {
  background-color: var(--stora-btn-dark-bg) !important;
  border: 1.5px solid var(--stora-btn-dark-border) !important;
  color: var(--stora-accent-wa-green) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--stora-accent-wa-green) !important;
}

label, .form-label {
  color: var(--stora-text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 6px;
  display: inline-block;
}

.hidden, [hidden], .d-none {
  display: none !important;
}

.category-pill {
  display: inline-flex !important;
}
.category-pill.hidden, .category-pill[style*="display: none"], .category-pill[style*="display:none"] {
  display: none !important;
}

.input-group-text {
  background-color: var(--stora-bg-card-header) !important;
  border: 1.5px solid var(--stora-border-main) !important;
  color: var(--stora-accent-wa-green) !important;
}

/* --------------------------------------------------------------------------
   9. STATUS BADGES & PILLS
   -------------------------------------------------------------------------- */
.mil-badge, .badge-custom {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
}

.mil-badge-green, .badge-success, .badge.bg-success, .badge.bg-wa-paid, .badge.bg-wa-customer {
  background-color: var(--stora-badge-green-bg) !important;
  border: 1.5px solid var(--stora-badge-green-border) !important;
  color: var(--stora-badge-green-text) !important;
}

.mil-badge-gold, .badge-warning, .badge.bg-warning, .badge.bg-wa-payment {
  background-color: var(--stora-badge-gold-bg) !important;
  border: 1.5px solid var(--stora-badge-gold-border) !important;
  color: var(--stora-badge-gold-text) !important;
}

.mil-badge-blue, .badge-info, .badge-primary, .badge.bg-info, .badge.bg-primary, .badge.bg-wa-order {
  background-color: var(--stora-badge-blue-bg) !important;
  border: 1.5px solid var(--stora-badge-blue-border) !important;
  color: var(--stora-badge-blue-text) !important;
}

.mil-badge-red, .badge-danger, .badge.bg-danger {
  background-color: var(--stora-badge-red-bg) !important;
  border: 1.5px solid var(--stora-badge-red-border) !important;
  color: var(--stora-badge-red-text) !important;
}

.mil-badge-slate, .badge-secondary, .badge.bg-secondary {
  background-color: var(--stora-btn-dark-bg) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  color: var(--stora-text-muted) !important;
}

.status-pill {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.status-pill.running {
  background-color: var(--stora-badge-green-bg) !important;
  color: var(--stora-badge-green-text) !important;
  border: 1.5px solid var(--stora-badge-green-border) !important;
}
.status-pill.paused {
  background-color: var(--stora-badge-gold-bg) !important;
  color: var(--stora-badge-gold-text) !important;
  border: 1.5px solid var(--stora-badge-gold-border) !important;
}
.status-pill.not_started {
  background-color: var(--stora-btn-dark-bg) !important;
  color: var(--stora-text-muted) !important;
  border: 1.5px solid var(--stora-border-light) !important;
}

/* --------------------------------------------------------------------------
   10. DATA TABLES (COLORED GRID LINES & ZEBRA ROWS)
   -------------------------------------------------------------------------- */
.table, table.dataTable, .table-bordered, table {
  color: var(--stora-table-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1.5px solid var(--stora-table-border) !important;
  border-radius: var(--stora-radius-md) !important;
  overflow: hidden !important;
  background-color: var(--stora-table-bg) !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  transition: background-color 0.25s ease !important;
}

.table th, .table td,
table.dataTable th, table.dataTable td,
table th, table td {
  border-right: 1px solid var(--stora-table-border) !important;
  border-bottom: 1px solid var(--stora-table-border) !important;
  border-top: none !important;
  border-left: none !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  color: var(--stora-table-text) !important;
}

.table th:last-child, .table td:last-child,
table.dataTable th:last-child, table.dataTable td:last-child,
table th:last-child, table td:last-child {
  border-right: none !important;
}

.table th, .table thead th, thead th, table.dataTable thead th {
  background-color: var(--stora-table-th-bg) !important;
  color: var(--stora-table-th-text) !important;
  border-bottom: 2.5px solid var(--stora-table-th-border) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  font-size: 0.88rem !important;
}

.table tbody tr:nth-child(odd) td,
table.dataTable tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--stora-table-tr-odd) !important;
  color: var(--stora-table-text) !important;
}

.table tbody tr:nth-child(even) td,
table.dataTable tbody tr:nth-child(even) td,
tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-of-type(even) td {
  background-color: var(--stora-table-tr-even) !important;
  color: var(--stora-table-text) !important;
}

.table tbody tr:hover td,
table.dataTable tbody tr:hover td,
tbody tr:hover td {
  background-color: var(--stora-table-tr-hover) !important;
  color: var(--stora-table-text) !important;
}
.table tbody tr:hover td:first-child,
table.dataTable tbody tr:hover td:first-child,
tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 var(--stora-table-hover-accent) !important;
}

.pagination .page-link {
  background-color: var(--stora-bg-card-header) !important;
  border: 1px solid var(--stora-border-main) !important;
  color: var(--stora-text-primary) !important;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--stora-accent-wa-green), var(--stora-btn-success-bg)) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: var(--stora-accent-wa-green) !important;
}

/* --------------------------------------------------------------------------
   11. INFO BANNERS & USER IDENTITY CONTAINERS
   -------------------------------------------------------------------------- */
.mil-user-banner, .user-banner, .stora-banner {
  background-color: var(--stora-bg-card-header) !important;
  border: 1.5px solid var(--stora-border-focus) !important;
  border-radius: var(--stora-radius-md) !important;
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.mil-user-banner-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--stora-text-primary) !important;
}

.mil-mobile-highlight-container {
  background-color: var(--stora-badge-green-bg) !important;
  border: 1.5px solid var(--stora-badge-green-border) !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mil-mobile-highlight {
  color: var(--stora-badge-green-text) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.instruction-card {
  background-color: var(--stora-bg-card-header) !important;
  border: 1.5px solid var(--stora-border-main) !important;
  border-radius: var(--stora-radius-md) !important;
  padding: 16px 20px !important;
  color: var(--stora-text-muted) !important;
  margin-bottom: 20px !important;
}

.debug-log {
  background-color: #050b0e !important;
  border: 1px solid var(--stora-border-main) !important;
  border-radius: var(--stora-radius-sm) !important;
  padding: 14px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.85rem !important;
  color: #10b981 !important;
}

/* --------------------------------------------------------------------------
   12. NAVIGATION & ADMINLTE DUAL-THEME OVERRIDES
   -------------------------------------------------------------------------- */
.main-header.navbar {
  background-color: var(--stora-bg-appbar) !important;
  border-bottom: 1.5px solid var(--stora-border-main) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.main-header .nav-link {
  color: var(--stora-text-primary) !important;
}

html[data-theme="light"] .main-header .nav-link,
body[data-theme="light"] .main-header .nav-link,
body.theme-light .main-header .nav-link {
  color: #ffffff !important;
}

.main-sidebar, .main-sidebar::before {
  background-color: var(--stora-sidebar-bg) !important;
  border-right: 1.5px solid var(--stora-sidebar-border) !important;
  width: 260px !important;
  transition: width .3s cubic-bezier(0.4, 0, 0.2, 1), margin-left .3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease !important;
}

.main-sidebar .sidebar {
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow-x: hidden !important;
}

.main-sidebar .nav-sidebar,
.main-sidebar .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar > .nav-header {
  white-space: normal !important;
}

.brand-link {
  background-color: var(--stora-bg-card-header) !important;
  border-bottom: 1.5px solid var(--stora-sidebar-border) !important;
  color: var(--stora-accent-wa-green) !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

html[data-theme="light"] .brand-link,
body[data-theme="light"] .brand-link,
body.theme-light .brand-link {
  background-color: #008069 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .brand-link .brand-text,
body[data-theme="light"] .brand-link .brand-text,
body.theme-light .brand-link .brand-text {
  color: #ffffff !important;
}

.main-sidebar .nav-link {
  color: var(--stora-sidebar-text) !important;
  border-radius: 8px !important;
  margin: 2px 4px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: normal !important;
  word-break: normal !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  overflow: visible !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.main-sidebar .nav-link .nav-icon {
  font-size: 15px !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

.main-sidebar .nav-link p {
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13.5px !important;
}

body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) .main-sidebar,
body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) .main-sidebar::before {
  width: 73px !important;
}
body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) .main-sidebar .nav-link p {
  display: none !important;
}
body.sidebar-collapse:not(.sidebar-open):not(.sidebar-hover-expanded) .brand-text {
  display: none !important;
}

body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded .main-sidebar,
body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded .main-sidebar::before {
  width: 260px !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.45) !important;
}
body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded .main-sidebar .nav-link p {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.sidebar-collapse:not(.sidebar-open).sidebar-hover-expanded .brand-text {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-sidebar .nav-link:hover {
  background-color: var(--stora-sidebar-hover-bg) !important;
  color: var(--stora-sidebar-hover-text) !important;
}

.main-sidebar .nav-link.active {
  background: var(--stora-sidebar-active-bg) !important;
  color: var(--stora-sidebar-active-text) !important;
  border: 1px solid var(--stora-sidebar-active-border) !important;
}

/* Modals & Bottom Sheets */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}
.modal.show, .modal.active {
  display: flex !important;
}
.modal-content, .sheet {
  background-color: var(--stora-bg-card) !important;
  border: 1.5px solid var(--stora-border-focus) !important;
  border-radius: 14px !important;
  color: var(--stora-text-primary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 16px rgba(37, 211, 102, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: auto !important;
}
.sheet > form, form.sheet-form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.modal-header, .sheet-header {
  background-color: var(--stora-bg-card-header) !important;
  border-bottom: 1.5px solid var(--stora-border-light) !important;
  color: var(--stora-text-heading) !important;
  padding: 14px 20px !important;
  flex-shrink: 0 !important;
}
.modal-title, .sheet-title {
  color: var(--stora-text-heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}
.modal-body, .sheet-body {
  background-color: var(--stora-bg-card) !important;
  color: var(--stora-text-primary) !important;
  padding: 20px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.modal-footer, .sheet-footer {
  background-color: var(--stora-bg-card-header) !important;
  border-top: 1.5px solid var(--stora-border-light) !important;
  padding: 14px 20px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.modal-header .btn-close, .modal-header .close, .sheet-header .x {
  color: var(--stora-text-primary) !important;
  opacity: 0.85 !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
  cursor: pointer !important;
}
.modal-header .btn-close:hover, .modal-header .close:hover, .sheet-header .x:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
  color: var(--stora-accent-wa-green) !important;
}

/* --------------------------------------------------------------------------
   13. OUTLINE BORDERS & SINGLE-LINE TOOLBAR CONTROLS
   -------------------------------------------------------------------------- */
.table-responsive, .table-wrap {
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-md) !important;
  background-color: var(--stora-bg-card) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  overflow-x: auto !important;
  margin-bottom: 16px !important;
}

.clear-search-btn, button[id*="clear"], button[id*="Clear"] {
  color: var(--stora-text-dim) !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}
.clear-search-btn:hover, button[id*="clear"]:hover, button[id*="Clear"]:hover {
  color: var(--stora-accent-wa-green) !important;
  transform: scale(1.1) !important;
}

.template-block, .template-item, .category-section-card {
  background-color: var(--stora-bg-input) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-md) !important;
  color: var(--stora-text-primary) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.template-block:hover, .template-item:hover, .category-section-card:hover {
  border-color: var(--stora-border-focus) !important;
}
.template-item.selected, .template-item:active {
  border-color: var(--stora-accent-wa-green) !important;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.3) !important;
}

/* Alert boxes */
.alert-success {
  background-color: var(--stora-badge-green-bg) !important;
  border: 1.5px solid var(--stora-badge-green-border) !important;
  color: var(--stora-badge-green-text) !important;
  border-radius: var(--stora-radius-md) !important;
}
.alert-danger {
  background-color: var(--stora-badge-red-bg) !important;
  border: 1.5px solid var(--stora-badge-red-border) !important;
  color: var(--stora-badge-red-text) !important;
  border-radius: var(--stora-radius-md) !important;
}
.alert-warning {
  background-color: var(--stora-badge-gold-bg) !important;
  border: 1.5px solid var(--stora-badge-gold-border) !important;
  color: var(--stora-badge-gold-text) !important;
  border-radius: var(--stora-radius-md) !important;
}

/* Toolbar Controls Single-Line Horizontal Layout */
.controls, .table-toolbar, .table-controls, .filter-bar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 12px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.controls .search, .table-toolbar .search, .table-controls .search, .filter-bar .search,
input.search {
  flex: 1 1 200px !important;
  min-width: 160px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  padding: 9px 14px !important;
  border-radius: 9px !important;
  border: 1.5px solid var(--stora-border-light) !important;
  background: var(--stora-bg-input) !important;
  color: var(--stora-text-primary) !important;
  font-size: 14px !important;
  outline: none !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

.controls .search:focus, .table-toolbar .search:focus, .table-controls .search:focus, .filter-bar .search:focus,
input.search:focus {
  border-color: var(--stora-border-focus) !important;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.25) !important;
}

.controls .stora-combo-wrapper,
.controls select,
.controls .sort-select,
.controls .per-page-select,
select.sort-select,
select.per-page-select {
  width: auto !important;
  flex: 0 0 auto !important;
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.controls .stora-combo-wrapper[data-combo-for="sortSelect"],
.controls select#sortSelect,
.controls .sort-select {
  min-width: 200px !important;
  max-width: 250px !important;
}

.controls .stora-combo-wrapper[data-combo-for="perPageSelect"],
.controls select#perPageSelect,
.controls .per-page-select {
  min-width: 125px !important;
  max-width: 150px !important;
}

.controls .btn-reset-sort,
.btn-reset-sort {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--stora-btn-dark-border) !important;
  background: var(--stora-btn-dark-bg) !important;
  color: var(--stora-text-primary) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.controls .page-btns,
.page-btns {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 6px !important;
  white-space: nowrap !important;
  align-items: center !important;
}

.controls .page-btns button,
.page-btns button {
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  .controls, .table-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .controls .search {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .controls .sort-select,
  .controls .stora-combo-wrapper[data-combo-for="sortSelect"] {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 140px !important;
  }
  .controls .per-page-select,
  .controls .stora-combo-wrapper[data-combo-for="perPageSelect"] {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 100px !important;
  }
  .controls .btn-reset-sort {
    flex: 0 0 auto !important;
  }
  .controls .page-btns {
    justify-content: center !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   14. MESSAGE PREVIEW CONTAINERS & WHATSAPP CHAT BUBBLES
   -------------------------------------------------------------------------- */
#template-preview,
.template-preview-container,
#previewContent,
.message-preview {
  background-color: var(--stora-bg-card-header) !important;
  color: var(--stora-text-primary) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-md) !important;
}

#previewContent > div,
#preview_custom,
[id^="preview_"],
.preview-message-card,
.preview-item-card {
  background-color: var(--stora-bg-bubble-out) !important;
  color: var(--stora-text-primary) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: 10px 10px 2px 10px !important;
}

.preview-bubble-in {
  background-color: var(--stora-bg-bubble-in) !important;
  color: var(--stora-text-primary) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: 10px 10px 10px 2px !important;
}

.preview-bubble-out {
  background-color: var(--stora-bg-bubble-out) !important;
  color: var(--stora-text-primary) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: 10px 10px 2px 10px !important;
}

#preview_custom {
  border-color: var(--stora-border-focus) !important;
}

#previewContent .preview-text,
.preview-message-card .preview-text,
.preview-text {
  color: var(--stora-text-primary) !important;
}

textarea#message,
textarea#editMessage,
textarea#message[readonly],
textarea#editMessage[readonly],
textarea[readonly],
input[readonly],
.sheet-body textarea[readonly],
.sheet-body input[readonly] {
  background-color: var(--stora-bg-input) !important;
  color: var(--stora-text-primary) !important;
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   15. SLEEK DUAL-MODE WHATSAPP THEME SWITCHER TOGGLE
   -------------------------------------------------------------------------- */
.stora-theme-switch-wrapper {
  display: inline-flex;
  align-items: center;
}

.stora-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--stora-bg-card-header, #182229);
  border: 1.5px solid var(--stora-border-light, #2a3942);
  border-radius: 9999px;
  padding: 4px 12px 4px 5px;
  cursor: pointer;
  color: var(--stora-text-primary, #ffffff);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  height: 36px;
  box-sizing: border-box;
}

html[data-theme="light"] .stora-theme-toggle-btn,
body[data-theme="light"] .stora-theme-toggle-btn,
body.theme-light .stora-theme-toggle-btn {
  background: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.stora-theme-toggle-btn:hover {
  border-color: var(--stora-accent-wa-green, #25d366);
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}

.stora-theme-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 26px;
  background-color: #0b141a;
  border-radius: 9999px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid #2a3942;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html[data-theme="light"] .stora-theme-toggle-track,
body[data-theme="light"] .stora-theme-toggle-track,
body.theme-light .stora-theme-toggle-track,
.stora-theme-toggle-btn.is-light .stora-theme-toggle-track {
  background-color: #d9fdd3 !important;
  border-color: #25d366 !important;
}

.stora-theme-toggle-icon {
  font-size: 11px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.stora-theme-toggle-icon.icon-dark {
  color: #f3cf55;
}

.stora-theme-toggle-icon.icon-light {
  color: #f59e0b;
}

.stora-theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #005c4b);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
}

html[data-theme="light"] .stora-theme-toggle-thumb,
body[data-theme="light"] .stora-theme-toggle-thumb,
body.theme-light .stora-theme-toggle-thumb,
.stora-theme-toggle-btn.is-light .stora-theme-toggle-thumb {
  transform: translateX(26px) !important;
  background: linear-gradient(135deg, #008069, #25d366) !important;
}

.stora-theme-toggle-text {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: inherit;
}

/* --------------------------------------------------------------------------
   TOP NAVBAR LOGOUT BUTTON (Exact Match to Theme Switcher)
   -------------------------------------------------------------------------- */
.stora-logout-wrapper {
  display: inline-flex;
  align-items: center;
}

.stora-header-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--stora-bg-card-header, #182229);
  border: 1.5px solid var(--stora-border-light, #2a3942);
  border-radius: 9999px;
  padding: 4px 12px 4px 5px;
  cursor: pointer;
  color: var(--stora-text-primary, #ffffff);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  text-decoration: none !important;
  height: 36px;
  box-sizing: border-box;
}

html[data-theme="light"] .stora-header-logout-btn,
body[data-theme="light"] .stora-header-logout-btn,
body.theme-light .stora-header-logout-btn {
  background: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.stora-header-logout-btn:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px);
}

.stora-logout-icon-track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 12px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

html[data-theme="light"] .stora-logout-icon-track,
body[data-theme="light"] .stora-logout-icon-track,
body.theme-light .stora-logout-icon-track {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

.stora-header-logout-btn:hover .stora-logout-icon-track {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.stora-logout-text {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: inherit;
  padding-right: 4px;
}

@media (max-width: 575.98px) {
  .stora-theme-toggle-btn {
    padding: 4px 6px 4px 4px !important;
    gap: 0 !important;
  }
  .stora-theme-toggle-text {
    display: none !important;
  }
  .stora-header-logout-btn {
    padding: 4px 6px 4px 6px !important;
    gap: 0 !important;
  }
  .stora-logout-text {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   16. EXPLICIT HIGH-SPECIFICITY OVERRIDES FOR LIGHT & DARK MODES
   -------------------------------------------------------------------------- */
/* High Specificity Light Mode Overrides (Guarantees zero dark bleeding on light theme) */
html[data-theme="light"] body,
body[data-theme="light"],
body.theme-light {
  background-color: #efeae2 !important;
  color: #111b21 !important;
}

html[data-theme="light"] #content-wrapper,
html[data-theme="light"] .content-wrapper,
body[data-theme="light"] #content-wrapper,
body[data-theme="light"] .content-wrapper,
body.theme-light #content-wrapper,
body.theme-light .content-wrapper {
  background-color: #efeae2 !important;
  color: #111b21 !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .box,
html[data-theme="light"] .mil-card,
html[data-theme="light"] .stora-outline-card,
html[data-theme="light"] .form-container,
html[data-theme="light"] .custom-form-card,
html[data-theme="light"] .user-card,
html[data-theme="light"] .template-maker-card,
html[data-theme="light"] .user-table-card,
html[data-theme="light"] .filter-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .category-section-card,
body[data-theme="light"] .card,
body.theme-light .card {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
  box-shadow: 0 2px 10px rgba(11, 20, 26, 0.08) !important;
}

html[data-theme="light"] .card-header,
html[data-theme="light"] .panel-heading,
html[data-theme="light"] .box-header,
body[data-theme="light"] .card-header,
body.theme-light .card-header {
  background-color: #f0f2f5 !important;
  border-bottom: 1.5px solid #d1d7db !important;
  color: #008069 !important;
}

html[data-theme="light"] .card-body,
html[data-theme="light"] .panel-body,
html[data-theme="light"] .box-body,
body[data-theme="light"] .card-body,
body.theme-light .card-body {
  background-color: #ffffff !important;
  color: #111b21 !important;
}

html[data-theme="light"] .card-footer,
html[data-theme="light"] .panel-footer,
html[data-theme="light"] .box-footer,
body[data-theme="light"] .card-footer,
body.theme-light .card-footer {
  background-color: #f0f2f5 !important;
  border-top: 1.5px solid #e9edef !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .page-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .title,
html[data-theme="light"] .sheet-title,
html[data-theme="light"] .content-header h1,
body[data-theme="light"] h1,
body[data-theme="light"] .card-title,
body.theme-light h1,
body.theme-light .card-title {
  color: #008069 !important;
}

html[data-theme="light"] .main-header.navbar,
body[data-theme="light"] .main-header.navbar,
body.theme-light .main-header.navbar {
  background-color: #008069 !important;
  border-bottom: 1.5px solid #005c4b !important;
  color: #ffffff !important;
}

html[data-theme="light"] .main-sidebar,
html[data-theme="light"] .main-sidebar::before,
body[data-theme="light"] .main-sidebar,
body[data-theme="light"] .main-sidebar::before,
body.theme-light .main-sidebar,
body.theme-light .main-sidebar::before {
  background-color: #ffffff !important;
  border-right: 1.5px solid #d1d7db !important;
}

html[data-theme="light"] .main-sidebar .nav-link,
body[data-theme="light"] .main-sidebar .nav-link,
body.theme-light .main-sidebar .nav-link {
  color: #111b21 !important;
}

html[data-theme="light"] .main-sidebar .nav-link:hover,
body[data-theme="light"] .main-sidebar .nav-link:hover,
body.theme-light .main-sidebar .nav-link:hover {
  background-color: #e7f7ef !important;
  color: #008069 !important;
}

html[data-theme="light"] .main-sidebar .nav-link.active,
body[data-theme="light"] .main-sidebar .nav-link.active,
body.theme-light .main-sidebar .nav-link.active {
  background: #d9fdd3 !important;
  color: #005c4b !important;
  border: 1px solid #25d366 !important;
}

html[data-theme="light"] table,
html[data-theme="light"] .table,
html[data-theme="light"] table.dataTable,
html[data-theme="light"] .table-bordered,
body[data-theme="light"] table,
body[data-theme="light"] .table,
body.theme-light table,
body.theme-light .table {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] th,
html[data-theme="light"] table th,
html[data-theme="light"] .table th,
html[data-theme="light"] table.dataTable th,
html[data-theme="light"] .table thead th,
html[data-theme="light"] thead th,
body[data-theme="light"] th,
body[data-theme="light"] thead th,
body.theme-light thead th {
  background-color: #008069 !important;
  color: #ffffff !important;
  border-bottom: 2.5px solid #005c4b !important;
  border-right: 1px solid #006b57 !important;
}

html[data-theme="light"] td,
html[data-theme="light"] table td,
html[data-theme="light"] .table td,
html[data-theme="light"] table.dataTable td,
html[data-theme="light"] tbody td,
body[data-theme="light"] td,
body[data-theme="light"] table td,
body[data-theme="light"] .table td,
body.theme-light td,
body.theme-light .table td {
  background-color: #ffffff !important;
  color: #111b21 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] tbody tr:nth-child(odd) td,
html[data-theme="light"] table.dataTable tbody tr:nth-child(odd) td,
body[data-theme="light"] tbody tr:nth-child(odd) td,
body.theme-light tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
  color: #111b21 !important;
}

html[data-theme="light"] tbody tr:nth-child(even) td,
html[data-theme="light"] table.dataTable tbody tr:nth-child(even) td,
body[data-theme="light"] tbody tr:nth-child(even) td,
body.theme-light tbody tr:nth-child(even) td {
  background-color: #f8fafc !important;
  color: #111b21 !important;
}

html[data-theme="light"] tbody tr:hover td,
html[data-theme="light"] table.dataTable tbody tr:hover td,
body[data-theme="light"] tbody tr:hover td,
body.theme-light tbody tr:hover td {
  background-color: #e7f7ef !important;
  color: #111b21 !important;
}
html[data-theme="light"] tbody tr:hover td:first-child,
body[data-theme="light"] tbody tr:hover td:first-child,
body.theme-light tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #008069 !important;
}

/* Bootstrap utilities in Light Mode */
html[data-theme="light"] .bg-light,
body[data-theme="light"] .bg-light,
body.theme-light .bg-light {
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
}
html[data-theme="light"] .bg-white,
body[data-theme="light"] .bg-white,
body.theme-light .bg-white {
  background-color: #ffffff !important;
  color: #111b21 !important;
}
html[data-theme="light"] .text-dark,
body[data-theme="light"] .text-dark,
body.theme-light .text-dark {
  color: #111b21 !important;
}
html[data-theme="light"] .table-light,
body[data-theme="light"] .table-light,
body.theme-light .table-light,
html[data-theme="light"] .table-light th,
body[data-theme="light"] .table-light th,
body.theme-light .table-light th {
  background-color: #008069 !important;
  color: #ffffff !important;
  border-color: #005c4b !important;
}

/* Bootstrap utilities in Dark Mode */
html[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-light,
body.theme-dark .bg-light {
  background-color: var(--stora-bg-card, #111b21) !important;
  color: var(--stora-text-primary, #e9edef) !important;
}
html[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-white,
body.theme-dark .bg-white {
  background-color: var(--stora-bg-card, #111b21) !important;
  color: var(--stora-text-primary, #e9edef) !important;
}
html[data-theme="dark"] .text-dark,
body[data-theme="dark"] .text-dark,
body.theme-dark .text-dark {
  color: var(--stora-text-primary, #e9edef) !important;
}
html[data-theme="dark"] .table-light,
body[data-theme="dark"] .table-light,
body.theme-dark .table-light,
html[data-theme="dark"] .table-light th,
body[data-theme="dark"] .table-light th,
body.theme-dark .table-light th {
  background-color: var(--stora-table-th-bg, #182229) !important;
  color: var(--stora-table-th-text, #f3cf55) !important;
  border-color: var(--stora-border-main, #202c33) !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] textarea,
body[data-theme="light"] .form-control,
body[data-theme="light"] input,
body[data-theme="light"] textarea,
body.theme-light .form-control {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .sheet,
body[data-theme="light"] .modal-content,
body.theme-light .modal-content {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .sheet-header,
body[data-theme="light"] .modal-header,
body.theme-light .modal-header {
  background-color: #008069 !important;
  border-bottom: 1.5px solid #005c4b !important;
  color: #ffffff !important;
}
html[data-theme="light"] .modal-title,
html[data-theme="light"] .sheet-title,
body[data-theme="light"] .modal-title,
body.theme-light .modal-title {
  color: #ffffff !important;
}
html[data-theme="light"] .modal-header .btn-close,
html[data-theme="light"] .modal-header .close,
html[data-theme="light"] .sheet-header .x,
body[data-theme="light"] .modal-header .close,
body.theme-light .modal-header .close {
  color: #ffffff !important;
  filter: none !important;
  opacity: 0.9 !important;
}

html[data-theme="light"] #previewContent > div,
html[data-theme="light"] #preview_custom,
html[data-theme="light"] [id^="preview_"],
html[data-theme="light"] .preview-message-card,
body[data-theme="light"] #previewContent > div,
body.theme-light #previewContent > div {
  background-color: #d9fdd3 !important;
  border-color: #c7f1c1 !important;
  color: #111b21 !important;
}

html[data-theme="light"] #previewContent .preview-text,
html[data-theme="light"] .preview-message-card .preview-text,
body[data-theme="light"] .preview-text,
body.theme-light .preview-text {
  color: #111b21 !important;
}

html[data-theme="light"] .instruction-card,
body[data-theme="light"] .instruction-card,
body.theme-light .instruction-card {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .instruction-steps,
body[data-theme="light"] .instruction-steps,
body.theme-light .instruction-steps {
  color: #111b21 !important;
}

html[data-theme="light"] .instruction-steps strong,
body[data-theme="light"] .instruction-steps strong,
body.theme-light .instruction-steps strong {
  color: #008069 !important;
}

html[data-theme="light"] .debug-log,
body[data-theme="light"] .debug-log,
body.theme-light .debug-log {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
  color: #667781 !important;
}

html[data-theme="light"] .mil-user-banner,
body[data-theme="light"] .mil-user-banner,
body.theme-light .mil-user-banner {
  background-color: #f0f2f5 !important;
  border-color: #008069 !important;
  color: #111b21 !important;
}

html[data-theme="light"] .mil-user-banner-item,
body[data-theme="light"] .mil-user-banner-item,
body.theme-light .mil-user-banner-item {
  color: #111b21 !important;
}

/* Universal Tailwind Utility Overrides for Light Mode */
html[data-theme="light"] .bg-\[\#111b21\],
body[data-theme="light"] .bg-\[\#111b21\],
body.theme-light .bg-\[\#111b21\],
[data-theme="light"] .bg-\[\#111b21\] {
  background-color: var(--stora-bg-card, #ffffff) !important;
  color: var(--stora-text-primary, #111b21) !important;
}

html[data-theme="light"] .bg-\[\#182229\],
body[data-theme="light"] .bg-\[\#182229\],
body.theme-light .bg-\[\#182229\],
[data-theme="light"] .bg-\[\#182229\] {
  background-color: var(--stora-bg-card-header, #f0f2f5) !important;
  color: var(--stora-text-primary, #111b21) !important;
}

html[data-theme="light"] .bg-\[\#202c33\],
body[data-theme="light"] .bg-\[\#202c33\],
body.theme-light .bg-\[\#202c33\],
[data-theme="light"] .bg-\[\#202c33\] {
  background-color: var(--stora-btn-dark-bg, #f0f2f5) !important;
  color: var(--stora-btn-dark-text, #111b21) !important;
}

html[data-theme="light"] .border-\[\#2a3942\],
html[data-theme="light"] .border-\[\#202c33\],
html[data-theme="light"] .border-\[\#3b4a54\],
body[data-theme="light"] .border-\[\#2a3942\],
body[data-theme="light"] .border-\[\#202c33\],
body[data-theme="light"] .border-\[\#3b4a54\],
body.theme-light .border-\[\#2a3942\],
body.theme-light .border-\[\#202c33\],
body.theme-light .border-\[\#3b4a54\],
[data-theme="light"] .border-\[\#2a3942\],
[data-theme="light"] .border-\[\#202c33\],
[data-theme="light"] .border-\[\#3b4a54\] {
  border-color: var(--stora-border-light, #d1d7db) !important;
}

html[data-theme="light"] .text-\[\#f3cf55\],
body[data-theme="light"] .text-\[\#f3cf55\],
body.theme-light .text-\[\#f3cf55\],
[data-theme="light"] .text-\[\#f3cf55\] {
  color: var(--stora-text-heading, #008069) !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-300,
body[data-theme="light"] .text-slate-400 {
  color: var(--stora-text-secondary, #667781) !important;
}

/* Secondary Buttons & Custom Badges in Light Mode */
html[data-theme="light"] .btn-wa-dark,
body[data-theme="light"] .btn-wa-dark,
body.theme-light .btn-wa-dark {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .btn-wa-dark:hover,
body[data-theme="light"] .btn-wa-dark:hover,
body.theme-light .btn-wa-dark:hover {
  background-color: #e7f7ef !important;
  border-color: #008069 !important;
  color: #008069 !important;
}

html[data-theme="light"] #userControlContainer,
html[data-theme="light"] #masterControlContainer,
body[data-theme="light"] #userControlContainer,
body[data-theme="light"] #masterControlContainer,
body.theme-light #userControlContainer,
body.theme-light #masterControlContainer {
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
}

html[data-theme="light"] .mil-bulk-bar,
body[data-theme="light"] .mil-bulk-bar,
body.theme-light .mil-bulk-bar {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .mil-table-wrapper,
body[data-theme="light"] .mil-table-wrapper,
body.theme-light .mil-table-wrapper {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] .mil-table,
body[data-theme="light"] .mil-table,
body.theme-light .mil-table {
  background-color: #ffffff !important;
  color: #111b21 !important;
}

html[data-theme="light"] .mil-table thead th,
body[data-theme="light"] .mil-table thead th,
body.theme-light .mil-table thead th {
  background-color: #008069 !important;
  color: #ffffff !important;
  border-color: #005c4b !important;
}

html[data-theme="light"] .mil-table tbody td,
body[data-theme="light"] .mil-table tbody td,
body.theme-light .mil-table tbody td {
  background-color: #ffffff !important;
  color: #111b21 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .mil-table tbody tr:hover td,
body[data-theme="light"] .mil-table tbody tr:hover td,
body.theme-light .mil-table tbody tr:hover td {
  background-color: #e7f7ef !important;
}

html[data-theme="light"] .mil-modal-dialog,
body[data-theme="light"] .mil-modal-dialog,
body.theme-light .mil-modal-dialog {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .mil-modal-header,
html[data-theme="light"] .mil-modal-footer,
body[data-theme="light"] .mil-modal-header,
body[data-theme="light"] .mil-modal-footer,
body.theme-light .mil-modal-header,
body.theme-light .mil-modal-footer {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
  color: #008069 !important;
}

html[data-theme="light"] .mil-modal-body,
body[data-theme="light"] .mil-modal-body,
body.theme-light .mil-modal-body {
  background-color: #ffffff !important;
  color: #111b21 !important;
}

html[data-theme="light"] .sheet,
body[data-theme="light"] .sheet,
body.theme-light .sheet {
  background-color: #ffffff !important;
  border-color: #d1d7db !important;
  color: #111b21 !important;
}

html[data-theme="light"] .sheet-header,
html[data-theme="light"] .sheet-footer,
body[data-theme="light"] .sheet-header,
body[data-theme="light"] .sheet-footer,
body.theme-light .sheet-header,
body.theme-light .sheet-footer {
  background-color: #f0f2f5 !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] .sheet-body,
body[data-theme="light"] .sheet-body,
body.theme-light .sheet-body {
  background-color: #ffffff !important;
  color: #111b21 !important;
}

html[data-theme="light"] .sheet-title,
body[data-theme="light"] .sheet-title,
body.theme-light .sheet-title {
  color: #008069 !important;
}

html[data-theme="light"] .sheet-body input,
html[data-theme="light"] .sheet-body select,
html[data-theme="light"] .sheet-body textarea,
body[data-theme="light"] .sheet-body input,
body[data-theme="light"] .sheet-body select,
body[data-theme="light"] .sheet-body textarea,
body.theme-light .sheet-body input,
body.theme-light .sheet-body select,
body.theme-light .sheet-body textarea {
  background-color: #ffffff !important;
  color: #111b21 !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] .search,
html[data-theme="light"] .sort-select,
html[data-theme="light"] .per-page-select,
body[data-theme="light"] .search,
body[data-theme="light"] .sort-select,
body[data-theme="light"] .per-page-select,
body.theme-light .search,
body.theme-light .sort-select,
body.theme-light .per-page-select {
  background-color: #ffffff !important;
  color: #111b21 !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] .btn-reset-sort,
body[data-theme="light"] .btn-reset-sort,
body.theme-light .btn-reset-sort {
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] .success-banner,
body[data-theme="light"] .success-banner,
body.theme-light .success-banner {
  background-color: #d9fdd3 !important;
  color: #005c4b !important;
  border-color: #25d366 !important;
}

html[data-theme="light"] #gateway-status,
body[data-theme="light"] #gateway-status,
body.theme-light #gateway-status {
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
  border-color: #d1d7db !important;
}

html[data-theme="light"] div[style*="Sender Mobile:"],
body[data-theme="light"] div[style*="Sender Mobile:"],
body.theme-light div[style*="Sender Mobile:"] {
  background-color: #f0f2f5 !important;
  color: #111b21 !important;
  border-color: #d1d7db !important;
}

/* ==========================================================================
   17. UNIVERSAL AUTHENTIC WHATSAPP OUTLINE SYSTEM (ENTERPRISE GRADE)
   - Guaranteed 1.5px Authentic WhatsApp Outlines across all containers & cards
   - Active focus rings: #25d366 / #f3cf55 (Dark), #008069 (Light)
   - Border radius standardization: 12px containers, 8px inputs/controls
   - Overrides focus:border-transparent to preserve border outline
   ========================================================================== */

/* Universal Outline Enforcement for Cards, Panels, and Containers */
.card,
.stora-card,
.panel,
.stora-panel,
.box,
.stora-box,
.sheet,
.stora-modal,
.modal-content,
div.rounded-xl.border,
div.rounded-2xl.border,
div.border-\[\#2a3942\],
div.border-\[\#202c33\],
div.border-\[\#334456\],
div.border-slate-700,
div.border-gray-700,
div.border-gray-800 {
  border-width: 1.5px !important;
  border-style: solid !important;
  border-color: var(--stora-border-light) !important;
}

/* Card Header Separators */
.card-header,
.stora-card-header,
.sheet-header {
  border-bottom: 1.5px solid var(--stora-border-light) !important;
}

/* Universal Input, Textarea, and Select WhatsApp Outlines */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control,
.stora-input {
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm, 8px) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

/* Focus State: Authentic WhatsApp Green/Emerald Ring (Never transparent!) */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.stora-input:focus,
.focus\:border-transparent:focus,
.focus\:border-\[\#25d366\]:focus,
.focus\:ring-2:focus,
.focus\:ring-1:focus {
  outline: none !important;
  border-color: var(--stora-border-focus, #25d366) !important;
  box-shadow: 0 0 0 1.5px var(--stora-border-focus, #25d366), 0 0 8px rgba(37, 211, 102, 0.22) !important;
}

/* Specific Focus glow in Light Mode */
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="password"]:focus,
html[data-theme="light"] input[type="email"]:focus,
html[data-theme="light"] input[type="number"]:focus,
html[data-theme="light"] input[type="date"]:focus,
html[data-theme="light"] input[type="time"]:focus,
html[data-theme="light"] input[type="datetime-local"]:focus,
html[data-theme="light"] input[type="search"]:focus,
html[data-theme="light"] input[type="tel"]:focus,
html[data-theme="light"] input[type="url"]:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .stora-input:focus,
html[data-theme="light"] .focus\:border-transparent:focus,
body[data-theme="light"] input:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] select:focus,
body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
  border-color: var(--stora-border-focus, #008069) !important;
  box-shadow: 0 0 0 1.5px var(--stora-border-focus, #008069), 0 0 8px rgba(0, 128, 105, 0.22) !important;
}

/* Universal Table Outlines */
table,
.table,
.data-table,
.table-responsive,
.overflow-x-auto.rounded-xl,
.overflow-x-auto.rounded-2xl {
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-md, 12px) !important;
}

th {
  border-bottom: 1.5px solid var(--stora-border-light) !important;
}

td {
  border-bottom: 1px solid var(--stora-border-main) !important;
}

/* Universal Search Box Outlines */
#historyTableSearch,
#groupsSearchInput,
#smartListSearchInput,
#contactSearch,
#templateSearch,
input[type="search"] {
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm, 8px) !important;
}

/* Dropdown and Combobox Menus */
.dropdown-menu,
.stora-combo-dropdown,
.stora-dropdown-list {
  border: 1.5px solid var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm, 8px) !important;
}

/* Secondary & Outline Action Buttons */
.btn-outline,
.btn-secondary,
.btn-dark,
button.border,
a.border {
  border-width: 1.5px !important;
  border-style: solid !important;
  border-color: var(--stora-border-light) !important;
  border-radius: var(--stora-radius-sm, 8px) !important;
}

/* ==========================================================================
   18. STRICT DUAL-THEME OUTLINE & SURFACE ISOLATION (LIGHT MODE ENFORCEMENT)
   Prevents any rogue dark hex borders or backgrounds bleeding into Light Mode
   ========================================================================== */
html[data-theme="light"] .border-\[\#2a3942\],
html[data-theme="light"] .border-\[\#202c33\],
html[data-theme="light"] .border-\[\#334456\],
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .border-gray-800,
body[data-theme="light"] .border-\[\#2a3942\],
body[data-theme="light"] .border-\[\#202c33\],
body[data-theme="light"] .border-\[\#334456\],
body[data-theme="light"] .border-slate-700,
body[data-theme="light"] .border-gray-700,
body[data-theme="light"] .border-gray-800,
body.theme-light .border-\[\#2a3942\],
body.theme-light .border-\[\#202c33\],
body.theme-light .border-\[\#334456\],
body.theme-light .border-slate-700,
body.theme-light .border-gray-700,
body.theme-light .border-gray-800 {
  border-color: var(--stora-border-light, #d1d7db) !important;
}

html[data-theme="light"] .bg-\[\#111b21\],
html[data-theme="light"] .bg-\[\#182229\],
html[data-theme="light"] .bg-\[\#0b141a\],
body[data-theme="light"] .bg-\[\#111b21\],
body[data-theme="light"] .bg-\[\#182229\],
body[data-theme="light"] .bg-\[\#0b141a\],
body.theme-light .bg-\[\#111b21\],
body.theme-light .bg-\[\#182229\],
body.theme-light .bg-\[\#0b141a\] {
  background-color: var(--stora-bg-card, #ffffff) !important;
  color: var(--stora-text-primary, #111b21) !important;
}

/* ==========================================================================
   19. UNIVERSAL MOBILE SCREEN-FIT & DATA TABLE MAXIMIZATION SYSTEM (< 768px)
   Eliminates wasted horizontal screen margins and card side gaps,
   expands tables to 94%–98% of mobile viewport with 4–6px minimal gutters,
   enforces compact cell padding, and enables smooth horizontal touch scroll.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Page & Wrapper Expansion: Zero wasted outer margins */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #content-wrapper,
  .content-wrapper,
  body #content-wrapper,
  body .content-wrapper,
  body:not(.sidebar-collapse) #content-wrapper,
  body:not(.sidebar-collapse) .content-wrapper,
  body.sidebar-collapse #content-wrapper,
  body.sidebar-collapse .content-wrapper,
  body.sidebar-open #content-wrapper,
  body.sidebar-open .content-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
  }

  /* Bootstrap Container overrides */
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid gutters minimization: Eliminate 15px/24px default gutters */
  .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }

  .row > [class*="col-"],
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col, .col-auto,
  [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }

  /* Outer Card Expansion: Occupy 96%–98% available viewport width */
  .card,
  .mil-card,
  .user-table-card,
  .filter-card,
  .chart-card,
  .stora-outline-card {
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card-header {
    padding: 9px 10px !important;
    font-size: 0.95rem !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* Card Body Minimal Padding: Table expands to maximum width with 4-6px symmetric gutters */
  .card-body {
    padding: 8px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Table Responsive Wrappers: Edge-to-edge expansion with smooth touch scrolling */
  .table-responsive,
  .mil-table-wrapper,
  .table-wrap,
  .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Compact Data Table Cells: High-efficiency space usage */
  .table,
  table.dataTable,
  .table-bordered,
  table {
    margin-bottom: 0 !important;
    font-size: 13px !important;
    width: 100% !important;
  }

  .table th,
  .table td,
  table.dataTable th,
  table.dataTable td,
  table th,
  table td,
  table thead th,
  table tbody td,
  .mil-table th,
  .mil-table td,
  .mil-table thead th,
  .mil-table tbody td,
  #submissionsTable th,
  #submissionsTable td,
  #submissionsTable thead th,
  #submissionsTable tbody td,
  #groupLinksTable th,
  #groupLinksTable td,
  #groupLinksTable thead th,
  #groupLinksTable tbody td {
    padding: 7px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
  }

  .table thead th,
  thead th,
  table.dataTable thead th,
  .table th,
  .mil-table thead th,
  #submissionsTable thead th,
  #groupLinksTable thead th {
    padding: 8px 6px !important;
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
  }

  /* Compact Buttons, Badges, and Controls inside Tables */
  .table .btn,
  .table .btn-sm,
  table .btn,
  table .btn-sm {
    padding: 4px 7px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
  }

  .table .badge,
  table .badge {
    padding: 3px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
  }

  .table .btn-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }

  /* Search & Controls Bars on Mobile */
  .search-box,
  .search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Modals on Mobile: Occupy 96%–98% screen width with 4px gutters */
  .modal-dialog {
    margin: 8px 4px !important;
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
  }

  .modal-content {
    border-radius: 12px !important;
    width: 100% !important;
  }

  .modal-body {
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  .modal-header,
  .modal-footer {
    padding: 10px 12px !important;
  }
}

/* Stora Toggle Switch Component */
.stora-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}
.stora-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.stora-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2a3942;
  transition: background-color 0.2s ease;
  border-radius: 20px;
}
.stora-toggle .slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: transform 0.2s ease;
  border-radius: 50%;
}
.stora-toggle input:checked + .slider {
  background-color: #25d366;
}
.stora-toggle input:checked + .slider::before {
  transform: translateX(16px);
}

/* Number input without browser spinner overlap for clean alignment */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ==========================================================================
   Campaign Sending Delay & Pause Setting Panel Horizontal Alignment
   ========================================================================== */
.stora-delay-pause-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .stora-delay-pause-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .stora-delay-col-left {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-right: 1.5px solid var(--stora-border-light, #2a3942) !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
  }
  .stora-delay-col-right {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }
}

@media (max-width: 767.98px) {
  .stora-delay-col-left {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    border-bottom: 1.5px solid var(--stora-border-light, #2a3942) !important;
    border-right: none !important;
    border-top: none !important;
    border-left: none !important;
  }
  .stora-delay-col-right {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }
}

.stora-delay-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px !important;
  height: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.stora-delay-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.stora-delay-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  padding: 2px 10px !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  background-color: #111b21 !important;
  color: #f3cf55 !important;
  border: 1px solid var(--stora-border-light, #2a3942) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Light Mode Overrides for Delay & Pause Panel */
html[data-theme="light"] .stora-delay-title,
body[data-theme="light"] .stora-delay-title,
body.theme-light .stora-delay-title {
  color: #111b21 !important;
}

html[data-theme="light"] .stora-delay-badge,
body[data-theme="light"] .stora-delay-badge,
body.theme-light .stora-delay-badge {
  background-color: #f0f2f5 !important;
  color: #008069 !important;
  border-color: #d1d7db !important;
}