/* ============================================================
   BURBLE ADMIN — Design System Library v1.0
   Bootstrap 4.6.0 companion. Do not bundle Bootstrap here.
   ============================================================ */

/* ── SECTION 1: Admin tokens + layout + sidebar + topbar ───── */

        /* ═══════════════════════════════════════
           DESIGN SYSTEM TOKENS
        ═══════════════════════════════════════ */
        :root {
            --navy:        #1A2744;
            --navy-dark:   #111C35;
            --navy-light:  #243359;
            --teal:        #00BCD4;
            --teal-dark:   #0097A7;
            --teal-glow:   rgba(0,188,212,.18);
            --cyan-light:  #26C6DA;
            --blue-card:   #1565C0;
            --blue-lgt:    #1976D2;
            --green-card:  #2E7D32;
            --green-lgt:   #388E3C;
            --gray-card:   #607D8B;
            --gray-lgt:    #78909C;
            --white:       #FFFFFF;
            --bg:          #F0F4F8;
            --sidebar-w:   240px;
            --header-h:    64px;
            --radius:      16px;
            --radius-sm:   10px;
        }

        *, *::before, *::after { box-sizing: border-box; }

        html {
            height: 100%;
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
        }
        body {
            height: 100%;
            overflow: hidden;
            font-family: 'Inter', 'Nunito', sans-serif;
            background: var(--bg);
            margin: 0 !important;
            padding: 0 !important;
            flex: none !important;
            min-height: unset !important;
        }

        /* ═══════════════════════════════════════
           LAYOUT SHELL
        ═══════════════════════════════════════ */
        .shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* ═══════════════════════════════════════
           SIDEBAR
        ═══════════════════════════════════════ */

        /* Neutralise sb-admin-2.min.css overrides that target .sidebar */
        .sidebar,
        .sidebar.toggled {
            min-height: unset !important;
        }
        /* .sidebar.toggled — added by common.js on Manage Products pages.
           Mirror our sb-collapsed state: 64px wide, icons only, but still scrollable. */
        .sidebar.toggled {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            width: 64px !important;
            min-width: 64px !important;
        }
        .sidebar.toggled .sb-logo-text,
        .sidebar.toggled .sb-section-label,
        .sidebar.toggled .sb-item-label,
        .sidebar.toggled .sb-chevron,
        .sidebar.toggled .sb-collapse,
        .sidebar.toggled .sb-divider { display: none !important; }
        .sidebar.toggled .sb-logo { justify-content: center; padding: 18px 12px; }
        .sidebar.toggled .sb-section { padding: 4px 8px; }
        .sidebar.toggled .sb-item { justify-content: center; padding: 10px 0; }
        .sidebar.toggled .sb-item-left { justify-content: center; }
        .sidebar.toggled .sb-item-icon { width: 36px; height: 36px; border-radius: 10px; }
        .sidebar.toggled .sb-toggler-wrap { justify-content: center; padding: 14px 8px; }

        @media (min-width: 576px) {
            .sidebar { width: var(--sidebar-w) !important; }
        }
        @media (min-width: 768px) {
            .sidebar { width: var(--sidebar-w) !important; }
        }

        .sidebar {
            width: var(--sidebar-w) !important;
            min-width: var(--sidebar-w);
            background: linear-gradient(160deg, #0A3576 0%, #0D47A1 100%);
            display: flex !important;
            flex-direction: column;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            flex-shrink: 0;
            z-index: 20;
            box-shadow: 4px 0 24px rgba(0,0,0,.25);
            transition: width .25s ease, min-width .25s ease;
        }
        .sidebar::-webkit-scrollbar { width: 5px; }
        .sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }

        /* ── Disable transition on initial load ── */
        html.sb-no-transition .sidebar { transition: none !important; }

        /* ── Sidebar collapsed ── */
        html.sb-collapsed .sidebar { width: 64px !important; min-width: 64px; }
        html.sb-collapsed .sidebar .sb-logo-text,
        html.sb-collapsed .sidebar .sb-section-label,
        html.sb-collapsed .sidebar .sb-item-label,
        html.sb-collapsed .sidebar .sb-chevron,
        html.sb-collapsed .sidebar .sb-collapse,
        html.sb-collapsed .sidebar .sb-divider { display: none; }
        html.sb-collapsed .sidebar .sb-logo {
            justify-content: center;
            padding: 18px 12px;
        }
        html.sb-collapsed .sidebar .sb-section { padding: 4px 8px; }
        html.sb-collapsed .sidebar .sb-item {
            justify-content: center;
            padding: 10px 0;
        }
        html.sb-collapsed .sidebar .sb-item-left { justify-content: center; }
        html.sb-collapsed .sidebar .sb-item-icon {
            width: 36px; height: 36px; border-radius: 10px;
        }

        /* ── Dropdown indicator dot (collapsed only) ── */
        html.sb-collapsed .sidebar .sb-item[data-toggle="collapse"] .sb-item-icon {
            position: relative;
        }
        html.sb-collapsed .sidebar .sb-item[data-toggle="collapse"] .sb-item-icon::after {
            content: '';
            position: absolute;
            bottom: 4px; right: 4px;
            width: 5px; height: 5px;
            border-radius: 50%;
            background: rgba(0,188,212,.6);
            transition: background .18s;
        }
        html.sb-collapsed .sidebar .sb-item[data-toggle="collapse"]:hover .sb-item-icon::after,
        html.sb-collapsed .sidebar .sb-item[data-toggle="collapse"].active .sb-item-icon::after {
            background: var(--teal);
        }

        /* ── Collapsed sidebar: tooltip ── */
        #sb-tooltip {
            position: fixed;
            background: #1A2744;
            color: #fff;
            padding: 5px 12px;
            border-radius: 7px;
            font-size: 12.5px;
            font-weight: 500;
            white-space: nowrap;
            z-index: 2000;
            pointer-events: none;
            opacity: 0;
            transition: opacity .12s;
            box-shadow: 0 4px 14px rgba(0,0,0,.3);
            transform: translateY(-50%);
            font-family: 'Inter', sans-serif;
        }
        #sb-tooltip::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-right-color: #1A2744;
        }

        /* ── Collapsed sidebar: flyout submenu ── */
        #sb-flyout {
            position: fixed;
            background: #0D2B5E;
            border-radius: 10px;
            z-index: 2000;
            padding: 6px 0;
            box-shadow: 0 10px 36px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
            border: 1px solid rgba(255,255,255,.09);
            opacity: 0;
            pointer-events: none;
            transition: opacity .12s;
            visibility: hidden;
            min-width: 175px;
            font-family: 'Inter', sans-serif;
        }
        #sb-flyout.sb-flyout-open {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        #sb-flyout-title {
            padding: 8px 14px 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: rgba(255,255,255,.35);
            border-bottom: 1px solid rgba(255,255,255,.07);
            margin-bottom: 3px;
        }
        #sb-flyout a {
            display: block;
            padding: 8px 14px;
            font-size: 12.5px;
            font-weight: 400;
            color: rgba(255,255,255,.65);
            text-decoration: none;
            transition: background .1s, color .1s;
            white-space: nowrap;
        }
        #sb-flyout a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
        #sb-flyout a.active { color: var(--teal); font-weight: 600; }

        /* ── Sidebar toggler (bottom of sidebar) ── */
        .sb-toggler-wrap {
            margin-top: auto;
            padding: 14px 16px;
            border-top: 1px solid rgba(255,255,255,.07);
            display: flex;
            justify-content: flex-end;
            flex-shrink: 0;
        }
        .sb-toggler-btn {
            width: 34px; height: 34px;
            border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.06);
            color: rgba(255,255,255,.5);
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
        }
        .sb-toggler-btn:hover {
            background: rgba(0,188,212,.22);
            border-color: rgba(0,188,212,.55);
            color: #fff;
            box-shadow: 0 0 0 4px rgba(0,188,212,.12), 0 2px 8px rgba(0,0,0,.2);
        }
        .sb-toggler-btn svg { transition: transform .25s ease; }
        html.sb-collapsed .sidebar .sb-toggler-btn svg { transform: rotate(180deg); }
        html.sb-collapsed .sidebar .sb-toggler-wrap { justify-content: center; padding: 14px 8px; }

        /* Logo */
        .sb-logo {
            display: flex; align-items: center; gap: 11px;
            padding: 20px 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,.07);
            text-decoration: none;
            flex-shrink: 0;
        }
        .sb-logo-icon {
            width: 38px; height: 38px; border-radius: 10px;
            background: linear-gradient(135deg, var(--teal), var(--cyan-light));
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 12px rgba(0,188,212,.35);
            flex-shrink: 0;
        }
        .sb-logo-icon img { width: 22px; height: 22px; object-fit: contain; }
        .sb-logo-text {
            font-size: 14px; font-weight: 800; letter-spacing: .06em;
            color: var(--white); text-transform: uppercase;
        }

        /* Section label */
        .sb-section { padding: 14px 12px 6px; }
        .sb-section-label {
            font-size: 10px; font-weight: 600; letter-spacing: .1em;
            color: rgba(255,255,255,.3); text-transform: uppercase;
            padding: 0 8px; margin-bottom: 6px;
        }

        /* Nav item */
        .sb-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 9px 12px; border-radius: var(--radius-sm);
            cursor: pointer; text-decoration: none;
            transition: background .18s, color .18s;
            gap: 10px;
        }
        .sb-item:hover { background: rgba(255,255,255,.07); text-decoration: none; }
        .sb-item.active {
            background: rgba(255,255,255,.1);
        }
        .sb-item-left { display: flex; align-items: center; gap: 10px; }
        .sb-item-icon {
            width: 30px; height: 30px; border-radius: 8px;
            background: rgba(255,255,255,.06);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: background .18s;
        }
        .sb-item.active .sb-item-icon {
            background: var(--teal);
            box-shadow: 0 3px 10px rgba(0,188,212,.45);
        }
        .sb-item:hover .sb-item-icon { background: rgba(255,255,255,.1); }
        .sb-item-icon svg { width: 14px; height: 14px; color: rgba(255,255,255,.55); }
        .sb-item.active .sb-item-icon svg { color: var(--white); }
        .sb-item:hover .sb-item-icon svg { color: rgba(255,255,255,.85); }
        .sb-item-icon i { font-size: 13px; color: rgba(255,255,255,.55); }
        .sb-item.active .sb-item-icon i { color: var(--white); }
        .sb-item:hover .sb-item-icon i { color: rgba(255,255,255,.85); }
        .sb-item-label {
            font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65);
            transition: color .18s; white-space: nowrap;
        }
        .sb-item.active .sb-item-label { color: var(--white); font-weight: 600; }
        .sb-item:hover .sb-item-label { color: var(--white); }
        .sb-chevron { color: rgba(255,255,255,.3); flex-shrink: 0; transition: transform .2s; }
        .sb-item[aria-expanded="true"] .sb-chevron { transform: rotate(90deg); }

        /* Collapse sub-menu */
        .sb-collapse { padding: 0 12px 4px; }
        .sb-collapse-inner {
            background: rgba(255,255,255,.04);
            border-radius: var(--radius-sm);
            padding: 4px 0;
            border-left: 2px solid rgba(0,188,212,.2);
            margin-left: 8px;
        }
        .sb-sub-item {
            display: block;
            padding: 7px 14px 7px 20px;
            font-size: 12.5px; font-weight: 400;
            color: rgba(255,255,255,.55);
            text-decoration: none;
            transition: color .18s, background .18s;
            border-radius: 6px;
        }
        .sb-sub-item:hover { color: var(--white); background: rgba(255,255,255,.05); text-decoration: none; }
        .sb-sub-item.active { color: var(--teal); font-weight: 600; }

        /* Sidebar divider */
        .sb-divider {
            height: 0;
            border: none;
            border-top: 1px solid rgba(255,255,255,.25);
            margin: 6px 16px;
        }

        /* ═══════════════════════════════════════
           MAIN COLUMN
        ═══════════════════════════════════════ */
        .main-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-width: 0;
        }

        /* ═══════════════════════════════════════
           TOPBAR
        ═══════════════════════════════════════ */
        .topbar {
            flex-shrink: 0;
            height: var(--header-h);
            background: var(--white);
            border-bottom: 1px solid rgba(0,0,0,.07);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,.05);
            position: relative; z-index: 10;
        }

        .hdr-brand { display: flex; align-items: center; gap: 8px; }
        .hdr-brand-icon {
            width: 34px; height: 34px; border-radius: 9px;
            background: linear-gradient(135deg, var(--teal), var(--cyan-light));
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 3px 10px rgba(0,188,212,.3);
            text-decoration: none;
        }
        .hdr-brand-icon img { width: 20px; height: 20px; object-fit: contain; }
        .hdr-brand-name { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .03em; }
        .hdr-brand-sub  { font-size: 10px; font-weight: 400; color: #888; display: block; }

        .hdr-center { display: flex; align-items: center; gap: 8px; }
        .topbar-date {
            display: inline-flex; align-items: center; gap: 7px;
            background: linear-gradient(135deg, var(--navy) 0%, #1565C0 100%);
            padding: 6px 14px; border-radius: 20px;
            box-shadow: 0 2px 8px rgba(26,39,68,.18);
            user-select: none; white-space: nowrap;
        }
        .topbar-date .td-icon { display: flex; align-items: center; flex-shrink: 0; }
        .topbar-date .td-day { font-size: 14px; font-weight: 800; color: #fff; line-height: 1; }
        .topbar-date .td-sep { width: 1px; height: 14px; background: rgba(255,255,255,.3); flex-shrink: 0; }
        .topbar-date .td-text { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; }

        /* ── Topbar left / right zones ── */
        .topbar-left  { display: flex; align-items: center; gap: 0; }
        .topbar-right { display: flex; align-items: center; gap: 10px; }

        /* Vertical separator between logo and facility */
        .hdr-sep {
            width: 1px; height: 20px;
            background: rgba(0,0,0,.12);
            margin: 0 14px; flex-shrink: 0;
        }

        /* Facility selector CSS moved to extensions/burblesoft.css */

        /* ── Avatar button (user, right side) ── */
        .avatar-btn {
            width: 36px; height: 36px; border-radius: 9px;
            background: linear-gradient(135deg, var(--teal) 0%, #1565C0 100%);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; font-weight: 700; color: var(--white);
            cursor: pointer; position: relative; flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,188,212,.3);
            transition: box-shadow .2s, transform .15s;
            user-select: none;
        }
        .avatar-btn:hover, .avatar-btn:focus-within {
            box-shadow: 0 4px 16px rgba(0,188,212,.45);
            transform: translateY(-1px); outline: none;
        }

        /* Avatar dropdown panel */
        .avatar-panel {
            position: absolute;
            top: 100%; right: 0;
            padding-top: 10px;
            background: transparent;
            min-width: 230px; z-index: 1050;
            opacity: 0; visibility: hidden;
            transform: translateY(-8px) scale(.96);
            transform-origin: top right;
            pointer-events: none;
            transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1), visibility 0s linear .18s;
        }
        .avatar-panel-inner {
            background: var(--white); border-radius: 14px;
            box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.07);
            border: 1px solid rgba(0,0,0,.07);
            overflow: hidden;
        }
        .avatar-btn:hover .avatar-panel,
        .avatar-btn:focus-within .avatar-panel {
            opacity: 1; visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
            transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
        }

        /* Panel header */
        .avatar-panel-header {
            padding: 16px;
            background: linear-gradient(135deg, #F0FDFA, #EFF6FF);
            border-bottom: 1px solid rgba(0,0,0,.06);
        }
        .avatar-panel-initials {
            width: 40px; height: 40px; border-radius: 10px;
            background: linear-gradient(135deg, var(--teal), #1565C0);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700; color: var(--white);
            margin-bottom: 10px;
            box-shadow: 0 3px 10px rgba(0,188,212,.3);
        }
        .avatar-panel-name { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; }
        .avatar-panel-sub  { font-size: 11px; color: #94A3B8; margin-top: 2px; }

        /* Panel items */
        .avatar-panel a {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 16px; font-size: 13px; color: var(--navy);
            text-decoration: none; transition: background .12s;
        }
        .avatar-panel a svg { flex-shrink: 0; color: #94A3B8; transition: color .12s; }
        .avatar-panel a:hover { background: var(--bg); text-decoration: none; }
        .avatar-panel a:hover svg { color: var(--navy); }
        .avatar-panel-divider { height: 1px; background: rgba(0,0,0,.06); margin: 4px 0; }
        .avatar-panel a.ap-logout { color: #DC2626; }
        .avatar-panel a.ap-logout svg { color: #FCA5A5; }
        .avatar-panel a.ap-logout:hover { background: #FEF2F2; }
        .avatar-panel a.ap-logout:hover svg { color: #DC2626; }

        /* Mobile sidebar toggle */
        .sb-toggle-btn {
            display: none;
            background: none; border: none; cursor: pointer;
            padding: 8px; border-radius: 8px;
            color: var(--navy);
        }
        @media (max-width: 768px) {
            .sb-toggle-btn { display: flex; align-items: center; }
            .sidebar { position: fixed; left: -100%; top: 0; z-index: 50; transition: left .3s; }
            .sidebar.open { left: 0; }
            .shell { display: block; }
            .main-col { height: 100vh; }
        }

        /* ═══════════════════════════════════════
           CONTENT AREA
        ═══════════════════════════════════════ */
        .content-area {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            padding: 28px;
            background: var(--bg);
        }
        .content-area::-webkit-scrollbar { width: 6px; }
        .content-area::-webkit-scrollbar-track { background: transparent; }
        .content-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }
        /* Keep Bootstrap container styles working inside content */
        .content-area .container-fluid { padding-left: 0; padding-right: 0; }

        /* ── Global toast notifications ── */
        #rd-toast-container {
            position: fixed; top: 20px; right: 20px;
            z-index: 9999; display: flex; flex-direction: column; gap: 10px;
            pointer-events: none;
        }
        @keyframes rd-toast-in  { from { opacity:0; transform:translateX(24px) scale(.97); } to { opacity:1; transform:translateX(0) scale(1); } }
        @keyframes rd-toast-out { from { opacity:1; transform:translateX(0) scale(1); max-height:200px; } to { opacity:0; transform:translateX(16px) scale(.96); max-height:0; padding:0; margin-bottom:-10px; } }
        .rd-toast {
            display: flex; align-items: flex-start; gap: 12px;
            min-width: 300px; max-width: 380px;
            padding: 14px 16px; border-radius: 14px;
            border-left: 3px solid transparent;
            background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
            pointer-events: auto; font-family: 'Inter', sans-serif;
            font-size: 13.5px; line-height: 1.5;
            animation: rd-toast-in .32s cubic-bezier(.22,1,.36,1) both;
        }
        .rd-toast.hiding { animation: rd-toast-out .22s ease forwards; }
        .rd-toast-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
        .rd-toast-icon svg { width:11px; height:11px; stroke:#fff; stroke-width:2.5; fill:none; }
        .rd-toast-body { flex:1; color:#1E293B; }
        .rd-toast-close { background:none; border:none; cursor:pointer; color:#94A3B8; font-size:16px; line-height:1; padding:0; flex-shrink:0; transition:color .15s; }
        .rd-toast-close:hover { color:#475569; }
        .rd-toast.success { border-left-color:#16A34A; } .rd-toast.success .rd-toast-icon { background:#16A34A; }
        .rd-toast.danger  { border-left-color:#DC2626; } .rd-toast.danger  .rd-toast-icon { background:#DC2626; }
        .rd-toast.warning { border-left-color:#D97706; } .rd-toast.warning .rd-toast-icon { background:#D97706; }
        .rd-toast.info    { border-left-color:#2563EB; } .rd-toast.info    .rd-toast-icon { background:#2563EB; }

        /* ── App footer ── */
        .app-footer {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 28px; flex-shrink: 0;
            border-top: 1px solid rgba(0,0,0,.07);
            background: var(--bg);
        }
        .app-footer-copy {
            font-size: 11px; color: #aaa; font-weight: 400;
        }
        .app-footer-right {
            display: flex; align-items: center; gap: 16px;
        }
        .app-footer-help {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 12px;
            border-radius: 8px;
            background: rgba(79, 70, 229, .06);
            border: 1px solid rgba(79, 70, 229, .22);
            color: #4F46E5;
            font-size: 12px; font-weight: 500; font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
        }
        .app-footer-help svg { color: #4F46E5; flex-shrink: 0; }
        .app-footer-help:hover {
            color: #4338CA;
            border-color: rgba(79, 70, 229, .4);
            background: rgba(79, 70, 229, .1);
            box-shadow: 0 2px 8px rgba(79, 70, 229, .18);
        }
        .app-footer-help:hover svg { color: #4338CA; }
        .app-footer-brand {
            display: flex; align-items: center; gap: 5px;
            font-size: 11px; color: #bbb;
        }
        .app-footer-brand svg { color: var(--teal); flex-shrink: 0; }
        .app-footer-brand span { font-weight: 400; color: #bbb; }
        .app-footer-brand strong { font-weight: 700; color: var(--navy); }

        /* ── Scroll-to-top floating button ── */
        .scroll-to-top {
            position: fixed;
            bottom: 80px; right: 24px;
            width: 44px; height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--teal), var(--teal-dark, #0097A7));
            color: #fff;
            border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 18px rgba(0,188,212,.4);
            opacity: 0; visibility: hidden;
            transform: translateY(8px);
            transition: opacity .2s ease, transform .2s ease,
                        box-shadow .2s ease, visibility 0s linear .2s;
            z-index: 1000;
        }
        .scroll-to-top.visible {
            opacity: 1; visibility: visible;
            transform: translateY(0);
            transition: opacity .2s ease, transform .2s ease,
                        box-shadow .2s ease, visibility 0s linear 0s;
        }
        .scroll-to-top:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0,188,212,.5);
        }
        .scroll-to-top:active {
            transform: translateY(0) scale(.96);
        }

        /* ═══════════════════════════════════════
           GLOBAL PAGINATION — applies to all
           redesigned pages (CI generate_links)
        ═══════════════════════════════════════ */
        ul.pagination {
            display: flex;
            align-items: center;
            gap: 4px;
            list-style: none;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
        }
        ul.pagination li {
            display: flex;
        }
        /* Override Bootstrap btn styles inside pagination */
        ul.pagination li span.btn,
        ul.pagination li span.btn a {
            all: unset;
        }
        ul.pagination li span.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background .15s, color .15s, box-shadow .15s;
            text-decoration: none;
            line-height: 1;
            white-space: nowrap;
        }
        /* Number links */
        ul.pagination li span.btn-primary {
            background: #fff;
            color: var(--navy);
            border: 1.5px solid #E2E8F0;
            box-shadow: 0 1px 3px rgba(0,0,0,.05);
            position: relative;
        }
        ul.pagination li span.btn-primary:hover {
            background: #EFF6FF;
            border-color: #93C5FD;
            color: #1D4ED8;
        }
        /* Active / current page */
        ul.pagination li span.btn-secondary {
            background: var(--navy);
            color: #fff;
            border: 1.5px solid transparent;
            box-shadow: 0 2px 8px rgba(26,39,68,.25);
            pointer-events: none;
            font-weight: 600;
            position: relative;
        }
        /* Nested anchor overlays the whole pill so the full visual is clickable
           (display:contents shrank the click area to just the text). */
        ul.pagination li span.btn-primary a,
        ul.pagination li span.btn-secondary a {
            position: absolute;
            inset: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: inherit;
            text-decoration: none;
            border-radius: inherit;
        }
        /* Spacing tweak for m-1 (bootstrap override) */
        ul.pagination li span.m-1 { margin: 0 !important; }

        /* ── Global copy-to-clipboard button ── */
        .cs-copy-btn {
            background: none; border: none; padding: 0 3px; cursor: pointer;
            color: #94A3B8; display: inline-flex; align-items: center;
            vertical-align: middle; transition: color .15s;
            line-height: 1;
        }
        .cs-copy-btn:hover { color: #2B7DD6; }
        .cs-copy-btn.copied { color: #16A34A; }
        .cs-copy-btn svg { pointer-events: none; }


/* ── SECTION 2: Login page tokens + layout ───────────────── */
/* Source: login_header_redesign.php                          */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue-primary:  #2B7DD6;
      --blue-dark:     #1B5DAE;
      --blue-light:    #EBF4FF;
      --blue-mid:      #5AA3E8;
      --gray-900:      #1A1F2E;
      --gray-700:      #374151;
      --gray-500:      #6B7280;
      --gray-300:      #D1D5DB;
      --gray-100:      #F3F4F6;
      --white:         #FFFFFF;
      --shadow-card:   0 24px 64px rgba(27,93,174,.18), 0 4px 16px rgba(27,93,174,.08);
      --shadow-btn:    0 4px 14px rgba(43,125,214,.45);
      --radius-card:   22px;
      --radius-input:  12px;
    }

    html, body { height: 100%; font-family: 'Inter', sans-serif; }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(135deg, #0d1b3e 0%, #133a6b 40%, #1e6db5 75%, #4fa3e0 100%);
      position: relative;
      overflow-x: hidden;
    }

    /* Undo admin-shell html/body overflow:hidden for login pages */
    body.login-page {
      height: auto !important;
      min-height: 100vh !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    html:has(body.login-page) {
      height: auto !important;
      overflow-y: auto !important;
    }

    body::before, body::after {
      content: '';
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .18;
      pointer-events: none;
    }
    body::before {
      width: 520px; height: 520px;
      background: #4fa3e0;
      top: -120px; left: -120px;
    }
    body::after {
      width: 420px; height: 420px;
      background: #2B7DD6;
      bottom: -100px; right: -80px;
    }

    .particle {
      position: fixed;
      border-radius: 50%;
      background: rgba(255,255,255,.07);
      pointer-events: none;
      animation: float linear infinite;
    }
    @keyframes float {
      0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
    }

    .page {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
      position: relative;
      z-index: 1;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 32px;
      animation: slideDown .6s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes slideDown {
      from { opacity:0; transform: translateY(-24px); }
      to   { opacity:1; transform: translateY(0); }
    }

    .logo-icon {
      width: 60px; height: 60px;
      background: rgba(255,255,255,.15);
      border: 2px solid rgba(255,255,255,.25);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
    }
    .logo-icon svg { width: 34px; height: 34px; }

    .logo-text h1 {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -1px;
      color: var(--white);
      line-height: 1;
    }
    .logo-text span {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,.65);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 3px;
      display: block;
    }

    .card {
      width: 100%;
      max-width: 440px;
      background: rgba(255,255,255,.97);
      border-radius: var(--radius-card);
      padding: 44px 40px 36px;
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.6);
      animation: fadeUp .65s cubic-bezier(.22,1,.36,1) .1s both;
    }
    @keyframes fadeUp {
      from { opacity:0; transform: translateY(30px); }
      to   { opacity:1; transform: translateY(0); }
    }

    .card-header {
      margin-bottom: 30px;
    }
    .card-header h2 {
      font-size: 22px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px;
    }
    .card-header p {
      font-size: 13.5px;
      color: var(--gray-500);
    }

    .form-group {
      margin-bottom: 18px;
      position: relative;
    }
    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 7px;
      letter-spacing: .01em;
    }

    .input-wrap { position: relative; }
    .input-wrap .icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray-500);
      pointer-events: none;
      transition: color .25s;
    }
    .input-wrap input {
      width: 100%;
      padding: 13px 14px 13px 42px;
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-input);
      font-size: 14.5px;
      font-family: 'Inter', sans-serif;
      color: var(--gray-900);
      background: var(--white);
      outline: none;
      transition: border-color .25s, box-shadow .25s, background .25s;
    }
    .input-wrap input::placeholder { color: #B0BAC9; }
    .input-wrap input:focus {
      border-color: var(--blue-primary);
      box-shadow: 0 0 0 4px rgba(43,125,214,.12);
      background: #fafcff;
    }
    .input-wrap:focus-within .icon { color: var(--blue-primary); }

    /* Alert messages */
    .alert {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 16px;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      border-left: 4px solid;
      position: relative;
    }
    .alert p, .alert small { margin: 0; line-height: 1.5; display: block; }
    .alert h5, .alert h6 { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
    .alert .alert-icon {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 1px;
    }
    .alert .alert-body { flex: 1; min-width: 0; }
    .alert .close {
      flex-shrink: 0;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0;
      margin-left: 4px;
      text-decoration: none;
      opacity: .5;
      transition: opacity .15s;
    }
    .alert .close:hover { opacity: 1; }

    /* danger / error */
    .alert-danger, .alert-error {
      background: #FEF2F2;
      border-color: #EF4444;
      color: #991B1B;
    }
    .alert-danger .alert-icon, .alert-error .alert-icon { color: #EF4444; }
    .alert-danger .close, .alert-error .close { color: #991B1B; }

    /* success */
    .alert-success {
      background: #F0FDF4;
      border-color: #22C55E;
      color: #166534;
    }
    .alert-success .alert-icon { color: #22C55E; }
    .alert-success .close { color: #166534; }

    /* warning */
    .alert-warning {
      background: #FFFBEB;
      border-color: #F59E0B;
      color: #92400E;
    }
    .alert-warning .alert-icon { color: #F59E0B; }
    .alert-warning .close { color: #92400E; }

    /* info */
    .alert-info {
      background: #EFF6FF;
      border-color: #3B82F6;
      color: #1E40AF;
    }
    .alert-info .alert-icon { color: #3B82F6; }
    .alert-info .close { color: #1E40AF; }

    .eye-btn {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gray-500);
      padding: 4px;
      display: flex;
      align-items: center;
      transition: color .2s;
    }
    .eye-btn:hover { color: var(--blue-primary); }

    .forgot-row {
      display: flex;
      justify-content: flex-end;
      margin-top: -8px;
      margin-bottom: 24px;
    }
    .forgot-row a {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--blue-primary);
      text-decoration: none;
      transition: color .2s;
    }
    .forgot-row a:hover { color: var(--blue-dark); text-decoration: underline; }

    .page .btn-primary {
      display: block;
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-mid) 100%);
      color: var(--white);
      border: none;
      border-radius: var(--radius-input);
      font-size: 15px;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      box-shadow: var(--shadow-btn);
      transition: transform .18s, box-shadow .18s, filter .18s;
      letter-spacing: .02em;
      position: relative;
      overflow: hidden;
      text-align: center;
      text-decoration: none;
    }
    .page .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
      pointer-events: none;
    }
    .page .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(43,125,214,.5);
      filter: brightness(1.05);
      color: var(--white);
    }
    .page .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-btn); }

    .btn-secondary {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 13px;
      background: var(--gray-100);
      color: var(--gray-700);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-input);
      font-size: 14px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      transition: background .18s, border-color .18s, color .18s, transform .18s;
      letter-spacing: .01em;
      text-align: center;
      text-decoration: none;
    }
    .btn-secondary:hover {
      background: var(--white);
      border-color: var(--blue-primary);
      color: var(--blue-primary);
      transform: translateY(-1px);
      text-decoration: none;
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 24px 0 20px;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--gray-300);
    }
    .divider span { font-size: 12px; color: var(--gray-500); white-space: nowrap; }

    .signup-row {
      text-align: center;
      font-size: 13.5px;
      color: var(--gray-500);
      margin-top: 6px;
    }
    .signup-row a {
      color: var(--blue-primary);
      font-weight: 600;
      text-decoration: none;
      transition: color .2s;
    }
    .signup-row a:hover { color: var(--blue-dark); text-decoration: underline; }

    .trust-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 22px;
      font-size: 11.5px;
      color: rgba(255,255,255,.55);
      animation: fadeUp .65s cubic-bezier(.22,1,.36,1) .25s both;
    }
    .trust-badge svg { width: 14px; height: 14px; }

    footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 20px 16px;
      margin-top: auto;
      animation: fadeUp .65s cubic-bezier(.22,1,.36,1) .35s both;
    }
    footer .footer-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 20px;
      margin-bottom: 10px;
    }
    footer a {
      font-size: 12px;
      color: rgba(255,255,255,.5);
      text-decoration: none;
      transition: color .2s;
    }
    footer a:hover { color: rgba(255,255,255,.9); }
    footer .copy {
      font-size: 11.5px;
      color: rgba(255,255,255,.35);
    }

    .ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      background: rgba(255,255,255,.3);
      animation: ripple .6s linear;
      pointer-events: none;
    }
    @keyframes ripple { to { transform: scale(4); opacity: 0; } }

    @media (max-width: 480px) {
      .card { padding: 32px 22px 28px; }
      .logo-text h1 { font-size: 26px; }
    }

/* ===== DataTables Editor (DTE) — global redesign ===== */
div.DTE {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
}
div.DTE div.DTE_Header {
    background: linear-gradient(135deg, #1A2744 0%, #2B4480 100%) !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
}
div.DTE div.DTE_Header_Content { color: #fff !important; font-weight: 700 !important; font-size: 15px !important; }
div.DTE div.DTE_Body_Content { padding: 16px 20px !important; }
div.DTE div.DTE_Form_Fields { padding: 0 !important; }
div.DTE div.DTE_Field {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
}
div.DTE div.DTE_Field label,
div.DTE div.DTE_Field .DTE_Label {
    width: 130px !important;
    min-width: 130px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding-top: 7px !important;
    text-align: right !important;
}
div.DTE div.DTE_Field div.DTE_Field_Input { flex: 1 !important; min-width: 0; }
div.DTE div.DTE_Field input[type="text"],
div.DTE div.DTE_Field input[type="email"],
div.DTE div.DTE_Field input[type="number"],
div.DTE div.DTE_Field select,
div.DTE div.DTE_Field textarea {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background: #fff !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s !important;
}
div.DTE div.DTE_Field input:focus,
div.DTE div.DTE_Field select:focus,
div.DTE div.DTE_Field textarea:focus {
    border-color: #00BCD4 !important;
    box-shadow: 0 0 0 3px rgba(0,188,212,.12) !important;
    outline: none !important;
}
div.DTE div.DTE_Footer {
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 12px 20px !important;
}
div.DTE div.DTE_Footer_Content {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}
div.DTE div.DTE_Footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1.5px solid transparent !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background .15s, transform .1s, box-shadow .15s !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
div.DTE div.DTE_Footer .btn:hover  { transform: translateY(-1px) !important; }
div.DTE div.DTE_Footer .btn:active { transform: translateY(0) !important; }
div.DTE div.DTE_Footer .btn-default,
div.DTE div.DTE_Footer .btn.cancel,
div.DTE div.DTE_Footer .DTE_Action_Buttons button:first-child {
    background: #F3F4F6 !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}
div.DTE div.DTE_Footer .btn-default:hover,
div.DTE div.DTE_Footer .btn.cancel:hover {
    background: #E5E7EB !important;
}
div.DTE div.DTE_Footer .btn-primary,
div.DTE div.DTE_Footer .btn.save,
div.DTE div.DTE_Footer .DTE_Action_Buttons button:last-child {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: transparent !important;
    color: #fff !important;
}
div.DTE div.DTE_Footer .btn-primary:hover,
div.DTE div.DTE_Footer .btn.save:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* Bootstrap modals (.kak) global button fixes */
.kak .modal-footer .btn-secondary,
.kak .modal-footer .btn-default {
    background: #F3F4F6 !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}
.kak .modal-footer .btn-primary {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}
.kak .modal-footer .btn-info {
    background: linear-gradient(135deg, #1A2744, #2B4480) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}

/* ============================================================
   SECTION 4 — Universal admin components (.ba-*)
   Canonical base for buttons, tables, modals, inputs, badges.
   New code should use these. Existing per-view prefixes
   (.cs-, .ma-, .mu-, .mp-, .rb-, .req-, .pt-, .ph-, .cr-, .ai-,
    .rl-, .ps-) remain valid; migrate gradually.
   See docs/developer_instructions/design-system.md §8 for usage.
   ============================================================ */

/* ── Universal tokens (slate scale + semantic colors) ─────────
   Additive to the brand tokens declared at the top of this file.
   Safe to reference via var(--…) anywhere. */
:root {
    --sl-50:  #F8FAFC;
    --sl-100: #F1F5F9;
    --sl-200: #E2E8F0;
    --sl-300: #CBD5E1;
    --sl-400: #94A3B8;
    --sl-500: #64748B;
    --sl-700: #374151;
    --sl-900: #0F172A;

    --danger:        #DC2626;
    --danger-light:  #FEF2F2;
    --danger-border: #FECACA;
    --warn:          #D97706;
    --warn-light:    #FFFBEB;
    --warn-border:   #FDE68A;
    --success:       #16A34A;
    --success-light: #F0FDF4;
    --success-border:#A7F3D0;
    --info-color:    #1E40AF;
    --info-light:    #EFF6FF;
    --info-border:   #BFDBFE;

    /* Canonical action colors for .ba-btn variants — match the de-facto
       convention used by manage_* / rbac / change_requests views.
       Use --blue-primary (#2B7DD6) for login pages only. */
    --ba-blue:        #2563EB;
    --ba-blue-dark:   #1D4ED8;
    --ba-blue-light:  #EFF6FF;
}

/* ── Buttons ─────────────────────────────────────────────────
   Usage: <button class="ba-btn ba-btn--primary">Save</button>
   Modifiers: --primary --teal --success --danger
              --outline --danger-outline
              --sm --lg                                          */
.ba-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 38px; padding: 0 16px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; text-decoration: none;
    transition: background .18s, border-color .18s, color .15s, transform .1s, box-shadow .18s;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
}
.ba-btn:hover   { text-decoration: none; }
.ba-btn:active  { transform: scale(.97); }
.ba-btn:focus-visible { outline: 2px solid var(--ba-blue); outline-offset: 2px; }
.ba-btn:disabled,
.ba-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.ba-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 5px; }
.ba-btn--lg { height: 44px; padding: 0 22px; font-size: 14px;   gap: 8px; }

.ba-btn--primary {
    background: var(--ba-blue);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .3);
}
.ba-btn--primary:hover { background: var(--ba-blue-dark); color: #fff; }

.ba-btn--teal {
    background: var(--teal);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 188, 212, .3);
}
.ba-btn--teal:hover { background: var(--teal-dark); color: #fff; }

.ba-btn--success {
    background: var(--success);
    color: #fff;
    box-shadow: 0 1px 3px rgba(22, 163, 74, .3);
}
.ba-btn--success:hover { background: #15803D; color: #fff; }

.ba-btn--danger {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 1px 3px rgba(220, 38, 38, .3);
}
.ba-btn--danger:hover { background: #B91C1C; color: #fff; }

.ba-btn--outline {
    background: #fff;
    color: var(--navy);
    border-color: var(--sl-200);
}
.ba-btn--outline:hover {
    border-color: var(--ba-blue);
    color: var(--ba-blue);
    background: var(--ba-blue-light);
}

.ba-btn--danger-outline {
    background: #fff;
    color: var(--danger);
    border-color: #FCA5A5;
}
.ba-btn--danger-outline:hover { background: var(--danger-light); color: #B91C1C; border-color: #F87171; }

/* ── Tables ──────────────────────────────────────────────────
   Usage: <table class="ba-table"> … </table>                   */
.ba-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.ba-table thead tr {
    background: var(--sl-50);
    border-bottom: 1px solid var(--sl-100);
}
.ba-table th {
    padding: 12px 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sl-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
}
.ba-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sl-50);
    color: #1E293B;
    vertical-align: middle;
}
.ba-table tbody tr:last-child td { border-bottom: none; }
.ba-table tbody tr             { transition: background .1s; }
.ba-table tbody tr:hover       { background: #FAFBFF; }
.ba-table--striped tbody tr:nth-child(even) { background: var(--sl-50); }

/* ── Form inputs ─────────────────────────────────────────────
   Usage:
     <div class="ba-form-group">
       <label class="ba-label">Email</label>
       <input class="ba-input" type="email">
       <p class="ba-help">Helper text</p>
     </div>                                                     */
.ba-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ba-label {
    font-size: 12.5px; font-weight: 600; color: var(--sl-700);
    display: flex; align-items: center; gap: 6px;
}
.ba-help { font-size: 11.5px; color: var(--sl-400); }

.ba-input,
.ba-select,
.ba-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1.5px solid var(--sl-200);
    border-radius: var(--radius-input);
    font-size: 13.5px;
    color: var(--navy);
    background: #FAFBFC;
    font-family: 'Inter', sans-serif;
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none;
    appearance: none;
}
.ba-input:focus,
.ba-select:focus,
.ba-textarea:focus {
    border-color: var(--ba-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    background: #fff;
}
.ba-textarea { min-height: 80px; padding: 10px 12px; resize: vertical; }
.ba-select {
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ba-input:disabled,
.ba-select:disabled,
.ba-textarea:disabled { opacity: .65; cursor: not-allowed; background: var(--sl-100); }

/* ── Badges ──────────────────────────────────────────────────
   Usage: <span class="ba-badge ba-badge--success">Active</span>
   Add ba-badge--dot for the leading colored dot.               */
.ba-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.ba-badge--success { background: var(--success-light); color: var(--success); }
.ba-badge--danger  { background: var(--danger-light);  color: var(--danger);  }
.ba-badge--warn    { background: var(--warn-light);    color: var(--warn);    }
.ba-badge--info    { background: var(--info-light);    color: var(--info-color); }
.ba-badge--neutral { background: var(--sl-100);        color: var(--sl-500); }
.ba-badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Modal (framework-agnostic) ──────────────────────────────
   Usage:
     <div class="ba-modal-backdrop is-open">
       <div class="ba-modal ba-modal--sm">
         <div class="ba-modal-header"><h2 class="ba-modal-title">…</h2></div>
         <div class="ba-modal-body">…</div>
         <div class="ba-modal-footer">
           <button class="ba-btn ba-btn--outline">Cancel</button>
           <button class="ba-btn ba-btn--primary">Save</button>
         </div>
       </div>
     </div>
   For Bootstrap-based modals, see .kak override pattern above. */
.ba-modal-backdrop {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.ba-modal-backdrop.is-open { display: flex; }

.ba-modal {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .18), 0 4px 16px rgba(0, 0, 0, .08);
    width: 100%; max-width: 480px;
    overflow: hidden;
    animation: ba-modal-in .25s cubic-bezier(.22, 1, .36, 1) both;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 32px);
}
.ba-modal--sm { max-width: 380px; }
.ba-modal--lg { max-width: 720px; }
.ba-modal--xl { max-width: 960px; }

.ba-modal-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--sl-100);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ba-modal-title  { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.ba-modal-close  {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--sl-400); transition: color .15s;
    line-height: 0;
}
.ba-modal-close:hover { color: var(--sl-700); }
.ba-modal-body   { padding: 18px 24px; overflow-y: auto; flex: 1; }
.ba-modal-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--sl-100);
    display: flex; gap: 10px; justify-content: flex-end;
    flex-wrap: wrap;
}

@keyframes ba-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

        /* App switcher CSS moved to extensions/burblesoft.css
           (loaded separately by sb-admin2/header.php). */