/* ============================================================
   PTSP2026 — Dark Futuristic Design System
   Theme: Deep Space Navy + Neon Cyan/Green Accents
   Font: Inter (body) · Sora (headings)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
[data-bs-theme="dark"] {
    /* ── Brand Colors ──────────────────── */
    --brand:          #00c8ff;
    --brand-2:        #00e5a0;
    --brand-3:        #ffc947;
    --brand-danger:   #ff6b6b;
    --brand-purple:   #a855f7;

    /* ── Dark Surfaces ─────────────────── */
    --bg:             #060d18;
    --surface:        #0c1929;
    --surface-2:      #101e30;
    --surface-3:      #152438;
    --surface-hover:  #1a2d44;

    /* ── Borders & Lines ───────────────── */
    --line:           rgba(0,200,255,0.14);
    --line-soft:      rgba(0,200,255,0.07);
    --line-strong:    rgba(0,200,255,0.30);

    /* ── Text ──────────────────────────── */
    --ink:            #e2edf7;
    --ink-mid:        #a8c0d4;
    --ink-soft:       #6a8ba8;
    --ink-muted:      #3d5a72;

    /* ── Bootstrap dark theme overrides ── */
    --bs-body-color:        #e2edf7;
    --bs-body-color-rgb:    226,237,247;
    --bs-body-bg:           #060d18;
    --bs-body-bg-rgb:       6,13,24;
    --bs-secondary-color:   #6a8ba8;
    --bs-secondary-bg:      #101e30;
    --bs-tertiary-bg:       #152438;
    --bs-emphasis-color:    #ffffff;
    --bs-border-color:      rgba(0,200,255,0.18);
    --bs-border-color-translucent: rgba(0,200,255,0.12);
    --bs-link-color:        #00c8ff;
    --bs-link-hover-color:  #33d4ff;
    --bs-heading-color:     #e2edf7;
    --bs-card-bg:           #0c1929;
    --bs-card-border-color: rgba(0,200,255,0.14);
    --bs-card-cap-bg:       rgba(255,255,255,0.03);
    --bs-modal-bg:          #101e30;
    --bs-modal-header-bg:   #152438;
    --bs-modal-header-border-color: rgba(0,200,255,0.14);
    --bs-table-bg:          transparent;
    --bs-table-striped-bg:  rgba(255,255,255,0.02);
    --bs-table-hover-bg:    rgba(0,200,255,0.05);
    --bs-table-border-color: rgba(0,200,255,0.10);
    --bs-input-bg:          rgba(255,255,255,0.04);
    --bs-input-border-color: rgba(0,200,255,0.25);
    --bs-input-color:       #e2edf7;
    --bs-dropdown-bg:       #152438;
    --bs-dropdown-border-color: rgba(0,200,255,0.20);
    --bs-dropdown-link-color: #a8c0d4;
    --bs-dropdown-link-hover-color: #00c8ff;
    --bs-dropdown-link-hover-bg: rgba(0,200,255,0.10);
    --bs-list-group-bg:     #0c1929;
    --bs-list-group-border-color: rgba(0,200,255,0.12);
    --bs-list-group-color:  #e2edf7;
    --bs-pagination-bg:     #101e30;
    --bs-pagination-border-color: rgba(0,200,255,0.20);
    --bs-pagination-color:  #6a8ba8;
    --bs-pagination-hover-bg: rgba(0,200,255,0.10);
    --bs-pagination-hover-color: #00c8ff;
    --bs-pagination-active-bg: #00c8ff;
    --bs-pagination-active-border-color: #00c8ff;
    --bs-pagination-active-color: #000;
    --bs-nav-tabs-border-color: rgba(0,200,255,0.15);
    --bs-nav-tabs-link-hover-border-color: rgba(0,200,255,0.15);
    --bs-nav-tabs-link-active-color: #00c8ff;
    --bs-nav-tabs-link-active-bg: rgba(0,200,255,0.06);
    --bs-nav-tabs-link-active-border-color: rgba(0,200,255,0.25);
    --bs-accordion-bg:      #0c1929;
    --bs-accordion-border-color: rgba(0,200,255,0.14);
    --bs-accordion-btn-color: #e2edf7;
    --bs-accordion-btn-bg:  #101e30;
    --bs-accordion-active-color: #00c8ff;
    --bs-accordion-active-bg: rgba(0,200,255,0.08);
    --bs-tooltip-bg:        #152438;
    --bs-tooltip-color:     #e2edf7;
    --bs-popover-bg:        #152438;
    --bs-popover-border-color: rgba(0,200,255,0.20);
    --bs-popover-header-bg: #101e30;
    --bs-popover-body-color: #e2edf7;
    --bs-badge-color:       #fff;
    --bs-code-color:        #00c8ff;
    --bs-highlight-bg:      rgba(0,200,255,0.10);


    /* ── Glow Effects ──────────────────── */
    --glow-cyan:      0 0 20px rgba(0,200,255,0.25);
    --glow-green:     0 0 20px rgba(0,229,160,0.25);
    --glow-danger:    0 0 20px rgba(255,107,107,0.25);

    /* ── Shadows ───────────────────────── */
    --shadow-xs:      0 2px 8px rgba(0,0,0,0.40);
    --shadow-sm:      0 4px 16px rgba(0,0,0,0.45);
    --shadow-md:      0 10px 32px rgba(0,0,0,0.50);
    --shadow-lg:      0 20px 56px rgba(0,0,0,0.55);

    /* ── Radius ────────────────────────── */
    --radius-sm:      8px;
    --radius-md:      12px;
    --radius-lg:      16px;
    --radius-xl:      20px;

    /* ── Layout ────────────────────────── */
    --sidebar-w:      260px;
    --topbar-h:       62px;
    --transition:     all .2s ease;
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: .9rem;
    color: var(--ink);
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(0,200,255,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(0,229,160,0.03) 0%, transparent 50%);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', 'Segoe UI', sans-serif;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: .4rem;
}

