:root {
      --sw: 228px;
      --sw-col: 60px;

      /* Palette */
      --navy: #0b1426;
      --navy-lt: #f1f5f9;
      --blue: #2563eb;
      --blue-lt: #dbeafe;
      --sky: #eef2ff;
      --amber: #d97706;
      --gold: #f59e0b;
      --surface: #f1f5f9;

      /* Sidebar (light) */
      --sidebar-bg: #ffffff;
      --sidebar-border: #e8eaed;
      --s-text: #0f172a;
      --s-text-dim: #4b5563;
      --s-text-dimmer: #9ca3af;
      --s-hover: #f3f4f6;
      --s-active: #e8edf5;
      --s-icon: #9ca3af;
      --s-hover-text: #0f172a;
      --s-active-text: #0f172a;

      /* Main content (light) */
      --body-bg: var(--surface);
      --border: #e2e8f0;
      --border-lt: #f1f5f9;
      --t1: #0f172a;
      --t2: #475569;
      --t3: #94a3b8;
      --card-bg: #ffffff;
      --nav-hover: #f1f5f9;
      --nav-active: #e8edf5;
      --green: #059669;
      --red: #dc2626;

      --cr: 12px;
      --transition: 0.22s ease;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
      --qa-shadow: 0 20px 60px rgba(0,0,0,.12);
    }
    [data-bs-theme="dark"] {
      --body-bg: #0a1020;
      --bs-body-bg: #0a1020;
      --border: rgba(255,255,255,0.1);
      --border-lt: rgba(255,255,255,0.05);
      --t1: #e2e8f0;
      --t2: #94a3b8;
      --t3: #64748b;
      --card-bg: #141d32;
      --bs-card-bg: #141d32;
      --nav-hover: rgba(255,255,255,0.05);
      --surface: #141d32;
      --nav-active: rgba(37,99,235,0.18);
      --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
      --qa-shadow: 0 20px 60px rgba(0,0,0,.35);
      --navy-lt: #111c33;
      --sidebar-bg: #060c1a;
      --sidebar-border: rgba(255,255,255,0.07);
      --s-text: #e2e8f0;
      --s-text-dim: #94a3b8;
      --s-text-dimmer: #64748b;
      --s-hover: rgba(37,99,235,0.13);
      --s-active: rgba(37,99,235,0.2);
      --s-icon: #64748b;
      --s-hover-text: #ffffff;
      --s-active-text: #ffffff;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--body-bg);
      color: var(--t1);
      font-size: 13px;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }

    /* ── Sidebar ── */
    .sidebar {
      width: var(--sw);
      position: fixed; top: 0; left: 0; bottom: 0;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      display: flex; flex-direction: column;
      overflow: hidden;
      z-index: 300;
      transition: width var(--transition);
    }
    .sidebar.collapsed { width: var(--sw-col); }
    .sidebar-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .sidebar-scroll::-webkit-scrollbar { width: 3px; }
    .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

    /* Logo */
    .s-logo {
      display: flex; align-items: center; gap: 8px;
      padding: 15px 16px;
      border-bottom: 1px solid var(--sidebar-border);
      font-weight: 700; font-size: 15px; letter-spacing: -.3px;
      flex-shrink: 0;
      white-space: nowrap;
      min-height: 52px;
      color: var(--s-text);
    }
    .s-logo-icon {
      width: 27px; height: 27px; border-radius: 7px;
      background: var(--blue); color: #fff; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 800;
    }
    .s-logo-text { transition: opacity var(--transition), width var(--transition); white-space: nowrap; overflow: hidden; }
    .sidebar.collapsed .s-logo-text { opacity: 0; width: 0; }

    /* Toggle */
    .s-toggle {
      background: none; border: none;
      color: var(--s-text-dim); font-size: 16px;
      cursor: pointer; padding: 4px 6px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 6px; transition: background .12s; flex-shrink: 0;
    }
    .s-toggle:hover { background: var(--s-hover); color: var(--s-hover-text); }
    .s-footer-toggle { font-size: 15px; padding: 4px; }
    .sidebar.collapsed .s-footer-toggle { opacity: 1; width: auto; overflow: visible; }

    /* Search */
    .s-search {
      margin: 10px 10px 6px;
      background: var(--navy-lt);
      border: 1px solid var(--sidebar-border);
      border-radius: 8px; padding: 6px 10px;
      display: flex; align-items: center; gap: 7px;
      color: var(--s-text-dim); font-size: 12.5px; cursor: pointer;
      white-space: nowrap; overflow: hidden;
    }
    .s-search i { flex-shrink: 0; font-size: 12px; }
    .s-search-text { flex: 1; transition: opacity var(--transition); overflow: hidden; }
    .s-search .kbd { font-size: 10px; color: var(--s-text-dimmer); border: 1px solid var(--sidebar-border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
    .sidebar.collapsed .s-search-text,
    .sidebar.collapsed .kbd { opacity: 0; width: 0; overflow: hidden; }

    /* Section labels */
    .s-label {
      font-size: 10px; font-weight: 600; color: var(--s-text-dimmer);
      letter-spacing: .07em; text-transform: uppercase;
      padding: 12px 16px 4px;
      white-space: nowrap; overflow: hidden;
      transition: opacity var(--transition);
    }
    .sidebar.collapsed .s-label { opacity: 0; }

    /* Nav items */
    .s-item {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 10px 7px 14px;
      margin: 1px 6px; border-radius: 8px;
      color: var(--s-text); font-size: 12.5px; font-weight: 450;
      text-decoration: none; cursor: pointer;
      transition: background .12s, color .12s;
      user-select: none; white-space: nowrap;
    }
    .s-item:hover { background: var(--s-hover); color: var(--s-hover-text); }
    .s-item.active { background: var(--s-active); color: var(--s-active-text); font-weight: 600; }
    .s-icon { font-size: 15px; color: var(--s-icon); width: 18px; text-align: center; flex-shrink: 0; transition: color .12s; }
    .s-item.active .s-icon { color: var(--blue); }
    .s-item:hover .s-icon { color: var(--s-text-dim); }
    .s-item-label { transition: opacity var(--transition); overflow: hidden; flex: 1; }
    .sidebar.collapsed .s-item-label { opacity: 0; width: 0; }

    /* Chevron */
    .s-chev {
      margin-left: auto; font-size: 11px; color: var(--s-text-dimmer);
      transition: transform .22s, opacity var(--transition);
      flex-shrink: 0;
    }
    .s-item.open .s-chev { transform: rotate(180deg); }
    .sidebar.collapsed .s-chev { opacity: 0; width: 0; overflow: hidden; }

    /* Sub-menus */
    .s-sub {
      overflow: hidden;
      max-height: 0;
      transition: max-height .25s ease;
      padding-left: 38px;
    }
    .s-sub.open { max-height: 420px; }
    .sidebar.collapsed .s-sub { max-height: 0 !important; }
    .s-sub-label {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .4px; color: var(--t3);
      padding: 10px 14px 2px; pointer-events: none;
    }
    .s-sub a {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px; margin: 1px 6px; border-radius: 6px;
      color: var(--s-text-dim); font-size: 12px; text-decoration: none;
      transition: background .12s, color .12s;
      white-space: nowrap;
    }
    .s-sub a::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--s-text-dimmer); flex-shrink: 0;
    }
    .s-sub a:hover { background: var(--s-hover); color: var(--s-hover-text); }
    .s-sub a:hover::before { background: var(--s-hover-text); }
    .s-sub a.sub-active { color: var(--s-hover-text); font-weight: 600; }
    .s-sub a.sub-active::before { background: var(--blue); }

    /* Footer (user card) */
    .s-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--sidebar-border);
      display: flex; align-items: center; gap: 9px;
      flex-shrink: 0; white-space: nowrap;
      cursor: pointer; position: relative;
    }
    .s-footer-text { flex: 1; min-width: 0; transition: opacity var(--transition), width var(--transition); color: var(--s-text); }
    .sidebar.collapsed .s-footer-text { opacity: 0; width: 0; padding: 0; margin: 0; overflow: hidden; flex: 0; }
    .s-footer-icon { transition: opacity var(--transition); color: var(--s-text-dimmer) !important; }
    .sidebar.collapsed .s-footer-icon { opacity: 0; width: 0; overflow: hidden; }
    .sidebar.collapsed .s-footer { justify-content: center; padding: 6px 0; gap: 0; pointer-events: none; }
    .sidebar.collapsed .s-footer-toggle { pointer-events: auto; }
    .sidebar.collapsed .av { opacity: 0; width: 0; overflow: hidden; margin: 0; }

    /* User dropdown */
    .s-user-dropdown {
      position: absolute;
      bottom: 100%; left: 0; right: 0;
      background: var(--navy-lt);
      border: 1px solid var(--sidebar-border);
      border-radius: 10px;
      box-shadow: 0 -4px 20px rgba(0,0,0,.25);
      padding: 6px;
      display: none;
      z-index: 50;
      margin-bottom: 4px;
    }
    .s-user-dropdown.open { display: block; }
    .s-user-dropdown a {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 6px;
      color: var(--s-text-dim); font-size: 12px; font-weight: 450;
      text-decoration: none; transition: background .12s;
    }
    .s-user-dropdown a:hover { background: var(--s-hover); color: var(--s-hover-text); }
    .s-user-dropdown a i { font-size: 14px; color: var(--s-icon); width: 16px; }
    .s-user-dropdown .divider { height: 1px; background: var(--sidebar-border); margin: 4px 8px; }

    /* Flyout */
    .s-flyout {
      position: fixed;
      left: var(--sw-col);
      width: 210px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 4px 24px rgba(0,0,0,.12);
      padding: 6px;
      display: none;
      z-index: 500;
    }
    .s-flyout.open { display: block; }
    .s-flyout .flyout-header {
      padding: 7px 10px 6px;
      font-weight: 600;
      font-size: 12.5px;
      color: var(--t1);
      border-bottom: 1px solid var(--border-lt);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .s-flyout .flyout-header .s-icon { color: var(--blue); }
    .s-flyout .flyout-link {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; border-radius: 6px;
      color: var(--t2); font-size: 12px;
      text-decoration: none; transition: background .12s;
      white-space: nowrap;
    }
    .s-flyout .flyout-link:hover { background: var(--nav-hover); color: var(--t1); }

    /* Avatar */
    .av {
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: 700; color: #fff;
      flex-shrink: 0; position: relative;
    }
    .av::after {
      content: ''; width: 8px; height: 8px;
      background: var(--green); border: 2px solid var(--sidebar-bg);
      border-radius: 50%; position: absolute; bottom: 0; right: 0;
    }

    /* ── Main content area ── */
    .main {
      margin-left: var(--sw);
      height: 100vh;
      overflow-y: auto;
      transition: margin-left var(--transition);
      background: var(--body-bg);
    }
    .main.expanded { margin-left: var(--sw-col); }
    .main::-webkit-scrollbar { width: 4px; }
    .main::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

    /* Topbar */
    .topbar {
      height: 50px; background: var(--card-bg);
      border-bottom: 1px solid var(--border);
      padding: 0 22px;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 100; flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }
    .breadcrumb-bar { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t3); }
    .breadcrumb-bar .cur { color: var(--t1); font-weight: 600; }
    .tb-right { display: flex; align-items: center; gap: 8px; }
    .ib {
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--card-bg);
      display: flex; align-items: center; justify-content: center;
      color: var(--t2); cursor: pointer; font-size: 14px;
    }
    .ib:hover { background: var(--nav-hover); color: var(--blue); border-color: var(--blue); }

    /* ── Quick Actions (Mega Menu) ── */
    .qa-wrap { position: relative; margin-right: 2px; }
    .qa-btn {
      display: flex; align-items: center; gap: 7px;
      height: 34px; padding: 0 14px;
      border: none; border-radius: 10px;
      background: linear-gradient(135deg, var(--blue), #4f46e5);
      color: #fff; font-size: 12.5px; font-weight: 500;
      cursor: pointer; transition: opacity .2s, box-shadow .2s, transform .2s;
      box-shadow: 0 2px 8px rgba(79,70,229,.25);
    }
    .qa-btn:hover { opacity: .92; box-shadow: 0 4px 14px rgba(79,70,229,.35); transform: translateY(-1px); }
    .qa-btn:active { transform: translateY(0); }
    .qa-btn svg { flex-shrink: 0; }

    .qa-mega {
      position: absolute; top: calc(100% + 8px); right: 0;
      width: 880px; background: var(--card-bg); border-radius: 16px;
      border: 1px solid var(--border); box-shadow: var(--qa-shadow);
      opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97);
      transition: opacity .2s, transform .2s, visibility .2s;
      transform-origin: top right; z-index: 1050;
      padding: 0; margin: 0; font-size: inherit;
    }
    .qa-mega.show, .dropdown.show .qa-mega,
    .qa-mega.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

    .qa-mega::before {
      content: ''; position: absolute; top: -6px;
      left: calc(100% - 72px);
      width: 12px; height: 12px; background: var(--card-bg);
      border: 1px solid var(--border);
      transform: rotate(45deg); z-index: -1;
      border-right: none; border-bottom: none;
    }

    .qa-mega-cols {
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 0;
    }
    .qa-mega-col {
      padding: 20px 0 16px;
    }
    .qa-mega-col + .qa-mega-col {
      border-left: 1px solid var(--border);
    }
    .qa-mega-title {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .7px; color: var(--t3); padding: 0 18px; margin-bottom: 8px;
    }
    .qa-mega-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 18px; text-decoration: none;
      transition: background .15s; position: relative;
    }
    .qa-mega-item:hover { background: var(--nav-hover); }
    .qa-mega-item:hover .qa-mega-label { color: var(--blue); }
    .qa-mega-icon {
      width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .qa-mega-icon svg { width: 17px; height: 17px; }
    .qa-mega-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .qa-mega-label {
      font-size: 13px; font-weight: 500; color: var(--t1);
      line-height: 1.3; transition: color .15s;
    }
    .qa-mega-desc {
      font-size: 11px; color: var(--t3);
      line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Track Shipment (Mega Menu) ── */
    .tr-wrap { position: relative; margin-right: 2px; }
    .tr-btn {
      display: flex; align-items: center; gap: 6px;
      height: 34px; padding: 0 12px;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--card-bg); color: var(--t2); font-size: 12.5px; font-weight: 500;
      cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s;
    }
    .tr-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
    .tr-btn svg { flex-shrink: 0; }

    .rc-btn {
      display: flex; align-items: center; gap: 6px;
      height: 34px; padding: 0 12px;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--card-bg); color: var(--t2); font-size: 12.5px; font-weight: 500;
      cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s;
    }
    .rc-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
    .rc-btn svg { flex-shrink: 0; }

    .tr-mega {
      position: absolute; top: calc(100% + 8px); right: 0;
      width: 400px; background: var(--card-bg); border-radius: 16px;
      border: 1px solid var(--border); box-shadow: var(--qa-shadow);
      opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97);
      transition: opacity .2s, transform .2s, visibility .2s;
      transform-origin: top right; z-index: 1050;
      padding: 0; margin: 0; font-size: inherit;
    }
    .tr-mega.show, .dropdown.show .tr-mega,
    .tr-mega.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

    .tr-mega::before {
      content: ''; position: absolute; top: -6px;
      left: calc(100% - 45px);
      width: 12px; height: 12px; background: var(--card-bg);
      border: 1px solid var(--border);
      transform: rotate(45deg); z-index: -1;
      border-right: none; border-bottom: none;
    }

    .tr-header {
      display: flex; align-items: center; gap: 12px;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
    }
    .tr-header svg { color: var(--blue); flex-shrink: 0; }
    .tr-h-title { font-size: 14px; font-weight: 600; color: var(--t1); }
    .tr-h-sub { font-size: 11.5px; color: var(--t3); margin-top: 1px; }

    .tr-body { padding: 16px 20px 14px; }
    .tr-input-group {
      display: flex; gap: 8px;
    }
    .tr-input {
      flex: 1; height: 40px; padding: 0 14px;
      border: 1.5px solid var(--border); border-radius: 10px;
      background: var(--body-bg); color: var(--t1); font-size: 13px;
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .tr-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .tr-input::placeholder { color: var(--t3); font-size: 12.5px; }
    .tr-go-btn {
      height: 40px; padding: 0 20px; border: none; border-radius: 10px;
      background: linear-gradient(135deg, var(--blue), #4f46e5);
      color: #fff; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: opacity .2s, box-shadow .2s;
      white-space: nowrap; box-shadow: 0 2px 8px rgba(79,70,229,.25);
    }
    .tr-go-btn:hover { opacity: .92; box-shadow: 0 4px 14px rgba(79,70,229,.35); }
    .tr-go-btn:active { opacity: 1; }

    .card-base { background: var(--card-bg); border-radius: var(--cr); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

    /* Stat cards */
    .stat-card { padding: 16px 18px; }
    .stat-lbl {
      font-size: 12px; color: var(--t2); font-weight: 500;
      display: flex; align-items: center; justify-content: space-between;
    }
    .stat-lbl i { color: var(--t3); font-size: 14px; }
    .stat-val { font-size: 27px; font-weight: 700; letter-spacing: -.5px; margin: 7px 0 3px; color: var(--navy); }
    [data-bs-theme="dark"] .stat-val { color: var(--t1); }
    .stat-trend { font-size: 11.5px; font-weight: 600; }
    .up { color: var(--green); }
    .dn { color: var(--red); }
    .spark-wrap { height: 48px; margin-top: 6px; }

    /* ── Operational Dashboard ── */
    .op-stat { padding: 14px 18px; display: flex; align-items: center; gap: 14px; }
    .op-stat-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .op-stat-body { display: flex; flex-direction: column; }
    .op-stat-num { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--t1); line-height: 1.2; }
    .op-stat-lbl { font-size: 12px; color: var(--t3); font-weight: 500; }

    .op-info-card { padding: 16px 18px; }
    .op-info-head { font-size: 13px; font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
    .op-info-stats { display: flex; gap: 16px; margin-bottom: 12px; }
    .op-info-stat { background: var(--surface); border-radius: 8px; padding: 8px 14px; flex: 1; }
    .op-info-stat .num { font-size: 20px; font-weight: 700; color: var(--t1); }
    .op-info-stat .lbl { font-size: 11px; color: var(--t3); font-weight: 500; margin-top: 1px; }

    .op-mgmt { display: flex; flex-direction: column; height: 100%; }
    .op-mgmt-head {
      padding: 13px 16px; font-size: 13px; font-weight: 600; color: var(--t1);
      border-bottom: 1px solid var(--border-lt); display: flex; align-items: center; gap: 7px;
    }
    .op-mgmt-body {
      padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start;
    }
    .op-mgmt-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 500;
      background: var(--surface); color: var(--t2); text-decoration: none;
      border: 1px solid transparent; transition: all .15s;
    }
    .op-mgmt-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--sky); text-decoration: none; }
    .op-mgmt-btn i { font-size: 12px; }

    /* ── Quick Management Sidebar ── */
    .op-nav { padding: 0; }
    .op-nav-group + .op-nav-group { border-top: 1px solid var(--border-lt); }
    .op-nav-head {
      padding: 10px 14px 4px;
      font-size: 10.5px; font-weight: 700; color: var(--t3);
      text-transform: uppercase; letter-spacing: .4px;
      display: flex; align-items: center; gap: 6px;
    }
    .op-nav-body { padding: 2px 10px 8px; display: flex; flex-wrap: wrap; gap: 3px; }
    .op-nav-link {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 9px; border-radius: 6px;
      font-size: 11.5px; font-weight: 500; color: var(--t2);
      text-decoration: none; transition: all .13s;
      background: var(--surface);
    }
    .op-nav-link:hover {
      background: var(--sky); color: var(--blue); text-decoration: none;
    }
    .op-nav-link i { font-size: 11px; width: auto; }

    /* ── Operations KPI cards (home-page palette) ── */
    .op-stat-grad {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px; border-radius: 12px;
      text-decoration: none; position: relative; overflow: hidden;
      transition: transform .25s, box-shadow .25s;
      border: 1px solid transparent;
    }
    .op-stat-grad::before {
      content: ''; position: absolute; inset: 0;
      opacity: .08; border-radius: 12px;
    }
    .op-stat-grad:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px color-mix(in srgb, var(--kpi) 15%, transparent);
    }
    .op-stat-grad .op-stat-icon {
      width: 44px; height: 44px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0; position: relative; z-index: 1;
    }
    .op-stat-grad .op-stat-body { position: relative; z-index: 1; }
    .op-stat-grad .op-stat-num { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
    .op-stat-grad .op-stat-lbl { font-size: 11px; font-weight: 600; margin-top: 1px; }

    .op-stat-grad[data-op="pickup"]   { --kpi: #2563eb; }
    .op-stat-grad[data-op="bags"]     { --kpi: #d97706; }
    .op-stat-grad[data-op="manifests"] { --kpi: #7c3aed; }
    .op-stat-grad[data-op="drs"]      { --kpi: #059669; }
    .op-stat-grad[data-op="customer"] { --kpi: #2563eb; }
    .op-stat-grad[data-op="hub"]      { --kpi: #d97706; }
    .op-stat-grad[data-op="agent"]    { --kpi: #7c3aed; }
    .op-stat-grad[data-op="staff"]    { --kpi: #059669; }
    .op-stat-grad[data-op="driver"]   { --kpi: #db2777; }
    .op-stat-grad[data-op="revenue"]  { --kpi: #2563eb; }
    .op-stat-grad[data-op="credit"]   { --kpi: #d97706; }
    .op-stat-grad[data-op="cash"]     { --kpi: #059669; }
    .op-stat-grad[data-op="wallet"]   { --kpi: #7c3aed; }
    .op-stat-grad[data-op="cod"]      { --kpi: #dc2626; }
    .op-stat-grad[data-op="running"]  { --kpi: #2563eb; }
    .op-stat-grad[data-op="completed"] { --kpi: #059669; }
    .op-stat-grad[data-op="pending"]  { --kpi: #f59e0b; }
    .op-stat-grad[data-op="booked"]   { --kpi: #2563eb; }
    .op-stat-grad[data-op="transit"]  { --kpi: #8b5cf6; }
    .op-stat-grad[data-op="delivered"] { --kpi: #059669; }
    .op-stat-grad[data-op="outstanding"] { --kpi: #f59e0b; }
    .op-stat-grad[data-op="expenses"] { --kpi: #ef4444; }
    .op-stat-grad[data-op="profit"] { --kpi: #10b981; }
    .op-stat-grad[data-op="collection"] { --kpi: #2563eb; }
    .op-stat-grad[data-op="active_customers"] { --kpi: #059669; }
    .op-stat-grad[data-op="new_customers"] { --kpi: #2563eb; }
    .op-stat-grad[data-op="inactive"] { --kpi: #6b7280; }
    .op-stat-grad[data-op="failed_delivery"] { --kpi: #ef4444; }
    .op-stat-grad[data-op="returns"] { --kpi: #f59e0b; }
    .op-stat-grad[data-op="exceptions"] { --kpi: #dc2626; }
    .op-stat-grad[data-op="ofd"] { --kpi: #059669; }

    /* ── Filter Bar ── */
    .filter-bar { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
    .filter-label { font-size:10.5px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; display:block; }
    .trend { font-size:10px; font-weight:600; }
    .trend.up { color:var(--green); }
    .trend.dn { color:var(--red); }

    .op-stat-grad {
      background: color-mix(in srgb, var(--kpi) 8%, var(--card-bg));
      border-color: color-mix(in srgb, var(--kpi) 20%, transparent);
    }
    .op-stat-grad::before { background: var(--kpi); }
    .op-stat-grad .op-stat-icon { background: color-mix(in srgb, var(--kpi) 14%, transparent); color: var(--kpi); }
    .op-stat-grad .op-stat-num { color: var(--t1); }
    .op-stat-grad .op-stat-lbl { color: var(--t3); }

    /* Updates card */
    .updates-card { display: flex; flex-direction: column; height: 100%; }
    .uc-head {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border-lt);
      display: flex; align-items: center; justify-content: space-between;
      font-weight: 600; font-size: 13px; flex-shrink: 0;
    }
    .tab-grp {
      display: flex; gap: 3px; background: var(--surface);
      border-radius: 8px; padding: 3px; margin: 10px 14px 0; flex-shrink: 0;
    }
    .tp {
      flex: 1; text-align: center; padding: 5px 6px;
      border-radius: 6px; font-size: 11.5px; font-weight: 500;
      cursor: pointer; color: var(--t3); transition: all .15s;
    }
    .tp.on { background: var(--card-bg); color: var(--t1); font-weight: 600; box-shadow: var(--shadow-sm); }
    .uc-search {
      margin: 9px 14px 3px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px;
      display: flex; align-items: center; gap: 6px;
      padding: 5px 9px; font-size: 12px; color: var(--t3); flex-shrink: 0;
    }
    .uc-count { padding: 5px 16px; font-size: 12px; font-weight: 600; color: var(--t2); flex-shrink: 0; }
    .act-list { overflow-y: auto; flex: 1; }
    .act-item {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 8px 14px; border-top: 1px solid var(--border-lt);
    }
    .act-ico {
      width: 27px; height: 27px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; flex-shrink: 0; margin-top: 1px;
    }
    .act-body { flex: 1; min-width: 0; }
    .act-title { font-weight: 600; font-size: 12px; }
    .act-desc { font-size: 11.5px; color: var(--t2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .act-time { font-size: 10.5px; color: var(--t3); flex-shrink: 0; margin-top: 2px; }

    /* Trend card */
    .trend-card { padding: 18px 20px 12px; }
    .trend-head { display: flex; align-items: center; justify-content: space-between; }
    .trend-lbl { font-size: 13px; font-weight: 600; color: var(--t2); display: flex; align-items: center; gap: 6px; }
    .trend-val { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin: 5px 0 0; color: var(--navy); }
    .chart-wrap { height: 195px; margin-top: 10px; }

    /* Table */
    .table-card { overflow: hidden; }
    .tc-head {
      padding: 13px 16px;
      border-bottom: 1px solid var(--border-lt);
      display: flex; align-items: center; justify-content: space-between;
    }
    .tc-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }
    .tc-search {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; display: flex; align-items: center; gap: 5px;
      padding: 5px 10px; font-size: 12px; color: var(--t2);
    }
    .filter-btn {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 5px 11px;
      font-size: 12px; color: var(--t2); cursor: pointer;
    }
    .filter-btn:hover { border-color: var(--blue); color: var(--blue); }
    .table { margin-bottom: 0; --bs-table-bg: var(--card-bg); }
    .table thead th {
      font-size: 11.5px; font-weight: 600; color: var(--t3);
      border-bottom: 1px solid var(--border-lt) !important;
      padding: 8px 13px; background: var(--card-bg); white-space: nowrap;
      border-top: none !important;
    }
    .table tbody td {
      font-size: 12.5px; padding: 10px 13px;
      vertical-align: middle;
      border-bottom: 1px solid var(--border-lt);
      color: var(--t2); border-top: none; background: var(--card-bg);
    }
    .table tbody tr:last-child td { border-bottom: none; }
    .sort-i { font-size: 9px; color: var(--t3); margin-left: 2px; }
    .pri { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
    .pdot { width: 6px; height: 6px; border-radius: 50%; }
    .ph { background: #dc2626; } .pm { background: var(--amber); } .pl { background: var(--blue); }

    /* Status badges */
    .sbadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 500; }
    .s-review { background: #fffbeb; color: var(--amber); }
    .s-done   { background: #ecfdf5; color: var(--green); }
    .s-prog   { background: var(--sky); color: var(--blue); }

    /* Agent cell */
    .ag-cell { display: flex; align-items: center; gap: 7px; }
    .ag-av { width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; flex-shrink: 0; }

    /* Contact cell (sender / receiver) */
    .contact-cell { display: flex; align-items: center; gap: 9px; }
    .contact-av {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #fff;
    }
    .contact-info { min-width: 0; flex: 1; }
    .contact-name { font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .contact-meta { font-size: 11.5px; color: var(--t3); }
    .contact-addr {
      font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; cursor: pointer;
    }

    /* Route two-line with vertical connector */
    .route-stack { font-size: 12px; }
    .r-row { display: flex; align-items: center; gap: 6px; }
    .r-col-dot { width: 14px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
    .r-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .r-dot-green { background: #16a34a; }
    .r-dot-red { background: #dc2626; }
    .r-vline { width: 1.5px; flex: 1; min-height: 8px; background: var(--t3); }
    .route-from { font-weight: 600; color: var(--t1); }
    .route-to { font-weight: 600; color: var(--t1); }

    /* Progress bar */
    .pbar-wrap {
      display: flex; align-items: center; gap: 8px;
    }
    .pbar-track {
      flex: 1; height: 6px; border-radius: 4px;
      background: #e5e7eb; overflow: hidden; min-width: 60px;
    }
    .pbar-fill { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
    .pbar-fill.red { background: #dc2626; }
    .pbar-fill.orange { background: #f59e0b; }
    .pbar-fill.blue { background: #2563eb; }
    .pbar-fill.indigo { background: #6366f1; }
    .pbar-fill.green { background: #16a34a; }
    .pbar-pct { font-size: 11px; font-weight: 600; color: var(--t1); min-width: 28px; text-align: right; }

    /* Page layout */
    .home-section { padding: 22px; }
    .date-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 5px 11px;
      font-size: 12px; color: var(--t2); cursor: pointer;
    }

    /* ── Date range filter ── */
    .dr-filter { display: flex; align-items: center; gap: 6px; }
    .dr-pills { display: flex; gap: 2px; background: var(--surface); border-radius: 8px; padding: 2px; }
    .dr-pill {
      padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
      cursor: pointer; color: var(--t3); border: none; background: none;
      transition: all .15s; white-space: nowrap;
    }
    .dr-pill:hover { color: var(--t2); }
    .dr-pill.on { background: var(--card-bg); color: var(--t1); font-weight: 600; box-shadow: var(--shadow-sm); }
    .dr-custom { display: none; align-items: center; gap: 4px; }
    .dr-custom input {
      width: 100px; padding: 3px 6px; border: 1px solid var(--border);
      border-radius: 6px; font-size: 11px; background: var(--card-bg);
      color: var(--t1); outline: none;
    }
    .dr-custom input:focus { border-color: var(--blue); }
    .dr-custom.show { display: flex; }
    .dr-go {
      padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
      background: var(--blue); color: #fff; border: none; cursor: pointer;
    }
    .dr-go:hover { opacity: .85; }

    /* ── Dashboard chart cards ── */
    .dash-card { padding: 16px 18px; }
    .dash-card .dash-title {
      font-size: 12px; font-weight: 600; color: var(--t2);
      display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    }
    .dash-card .dash-title i { font-size: 13px; }
    .chart-lg { height: 220px; width: 100%; position: relative; }
    .chart-md { height: 200px; width: 100%; position: relative; min-height: 200px; }
    .chart-sm { height: 170px; width: 100%; position: relative; }
    .chart-md canvas, .chart-lg canvas, .chart-sm canvas { display: block; max-width: 100%; }
    .stat-row { display: flex; gap: 8px; margin-bottom: 10px; }
    .stat-box {
      flex: 1; text-align: center;
      background: var(--surface); border-radius: 8px; padding: 8px 6px;
    }
    .stat-box .stat-num { font-size: 18px; font-weight: 700; color: var(--t1); line-height: 1.2; }
    .stat-box .stat-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

    /* ── Settings Cards ── */
    .set-section { margin-bottom: 32px; }
    .set-section-title {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; font-weight: 600; color: var(--t1);
      margin-bottom: 14px;
    }
    .set-section-title i { font-size: 15px; color: var(--blue); }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 14px;
    }
    .set-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      text-decoration: none;
      display: flex; flex-direction: column;
      transition: all .2s ease;
      cursor: pointer;
      box-shadow:0 1px 3px rgba(0,0,0,.04);
    }
    .set-card:hover {
      border-color: var(--blue);
      box-shadow: 0 8px 30px rgba(37,99,235,.07), 0 1px 3px rgba(0,0,0,.04);
      transform: translateY(-2px);
    }
    .set-card.disabled { cursor: default; opacity: .7; }
    .set-card.disabled:hover { box-shadow: none; border-color: var(--border); transform: none; }
    .set-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
    .set-icon {
      width: 56px; height: 56px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; flex-shrink: 0;
    }
    .set-card-name { font-weight: 700; font-size: 15px; color: var(--t1); margin-bottom:3px; letter-spacing:-.2px; }
    .set-card-desc { font-size: 11.5px; color: var(--t3); line-height: 1.4; flex:1; }
    .set-badge {
      font-size: 10.5px; font-weight: 600;
      padding: 4px 11px; border-radius: 20px;
      white-space:nowrap; display:inline-flex; align-items:center; gap:4px;
    }
    .set-badge.configured { background: #d1fae5; color: #065f46; }
    .set-badge.linked { background: #fffbeb; color: #d97706; }
    .set-badge.auto-on { background: #eef2ff; color: #2563eb; }
    .set-card-btm {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: auto; padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .set-time { font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 4px; }
    .set-open {
      font-size: 12px; font-weight: 600; color: var(--blue);
      display: flex; align-items: center; gap: 4px;
    }
    .set-subtitle {
      grid-column: 1 / -1;
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .5px; color: var(--t3);
      padding: 8px 0 2px;
    }
    .set-subtitle:first-child { padding-top: 0; }

    /* ── Settings Sidebar Nav ── */
    .settings-sidebar {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px;
    }
    .sn-title {
      font-size: 10px; font-weight: 600; color: var(--t3);
      text-transform: uppercase; letter-spacing: .06em;
      padding: 10px 12px 4px;
    }
    .sn-item {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 12px; margin: 1px 0;
      border-radius: 8px;
      font-size: 12.5px; font-weight: 450;
      color: var(--t2); text-decoration: none;
      transition: background .12s, color .12s;
      position: relative;
    }
    .sn-item i { font-size: 14px; color: var(--t3); width: 18px; text-align: center; }
    .sn-item:hover { background: var(--nav-hover); color: var(--t1); }
    .sn-item:hover i { color: var(--blue); }
    .sn-item.sn-active {
      background: var(--nav-active); color: var(--t1); font-weight: 600;
    }
    .sn-item.sn-active i { color: var(--blue); }
    .sn-item.sn-active::before {
      content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px;
      width: 3px; border-radius: 3px; background: var(--blue);
    }

    /* ── Search Modal ── */
    .sr-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; margin: 2px 0; border-radius: 8px;
      cursor: pointer; transition: background .12s;
      text-decoration: none; color: var(--t1);
    }
    .sr-item:hover, .sr-item.focused { background: var(--nav-hover); }
    .sr-item .sr-icon {
      width: 28px; height: 28px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; flex-shrink: 0;
      background: var(--nav-hover); color: var(--t3);
    }
    .sr-item .sr-label { font-size: 13px; font-weight: 500; }
    .sr-item .sr-path { font-size: 11px; color: var(--t3); margin-left: auto; }
    .sr-empty { text-align: center; padding: 30px 16px; color: var(--t3); font-size: 13px; }

    /* ── Form Elements (SaaS theme) ── */
    .card .card-body { padding: 20px 22px; }
    .card .card-body h6 {
      font-size: 13px; font-weight: 600; color: var(--t1);
      margin-bottom: 16px; padding-bottom: 10px;
      border-bottom: 1px solid var(--border-lt);
    }

    .form-label {
      font-size: 12px; font-weight: 500; color: var(--t1);
      margin-bottom: 5px;
    }

    .form-control, .form-select {
      font-size: 12.5px; color: var(--t1);
      background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 8px; padding: 7px 11px;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }
    .form-control::placeholder { color: var(--t3); font-size: 12px; }
    .form-select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
      padding-right: 30px;
    }

    /* Checkbox & Radio */
    .form-check { padding-left: .5em; }
    .form-check-input {
      width: 17px; height: 17px; margin-top: 0;
      border: 1.5px solid var(--border); border-radius: 4px;
      background: var(--card-bg); cursor: pointer;
      transition: border-color .15s, background .15s, box-shadow .15s;
      float: none; margin-right: 7px;
    }
    .form-check-input:checked {
      background: var(--blue); border-color: var(--blue);
    }
    .form-check-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }
    .form-check-input[type="radio"] { border-radius: 50%; }
    .form-check-input[type="radio"]:checked {
      background: var(--blue);
      box-shadow: inset 0 0 0 3px var(--card-bg);
    }
    .form-check-label {
      font-size: 12.5px; color: var(--t2); cursor: pointer;
      display: inline-flex; align-items: center;
    }

    /* Toggle Switch */
    .form-switch { padding-left: 0; display: flex; align-items: center; gap: 8px; }
    .form-switch .form-check-input {
      width: 36px; height: 20px; margin: 0;
      border-radius: 20px; border: 1.5px solid var(--border);
      background: var(--border); cursor: pointer;
      transition: background .2s, border-color .2s;
      float: none; position: relative;
      background-image: none;
    }
    .form-switch .form-check-input::before {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff; transition: transform .2s;
    }
    .form-switch .form-check-input:checked {
      background: var(--blue); border-color: var(--blue);
    }
    .form-switch .form-check-input:checked::before {
      transform: translateX(16px);
    }
    .form-switch .form-check-input:focus {
      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    }
    .form-switch .form-check-label { margin: 0; }

    /* Buttons */
    .btn {
      font-size: 12.5px; font-weight: 500; padding: 7px 16px;
      border-radius: 8px; transition: all .15s;
    }
    .btn-primary {
      background: var(--blue); border-color: var(--blue);
    }
    .btn-primary:hover {
      background: #1d4ed8; border-color: #1d4ed8;
    }
    .btn-outline-primary {
      color: var(--blue); border-color: var(--blue);
    }
    .btn-outline-primary:hover {
      background: var(--blue); border-color: var(--blue);
    }

    /* Card overrides for settings pages */
    .left_sub_menu_bx {
      background: transparent !important;
      border-right: none !important;
      min-height: auto !important;
    }

    /* ── Page Header ── */
    /* hide legacy breadcrumb nav across all pages */
    nav[aria-label="breadcrumb"] { display: none !important; }

    /* Back button (shared by all page types) */
    .btn_nav {
      width: 30px; height: 30px; border-radius: 8px !important;
      border: 1px solid var(--border) !important;
      background: var(--card-bg) !important;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0 !important; font-size: 15px !important;
      color: var(--t2) !important; cursor: pointer;
    }
    .btn_nav:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
    .btn-gray-200 {
      width: 30px; height: 30px; border-radius: 8px !important;
      border: 1px solid var(--border) !important;
      background: var(--card-bg) !important;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0 !important; font-size: 15px !important;
      color: var(--t2) !important; cursor: pointer;
    }
    .btn-gray-200:hover { border-color: var(--blue) !important; color: var(--blue) !important; }

    /* Unified page heading — works for h2.h4 (list/detail pages)
       and .page-title /.page-sub (dashboard / settings hub) */
    .home-section .py-4 > .d-block > .d-flex h2.h4,
    .page-title {
      font-size: 20px; font-weight: 700; letter-spacing: -.3px;
      color: var(--t1); margin: 0;;
    }
    .page-sub { color: var(--t3); font-size: 12.5px; margin-top: 2px; }

    .back-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: 10px;
      background: var(--card-bg); border: 1px solid var(--border);
      color: var(--t2); font-size: 16px; text-decoration: none;
      transition: background .15s, color .15s, box-shadow .15s;
    }
    .back-btn:hover { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.25); }

    /* back-button + heading row */
    .home-section .py-4 > .d-block > .d-flex {
      align-items: center !important; gap: 8px; margin-top: 2px;
      justify-content: flex-start !important;
    }
    .home-section .py-4 > .d-block > .d-flex .ps-2 { padding-left: 0 !important; }

    /* Right toolbar */
    .home-section .py-4 .btn-toolbar { gap: 6px; }
    .home-section .py-4 .btn-toolbar .btn {
      font-size: 11.5px; padding: 5px 11px;
    }

    /* Dashboard / settings hub header matches spacing of list pages */
    .home-section > .mb-3:first-child {
      padding: 24px 0 0;
    }

    /* ── KPI cards ── */
    .kpi-strip {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 4px 0 8px;
    }
    .kpi-card {
      display: flex; align-items: center; gap: 10px;
      flex: 1 1 110px; padding: 10px 14px;
      border-radius: 12px; text-decoration: none;
      border: 1px solid transparent;
      transition: transform .25s, box-shadow .25s;
      position: relative; overflow: hidden;
    }
    .kpi-card::before {
      content: ''; position: absolute; inset: 0;
      opacity: .08; border-radius: 12px;
    }
    .kpi-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,0,0,.10);
    }
    .kpi-card:active { transform: translateY(-1px); }
    .kpi-card.active {
      box-shadow: 0 5px 16px rgba(0,0,0,.15);
      border-color: transparent;
    }
    .kpi-icon {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; flex-shrink: 0;
      position: relative; z-index: 1;
    }
    .kpi-card.active .kpi-icon { background: rgba(255,255,255,.2) !important; color: #fff !important; }
    .kpi-info { display: flex; flex-direction: column; position: relative; z-index: 1; }
    .kpi-num {
      font-size: 20px; font-weight: 800; line-height: 1.2;
      letter-spacing: -.4px;
    }
    .kpi-lbl {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .4px; margin-top: 1px;
    }
    .kpi-card.active .kpi-lbl { color: rgba(255,255,255,.7); }

    /* ── Status colour themes ── */
    .kpi-card[data-status="all"]         { --kpi: #3b82f6; }
    .kpi-card[data-status="pending"]     { --kpi: #f59e0b; }
    .kpi-card[data-status="picked"]      { --kpi: #06b6d4; }
    .kpi-card[data-status="transit"]     { --kpi: #6366f1; }
    .kpi-card[data-status="outfordel"]   { --kpi: #8b5cf6; }
    .kpi-card[data-status="delivered"]   { --kpi: #10b981; }
    .kpi-card[data-status="failed"]      { --kpi: #ef4444; }
    .kpi-card[data-status="returned"]    { --kpi: #eab308; }
    .kpi-card[data-status="cancelled"]   { --kpi: #6b7280; }

    .kpi-card {
      background: color-mix(in srgb, var(--kpi) 8%, var(--card-bg));
      border-color: color-mix(in srgb, var(--kpi) 20%, transparent);
    }
    .kpi-card::before { background: var(--kpi); }
    .kpi-card .kpi-icon { background: color-mix(in srgb, var(--kpi) 14%, transparent); color: var(--kpi); }
    .kpi-card .kpi-num { color: var(--t1); }
    .kpi-card .kpi-lbl { color: var(--t3); }
    .kpi-card:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--kpi) 15%, transparent); }
    .kpi-card.active {
      background: linear-gradient(135deg, var(--kpi), color-mix(in srgb, var(--kpi) 70%, #000));
    }
    .kpi-card.active .kpi-num { color: #fff; }
    .kpi-card.active .kpi-lbl { color: rgba(255,255,255,.7); }

    /* ── SaaS filter pills ── */

    /* ── SaaS tabs ── */
    .nav-saas-tabs {
      display: flex; gap: 1px;
      background: var(--s-hover); border-radius: 8px;
      padding: 2px; overflow-x: auto;
    }
    .nav-saas-tabs .nav-link {
      font-size: 11.5px; font-weight: 500;
      padding: 4px 10px; white-space: nowrap;
      border-radius: 6px; color: var(--t2);
      border: none; background: none;
      display: inline-flex; align-items: center; gap: 5px;
      transition: background .12s, color .12s;
    }
    .nav-saas-tabs .nav-link:hover { color: var(--t1); background: var(--nav-hover); }
    .nav-saas-tabs .nav-link.active {
      background: var(--card-bg); color: var(--t1);
      box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }
    .tab-count {
      font-size: 10px; font-weight: 600;
      background: var(--border); color: var(--t3);
      padding: 0 6px; border-radius: 6px; line-height: 16px;
    }
    .nav-saas-tabs .nav-link.active .tab-count {
      background: var(--blue); color: #fff;
    }
    html[data-bs-theme="dark"] .nav-saas-tabs .nav-link.active {
      color: var(--t1) !important;
    }

    /* ── Custom nav data table tabs (prs_running, drs_running, etc.) match nav-saas-tabs ── */
    .custom_nav_data_table .nav-tabs {
      display: flex; gap: 1px;
      background: var(--s-hover); border-radius: 8px;
      padding: 2px; overflow-x: auto;
      border-bottom: none;
    }
    .custom_nav_data_table .nav-tabs .nav-item {
      display: inline-flex; list-style: none; margin: 0;
    }
    .custom_nav_data_table .nav-tabs .nav-link {
      font-size: 11.5px; font-weight: 500;
      padding: 4px 10px; white-space: nowrap;
      border-radius: 6px; color: var(--t2);
      border: none; background: none;
      display: inline-flex; align-items: center; gap: 5px;
      transition: background .12s, color .12s;
      margin: 0;
    }
    .custom_nav_data_table .nav-tabs .nav-link:hover {
      color: var(--t1); background: var(--nav-hover);
    }
    .custom_nav_data_table .nav-tabs .nav-link.active {
      background: var(--card-bg); color: var(--t1);
      box-shadow: 0 1px 2px rgba(0,0,0,.06);
      border-bottom: none;
    }
    [data-bs-theme="dark"] .custom_nav_data_table .nav-tabs .nav-link.active {
      background-color: var(--card-bg) !important;
      color: var(--t1) !important;
      border-bottom: none !important;
    }

    /* ── Toolbar buttons ── */
    .btn-outline-secondary {
      border: 1px solid var(--border);
      color: var(--t2); background: var(--card-bg);
      border-radius: 8px; font-size: 12px;
    }
    .btn-outline-secondary:hover {
      border-color: var(--blue); color: var(--blue);
      background: rgba(37,99,235,.06);
    }
    .btn-outline-secondary.btn-sm { font-size: 12px; padding: 4px 11px; }

    /* ── Input group search ── */
    .input-group-sm .form-control {
      background: var(--card-bg); font-size: 12.5px;
    }
    .input-group-sm .input-group-text {
      background: var(--card-bg); border: 1px solid var(--border);
      font-size: 13px; color: var(--t3);
    }

    /* ── Pagination ── */
    .pagination-sm .page-link {
      font-size: 12px; padding: 4px 10px; border-radius: 20px !important;
      border: 1px solid transparent; color: var(--t2);
      background: transparent; margin: 0 1px;
      transition: all .15s;
    }
    .pagination-sm .page-link:hover {
      border-color: var(--blue); color: var(--blue); background: rgba(37,99,235,.05);
    }
    .pagination-sm .page-item.active .page-link {
      background: var(--blue); border-color: var(--blue); color: #fff;
    }

    /* ── SaaS Filter Bar ── */
    .filter-bar {
      display: none;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px 10px;
      margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .filter-bar.open { display: block; }
    .filter-bar-inner {
      display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
    }
    .filter-field {
      display: flex; flex-direction: column; gap: 3px; min-width: 0;
    }
    .filter-field-label {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .4px; color: var(--t3); white-space: nowrap;
    }
    .filter-field .form-select-sm,
    .filter-field .form-control-sm {
      font-size: 12px; padding: 4px 24px 4px 8px;
      border-radius: 6px; min-width: 100px;
      background-position: right 6px center;
      background-size: 12px;
    }
    .filter-field .form-control-sm { padding: 4px 8px; min-width: 110px; }

    /* Multi-select dropdown */
    .ms-wrapper { position: relative; cursor: pointer; user-select: none; min-width: 120px; }
    .ms-trigger {
      display: flex; align-items: center; justify-content: space-between; gap: 4px;
      font-size: 12px; padding: 4px 8px; border-radius: 6px;
      border: 1px solid var(--border); background: var(--card-bg);
      color: var(--t2); min-height: 27px;
    }
    .ms-trigger::after {
      content: ''; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
      border-top: 4px solid var(--t3); flex-shrink: 0;
    }
    .ms-trigger:hover { border-color: var(--blue); }
    .ms-dropdown {
      display: none; position: absolute; top: calc(100% + 3px); left: 0; z-index: 50;
      min-width: 180px; background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); padding: 4px;
    }
    .ms-dropdown.open { display: block; }
    .ms-opt {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 8px; border-radius: 5px; font-size: 12px; color: var(--t2);
      cursor: pointer; transition: background .1s; margin: 0;
    }
    .ms-opt:hover { background: var(--s-hover); }
    .ms-opt input[type="checkbox"] {
      width: 15px; height: 15px; margin: 0; flex-shrink: 0;
      accent-color: var(--blue); cursor: pointer;
    }
    .ms-opt span { cursor: pointer; }
    .ms-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .filter-field .date-range-wrap {
      display: flex; align-items: center; gap: 4px;
    }
    .filter-field .date-range-wrap .form-control-sm {
      min-width: 0; width: 100px; font-size: 11px;
      padding: 4px 6px;
    }
    .filter-field .date-range-wrap .sep {
      font-size: 10px; color: var(--t3);
    }
    .filter-bar-foot {
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0; margin-left: auto;
    }
    .filter-bar-foot .btn-sm {
      font-size: 11.5px; padding: 4px 10px;
    }

    .filter-chips {
      display: flex; flex-wrap: wrap; gap: 5px;
    }
    .filter-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--s-hover); border: 1px solid var(--border);
      border-radius: 6px; padding: 2px 8px 2px 10px;
      font-size: 11.5px; color: var(--t2); cursor: default;
    }
    .filter-chip .remove {
      font-size: 13px; color: var(--t3); cursor: pointer;
      line-height: 1; display: flex;
    }
    .filter-chip .remove:hover { color: var(--red); }
    .active-filters {
      display: none; flex-wrap: wrap; align-items: center; gap: 6px;
      margin-bottom: 12px; min-height: 28px;
    }
    .active-filters-label {
      font-size: 11.5px; font-weight: 600; color: var(--t3);
      margin-right: 4px;
    }

    /* ── Offcanvas ── */
    .offcanvas { --bs-offcanvas-border-color: var(--border); }
    .offcanvas.offcanvas-end { width: 400px; }
    .offcanvas-body { padding: 20px; overflow-y: auto; }
    .oc-section { margin-bottom: 22px; }
    .oc-section-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .5px; color: var(--t3);
      margin-bottom: 10px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border-lt);
    }
    .oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
    .oc-field { display: flex; flex-direction: column; gap: 1px; }
    .oc-label { font-size: 10.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .3px; }
    .oc-value { font-size: 13px; font-weight: 500; color: var(--t1); }
    .oc-awb { font-weight: 700; color: var(--blue); letter-spacing: .3px; }
    .oc-status { display: inline-flex; align-items: center; gap: 5px; }
    .oc-status.delivered { color: var(--green); }
    .oc-status.transit { color: var(--blue); }
    .oc-status.pending { color: var(--amber); }
    /* Timeline */
    .oc-timeline { position: relative; padding-left: 20px; }
    .oc-timeline::before {
      content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
      width: 2px; background: var(--border); border-radius: 2px;
    }
    .oc-tl-item { position: relative; padding-bottom: 18px; }
    .oc-tl-item:last-child { padding-bottom: 0; }
    .oc-tl-dot {
      position: absolute; left: -17px; top: 3px;
      width: 10px; height: 10px; border-radius: 50%;
      border: 2px solid var(--border); background: var(--card-bg);
      z-index: 1;
    }
    .oc-tl-dot-green { border-color: var(--green); background: #ecfdf5; }
    .oc-tl-dot-gray { border-color: var(--t3); }
    .oc-tl-body { }
    .oc-tl-date { font-size: 11px; font-weight: 600; color: var(--t3); }
    .oc-tl-title { font-size: 13px; font-weight: 600; color: var(--t1); margin-top: 1px; }
    .oc-tl-desc { font-size: 12px; color: var(--t2); margin-top: 1px; }
    /* Offcanvas Bottom Action Bar */
    .oc-actions {
      display: flex; gap: 6px; flex-wrap: wrap;
      padding: 14px 0 4px; border-top: 1px solid var(--border-lt);
      margin-top: 18px;
    }
    .oc-action-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--card-bg);
      font-size: 11.5px; font-weight: 500; color: var(--t2);
      text-decoration: none; transition: all .15s;
    }
    .oc-action-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(37,99,235,.04); }
    .oc-action-btn i { font-size: 13px; }

    /* ── Card table wrapper ── */
    .table-wrapper.card {
      background: var(--card-bg);
      box-shadow: var(--shadow-sm);
      border-radius: 12px; overflow: hidden;
    }
    /* Copy-on-hover */
    .copy-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; }
    .copy-btn {
      opacity: 0; font-size: 13px; cursor: pointer; color: var(--t2);
      padding: 0 2px; border-radius: 3px; transition: opacity .15s, color .15s;
      line-height: 1; pointer-events: none;
    }
    .copy-btn:hover { color: var(--blue); }
    .copy-wrap:hover .copy-btn { opacity: 1; pointer-events: auto; }

    .table-wrapper .table thead th {
      font-size: 10.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .4px; color: var(--t2);
      border-bottom: 1px solid var(--border);
      padding: 10px 12px; white-space: nowrap;
      background: var(--card-bg);
    }
    .table-wrapper .table tbody td {
      padding: 10px 12px; border-bottom: 1px solid var(--border-lt);
      vertical-align: middle; transition: background .15s;
      background: var(--card-bg);
    }
    .table-wrapper .table tbody tr:last-child td { border-bottom: none; }
    .table-wrapper .table tbody tr { transition: box-shadow .15s; }
    .table-wrapper .table tbody tr:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
    .table-wrapper .table tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); }
    .table-wrapper .table tbody tr:has(.form-check-input:checked) td { background: #eef2ff; }
    .table-wrapper .table tbody tr:has(.form-check-input:checked) td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
    [data-bs-theme="dark"] .table-wrapper .table tbody tr:hover { box-shadow: 0 3px 14px rgba(0,0,0,.3); }
    [data-bs-theme="dark"] .table-wrapper .table tbody tr:nth-child(even) td { background: rgba(0,0,0,.1); }
    [data-bs-theme="dark"] .table-wrapper .table tbody tr:has(.form-check-input:checked) td { background: rgba(37,99,235,.15); }
    [data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(255,255,255,.03); --bs-table-color: var(--t2); }

    /* ── Bulk action bar (dark in light mode, light in dark mode) ── */
    .bulk-bar {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
      background: #1e293b; border: 1px solid #334155;
      border-top: 3px solid var(--blue);
      border-radius: 12px 12px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.18);
      padding: 10px 20px;
      display: flex; align-items: center; gap: 12px;
      z-index: 1050; transition: transform .25s ease;
      white-space: nowrap;
    }
    .bulk-bar.show { transform: translateX(-50%) translateY(-20px); }
    .bulk-count { font-size: 13px; font-weight: 600; color: #e2e8f0; }
    .bulk-clear { font-size: 12px; color: #60a5fa; text-decoration: none; cursor: pointer; }
    .bulk-clear:hover { text-decoration: underline; }
    .bulk-divider { width: 1px; height: 24px; background: #475569; }
    .bulk-bar .btn-sm { font-size: 12px; padding: 5px 14px; border: none; color: #fff; background: rgba(255,255,255,.12); border-radius: 6px; }
    .bulk-bar .btn-sm:hover { background: rgba(255,255,255,.2); color: #fff; }
    .bulk-bar .btn-sm:last-child { background: rgba(239,68,68,.2); color: #fca5a5; }
    .bulk-bar .btn-sm:last-child:hover { background: rgba(239,68,68,.35); color: #fff; }
    [data-bs-theme="dark"] .bulk-bar {
      background: #ffffff; border-color: #e2e8f0;
      box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    }
    [data-bs-theme="dark"] .bulk-count { color: #0f172a; }
    [data-bs-theme="dark"] .bulk-clear { color: #2563eb; }
    [data-bs-theme="dark"] .bulk-divider { background: #e2e8f0; }
    [data-bs-theme="dark"] .bulk-bar .btn-sm { background: rgba(0,0,0,.06); color: #1e293b; }
    [data-bs-theme="dark"] .bulk-bar .btn-sm:hover { background: rgba(0,0,0,.12); color: #0f172a; }
    [data-bs-theme="dark"] .bulk-bar .btn-sm:last-child { background: rgba(220,38,38,.1); color: #dc2626; }
    [data-bs-theme="dark"] .bulk-bar .btn-sm:last-child:hover { background: rgba(220,38,38,.2); color: #b91c1c; }

    /* ── Shipment detail badges ── */
    .badge-shipment { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
    .badge-shipment.prepaid { background: #eef2ff; color: #2563eb; }
    .badge-shipment.cod { background: #fffbeb; color: #d97706; }
    .badge-shipment.domestic { background: #ecfdf5; color: #059669; }
    .badge-shipment.international { background: #f3e8ff; color: #7c3aed; }
    .badge-shipment.parcel { background: #f1f5f9; color: #475569; }
    .badge-shipment.document { background: #ecfeff; color: #0891b2; }
    .badge-shipment.bill-cash { background: #ecfdf5; color: #059669; }
    .badge-shipment.bill-credit { background: #eef2ff; color: #2563eb; }
    .badge-shipment.bill-wallet { background: #fffbeb; color: #d97706; }
    .badge-shipment.bill-contract { background: #fef2f2; color: #dc2626; }
    .cod-amt { font-size: 11px; font-weight: 600; color: var(--t1); margin-left: 3px; }

    /* ── Status badges ── */
    .ship-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px 3px 8px; border-radius: 20px; }
    .ship-status .sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .ship-status.pending { background: #fffbeb; color: #d97706; }
    .ship-status.pending .sdot { background: #f59e0b; }
    .ship-status.picked { background: #eef2ff; color: #2563eb; }
    .ship-status.picked .sdot { background: #2563eb; }
    .ship-status.transit { background: #eef2ff; color: #2563eb; }
    .ship-status.transit .sdot { background: #2563eb; }
    .ship-status.delivered { background: #ecfdf5; color: #059669; }
    .ship-status.delivered .sdot { background: #059669; }
    .ship-status.failed { background: #fef2f2; color: #dc2626; }
    .ship-status.failed .sdot { background: #dc2626; }
    .ship-status.outfordelivery { background: #fefce8; color: #ca8a04; }
    .ship-status.outfordelivery .sdot { background: #eab308; }
    .ship-status.returned { background: #fdf2f8; color: #db2777; }
    .ship-status.returned .sdot { background: #ec4899; }
    .ship-status.cancelled { background: #f1f5f9; color: #64748b; }
    .ship-status.cancelled .sdot { background: #94a3b8; }

    /* ── Type badges ── */
    .type-badge { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }
    .type-badge.prepaid { background: #fef2f2; color: #dc2626; }
    .type-badge.cod { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; }

    /* ── Utility palette classes ── */
    .bg-navy { background: var(--navy); }
    .bg-blue { background: var(--blue); }
    .bg-sky { background: var(--sky); }
    .bg-amber { background: var(--amber); }
    .bg-gold { background: var(--gold); }
    .bg-surface { background: var(--surface); }
    .text-blue { color: var(--blue); }
    .text-amber { color: var(--amber); }
    .text-gold { color: var(--gold); }
    .text-green { color: var(--green); }

    /* Override old style.css sidebar/home-section conflicts */
    .sidebar.close {
      width: var(--sw-col);
    }
    .home-section {
      position: static !important;
      left: auto !important;
      width: auto !important;
      padding: 22px 22px 80px;
    }
    .sidebar.close ~ .home-section {
      left: auto !important;
      width: auto !important;
    }
    .sidebar .logo-details, .sidebar .nav-links, .sidebar .profile-details {
      display: none;
    }

    /* ── Floating Action Button ── */
    .fab-wrapper {
      position: fixed; bottom: 32px; right: 32px;
      z-index: 1050; display: flex; flex-direction: column;
      align-items: flex-end; gap: 12px;
    }
    .fab-toggle { display: none; }
    .fab-btn {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--blue); color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 16px rgba(37,99,235,.35);
      transition: transform .25s, box-shadow .25s;
      font-size: 22px; position: relative; z-index: 2;
    }
    .fab-btn:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(37,99,235,.45); }
    .fab-icon, .fab-close { position: absolute; transition: opacity .25s, transform .25s; }
    .fab-close { opacity: 0; transform: rotate(-45deg); }
    .fab-toggle:checked + .fab-btn .fab-icon { opacity: 0; transform: rotate(45deg); }
    .fab-toggle:checked + .fab-btn .fab-close { opacity: 1; transform: rotate(0); }
    .fab-options {
      display: flex; flex-direction: column; gap: 10px;
      opacity: 0; transform: translateY(16px) scale(.9);
      pointer-events: none; transition: opacity .25s, transform .25s;
    }
    .fab-toggle:checked ~ .fab-options {
      opacity: 1; transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .fab-option {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; flex-direction: row-reverse;
    }
    .fab-option:hover .fab-label { opacity: 1; transform: translateX(0); }
    .fab-label {
      background: var(--card-bg); border: 1px solid var(--border);
      padding: 6px 14px; border-radius: 8px;
      font-size: 12.5px; font-weight: 500; color: var(--t1);
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
      white-space: nowrap; opacity: .9; transition: opacity .2s, transform .2s;
    }
    .fab-icon-wrap {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--card-bg); border: 1px solid var(--border);
      color: var(--blue); display: flex; align-items: center;
      justify-content: center; font-size: 17px;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
      transition: transform .2s;
    }
    .fab-option:hover .fab-icon-wrap { transform: scale(1.08); }

    /* ═══ Section heading ═══ */
    .section-heading { font-size:15px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:8px; }
    .section-count { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; }

    /* ═══ CI Stats Bar ═══ */
    /* ═══ CI Integrations — Stripe/Linear SaaS ═══ */

    /* ── Header Stats ── */
    .ci-stats { display:flex; align-items:center; gap:0; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:4px; flex-shrink:0; }
    .ci-stat { display:flex; align-items:center; gap:8px; padding:6px 18px; border-radius:8px; transition:all .15s; cursor:default; }
    .ci-stat-div { width:1px; height:28px; background:var(--border); }
    .ci-stat .ci-stat-num { font-size:19px; font-weight:800; color:var(--t1); line-height:1; letter-spacing:-.3px; }
    .ci-stat .ci-stat-lbl { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; }

    /* ── Toolbar ── */
    .ci-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; padding:6px 10px 6px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
    .ci-tabs { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
    .ci-tab-div { width:1px; height:22px; background:var(--border); margin:0 6px; }
    .ci-tab { border:none; background:none; padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--t3); cursor:pointer; transition:all .15s; white-space:nowrap; }
    .ci-tab:hover { color:var(--t1); background:var(--bg); }
    .ci-tab.active { background:var(--blue); color:#fff; font-weight:600; box-shadow:0 1px 4px rgba(37,99,235,.25); }
    .ci-search { display:flex; align-items:center; gap:7px; padding:7px 11px; background:var(--bg); border:1px solid var(--border); border-radius:8px; width:210px; transition:border .15s,box-shadow .15s; flex-shrink:0; font-size:13px; }
    .ci-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .ci-search i { font-size:13px; color:var(--t3); flex-shrink:0; }
    .ci-search input { border:none; background:none; outline:none; font-size:12.5px; color:var(--t1); width:100%; }
    .ci-search input::placeholder { color:var(--t3); }

    /* ── Cards ── */
    .ci-card {
      background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
      padding:20px; cursor:default; transition:all .2s ease;
      display:flex; flex-direction:column; height:100%;
      box-shadow:0 1px 3px rgba(0,0,0,.04);
    }
    .ci-card:hover { border-color:var(--blue); box-shadow:0 8px 30px rgba(37,99,235,.07),0 1px 3px rgba(0,0,0,.04); transform:translateY(-2px); }
    .ci-card.ci-error { border-color:#fecaca; }
    .ci-card.ci-error:hover { border-color:#dc2626; box-shadow:0 8px 30px rgba(220,38,38,.07),0 1px 3px rgba(0,0,0,.04); }

    .ci-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
    .ci-icon {
      width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0; background:#fff;
    }
    .ci-icon img { width:100%; height:100%; object-fit:contain; padding:8px; }

    /* ── Badges ── */
    .ci-badge { font-size:10.5px; font-weight:600; padding:4px 11px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
    .ci-badge.configured { background:#d1fae5; color:#065f46; }
    .ci-badge.not-configured { background:#f1f5f9; color:#64748b; }
    .ci-badge.api-error { background:#fef2f2; color:#dc2626; }

    .ci-card-name { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:3px; letter-spacing:-.2px; }
    .ci-card-desc { font-size:12.5px; color:var(--t2); font-weight:500; line-height:1.35; }
    .ci-card-desc2 { font-size:11.5px; color:var(--t3); line-height:1.4; margin-top:2px; }

    .ci-card-btm { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }

    .ci-btn-config {
      border:1px solid var(--border); background:var(--card-bg); color:var(--t2);
      padding:7px 17px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
      transition:all .15s; display:inline-flex; align-items:center; gap:5px;
    }
    .ci-btn-config:hover { border-color:var(--blue); color:var(--blue); background:#f8faff; }

    /* ── Toggle Switch (iOS-style) ── */
    .ci-toggle { position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
    .ci-toggle input { display:none; }
    .ci-toggle-track { position:absolute; inset:0; background:#cbd5e1; border-radius:11px; transition:background .2s; }
    .ci-toggle-thumb { position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.12); }
    .ci-toggle input:checked + .ci-toggle-track { background:var(--blue); }
    .ci-toggle input:checked + .ci-toggle-track .ci-toggle-thumb { transform:translateX(18px); }

    @media(max-width:767.98px){
      .ci-stats{display:none;}
      .ci-toolbar{flex-direction:column;align-items:stretch;padding:10px;}
      .ci-search{width:100%;}
    }

    /* ═══ Configuration Modal ═══ */
    .cm-modal { border:none; border-radius:16px; overflow:hidden; background:var(--card-bg); box-shadow:0 25px 80px rgba(0,0,0,.15); }
    .cm-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
    .cm-logo { width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f8fafc; border-radius:12px; overflow:hidden; }
    .cm-logo-img { width:100%; height:100%; object-fit:contain; padding:6px; }
    .cm-hdr-txt { flex:1; }
    .cm-hdr-title { font-size:17px; font-weight:700; color:var(--t1); }
    .cm-hdr-sub { font-size:12px; color:var(--t3); margin-top:1px; }
    .cm-close { width:32px; height:32px; border:none; background:var(--bg); color:var(--t3); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .15s; flex-shrink:0; }
    .cm-close:hover { background:var(--border); color:var(--t1); }

    .cm-body { padding:20px 24px; }

    /* Environment row */
    .cm-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .cm-lbl { font-size:13px; font-weight:600; color:var(--t1); }
    .cm-pills { display:flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
    .cm-pill { border:none; background:none; padding:7px 16px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--t3); cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .15s; }
    .cm-pill.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.2); }
    .cm-pill:hover:not(.active) { color:var(--t1); background:var(--card-bg); }

    .cm-hr { border:none; border-top:1px solid var(--border); margin:18px 0; }

    /* Fields */
    .cm-fgroup { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
    .cm-fl { font-size:12.5px; font-weight:600; color:var(--t1); }
    .cm-fi { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; }
    .cm-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .cm-fi::placeholder { color:var(--t3); font-size:12.5px; }
    .cm-ta { resize:vertical; min-height:48px; font-family:inherit; line-height:1.45; }

    /* Radio option group */
    .cm-opt-group { display:flex; gap:6px; flex-wrap:wrap; }
    .cm-opt { position:relative; display:flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--t2); transition:all .15s; }
    .cm-opt:hover { border-color:var(--blue); color:var(--blue); }
    .cm-opt input:checked + .cm-opt-mrk + .cm-opt { }
    .cm-opt input { display:none; }
    .cm-opt input:checked ~ .cm-opt-mrk { background:var(--blue); border-color:var(--blue); }
    .cm-opt input:checked ~ .cm-opt-mrk::after { opacity:1; }
    .cm-opt input:checked ~ * { color:var(--blue); }
    .cm-opt .cm-opt-mrk { display:none; }
    .cm-opt:has(input:checked) { border-color:var(--blue); background:rgba(37,99,235,.04); color:var(--blue); }

    /* Footer */
    .cm-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--border); }
    .cm-footer-right { display:flex; align-items:center; gap:8px; }
    .cm-btn { border:none; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
    .cm-btn-ghost { background:var(--bg); color:var(--t2); }
    .cm-btn-ghost:hover { background:var(--border); color:var(--t1); }
    .cm-btn-cancel { background:transparent; color:var(--t3); }
    .cm-btn-cancel:hover { background:var(--bg); color:var(--t1); }
    .cm-btn-primary { background:var(--blue); color:#fff; }
    .cm-btn-primary:hover { background:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.25); }

    @media(max-width:575.98px){
      .cm-footer{flex-direction:column;align-items:stretch;}
      .cm-footer-right{justify-content:flex-end;}
      .cm-row{flex-direction:column;align-items:stretch;}
    }

    /* ═══ Payment Gateways — SaaS ═══ */

    /* ── Header Stats ── */
    .pg-stats { display:flex; align-items:center; gap:0; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:4px; flex-shrink:0; }
    .pg-stat { display:flex; align-items:center; gap:8px; padding:6px 18px; border-radius:8px; cursor:default; }
    .pg-stat-div { width:1px; height:28px; background:var(--border); }
    .pg-stat .pg-stat-num { font-size:19px; font-weight:800; color:var(--t1); line-height:1; letter-spacing:-.3px; }
    .pg-stat .pg-stat-lbl { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; }

    /* ── Toolbar ── */
    .pg-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; padding:6px 10px 6px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
    .pg-tabs { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
    .pg-tab-div { width:1px; height:22px; background:var(--border); margin:0 6px; }
    .pg-tab { border:none; background:none; padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--t3); cursor:pointer; transition:all .15s; white-space:nowrap; }
    .pg-tab:hover { color:var(--t1); background:var(--bg); }
    .pg-tab.active { background:var(--blue); color:#fff; font-weight:600; box-shadow:0 1px 4px rgba(37,99,235,.25); }
    .pg-search { display:flex; align-items:center; gap:7px; padding:7px 11px; background:var(--bg); border:1px solid var(--border); border-radius:8px; width:210px; transition:border .15s,box-shadow .15s; flex-shrink:0; font-size:13px; }
    .pg-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .pg-search i { font-size:13px; color:var(--t3); flex-shrink:0; }
    .pg-search input { border:none; background:none; outline:none; font-size:12.5px; color:var(--t1); width:100%; }
    .pg-search input::placeholder { color:var(--t3); }

    /* ── Cards ── */
    .pg-card {
      background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
      padding:20px; cursor:default; transition:all .2s ease;
      display:flex; flex-direction:column; height:100%;
      box-shadow:0 1px 3px rgba(0,0,0,.04);
    }
    .pg-card:hover { border-color:var(--blue); box-shadow:0 8px 30px rgba(37,99,235,.07),0 1px 3px rgba(0,0,0,.04); transform:translateY(-2px); }

    .pg-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
    .pg-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; background:#fff; border:1px solid var(--border); }
    .pg-icon img { width:100%; height:100%; object-fit:contain; padding:10px; }

    .pg-badge { font-size:10.5px; font-weight:600; padding:4px 11px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
    .pg-badge.active { background:#d1fae5; color:#065f46; }
    .pg-badge.inactive { background:#f1f5f9; color:#64748b; }

    .pg-card-name { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:3px; letter-spacing:-.2px; }
    .pg-card-desc { font-size:12.5px; color:var(--t2); font-weight:500; line-height:1.35; }
    .pg-card-desc2 { font-size:11.5px; color:var(--t3); line-height:1.4; margin-top:2px; }

    .pg-card-btm { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }

    .pg-btn-config {
      border:1px solid var(--border); background:var(--card-bg); color:var(--t2);
      padding:7px 17px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
      transition:all .15s; display:inline-flex; align-items:center; gap:5px;
    }
    .pg-btn-config:hover { border-color:var(--blue); color:var(--blue); background:#f8faff; }

    .pg-toggle { position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
    .pg-toggle input { display:none; }
    .pg-toggle-track { position:absolute; inset:0; background:#cbd5e1; border-radius:11px; transition:background .2s; }
    .pg-toggle-thumb { position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.12); }
    .pg-toggle input:checked + .pg-toggle-track { background:var(--blue); }
    .pg-toggle input:checked + .pg-toggle-track .pg-toggle-thumb { transform:translateX(18px); }

    @media(max-width:767.98px){
      .pg-stats{display:none;}
      .pg-toolbar{flex-direction:column;align-items:stretch;padding:10px;}
      .pg-search{width:100%;}
    }

    /* ═══ Gateway Modal ═══ */
    .pg-modal { border:none; border-radius:16px; overflow:hidden; background:var(--card-bg); box-shadow:0 25px 80px rgba(0,0,0,.15); }
    .pg-modal-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
    .pg-modal-logo { width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f8fafc; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
    .pg-modal-img { width:100%; height:100%; object-fit:contain; padding:8px; }
    .pg-modal-hdr-txt { flex:1; }
    .pg-modal-hdr-title { font-size:17px; font-weight:700; color:var(--t1); }
    .pg-modal-hdr-sub { font-size:12px; color:var(--t3); margin-top:1px; }
    .pg-modal-close { width:32px; height:32px; border:none; background:var(--bg); color:var(--t3); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .15s; flex-shrink:0; }
    .pg-modal-close:hover { background:var(--border); color:var(--t1); }

    .pg-modal-body { padding:20px 24px; }

    .pg-modal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .pg-modal-lbl { font-size:13px; font-weight:600; color:var(--t1); }
    .pg-modal-pills { display:flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
    .pg-modal-pill { border:none; background:none; padding:7px 16px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--t3); cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .15s; }
    .pg-modal-pill.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.2); }
    .pg-modal-pill:hover:not(.active) { color:var(--t1); background:var(--card-bg); }

    .pg-modal-hr { border:none; border-top:1px solid var(--border); margin:18px 0; }

    .pg-modal-fgroup { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
    .pg-modal-fl { font-size:12.5px; font-weight:600; color:var(--t1); }
    .pg-modal-fi { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; }
    .pg-modal-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .pg-modal-fi::placeholder { color:var(--t3); font-size:12.5px; }

    .pg-modal-opt-group { display:flex; gap:6px; flex-wrap:wrap; }
    .pg-modal-opt { display:flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--t2); transition:all .15s; }
    .pg-modal-opt:hover { border-color:var(--blue); color:var(--blue); }
    .pg-modal-opt input { display:none; }
    .pg-modal-opt:has(input:checked) { border-color:var(--blue); background:rgba(37,99,235,.04); color:var(--blue); }

    .pg-modal-notice { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:11.5px; color:#166534; line-height:1.45; margin-bottom:0; }
    .pg-modal-notice i { font-size:14px; margin-top:1px; flex-shrink:0; }

    .pg-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--border); }
    .pg-modal-footer-right { display:flex; align-items:center; gap:8px; }
    .pg-modal-btn { border:none; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
    .pg-modal-btn-ghost { background:var(--bg); color:var(--t2); }
    .pg-modal-btn-ghost:hover { background:var(--border); color:var(--t1); }
    .pg-modal-btn-cancel { background:transparent; color:var(--t3); }
    .pg-modal-btn-cancel:hover { background:var(--bg); color:var(--t1); }
    .pg-modal-btn-primary { background:var(--blue); color:#fff; }
    .pg-modal-btn-primary:hover { background:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.25); }

    @media(max-width:575.98px){
      .pg-modal-footer{flex-direction:column;align-items:stretch;}
      .pg-modal-footer-right{justify-content:flex-end;}
      .pg-modal-row{flex-direction:column;align-items:stretch;}
    }

    /* ═══ SMTP Email Master — SaaS ═══ */

    /* ── Header Stats ── */
    .smtp-stats { display:flex; align-items:center; gap:0; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:4px; flex-shrink:0; }
    .smtp-stat { display:flex; align-items:center; gap:8px; padding:6px 18px; border-radius:8px; cursor:default; }
    .smtp-stat-div { width:1px; height:28px; background:var(--border); }
    .smtp-stat .smtp-stat-num { font-size:19px; font-weight:800; color:var(--t1); line-height:1; letter-spacing:-.3px; }
    .smtp-stat .smtp-stat-lbl { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; }

    /* ── Toolbar ── */
    .smtp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; padding:6px 10px 6px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
    .smtp-tabs { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
    .smtp-tab-div { width:1px; height:22px; background:var(--border); margin:0 6px; }
    .smtp-tab { border:none; background:none; padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--t3); cursor:pointer; transition:all .15s; white-space:nowrap; }
    .smtp-tab:hover { color:var(--t1); background:var(--bg); }
    .smtp-tab.active { background:var(--blue); color:#fff; font-weight:600; box-shadow:0 1px 4px rgba(37,99,235,.25); }
    .smtp-search { display:flex; align-items:center; gap:7px; padding:7px 11px; background:var(--bg); border:1px solid var(--border); border-radius:8px; width:210px; transition:border .15s,box-shadow .15s; flex-shrink:0; font-size:13px; }
    .smtp-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .smtp-search i { font-size:13px; color:var(--t3); flex-shrink:0; }
    .smtp-search input { border:none; background:none; outline:none; font-size:12.5px; color:var(--t1); width:100%; }
    .smtp-search input::placeholder { color:var(--t3); }

    /* ── Cards ── */
    .smtp-card {
      background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
      padding:20px; cursor:default; transition:all .2s ease;
      display:flex; flex-direction:column; height:100%;
      box-shadow:0 1px 3px rgba(0,0,0,.04);
    }
    .smtp-card:hover { border-color:var(--blue); box-shadow:0 8px 30px rgba(37,99,235,.07),0 1px 3px rgba(0,0,0,.04); transform:translateY(-2px); }

    .smtp-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
    .smtp-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; background:#fff; border:1px solid var(--border); }
    .smtp-icon img { width:100%; height:100%; object-fit:contain; padding:10px; }
    .smtp-icon-custom { font-size:24px; color:var(--t2); }

    .smtp-badge { font-size:10.5px; font-weight:600; padding:4px 11px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
    .smtp-badge.active { background:#d1fae5; color:#065f46; }
    .smtp-badge.inactive { background:#f1f5f9; color:#64748b; }

    .smtp-card-name { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:3px; letter-spacing:-.2px; }
    .smtp-card-desc { font-size:12.5px; color:var(--t2); font-weight:500; line-height:1.35; }
    .smtp-card-desc2 { font-size:11.5px; color:var(--t3); line-height:1.4; margin-top:2px; }

    .smtp-card-btm { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }

    .smtp-btn-config {
      border:1px solid var(--border); background:var(--card-bg); color:var(--t2);
      padding:7px 17px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
      transition:all .15s; display:inline-flex; align-items:center; gap:5px;
    }
    .smtp-btn-config:hover { border-color:var(--blue); color:var(--blue); background:#f8faff; }

    .smtp-toggle { position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
    .smtp-toggle input { display:none; }
    .smtp-toggle-track { position:absolute; inset:0; background:#cbd5e1; border-radius:11px; transition:background .2s; }
    .smtp-toggle-thumb { position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.12); }
    .smtp-toggle input:checked + .smtp-toggle-track { background:var(--blue); }
    .smtp-toggle input:checked + .smtp-toggle-track .smtp-toggle-thumb { transform:translateX(18px); }

    @media(max-width:767.98px){
      .smtp-stats{display:none;}
      .smtp-toolbar{flex-direction:column;align-items:stretch;padding:10px;}
      .smtp-search{width:100%;}
    }

    /* ═══ SMTP Modal ═══ */
    .smtp-modal { border:none; border-radius:16px; overflow:hidden; background:var(--card-bg); box-shadow:0 25px 80px rgba(0,0,0,.15); }
    .smtp-modal-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
    .smtp-modal-logo { width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f8fafc; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
    .smtp-modal-img { width:100%; height:100%; object-fit:contain; padding:8px; }
    .smtp-modal-hdr-txt { flex:1; }
    .smtp-modal-hdr-title { font-size:17px; font-weight:700; color:var(--t1); }
    .smtp-modal-hdr-sub { font-size:12px; color:var(--t3); margin-top:1px; }
    .smtp-modal-close { width:32px; height:32px; border:none; background:var(--bg); color:var(--t3); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .15s; flex-shrink:0; }
    .smtp-modal-close:hover { background:var(--border); color:var(--t1); }

    .smtp-modal-body { padding:20px 24px; }

    .smtp-modal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .smtp-modal-lbl { font-size:13px; font-weight:600; color:var(--t1); }
    .smtp-modal-pills { display:flex; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
    .smtp-modal-pill { border:none; background:none; padding:7px 16px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--t3); cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .15s; }
    .smtp-modal-pill.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.2); }
    .smtp-modal-pill:hover:not(.active) { color:var(--t1); background:var(--card-bg); }

    .smtp-modal-hr { border:none; border-top:1px solid var(--border); margin:18px 0; }

    .smtp-modal-fgroup { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
    .smtp-modal-fl { font-size:12.5px; font-weight:600; color:var(--t1); }
    .smtp-modal-fi { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; }
    .smtp-modal-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .smtp-modal-fi::placeholder { color:var(--t3); font-size:12.5px; }
    .smtp-modal-select { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; appearance:auto; }
    .smtp-modal-select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }

    .smtp-modal-opt-group { display:flex; gap:6px; flex-wrap:wrap; }
    .smtp-modal-opt { display:flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--t2); transition:all .15s; }
    .smtp-modal-opt:hover { border-color:var(--blue); color:var(--blue); }
    .smtp-modal-opt input { display:none; }
    .smtp-modal-opt:has(input:checked) { border-color:var(--blue); background:rgba(37,99,235,.04); color:var(--blue); }

    .smtp-modal-notice { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:11.5px; color:#166534; line-height:1.45; margin-bottom:0; }
    .smtp-modal-notice i { font-size:14px; margin-top:1px; flex-shrink:0; }

    .smtp-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--border); }
    .smtp-modal-footer-right { display:flex; align-items:center; gap:8px; }
    .smtp-modal-btn { border:none; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
    .smtp-modal-btn-ghost { background:var(--bg); color:var(--t2); }
    .smtp-modal-btn-ghost:hover { background:var(--border); color:var(--t1); }
    .smtp-modal-btn-cancel { background:transparent; color:var(--t3); }
    .smtp-modal-btn-cancel:hover { background:var(--bg); color:var(--t1); }
    .smtp-modal-btn-primary { background:var(--blue); color:#fff; }
    .smtp-modal-btn-primary:hover { background:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.25); }
    .smtp-modal-btn-primary:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }
    .smtp-modal-btn-ghost:disabled { opacity:.6; cursor:not-allowed; }

    @media(max-width:767.98px){
      .smtp-modal-footer{flex-direction:column;align-items:stretch;}
      .smtp-modal-footer-right{justify-content:flex-end;}
      .smtp-modal-row{flex-direction:column;align-items:stretch;}
    }

    /* ═══ Social Media — SaaS ═══ */

    /* ── Header Stats ── */
    .social-stats { display:flex; align-items:center; gap:0; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:4px; flex-shrink:0; }
    .social-stat { display:flex; align-items:center; gap:8px; padding:6px 18px; border-radius:8px; cursor:default; }
    .social-stat-div { width:1px; height:28px; background:var(--border); }
    .social-stat .social-stat-num { font-size:19px; font-weight:800; color:var(--t1); line-height:1; letter-spacing:-.3px; }
    .social-stat .social-stat-lbl { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; }

    /* ── Toolbar ── */
    .social-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; padding:6px 10px 6px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
    .social-tabs { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
    .social-tab-div { width:1px; height:22px; background:var(--border); margin:0 6px; }
    .social-tab { border:none; background:none; padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--t3); cursor:pointer; transition:all .15s; white-space:nowrap; }
    .social-tab:hover { color:var(--t1); background:var(--bg); }
    .social-tab.active { background:var(--blue); color:#fff; font-weight:600; box-shadow:0 1px 4px rgba(37,99,235,.25); }
    .social-search { display:flex; align-items:center; gap:7px; padding:7px 11px; background:var(--bg); border:1px solid var(--border); border-radius:8px; width:210px; transition:border .15s,box-shadow .15s; flex-shrink:0; font-size:13px; }
    .social-search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .social-search i { font-size:13px; color:var(--t3); flex-shrink:0; }
    .social-search input { border:none; background:none; outline:none; font-size:12.5px; color:var(--t1); width:100%; }
    .social-search input::placeholder { color:var(--t3); }

    /* ── Cards ── */
    .social-card {
      background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
      padding:20px; cursor:default; transition:all .2s ease;
      display:flex; flex-direction:column; height:100%;
      box-shadow:0 1px 3px rgba(0,0,0,.04);
    }
    .social-card:hover { border-color:var(--blue); box-shadow:0 8px 30px rgba(37,99,235,.07),0 1px 3px rgba(0,0,0,.04); transform:translateY(-2px); }

    .social-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
    .social-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; background:#fff; border:1px solid var(--border); }
    .social-icon img { width:100%; height:100%; object-fit:contain; padding:10px; }

    .social-badge { font-size:10.5px; font-weight:600; padding:4px 11px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
    .social-badge.active { background:#d1fae5; color:#065f46; }
    .social-badge.inactive { background:#f1f5f9; color:#64748b; }

    .social-card-name { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:3px; letter-spacing:-.2px; }
    .social-card-desc { font-size:12.5px; color:var(--t2); font-weight:500; line-height:1.35; }
    .social-card-desc2 { font-size:11.5px; color:var(--t3); line-height:1.4; margin-top:2px; }

    .social-card-field { margin-top:8px; }
    .social-fi { border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:12px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; }
    .social-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }

    .social-card-btm { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }

    .social-btn-config {
      border:1px solid var(--border); background:var(--card-bg); color:var(--t2);
      padding:7px 17px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;
      transition:all .15s; display:inline-flex; align-items:center; gap:5px;
    }
    .social-btn-config:hover { border-color:var(--blue); color:var(--blue); background:#f8faff; }

    .social-toggle { position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
    .social-toggle input { display:none; }
    .social-toggle-track { position:absolute; inset:0; background:#cbd5e1; border-radius:11px; transition:background .2s; }
    .social-toggle-thumb { position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.12); }
    .social-toggle input:checked + .social-toggle-track { background:var(--blue); }
    .social-toggle input:checked + .social-toggle-track .social-toggle-thumb { transform:translateX(18px); }

    @media(max-width:767.98px){
      .social-stats{display:none;}
      .social-toolbar{flex-direction:column;align-items:stretch;padding:10px;}
      .social-search{width:100%;}
    }

    /* ═══ Social Modal ═══ */
    .social-modal { border:none; border-radius:16px; overflow:hidden; background:var(--card-bg); box-shadow:0 25px 80px rgba(0,0,0,.15); }
    .social-modal-header { display:flex; align-items:center; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); }
    .social-modal-logo { width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f8fafc; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
    .social-modal-img { width:100%; height:100%; object-fit:contain; padding:8px; }
    .social-modal-hdr-txt { flex:1; }
    .social-modal-hdr-title { font-size:17px; font-weight:700; color:var(--t1); }
    .social-modal-hdr-sub { font-size:12px; color:var(--t3); margin-top:1px; }
    .social-modal-close { width:32px; height:32px; border:none; background:var(--bg); color:var(--t3); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .15s; flex-shrink:0; }
    .social-modal-close:hover { background:var(--border); color:var(--t1); }

    .social-modal-body { padding:20px 24px; }

    .social-modal-fgroup { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
    .social-modal-fl { font-size:12.5px; font-weight:600; color:var(--t1); }
    .social-modal-fi { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; }
    .social-modal-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .social-modal-fi::placeholder { color:var(--t3); font-size:12.5px; }
    .social-modal-ta { border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px; color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s; outline:none; width:100%; resize:vertical; font-family:inherit; }
    .social-modal-ta:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }

    .social-modal-opt-group { display:flex; gap:6px; flex-wrap:wrap; }
    .social-modal-opt { display:flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--t2); transition:all .15s; }
    .social-modal-opt:hover { border-color:var(--blue); color:var(--blue); }
    .social-modal-opt input { display:none; }
    .social-modal-opt:has(input:checked) { border-color:var(--blue); background:rgba(37,99,235,.04); color:var(--blue); }

    .social-modal-hr { border:none; border-top:1px solid var(--border); margin:18px 0; }

    .social-modal-notice { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; font-size:11.5px; color:#1e40af; line-height:1.45; margin-bottom:0; }
    .social-modal-notice i { font-size:14px; margin-top:1px; flex-shrink:0; }

    .social-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--border); }
    .social-modal-footer-right { display:flex; align-items:center; gap:8px; }
    .social-modal-btn { border:none; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
    .social-modal-btn-cancel { background:transparent; color:var(--t3); }
    .social-modal-btn-cancel:hover { background:var(--bg); color:var(--t1); }
    .social-modal-btn-primary { background:var(--blue); color:#fff; }
    .social-modal-btn-primary:hover { background:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.25); }
    .social-modal-btn-primary:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }

    @media(max-width:767.98px){
      .social-modal-footer{flex-direction:column;align-items:stretch;}
      .social-modal-footer-right{justify-content:flex-end;}
    }

    /* ═══ System Settings ═══ */
    .systm-card { background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:28px; }
    .systm-head { font-size:15px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:9px; }
    .systm-head i { font-size:16px; color:var(--blue); }
    .systm-hr { border:none; border-top:1px solid var(--border); margin:18px 0; }
    .systm-fgroup { display:flex; flex-direction:column; gap:6px; }
    .systm-fl { font-size:12.5px; font-weight:600; color:var(--t1); display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
    .systm-fl-link { font-weight:400; font-size:11px; color:var(--blue); text-decoration:none; }
    .systm-fl-link:hover { text-decoration:underline; }
    .systm-fi {
      border:1px solid var(--border); border-radius:8px; padding:9px 13px; font-size:13px;
      color:var(--t1); background:var(--card-bg); transition:border .15s,box-shadow .15s;
      outline:none; width:100%;
    }
    .systm-fi:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
    .systm-fi::placeholder { color:var(--t3); font-size:12.5px; }
    select.systm-fi { appearance:auto; cursor:pointer; }
    .systm-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
    .systm-btn { border:none; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
    .systm-btn-ghost { background:var(--bg); color:var(--t2); }
    .systm-btn-ghost:hover { background:var(--border); color:var(--t1); }
    .systm-btn-primary { background:var(--blue); color:#fff; }
    .systm-btn-primary:hover { background:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.25); }
    .systm-btn-primary:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; }

    /* ── System Settings Sidebar ── */
    .systm-side-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:16px; }
    .systm-side-head { font-size:12.5px; font-weight:700; color:var(--t1); padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; background:var(--bg); }
    .systm-side-head i { font-size:14px; color:var(--blue); }
    .systm-side-body { padding:14px 16px; }
    .systm-side-item { display:flex; align-items:flex-start; gap:10px; padding:8px 0; }
    .systm-side-item + .systm-side-item { border-top:1px solid var(--border-lt); }
    .systm-side-item-icon { width:34px; height:34px; border-radius:8px; background:#eef2ff; color:#2563eb; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
    .systm-side-item-name { font-size:12.5px; font-weight:600; color:var(--t1); }
    .systm-side-item-desc { font-size:11px; color:var(--t3); margin-top:1px; }
    .systm-tips { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
    .systm-tips li { position:relative; padding-left:18px; font-size:12px; color:var(--t2); line-height:1.45; }
    .systm-tips li::before { content:''; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--blue); }
    .systm-side-link { display:flex; align-items:center; gap:7px; padding:6px 0; font-size:12.5px; color:var(--blue); text-decoration:none; transition:color .15s; }
    .systm-side-link:hover { color:#1d4ed8; text-decoration:underline; }
    .systm-side-link i { font-size:11px; }
    .systm-side-link + .systm-side-link { border-top:1px solid var(--border-lt); }

    /* ── Subcards ── */
    .systm-subcard { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px; margin-top:12px; }
    .systm-subcard-title { font-size:12.5px; font-weight:700; color:var(--t1); margin-bottom:10px; display:flex; align-items:center; gap:6px; }

    /* ── Tables ── */
    .systm-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .systm-table thead th { text-align:left; font-weight:600; color:var(--t3); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:10px 8px 8px; border-bottom:1px solid var(--border); }
    .systm-table tbody td { padding:8px; color:var(--t1); border-bottom:1px solid var(--border-lt); }
    .systm-table-btn { display:inline-block; padding:4px 12px; border-radius:6px; font-size:11.5px; font-weight:600; color:#2563eb; background:#eef2ff; text-decoration:none; transition:all .15s; white-space:nowrap; }
    .systm-table-btn:hover { background:#dbeafe; color:#1d4ed8; }
    .systm-table-link { color:var(--blue); text-decoration:none; }
    .systm-table-link:hover { text-decoration:underline; }

    /* ── Toggle Switches ── */
    .systm-toggle-lg { position:relative; display:inline-block; width:42px; height:24px; cursor:pointer; }
    .systm-toggle-lg input { position:absolute; opacity:0; width:0; height:0; }
    .systm-toggle-lg-track { position:absolute; inset:0; background:var(--border); border-radius:12px; transition:background .2s; }
    .systm-toggle-lg input:checked + .systm-toggle-lg-track { background:var(--blue); }
    .systm-toggle-lg-thumb { position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
    .systm-toggle-lg input:checked + .systm-toggle-lg-track .systm-toggle-lg-thumb { transform:translateX(18px); }

    .systm-toggle-sm { position:relative; display:inline-block; width:32px; height:18px; cursor:pointer; margin-bottom:0; }
    .systm-toggle-sm input { position:absolute; opacity:0; width:0; height:0; }
    .systm-toggle-sm-track { position:absolute; inset:0; background:var(--border); border-radius:9px; transition:background .2s; }
    .systm-toggle-sm input:checked + .systm-toggle-sm-track { background:var(--blue); }
    .systm-toggle-sm-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
    .systm-toggle-sm input:checked + .systm-toggle-sm-track .systm-toggle-sm-thumb { transform:translateX(14px); }

    /* ═══ Dark Mode Overrides — Bootstrap Utility Overrides ═══ */

    /* Offcanvas bg-white → card-bg in dark mode */
    [data-bs-theme="dark"] .offcanvas.bg-white {
      background: var(--card-bg) !important;
    }

    /* text-muted → use CSS variable for proper dark mode contrast */
    [data-bs-theme="dark"] .text-muted {
      color: var(--t3) !important;
    }

    /* Badge bg-* — semi-transparent on dark bg for readability */
    [data-bs-theme="dark"] .badge.bg-primary { background: rgba(37,99,235,.25) !important; color: #93bbfb !important; }
    [data-bs-theme="dark"] .badge.bg-danger { background: rgba(220,38,38,.25) !important; color: #fca5a5 !important; }
    [data-bs-theme="dark"] .badge.bg-warning { background: rgba(217,119,6,.25) !important; color: #fcd34d !important; }
    [data-bs-theme="dark"] .badge.bg-warning.text-dark { color: #0f172a !important; }
    [data-bs-theme="dark"] .badge.bg-success { background: rgba(5,150,105,.25) !important; color: #6ee7b7 !important; }
    [data-bs-theme="dark"] .badge.bg-secondary { background: rgba(100,116,139,.25) !important; color: #94a3b8 !important; }
    [data-bs-theme="dark"] .badge.bg-info { background: rgba(8,145,178,.25) !important; color: #67e8f9 !important; }
    [data-bs-theme="dark"] .badge.bg-dark { background: rgba(30,41,59,.5) !important; color: #e2e8f0 !important; }
    [data-bs-theme="dark"] .badge.bg-light { background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }

    /* Table-striped / table-bordered outside table-wrapper — ensure dark bg */
    [data-bs-theme="dark"] .table-striped,
    [data-bs-theme="dark"] .table-bordered {
      --bs-table-bg: var(--card-bg);
      --bs-table-color: var(--t2);
      --bs-table-striped-bg: rgba(255,255,255,.03);
      --bs-table-striped-color: var(--t2);
      --bs-table-hover-bg: rgba(255,255,255,.05);
      --bs-table-border-color: var(--border);
    }

    /* systm-table-btn — dark mode subtle blue */
    [data-bs-theme="dark"] .systm-table-btn {
      background: rgba(37,99,235,.2);
      color: #93bbfb;
    }
    [data-bs-theme="dark"] .systm-table-btn:hover {
      background: rgba(37,99,235,.3);
      color: #a5c9ff;
    }

    /* border-gray-* → use theme border in dark mode */
    [data-bs-theme="dark"] [class*="border-gray-"] {
      border-color: var(--border) !important;
    }

    /* ═══ Card Dark Mode Overrides ═══ */

    /* style.css hardcodes .card { background:#fff; border-color:rgba(17,24,39,.125) } — override in dark mode */
    [data-bs-theme="dark"] .card {
      background-color: var(--card-bg);
      border-color: var(--border);
    }

    /* style.css hardcodes .card-header { background:rgba(17,24,39,.03) } */
    [data-bs-theme="dark"] .card-header {
      background-color: rgba(255,255,255,0.04);
      border-bottom-color: var(--border);
    }

    /* style.css hardcodes .card-footer { background:rgba(17,24,39,.03) } */
    [data-bs-theme="dark"] .card-footer {
      background-color: rgba(255,255,255,0.04);
      border-top-color: var(--border);
    }

    /* style.css hardcodes .fileinput .card { background:#e2eaf6c9 } */
    [data-bs-theme="dark"] .fileinput .card {
      background: rgba(255,255,255,0.04);
      border-color: var(--border);
    }

    /* Shadows on dark backgrounds need more opacity */
    [data-bs-theme="dark"] .shadow-sm {
      box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    }
    [data-bs-theme="dark"] .shadow {
      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px 0 rgba(0,0,0,0.2) !important;
    }

    /* style.css hardcodes .alert-info { background:#d3dff5; color:#153a7c; border-color:#bdd0f0 } */
    [data-bs-theme="dark"] .alert-info {
      background: rgba(37,99,235,.15);
      color: var(--t1);
      border-color: rgba(37,99,235,.25);
    }

    /* ═══ Typography Dark Mode ═══ */

    /* style.css hardcodes h1-h6, .h1-.h6 { color:#1F2937 } */
    [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
    [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
    [data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
    [data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
    [data-bs-theme="dark"] .card-title, [data-bs-theme="dark"] .card-subtitle {
      color: var(--t1);
    }

    /* style.css hardcodes p, small, label, strong — no color set, inherit. This ensures inheritance works */
    [data-bs-theme="dark"] p, [data-bs-theme="dark"] small, [data-bs-theme="dark"] .small,
    [data-bs-theme="dark"] label, [data-bs-theme="dark"] .form-label,
    [data-bs-theme="dark"] strong, [data-bs-theme="dark"] .form-text,
    [data-bs-theme="dark"] .card-text {
      color: var(--t2);
    }

    /* style.css hardcodes a { color:#1F2937 } a:hover { color:black } */
    /* Generic a tag — more specific class overrides below (btn, nav-link, etc.) take precedence */
    [data-bs-theme="dark"] a {
      color: var(--blue);
    }
    [data-bs-theme="dark"] a:hover {
      color: #60a5fa;
    }
    /* Sidebar items use theme-aware CSS variables — restore their proper colors */
    [data-bs-theme="dark"] .s-item {
      color: var(--s-text);
    }
    [data-bs-theme="dark"] .s-item:hover {
      color: var(--s-hover-text);
    }
    [data-bs-theme="dark"] .s-item.active {
      color: var(--s-active-text);
    }
    [data-bs-theme="dark"] .s-sub a {
      color: var(--s-text-dim);
    }
    [data-bs-theme="dark"] .s-sub a:hover {
      color: var(--s-hover-text);
    }
    [data-bs-theme="dark"] .s-sub a.sub-active {
      color: var(--s-hover-text);
    }

    /* style.css hardcodes code { color:#EF4683 } */
    [data-bs-theme="dark"] code {
      color: #f472b6;
    }

    /* style.css hardcodes caption, .form-text { color:#58677d } */
    [data-bs-theme="dark"] caption {
      color: var(--t3);
    }

    /* ═══ Forms Dark Mode ═══ */

    /* style.css hardcodes .form-control { color:#6B7280; background:#fff; border:#D1D5DB } */
    [data-bs-theme="dark"] .form-control {
      color: var(--t1);
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .form-control:focus {
      color: var(--t1);
      background-color: var(--card-bg);
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    [data-bs-theme="dark"] .form-control::placeholder {
      color: var(--t3);
    }
    [data-bs-theme="dark"] .form-control:disabled,
    [data-bs-theme="dark"] .form-control[readonly] {
      background-color: rgba(255,255,255,.04);
    }
    [data-bs-theme="dark"] .form-control-plaintext {
      color: var(--t1);
    }

    /* style.css hardcodes .form-select { color:#6B7280; background:#fff; border:#D1D5DB } */
    [data-bs-theme="dark"] .form-select {
      color: var(--t1);
      background-color: var(--card-bg);
      border-color: var(--border);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
    [data-bs-theme="dark"] .form-select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    [data-bs-theme="dark"] .form-select:disabled {
      color: var(--t3);
      background-color: rgba(255,255,255,.04);
    }

    /* style.css hardcodes .input-group-text { color:#6B7280; background:#fff; border:#D1D5DB } */
    [data-bs-theme="dark"] .input-group-text {
      color: var(--t2);
      background-color: rgba(255,255,255,.04);
      border-color: var(--border);
    }

    /* style.css hardcodes .form-check-input { background:#F2F4F6; border:#D1D5DB } */
    [data-bs-theme="dark"] .form-check-input {
      background-color: rgba(255,255,255,.08);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .form-check-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    [data-bs-theme="dark"] .form-check-input:checked {
      background-color: var(--blue);
      border-color: var(--blue);
    }
    [data-bs-theme="dark"] .form-switch .form-check-input {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
    }
    [data-bs-theme="dark"] .form-switch .form-check-input:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    /* ═══ Dropdown Dark Mode ═══ */

    /* style.css hardcodes .dropdown-menu { color:#374151; background:#fff; border:#E5E7EB } */
    [data-bs-theme="dark"] .dropdown-menu {
      color: var(--t2);
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .dropdown-item {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .dropdown-item:hover,
    [data-bs-theme="dark"] .dropdown-item:focus {
      color: var(--t1);
      background-color: rgba(255,255,255,.05);
    }
    [data-bs-theme="dark"] .dropdown-item.active,
    [data-bs-theme="dark"] .dropdown-item:active {
      color: var(--t1);
      background-color: rgba(37,99,235,.2);
    }
    [data-bs-theme="dark"] .dropdown-item.disabled,
    [data-bs-theme="dark"] .dropdown-item:disabled {
      color: var(--t3);
    }
    [data-bs-theme="dark"] .dropdown-header {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .dropdown-divider {
      border-top-color: var(--border);
    }

    /* ═══ Modal Dark Mode ═══ */

    /* style.css hardcodes .modal-content { background:#fff; border:rgba(17,24,39,.2) } */
    [data-bs-theme="dark"] .modal-content {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .modal-header {
      border-bottom-color: var(--border);
    }
    [data-bs-theme="dark"] .modal-footer {
      border-top-color: var(--border);
    }
    [data-bs-theme="dark"] .modal-backdrop {
      background-color: #000;
      opacity: .6;
    }

    /* style.css hardcodes .btn-close { color:#111827 } — SVG filter invert for dark mode */
    [data-bs-theme="dark"] .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* ═══ List Group Dark Mode ═══ */

    /* style.css hardcodes .list-group-item { color:#111827; background:#fff; border:rgba(17,24,39,.125) } */
    [data-bs-theme="dark"] .list-group-item {
      color: var(--t2);
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .list-group-item-action:hover,
    [data-bs-theme="dark"] .list-group-item-action:focus {
      color: var(--t1);
      background-color: rgba(255,255,255,.05);
    }
    [data-bs-theme="dark"] .list-group-item-action:active {
      color: var(--t1);
      background-color: rgba(255,255,255,.08);
    }
    [data-bs-theme="dark"] .list-group-item.active {
      color: #fff;
      background-color: var(--blue);
      border-color: var(--blue);
    }
    [data-bs-theme="dark"] .list-group-item.disabled,
    [data-bs-theme="dark"] .list-group-item:disabled {
      color: var(--t3);
      background-color: var(--card-bg);
    }

    /* ═══ Pagination Dark Mode ═══ */

    /* style.css hardcodes .page-link { color:#1F2937; background:#fff; border:#9CA3AF } */
    [data-bs-theme="dark"] .page-link {
      color: var(--t2);
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .page-link:hover {
      color: var(--t1);
      background-color: rgba(255,255,255,.08);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .page-item.active .page-link {
      color: #fff;
      background-color: var(--blue);
      border-color: var(--blue);
    }
    [data-bs-theme="dark"] .page-item.disabled .page-link {
      color: var(--t3);
      background-color: var(--card-bg);
      border-color: var(--border);
    }

    /* ═══ Breadcrumb Dark Mode ═══ */

    /* style.css hardcodes .breadcrumb { background:#E5E7EB } */
    [data-bs-theme="dark"] .breadcrumb {
      background-color: transparent;
    }
    /* style.css hardcodes .breadcrumb-item, .breadcrumb-item a { color:#374151 } */
    [data-bs-theme="dark"] .breadcrumb-item,
    [data-bs-theme="dark"] .breadcrumb-item a {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .breadcrumb-item.active {
      color: var(--t3);
    }
    [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
      color: var(--t3);
    }

    /* ═══ Nav Dark Mode ═══ */

    /* style.css hardcodes .nav-link { color:#1F2937 } */
    [data-bs-theme="dark"] .nav-link {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .nav-link:hover,
    [data-bs-theme="dark"] .nav-link:focus {
      color: var(--t1);
    }
    [data-bs-theme="dark"] .nav-link.disabled {
      color: var(--t3);
    }
    [data-bs-theme="dark"] .nav-tabs .nav-link.active {
      color: var(--t1);
      background-color: var(--card-bg);
      border-color: var(--border) var(--border) var(--card-bg);
    }
    [data-bs-theme="dark"] .nav-tabs .nav-link:hover,
    [data-bs-theme="dark"] .nav-tabs .nav-link:focus {
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .nav-pills .nav-link.active {
      color: var(--t1);
      background-color: rgba(37,99,235,.2);
    }

    /* ═══ Progress Dark Mode ═══ */

    /* style.css hardcodes .progress { background:#E5E7EB } */
    [data-bs-theme="dark"] .progress {
      background-color: rgba(255,255,255,.08);
    }
    [data-bs-theme="dark"] .progress-bar {
      background-color: var(--blue);
    }

    /* ═══ Toast Dark Mode ═══ */

    /* style.css hardcodes .toast { background:rgba(255,255,255,.85) } */
    [data-bs-theme="dark"] .toast {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .toast-header {
      color: var(--t2);
      background-color: rgba(255,255,255,.04);
      border-bottom-color: var(--border);
    }

    /* ═══ Buttons Dark Mode ═══ */

    /* style.css hardcodes .btn { color:#374151 } */
    [data-bs-theme="dark"] .btn {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .btn:hover {
      color: var(--t1);
    }
    /* Primary button stays blue but adapt hover */
    [data-bs-theme="dark"] .btn-primary {
      color: #fff;
      background-color: #2563eb;
      border-color: #2563eb;
    }
    [data-bs-theme="dark"] .btn-primary:hover {
      color: #fff;
      background-color: #1d4ed8;
      border-color: #1d4ed8;
    }
    /* Secondary button */
    [data-bs-theme="dark"] .btn-secondary {
      color: var(--t1);
      background-color: rgba(255,255,255,.1);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .btn-secondary:hover {
      background-color: rgba(255,255,255,.15);
      border-color: var(--border);
    }
    /* Success button */
    [data-bs-theme="dark"] .btn-success {
      background-color: #059669;
      border-color: #059669;
    }
    [data-bs-theme="dark"] .btn-success:hover {
      background-color: #047857;
      border-color: #047857;
    }
    /* Danger button */
    [data-bs-theme="dark"] .btn-danger {
      background-color: #dc2626;
      border-color: #dc2626;
    }
    [data-bs-theme="dark"] .btn-danger:hover {
      background-color: #b91c1c;
      border-color: #b91c1c;
    }
    /* Warning button */
    [data-bs-theme="dark"] .btn-warning {
      color: #0f172a;
      background-color: #f59e0b;
      border-color: #f59e0b;
    }
    [data-bs-theme="dark"] .btn-warning:hover {
      background-color: #d97706;
      border-color: #d97706;
    }
    /* Info button */
    [data-bs-theme="dark"] .btn-info {
      background-color: #0891b2;
      border-color: #0891b2;
    }
    [data-bs-theme="dark"] .btn-info:hover {
      background-color: #0e7490;
      border-color: #0e7490;
    }
    /* Outline buttons */
    [data-bs-theme="dark"] .btn-outline-primary {
      color: #93bbfb;
      border-color: #93bbfb;
    }
    [data-bs-theme="dark"] .btn-outline-primary:hover {
      color: #fff;
      background-color: #2563eb;
      border-color: #2563eb;
    }
    [data-bs-theme="dark"] .btn-outline-secondary {
      color: var(--t1);
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.15);
    }
    [data-bs-theme="dark"] .btn-outline-secondary:hover {
      color: #fff;
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.25);
    }
    [data-bs-theme="dark"] .btn-outline-danger {
      color: #fca5a5;
      border-color: #fca5a5;
    }
    [data-bs-theme="dark"] .btn-outline-danger:hover {
      color: #fff;
      background-color: #dc2626;
      border-color: #dc2626;
    }
    [data-bs-theme="dark"] .btn-outline-success {
      color: #6ee7b7;
      border-color: #6ee7b7;
    }
    [data-bs-theme="dark"] .btn-outline-success:hover {
      color: #fff;
      background-color: #059669;
      border-color: #059669;
    }
    [data-bs-theme="dark"] .btn-outline-warning {
      color: #fcd34d;
      border-color: #fcd34d;
    }
    [data-bs-theme="dark"] .btn-outline-warning:hover {
      color: #0f172a;
      background-color: #f59e0b;
      border-color: #f59e0b;
    }
    /* btn-white */
    [data-bs-theme="dark"] .btn-white {
      color: var(--t1);
      background-color: rgba(255,255,255,.1);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .btn-white:hover {
      background-color: rgba(255,255,255,.15);
    }
    /* Gray buttons */
    [data-bs-theme="dark"] .btn-gray-50,
    [data-bs-theme="dark"] .btn-gray-100,
    [data-bs-theme="dark"] .btn-gray-200 {
      color: var(--t1);
      background-color: rgba(255,255,255,.08);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .btn-gray-50:hover,
    [data-bs-theme="dark"] .btn-gray-100:hover,
    [data-bs-theme="dark"] .btn-gray-200:hover {
      background-color: rgba(255,255,255,.12);
    }
    /* Link button */
    [data-bs-theme="dark"] .btn-link {
      color: var(--blue);
    }
    [data-bs-theme="dark"] .btn-link:hover {
      color: #60a5fa;
    }

    /* ═══ Table Dark Mode — variant overrides ═══ */

    /* style.css hardcodes .table thead-dark { background:#1F2937; color:#fff } */
    [data-bs-theme="dark"] .table .thead-dark th {
      background-color: rgba(255,255,255,.08);
      color: var(--t1);
    }
    /* style.css hardcodes .table thead-light { background:#F2F4F6; color:#1F2937 } */
    [data-bs-theme="dark"] .table .thead-light th {
      background-color: rgba(255,255,255,.04);
      color: var(--t1);
    }

    /* ═══ Table variant bg in dark mode ═══ */
    [data-bs-theme="dark"] .table-primary {
      --bs-table-bg: rgba(37,99,235,.12);
      --bs-table-color: #93bbfb;
    }
    [data-bs-theme="dark"] .table-success {
      --bs-table-bg: rgba(5,150,105,.12);
      --bs-table-color: #6ee7b7;
    }
    [data-bs-theme="dark"] .table-danger {
      --bs-table-bg: rgba(220,38,38,.12);
      --bs-table-color: #fca5a5;
    }
    [data-bs-theme="dark"] .table-warning {
      --bs-table-bg: rgba(217,119,6,.12);
      --bs-table-color: #fcd34d;
    }
    [data-bs-theme="dark"] .table-info {
      --bs-table-bg: rgba(8,145,178,.12);
      --bs-table-color: #67e8f9;
    }
    [data-bs-theme="dark"] .table-light {
      --bs-table-bg: rgba(255,255,255,.04);
      --bs-table-color: var(--t2);
    }
    [data-bs-theme="dark"] .table-dark {
      --bs-table-bg: rgba(0,0,0,.3);
      --bs-table-color: var(--t1);
    }

    /* style.css hardcodes .table { color:#374151; border-color:#E5E7EB } — ensure var-based */
    [data-bs-theme="dark"] .table {
      color: var(--t2);
      border-color: var(--border);
    }

    /* ═══ Navbar Dark Mode ═══ */

    [data-bs-theme="dark"] .navbar-light .navbar-brand {
      color: var(--t1);
    }
    [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
    [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:focus {
      color: var(--t1);
    }

    /* ═══ Popover / Tooltip Dark Mode ═══ */

    [data-bs-theme="dark"] .popover {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .popover-header {
      background-color: rgba(255,255,255,.04);
      color: var(--t1);
      border-bottom-color: var(--border);
    }
    [data-bs-theme="dark"] .popover-body {
      color: var(--t2);
    }

    /* ═══ Offcanvas Dark Mode ═══ */

    [data-bs-theme="dark"] .offcanvas {
      background-color: var(--card-bg);
      color: var(--t2);
    }

    /* ═══ Accordion Dark Mode ═══ */

    [data-bs-theme="dark"] .accordion-item {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .accordion-button {
      color: var(--t1);
      background-color: var(--card-bg);
    }
    [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
      color: var(--t1);
      background-color: rgba(37,99,235,.08);
    }
    [data-bs-theme="dark"] .accordion-button::after {
      filter: invert(1);
    }

    /* ═══ Select2 Dark Mode ═══ */

    [data-bs-theme="dark"] .select2-container--default .select2-selection--single,
    [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
      color: var(--t1);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
      color: var(--t3);
    }
    [data-bs-theme="dark"] .select2-dropdown {
      background-color: var(--card-bg);
      border-color: var(--border);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
      background-color: rgba(37,99,235,.2);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-results__option {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
      background-color: var(--card-bg);
      border-color: var(--border);
      color: var(--t1);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: rgba(37,99,235,.2);
      border-color: rgba(37,99,235,.3);
      color: var(--t1);
    }
    [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      color: var(--t2);
    }

    /* ═══ List Items (ul/li) Dark Mode ═══ */

    /* style.css hardcodes .mega_menu_canvas ul li { color:#404040 } */
    [data-bs-theme="dark"] .mega_menu_canvas ul li {
      color: var(--t2);
    }

    /* style.css hardcodes .footer ul li a { color:#374151 } — hover: #1F2937 */
    [data-bs-theme="dark"] .footer ul li a {
      color: var(--t2);
    }
    [data-bs-theme="dark"] .footer ul li a:hover {
      color: var(--t1);
    }

    /* style.css hardcodes .register_box_00 ul li a { color:#000 } */
    [data-bs-theme="dark"] .register_box_00 ul li a {
      color: var(--t2);
    }

    /* Generic list elements — use theme color directly instead of relying on inheritance */
    [data-bs-theme="dark"] ul, [data-bs-theme="dark"] ol,
    [data-bs-theme="dark"] li:not(.breadcrumb-item):not(.list-group-item):not(.page-item):not(.nav-item) {
      color: var(--t2);
    }