a { text-decoration: none; color: var(--brand); }
a:hover { color: #33d4ff; }

/* ─── App Shell ─────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background:
        radial-gradient(circle at 80% 8%, rgba(0,200,255,0.08), transparent 40%),
        radial-gradient(circle at 20% 95%, rgba(0,229,160,0.06), transparent 40%),
        linear-gradient(180deg, #0a1628 0%, #060f1e 100%);
    border-right: 1px solid var(--line);
    color: var(--ink);
    padding: 14px 10px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    z-index: 1040;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

/* Brand Block */
.brand {
    background: linear-gradient(135deg, rgba(0,200,255,0.12), rgba(0,229,160,0.08));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 12px 14px 11px;
    margin-bottom: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.brand::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.brand h5 {
    margin: 0 0 2px;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.brand small { opacity: .65; font-size: .72rem; color: var(--ink-mid); }

.brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
    border: 1.5px solid rgba(0,200,255,0.4);
    box-shadow: 0 0 12px rgba(0,200,255,0.3);
    flex-shrink: 0;
}

/* Role Chips */
.role-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0,200,255,0.12);
    border: 1px solid rgba(0,200,255,0.25);
    font-size: .68rem;
    font-weight: 600;
    color: var(--brand);
    margin: 2px 2px 2px 0;
    letter-spacing: .02em;
}

/* Menu Title */
.menu-title {
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-muted);
    margin: 14px 6px 6px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Nav Links */
.nav-pills .nav-link,
#roleMenuContainer .nav-link,
#authLinks .nav-link {
    color: var(--ink-soft);
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: var(--transition);
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.nav-pills .nav-link i,
#roleMenuContainer .nav-link i,
#authLinks .nav-link i {
    font-size: .92rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--ink-muted);
    transition: var(--transition);
}

.nav-pills .nav-link:hover,
#roleMenuContainer .nav-link:hover,
#authLinks .nav-link:hover {
    background: rgba(0,200,255,0.08);
    color: var(--ink);
    border-color: var(--line);
}

.nav-pills .nav-link:hover i,
#roleMenuContainer .nav-link:hover i { color: var(--brand); }

.nav-pills .nav-link.active,
#roleMenuContainer .nav-link.active {
    background: linear-gradient(90deg, rgba(0,200,255,0.16), rgba(0,200,255,0.06)) !important;
    color: var(--brand) !important;
    border-color: rgba(0,200,255,0.25) !important;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,200,255,0.12);
}

.nav-pills .nav-link.active::before,
#roleMenuContainer .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    border-radius: 0 3px 3px 0;
}

.nav-pills .nav-link.active i,
#roleMenuContainer .nav-link.active i { color: var(--brand); }

/* Sidebar Search */
.sidebar-search {
    position: relative;
    margin-bottom: 10px;
}
.sidebar-search input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    font-size: .82rem;
    padding: 7px 10px 7px 32px;
    width: 100%;
    transition: var(--transition);
}
.sidebar-search input::placeholder { color: var(--ink-muted); }
.sidebar-search input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,200,255,0.10);
    outline: none;
    background: rgba(0,200,255,0.04);
    color: var(--ink);
}
.sidebar-search-icon {
    position: absolute; left: 9px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted); font-size: .8rem;
}

/* Sidebar Backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 1039;
    opacity: 0;
    transition: opacity .22s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

/* ─── Main Pane ─────────────────────────────────────────────────── */
.main-pane {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

/* ─── Topbar ────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: rgba(10,22,40,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 900;
    flex-shrink: 0;
}

.sidebar-toggle {
    display: none;
    border: 1px solid var(--line);
    background: rgba(0,200,255,0.06);
    color: var(--ink-soft);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    transition: var(--transition);
}

.sidebar-toggle:hover {
    background: rgba(0,200,255,0.14);
    border-color: var(--brand);
    color: var(--brand);
}

/* Topbar page title */
.topbar-title {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

/* Topbar user button */
.topbar .btn-link, .topbar .dropdown-toggle {
    color: var(--ink-soft) !important;
    font-size: .86rem;
}
.topbar .btn-link:hover { color: var(--brand) !important; }

/* Topbar notification bell */
#topbarNotifBell { color: var(--ink-soft); transition: var(--transition); }
#topbarNotifBell:hover { color: var(--brand-3); }

/* ─── Content Area ──────────────────────────────────────────────── */
.content-area {
    padding: 22px 24px;
    flex: 1;
    min-width: 0;
}

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    color: var(--ink);
}

.card-soft {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
    overflow: hidden;
    color: var(--ink);
    position: relative;
}

.card-soft::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.card-soft .card-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .86rem;
    color: var(--ink);
}

.card-soft .card-body { padding: 18px 20px; }

/* Card hover glow */
.card-soft:hover {
    border-color: rgba(0,200,255,0.20);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,200,255,0.08);
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
    font-size: .82rem;
    padding: .38rem .85rem;
    line-height: 1.4;
    white-space: nowrap;
}

/* Compact sm and xs */
.btn-sm {
    font-size: .76rem !important;
    padding: .26rem .65rem !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
}

.btn-xs {
    font-size: .72rem !important;
    padding: .18rem .5rem !important;
    border-radius: 6px !important;
}

.btn-lg {
    font-size: .92rem !important;
    padding: .5rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
}

/* Icon-only button */
.btn-icon {
    padding: .35rem .45rem !important;
    line-height: 1;
    aspect-ratio: 1;
}

.btn-icon.btn-sm { padding: .25rem .35rem !important; }

.btn-success {
    background: linear-gradient(125deg, #00b87a, #00916a);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,184,122,0.30);
}

.btn-success:hover, .btn-success:focus {
    background: linear-gradient(125deg, #00d490, #00a87a);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,229,160,0.35);
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(125deg, #0099cc, #0070a8);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,153,204,0.30);
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(125deg, #00b3e6, #0088c4);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,200,255,0.35);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(125deg, #e84040, #c92020);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255,107,107,0.25);
}

.btn-danger:hover { background: linear-gradient(125deg, #f05050, #d93030); color: #fff; transform: translateY(-1px); }

.btn-warning {
    background: linear-gradient(125deg, #e8a520, #c48010);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255,201,71,0.25);
}

.btn-outline-success {
    color: var(--brand-2);
    border-color: rgba(0,229,160,0.4);
    border-width: 1.5px;
    background: rgba(0,229,160,0.05);
}
.btn-outline-success:hover { background: rgba(0,229,160,0.15); color: var(--brand-2); border-color: var(--brand-2); }

.btn-outline-primary {
    color: var(--brand);
    border-color: rgba(0,200,255,0.4);
    border-width: 1.5px;
    background: rgba(0,200,255,0.05);
}
.btn-outline-primary:hover { background: rgba(0,200,255,0.14); color: var(--brand); border-color: var(--brand); }

.btn-outline-secondary {
    border-width: 1.5px;
    color: var(--ink-soft);
    border-color: var(--line-strong);
    background: rgba(255,255,255,0.03);
}
.btn-outline-secondary:hover {
    background: rgba(255,255,255,0.08);
    color: var(--ink);
    border-color: var(--ink-soft);
}

.btn-outline-danger {
    color: var(--brand-danger);
    border-color: rgba(255,107,107,0.4);
    border-width: 1.5px;
    background: rgba(255,107,107,0.05);
}
.btn-outline-danger:hover { background: rgba(255,107,107,0.15); color: var(--brand-danger); border-color: var(--brand-danger); }

.btn-outline-warning {
    color: var(--brand-3);
    border-color: rgba(255,201,71,0.4);
    border-width: 1.5px;
}
.btn-outline-warning:hover { background: rgba(255,201,71,0.12); color: var(--brand-3); border-color: var(--brand-3); }

.btn-link { color: var(--brand); }
.btn-link:hover { color: #33d4ff; }

/* ─── Form Controls ────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--line-strong);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: .86rem;
    padding: .5rem .85rem;
    background-color: rgba(255,255,255,0.04);
    box-shadow: none;
    transition: var(--transition);
}

.form-control::placeholder { color: var(--ink-muted); }

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,200,255,0.14);
    outline: none;
    background-color: rgba(0,200,255,0.04);
    color: var(--ink);
}

.form-select {
    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='%236a8ba8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--ink-mid);
    margin-bottom: .35rem;
    letter-spacing: .01em;
}

.form-text { color: var(--ink-muted); font-size: .75rem; }

.input-group-text {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid var(--line-strong);
    color: var(--ink-soft);
}

/* ─── Select2 ───────────────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--line-strong) !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--ink) !important;
    min-height: 40px;
    font-family: 'Inter', sans-serif;
    font-size: .86rem;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(0,200,255,0.14) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

.select2-container--bootstrap-5 .select2-results__option {
    color: var(--ink) !important;
    font-size: .84rem;
    padding: 7px 12px;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background: rgba(0,200,255,0.12) !important;
    color: var(--brand) !important;
}

.select2-container--bootstrap-5 .select2-search__field {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-sm) !important;
}

.select2-container--bootstrap-5 .select2-selection__rendered { color: var(--ink) !important; }
.select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--ink-muted) !important; }

/* ─── Tables ────────────────────────────────────────────────────── */
.table > :not(caption) > * > * {
    border-bottom-color: var(--line);
    vertical-align: middle;
    padding: .7rem .9rem;
    color: var(--ink);
    background: transparent;
}

.table thead th {
    color: var(--ink-soft);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    background: rgba(0,200,255,0.04) !important;
    border-bottom: 1px solid var(--line-strong) !important;
}

.table tbody tr { transition: background .14s; }
.table tbody tr:hover > * { background: rgba(0,200,255,0.05) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,0.02) !important; }

/* ─── Badges ────────────────────────────────────────────────────── */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .03em;
    padding: .3em .8em;
}

.text-bg-success { background: rgba(0,229,160,0.18) !important; color: var(--brand-2) !important; border: 1px solid rgba(0,229,160,0.25); }
.text-bg-danger  { background: rgba(255,107,107,0.18) !important; color: var(--brand-danger) !important; border: 1px solid rgba(255,107,107,0.25); }
.text-bg-warning { background: rgba(255,201,71,0.18) !important; color: var(--brand-3) !important; border: 1px solid rgba(255,201,71,0.25); }
.text-bg-primary { background: rgba(0,200,255,0.18) !important; color: var(--brand) !important; border: 1px solid rgba(0,200,255,0.25); }
.text-bg-secondary { background: rgba(106,139,168,0.18) !important; color: var(--ink-soft) !important; border: 1px solid rgba(106,139,168,0.2); }
.text-bg-info    { background: rgba(0,200,255,0.12) !important; color: #33d4ff !important; border: 1px solid rgba(0,200,255,0.2); }
.text-bg-dark    { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; }

/* ─── Token Pill ────────────────────────────────────────────────── */
.token-pill {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand) !important;
    background: rgba(0,200,255,0.12) !important;
    border: 1px solid rgba(0,200,255,0.25);
    cursor: default;
    font-size: .72rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ─── Pagination ────────────────────────────────────────────────── */
.pagination .page-link {
    border-radius: var(--radius-sm) !important;
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-weight: 400;
    font-size: .78rem;
    margin: 0 3px;
    padding: .35rem .7rem;
    transition: var(--transition);
}

.pagination .page-link:hover { background: rgba(0,200,255,0.12); color: var(--brand); border-color: var(--brand); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #000; }
.pagination .page-item.disabled .page-link { background: rgba(255,255,255,0.02); color: var(--ink-muted); }

/* ─── Modals ────────────────────────────────────────────────────── */
.modal-content {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0,200,255,0.08);
    overflow: hidden;
    background: var(--surface-2);
    color: var(--ink);
}

.modal-header {
    background: linear-gradient(160deg, var(--surface-3) 0%, var(--surface-2) 100%);
    border-bottom: 1px solid var(--line);
    padding: 16px 22px;
}

.modal-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.modal-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; color: var(--ink); }
.modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; background: rgba(255,255,255,0.02); }
.modal-body { padding: 20px 22px; }

.btn-close {
    filter: invert(1);
    opacity: .5;
}
.btn-close:hover { opacity: 1; }

/* Modal backdrop darker */
.modal-backdrop { background: rgba(0,0,0,0.75); }

/* ─── Alerts ────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
    font-size: .85rem;
}

.alert-success { background: rgba(0,229,160,0.10); border-color: rgba(0,229,160,0.25); color: var(--brand-2); }
.alert-danger  { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.25); color: var(--brand-danger); }
.alert-warning { background: rgba(255,201,71,0.10); border-color: rgba(255,201,71,0.25); color: var(--brand-3); }
.alert-info    { background: rgba(0,200,255,0.10); border-color: rgba(0,200,255,0.25); color: var(--brand); }

/* ─── Dropdowns ─────────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 6px;
    min-width: 180px;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: .84rem;
    padding: 7px 12px;
    transition: var(--transition);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(0,200,255,0.10);
    color: var(--brand);
}

.dropdown-divider { border-color: var(--line); }

/* ─── Tabs ───────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--line);
}

.nav-tabs .nav-link {
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 8px 16px;
    font-size: .84rem;
    font-weight: 500;
    transition: var(--transition);
}

.nav-tabs .nav-link:hover { color: var(--ink); border-color: var(--line) var(--line) transparent; }
.nav-tabs .nav-link.active { color: var(--brand); background: rgba(0,200,255,0.06); border-color: var(--line-strong) var(--line-strong) transparent; border-bottom-color: var(--surface) !important; }

/* ─── Tooltips ───────────────────────────────────────────────────── */
.tooltip-inner { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .78rem; }
.tooltip .tooltip-arrow::before { border-top-color: var(--line) !important; }

/* ─── Accordion ──────────────────────────────────────────────────── */
.accordion-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md) !important; margin-bottom: 4px; }
.accordion-button { background: var(--surface-2); color: var(--ink); border-radius: var(--radius-md) !important; font-weight: 600; font-size: .86rem; }
.accordion-button:not(.collapsed) { background: rgba(0,200,255,0.08); color: var(--brand); box-shadow: none; }
.accordion-button::after { filter: invert(0.6) sepia(1) saturate(3) hue-rotate(170deg); }
.accordion-body { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); }

/* ─── Collapse ───────────────────────────────────────────────────── */
.collapse .card-body, .collapse .card { background: var(--surface); }

/* ─── Progress ───────────────────────────────────────────────────── */
.progress { background: rgba(255,255,255,0.07); border-radius: 99px; height: 6px; }
.progress-bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 99px; }

/* ─── List Groups ────────────────────────────────────────────────── */
.list-group-item {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
.list-group-item.active { background: rgba(0,200,255,0.12); border-color: var(--brand); color: var(--brand); }
.list-group-item:hover { background: var(--surface-hover); }

/* ─── Text Utilities ─────────────────────────────────────────────── */
.text-secondary { color: var(--ink-soft) !important; }
.text-muted     { color: var(--ink-muted) !important; }
.text-success   { color: var(--brand-2) !important; }
.text-danger    { color: var(--brand-danger) !important; }
.text-warning   { color: var(--brand-3) !important; }
.text-info      { color: var(--brand) !important; }
.text-primary   { color: var(--brand) !important; }

.border { border-color: var(--line) !important; }
.border-success { border-color: rgba(0,229,160,0.4) !important; }
.border-danger  { border-color: rgba(255,107,107,0.4) !important; }

/* ─── Code & Pre ─────────────────────────────────────────────────── */
code {
    background: rgba(0,200,255,0.10);
    color: var(--brand);
    border-radius: 4px;
    padding: .1em .45em;
    font-family: 'JetBrains Mono', monospace;
    font-size: .83em;
}

pre {
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px;
    color: var(--ink);
    font-size: .8rem;
}

/* ─── SweetAlert2 overrides ──────────────────────────────────────── */
.swal2-popup {
    background: var(--surface-2) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink) !important;
}

.swal2-title { color: var(--ink) !important; font-family: 'Sora', sans-serif !important; }
.swal2-html-container { color: var(--ink-soft) !important; }
.swal2-confirm { border-radius: var(--radius-md) !important; }
.swal2-cancel  { border-radius: var(--radius-md) !important; }
.swal2-icon.swal2-success { border-color: var(--brand-2) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(0,229,160,0.3) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background: var(--brand-2) !important; }
.swal2-backdrop-show { backdrop-filter: blur(4px) !important; }

/* ─── Responsive ─────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 991.98px) {
    :root { --sidebar-w: 220px; }

    .content-area { padding: 16px 18px; }
    .topbar { padding: 0 16px; }

    /* Tables — hide less important columns on tablet */
    .table .d-md-none { display: none !important; }

    /* Shrink action buttons in tables */
    .table .btn { font-size: .72rem !important; padding: .22rem .55rem !important; }
    .table .btn-sm { font-size: .68rem !important; padding: .18rem .45rem !important; }

    /* Button groups wrap on tablet */
    .btn-group-wrap { flex-wrap: wrap; gap: 4px; }
}

/* Mobile */
@media (max-width: 767.98px) {
    .app-shell { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(82vw, 280px);
        z-index: 1045;
        transform: translateX(-108%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
    }

    .sidebar.show { transform: translateX(0); }

    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .content-area { padding: 12px; }
    .topbar { padding: 0 12px; height: 54px; }

    /* Topbar elements shrink */
    .topbar h6 { font-size: .84rem !important; }
    #tokenPill { display: none; }

    /* Card padding reduce */
    .card-soft .card-body,
    .card .card-body { padding: 14px !important; }
    .card-soft .card-header,
    .card .card-header { padding: 12px 14px !important; }

    /* Modal full-width on mobile */
    .modal-dialog { margin: 6px !important; max-width: calc(100vw - 12px) !important; }
    .modal-body { padding: 14px !important; }
    .modal-header, .modal-footer { padding: 12px 14px !important; }

    /* Tables → horizontal scroll, compact */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table > :not(caption) > * > * { padding: .5rem .6rem !important; font-size: .78rem !important; }
    .table thead th { font-size: .65rem !important; padding: .45rem .6rem !important; }

    /* Hide non-essential table cols on mobile */
    .table .hide-mobile { display: none !important; }

    /* Buttons in tables → icon only or tiny */
    .table .btn { font-size: .68rem !important; padding: .2rem .4rem !important; }
    .table .btn-group { flex-wrap: nowrap; }

    /* Action bar wrap */
    .action-bar { flex-wrap: wrap; gap: 6px; }
    .action-bar .btn { flex: 0 0 auto; }

    /* Row buttons stack */
    .d-flex.gap-2:not(.actor-tabs):not(.flex-nowrap) { flex-wrap: wrap; }

    /* Form grid — always full width on mobile */
    .row.g-3 > [class*='col-'] { flex: 0 0 100%; max-width: 100%; }
    .col-md-6, .col-md-4, .col-md-3, .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Form controls full width */
    .form-control, .form-select { font-size: .84rem; padding: .45rem .75rem; }

    /* Page title */
    h4, .h4 { font-size: 1.05rem !important; }
    h5, .h5 { font-size: .95rem !important; }
    h6, .h6 { font-size: .85rem !important; }

    /* Pagination compact */
    .pagination .page-link { font-size: .72rem !important; padding: .25rem .5rem !important; }

    /* Actor tabs on dashboard → 2 cols */
    .actor-tabs { gap: 6px !important; }
    .actor-tab { min-width: calc(50% - 6px) !important; flex: 0 0 calc(50% - 6px) !important; padding: 10px 6px !important; }
    .actor-tab .actor-icon { font-size: 1.4rem !important; }

    /* Dashboard stat cards — 2 cols */
    .row.g-3 .col-xl-2, .row.g-3 .col-lg-4 { flex: 0 0 calc(50% - .5rem) !important; max-width: calc(50% - .5rem) !important; }

    /* Chart cards full width */
    .row .col-lg-8, .row .col-lg-4,
    .row .col-md-8, .row .col-md-4,
    .row .col-lg-6, .row .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Select2 full width */
    .select2-container { width: 100% !important; }

    /* Pagination mobile — stack info above nav */
    .pagination-sm { gap: 2px; }
    .pagination .page-link { min-width: 30px; text-align: center; }

    /* Per-page selector compact */
    .ptsp-perpage-select { font-size: .72rem !important; padding: .2rem .35rem !important; min-width: 75px !important; }

        /* Sidebar search hide on mobile to save space */
    .sidebar-search { display: none; }

    /* Queue badges wrap */
    .queue-badge { font-size: .68rem !important; padding: 4px 8px !important; }
}

/* Small phones */
@media (max-width: 575.98px) {
    .content-area { padding: 8px !important; }
    .topbar { padding: 0 10px !important; }

    /* Button group scroll */
    .btn-toolbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

    /* Stat cards single column */
    .row.g-3 .col-xl-2, .row.g-3 .col-lg-4,
    .dash-stat-col { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Font scale down */
    body { font-size: .84rem; }
    .btn { font-size: .76rem !important; padding: .3rem .7rem !important; }
    .btn-sm { font-size: .68rem !important; padding: .2rem .45rem !important; }

    /* Modal full screen */
    .modal-dialog { margin: 0 !important; max-width: 100vw !important; border-radius: 0 !important; }
    .modal-content { border-radius: 0 !important; height: 100dvh; overflow-y: auto; }

    /* Card full edge-to-edge */
    .card-soft, .card { border-radius: 10px !important; }
}

body.sidebar-open { overflow: hidden; }

/* ─── Micro-animations ───────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); }
    50%      { box-shadow: 0 0 0 4px rgba(0,200,255,0.15); }
}

@keyframes scan-line {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* Ambient scan line effect */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,200,255,0.15) 50%, transparent 100%);
    z-index: 9999;
    pointer-events: none;
    animation: scan-line 8s linear infinite;
    opacity: .6;
}

/* --- Mobile Bottom Navigation ------------------------------------------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--sidebar-bg, #0a1628);
    border-top: 1px solid rgba(0,200,255,0.12);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255,255,255,0.45);
    font-size: .62rem;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color .15s, background .15s;
    min-width: 52px;
}

.bottom-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 1px;
}

.bottom-nav-item:hover,
.bottom-nav-item:active {
    color: rgba(255,255,255,0.85);
    background: rgba(0,200,255,0.08);
}

.bottom-nav-item.active {
    color: var(--brand, #00c8ff);
}

.bottom-nav-item.active i {
    filter: drop-shadow(0 0 4px rgba(0,200,255,0.4));
}

/* Add padding to content so it doesn't hide behind bottom nav on mobile */
@media (max-width: 767.98px) {
    .content-area { padding-bottom: 70px !important; }
}

/* Hide bottom nav on desktop */
@media (min-width: 768px) {
    .bottom-nav { display: none !important; }
}