/* VUSAF Portal Theme CSS */

/* ===== CSS VARIABLES ===== */
:root{
    /* Surfaces */
    --bg:#080b10;--bg2:#131a24;--bg3:#1a2436;
    --bg-elev-1:var(--bg2);--bg-elev-2:var(--bg3);

    /* Text */
    --white:#f8fafc;--gray:#94a3b8;
    --text:var(--white);--text-muted:var(--gray);
    --text-subtle:#64748b;          /* AA-compliant on bg2 (~4.6:1) */
    --dark:#64748b;                 /* legacy alias bumped from #334155 */
    --silver:#c0c8d4;

    /* Brand / accent */
    --blue:#2563eb;--blue-light:#3b82f6;--blue-glow:rgba(37,99,235,0.2);
    --accent:var(--blue);--accent-hover:#1d4ed8;
    --accent-soft:rgba(37,99,235,0.12);
    --accent-ring:rgba(37,99,235,0.35);

    /* Semantic status */
    --success:#10b981;--success-soft:rgba(16,185,129,0.15);--success-border:rgba(16,185,129,0.35);
    --warning:#fbbf24;--warning-soft:rgba(251,191,36,0.15);--warning-border:rgba(251,191,36,0.35);
    --danger:#ef4444;--danger-soft:rgba(239,68,68,0.12);--danger-border:rgba(239,68,68,0.35);
    --info:#38bdf8;--info-soft:rgba(56,189,248,0.12);--info-border:rgba(56,189,248,0.35);

    /* Borders */
    --border:rgba(255,255,255,0.10);
    --border-strong:rgba(255,255,255,0.18);
    --border-subtle:rgba(255,255,255,0.07);

    /* Layout */
    --container-max:1140px;
    --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-full:100px;
    --radius-btn:var(--radius-sm);
}

/* ===== BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
}

body {
    font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    color: var(--white);
    -webkit-font-smoothing: antialiased;
}

a{color:inherit;text-decoration:none;}

/* ===== UTILITIES ===== */
.container{max-width:var(--container-max);margin:0 auto;padding:0 32px;}
.section{padding:100px 32px;}

/* Typography */
.text-label{font-size:0.72rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--blue-light);margin-bottom:12px;}
.h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(3rem,7.5vw,5.5rem);font-weight:800;line-height:1.08;letter-spacing:-0.5px;margin-bottom:28px;}
.h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;margin-bottom:16px;}
.h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.18rem;font-weight:700;margin-bottom:8px;}
.h4{font-size:0.88rem;font-weight:600;margin-bottom:4px;}
.text-body{font-size:1.08rem;color:var(--gray);line-height:1.85;max-width:560px;}
.text-sm{font-size:0.86rem;color:var(--gray);line-height:1.7;}
.text-xs{font-size:0.78rem;color:var(--dark);}
.text-gradient{display:block;background:linear-gradient(135deg,var(--white) 40%,var(--gray));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:var(--radius-btn);font-weight:600;font-size:0.92rem;transition:0.25s;border:none;cursor:pointer;text-decoration:none;}
.btn svg{width:18px;height:18px;}
.btn--white{background:var(--white);color:var(--bg);font-weight:700;}
.btn--white:hover{background:var(--silver);box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.btn--ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,0.12);}
.btn--ghost:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.04);}
.btn--nav{padding:10px 24px;font-size:0.82rem;}
.btn--nav:hover{opacity:0.9;}
.btn--link{padding:13px 30px;font-size:0.85rem;background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--white);}
.btn--link:hover{border-color:var(--blue-light);color:var(--blue-light);background:rgba(37,99,235,0.05);}
.btn--link svg{width:16px;height:16px;}

/* Cards */
.card{background:var(--bg2);border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius-md);padding:32px;transition:0.4s;}
.card--sm{padding:20px;border-radius:var(--radius-sm);}
.card--lg{padding:48px;border-radius:var(--radius-lg);}
.card--gradient{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(255,255,255,0.08);}

/* Panel Spacing Helpers */
.panel--none{margin:0;}
.panel--sm{margin:8px 0;}
.panel--md{margin:16px 0;}
.panel--lg{margin:24px 0;}

/* Panel Hover Effect (opt-in) */
.panel.hover:hover {
    background: var(--bg3);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Icons */
.icon{width:44px;height:44px;border-radius:var(--radius-sm);background:rgba(37,99,235,0.1);display:flex;align-items:center;justify-content:center;color:var(--blue-light);}
.icon svg{width:22px;height:22px;}

/* Grid */
.grid{display:grid;gap:12px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

/* Flex */
.flex{display:flex;}
.flex--center{align-items:center;justify-content:center;}
.flex--between{align-items:center;justify-content:space-between;}
.flex--col{flex-direction:column;}
.flex--wrap{flex-wrap:wrap;}
.gap--sm{gap:8px;}
.gap--md{gap:16px;}
.gap--lg{gap:32px;}

/* ===== HEADER ===== */
.header {
    background: rgba(8, 11, 16, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 0.25s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(37, 99, 235, 0.1);
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

.n-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.n-brand:hover {
    opacity: 0.9;
}

.logo {
    width: 44px;
    height: 44px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.site-title h1 {
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.1;
}

.site-title p {
    color: var(--dark);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--blue-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.user-details {
    text-align: right;
}

.user-name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.88rem;
}

.user-rank {
    color: var(--gray);
    font-size: 0.78rem;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    display: flex;
    min-height: calc(100vh - 120px);
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 260px;
    background: var(--bg2);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 24px 0;
    flex-shrink: 0;
}

.sidebar-menu {
    list-style: none;
}

.sidebar-item {
    margin-bottom: 5px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--gray);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

.sidebar-link:hover, .sidebar-link.active {
    color: var(--white);
    background: rgba(37, 99, 235, 0.1);
    border-left-color: var(--blue);
}

.sidebar-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== ACCORDION ===== */
.accordion-item {
    margin-bottom: 2px;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--gray);
    cursor: pointer;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none;
}

.accordion-header svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.accordion-header:hover {
    color: var(--white);
    background: rgba(37, 99, 235, 0.1);
    border-left-color: var(--blue);
}

.accordion-header.active {
    color: var(--white);
    background: rgba(37, 99, 235, 0.1);
    border-left-color: var(--blue);
}

.accordion-arrow {
    margin-left: auto;
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-arrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray);
    border-bottom: 2px solid var(--gray);
    transform: rotate(-45deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-header.active .accordion-arrow::before {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content.active {
    max-height: 500px;
}

.accordion-item .sidebar-link {
    padding-left: 40px;
    font-size: 13px;
}

/* ===== CONTENT AREA ===== */
.content {
    flex: 1;
    padding: 32px;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    color: var(--white);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 12px;
}

.breadcrumb {
    color: var(--gray);
    font-size: 0.85rem;
}

.breadcrumb a {
    color: var(--blue-light);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--white);
}

/* ===== DASHBOARD GRID ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

/* ===== FILTER CONTROLS ===== */
.filter-select,
.form-demo select {
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.filter-select:hover,
.form-demo select:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.filter-select:focus,
.form-demo select:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ===== CUSTOM DROPDOWN ===== */
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-dropdown-trigger {
    padding: 0.8rem 1rem;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-dropdown-trigger:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.custom-dropdown-trigger:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.custom-dropdown-trigger::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--gray);
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.custom-dropdown-trigger.open::after {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    max-height: 300px;
    overflow-y: auto;
}

.custom-dropdown-menu--fixed {
    position: fixed;
}

.custom-dropdown-option {
    padding: 12px 16px;
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg3);
}

.custom-dropdown-option:hover {
    background: rgba(8, 11, 16, 0.95);
}

.custom-dropdown-option.selected {
    background: rgba(8, 11, 16, 0.95);
    color: var(--white);
}

/* ===== STAT CARDS ===== */
.stat-card {
    background: var(--bg2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.stat-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--bg3);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.stat-title {
    color: var(--gray);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stat-icon {
    width: 44px;
    height: 44px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--blue-light);
}

.stat-value {
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1;
}

.stat-change {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--danger);
}

/* ===== CONTENT GRID ===== */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

/* ===== PANELS ===== */
.panel {
    background: var(--bg2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: 32px;
    transition: all 0.4s ease;
}


.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panel-title {
    color: var(--white);
    font-size: 1.18rem;
    font-weight: 700;
}

.panel-action {
    color: var(--blue-light);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.panel-action:hover {
    color: var(--white);
}

/* ===== MISSION LIST ===== */
.mission-list {
    list-style: none;
}

.mission-item {
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.mission-item:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mission-title {
    color: var(--white);
    font-weight: 600;
    font-size: 0.92rem;
}

.mission-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.mission-status.assigned {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.mission-status.pending {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.mission-details {
    color: var(--gray);
    font-size: 0.82rem;
    line-height: 1.6;
}

/* ===== NOTIFICATION LIST ===== */
.notification-list {
    list-style: none;
}

.notification-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    gap: 12px;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-icon {
    width: 36px;
    height: 36px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--blue-light);
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
}

.notification-title {
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.notification-time {
    color: var(--dark);
    font-size: 0.78rem;
}

/* ===== LOGIN FORM ===== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.login-container {
    background: var(--bg2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    padding: 48px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    margin: 0 auto;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header .logo {
    width: 64px;
    height: 64px;
    font-size: 18px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    margin: 0 auto 20px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue-light);
}

.login-header h1 {
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.login-header p {
    color: var(--gray);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 2px;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-group input::placeholder {
    color: var(--gray);
    opacity: 0.7;
}

.login-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-btn);
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 24px;
}

.login-btn:hover {
    background: var(--blue-light);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

.login-btn:active {
    opacity: 0.8;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.remember-me {
    display: flex;
    align-items: center;
    color: var(--gray);
    font-size: 0.85rem;
}

.remember-me input {
    margin-right: 8px;
    accent-color: var(--blue);
}

.forgot-password {
    color: var(--blue-light);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.forgot-password:hover {
    color: var(--white);
}

.divider {
    text-align: center;
    margin: 24px 0;
    color: var(--dark);
    font-size: 0.78rem;
    letter-spacing: 2px;
}

.register-link {
    text-align: center;
    color: var(--gray);
    font-size: 0.85rem;
}

.register-link a {
    color: var(--blue-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.25s ease;
}

.register-link a:hover {
    color: var(--white);
}

.alert {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 24px;
    color: var(--danger);
    font-size: 0.85rem;
    display: none;
}

.alert.show {
    display: block;
}

/* ===== COMPONENT SHOWCASE ===== */
.component-showcase {
    padding: 24px 0;
}

.component-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-top: 32px;
}

.component-label:first-child {
    margin-top: 0;
}

/* ===== DESIGN SYSTEM PAGE ===== */
.ds-toc {
    position: sticky;
    top: 88px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    margin-bottom: 24px;
    background: rgba(8, 11, 16, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ds-toc a {
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}
.ds-toc a:hover { color: var(--white); background: var(--accent-soft); }
.ds-toc a.is-active { color: var(--white); background: var(--accent); }

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1024px) {
    .showcase-grid--2 { grid-template-columns: 1fr 1fr; }
}

.showcase-block {
    padding: 24px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.showcase-block + .showcase-block { margin-top: 16px; }

.showcase-caption {
    display: block;
    color: var(--text-subtle);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.showcase-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Palette swatches */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.swatch {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg3);
}
.swatch__chip {
    height: 72px;
    width: 100%;
    border-bottom: 1px solid var(--border);
}
.swatch__meta {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.swatch__name {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Space Grotesk', monospace;
}
.swatch__hex {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-family: 'Space Grotesk', monospace;
}
.contrast-pill {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.contrast-pill--aaa { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
.contrast-pill--aa  { background: var(--info-soft);    color: var(--info);    border: 1px solid var(--info-border); }
.contrast-pill--fail{ background: var(--danger-soft);  color: var(--danger);  border: 1px solid var(--danger-border); }

/* Type scale rows */
.type-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}
.type-row:last-child { border-bottom: none; }
.type-row__token {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.74rem;
    color: var(--text-subtle);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.type-row__demo { color: var(--white); }

/* Radius / spacing tokens */
.token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.token-card {
    padding: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}
.token-card__visual {
    height: 56px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    margin-bottom: 10px;
}
.token-card__name {
    display: block;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.78rem;
    color: var(--white);
}
.token-card__value {
    display: block;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.7rem;
    color: var(--text-subtle);
}

/* Code snippet under each variant */
.code-snippet {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Space Grotesk', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow-x: auto;
    white-space: pre;
}

/* Section header inside main */
.section-heading {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.section-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 16px;
}

/* ===== DESIGN SYSTEM RESPONSIVE OVERRIDES ===== */
@media (max-width: 1024px) {
    .ds-toc { top: 72px; }
}

@media (max-width: 768px) {
    /* Mobile header is column-stacked + taller; un-stick toc and let it scroll horizontally */
    .ds-toc {
        position: static;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 6px;
        margin-bottom: 16px;
    }
    .ds-toc::-webkit-scrollbar { display: none; }
    .ds-toc a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    /* Tighter panel padding so showcase blocks fit */
    .panel { padding: 20px; }

    /* Panel header: stop forcing space-between on small screens */
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .section-heading { font-size: 1.2rem; }
    .section-sub { font-size: 0.85rem; }

    /* Showcase blocks shouldn't add their own large padding on top of panel padding */
    .showcase-block { padding: 16px; }

    /* Type scale: stack token label above demo on narrow screens */
    .type-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }

    /* Smaller swatches and token cards */
    .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .token-grid  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .swatch__chip { height: 56px; }
    .token-card__visual { height: 44px; }

    /* Code snippets are wide; allow horizontal scroll */
    .code-snippet { font-size: 0.72rem; }

    /* Adjust scroll anchor offset for shorter mobile chrome */
    html { scroll-padding-top: 24px; }
}

@media (max-width: 480px) {
    .panel { padding: 16px; }
    .showcase-block { padding: 14px; }
    .swatch-grid { grid-template-columns: repeat(2, 1fr); }
    .token-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BUTTONS ===== */
.btn--primary {
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

.btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn--secondary {
    background: var(--bg3);
    color: var(--white);
    border: 1px solid var(--border);
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn--secondary:hover {
    background: var(--bg2);
    border-color: var(--border-strong);
}

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 12px;
    margin-bottom: 12px;
}

.status-badge.assigned {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.status-badge.pending {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.status-badge.completed {
    background: var(--accent-soft);
    color: var(--blue-light);
    border: 1px solid var(--accent-ring);
}

.status-badge.in-progress {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.status-badge.cancelled {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

/* ===== FORM DEMO ===== */
.form-demo {
    padding: 24px 0;
}

.form-demo textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.92rem;
    transition: all 0.25s ease;
    resize: vertical;
    font-family: inherit;
}

.form-demo textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-demo textarea::placeholder {
    color: var(--gray);
    opacity: 0.7;
}

/* ===== ICON GRID ===== */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px;
    padding: 24px 0;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: var(--bg3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.icon-item:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

.icon-item svg {
    width: 32px;
    height: 32px;
    color: var(--blue-light);
}

.icon-item span {
    font-size: 0.78rem;
    color: var(--gray);
    text-align: center;
}

/* ===== TYPOGRAPHY SHOWCASE ===== */
.typography-showcase {
    padding: 24px 0;
}

.typography-showcase h1,
.typography-showcase h2,
.typography-showcase h3,
.typography-showcase h4,
.typography-showcase p {
    margin-bottom: 16px;
}

.typography-showcase .text-label {
    margin-top: 24px;
}

/* ===== ALERT VARIANTS ===== */
.alert--info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    color: var(--blue-light);
}

.alert--success {
    background: var(--success-soft);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.alert--warning {
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.alert--error {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

.alert--show {
    display: block;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast {
    background: var(--bg2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Toast slide-in animations */
.toast {
    animation: toastSlideIn 0.3s ease;
}

.toast[data-position="top-right"] {
    animation: toastSlideInRight 0.3s ease;
}

.toast[data-position="top-left"] {
    animation: toastSlideInLeft 0.3s ease;
}

.toast[data-position="top-center"] {
    animation: toastSlideInTop 0.3s ease;
}

.toast[data-position="bottom-right"] {
    animation: toastSlideInRight 0.3s ease;
}

.toast[data-position="bottom-left"] {
    animation: toastSlideInLeft 0.3s ease;
}

.toast[data-position="bottom-center"] {
    animation: toastSlideInBottom 0.3s ease;
}

/* Toast dismiss animations - slide out in same direction as slide-in */
.toast--dismiss {
    opacity: 0;
}

.toast--dismiss[data-position="top-right"] {
    animation: toastSlideOutRight 0.3s ease forwards;
}

.toast--dismiss[data-position="top-left"] {
    animation: toastSlideOutLeft 0.3s ease forwards;
}

.toast--dismiss[data-position="top-center"] {
    animation: toastSlideOutTop 0.3s ease forwards;
}

.toast--dismiss[data-position="bottom-right"] {
    animation: toastSlideOutRight 0.3s ease forwards;
}

.toast--dismiss[data-position="bottom-left"] {
    animation: toastSlideOutLeft 0.3s ease forwards;
}

.toast--dismiss[data-position="bottom-center"] {
    animation: toastSlideOutBottom 0.3s ease forwards;
}

.toast--success {
    border-left: 3px solid var(--success);
}

.toast--error {
    border-left: 3px solid var(--danger);
}

.toast--warning {
    border-left: 3px solid var(--warning);
}

.toast--info {
    border-left: 3px solid var(--accent);
}

.toast-message {
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 500;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--gray);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--white);
}

@keyframes toastSlideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes toastSlideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes toastSlideOutTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes toastSlideOutBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 16px;
        position: sticky;
        top: 0;
        z-index: 100;
        transition: transform 0.3s ease;
    }

    .header-left {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        order: 1;
    }

    .header.scrolled {
        transform: translateY(-100px);
    }

    .header.scrolled .header-left {
        opacity: 0;
        pointer-events: none;
    }

    .n-brand {
        flex-direction: column;
        gap: 8px;
    }

    .site-title {
        text-align: center;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
        order: 2;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-info {
        justify-content: center;
    }

    .user-details {
        text-align: center;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

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

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .header {
        padding: 15px 20px;
    }
    
    .content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .login-container {
        margin: 20px;
        padding: 30px 20px;
    }
}

/* DataTables Styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #e0e0e0;
}

.dataTables_wrapper {
    padding-top: 20px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 15px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #666 !important;
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}

/* DataTables Responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
    cursor: pointer !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before {
    top: 12px;
    left: 6px;
    height: 14px;
    width: 14px;
    border-radius: 14px;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.5);
    background: #1a1a1a;
    content: '+';
    color: #3b82f6;
    font-size: 16px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.child:before {
    content: '-';
    background: #3b82f6;
    color: #ffffff;
}

table.dataTable > tbody > tr.child td.dtr-details {
    background-color: #1a1a1a;
    border-left: 2px solid #3b82f6;
}

table.dataTable > tbody > tr.child td.dtr-details > ul {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

table.dataTable > tbody > tr.child td.dtr-details > ul > li {
    padding: 6px 0;
    border-bottom: 1px solid #333;
    color: #e0e0e0;
}

table.dataTable > tbody > tr.child td.dtr-details > ul > li:last-child {
    border-bottom: none;
}

table.dataTable > tbody > tr.child td.dtr-details > ul > li > span.dtr-title {
    font-weight: 600;
    color: #3b82f6;
    margin-right: 8px;
}

/* User name cell for mobile alignment */
.user-name-cell {
    display: flex;
    flex-direction: column;
}

.user-first-name {
    font-weight: 500;
}

.user-last-name {
    font-weight: 300;
    color: var(--text-muted);
}

/* Action buttons spacing */
.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .action-buttons .btn {
        width: 100%;
    }
}

table.dataTable tbody tr {
    background-color: #1a1a1a;
}

table.dataTable tbody tr:hover {
    background-color: #2a2a2a;
}

table.dataTable.stripe tbody tr.odd {
    background-color: #2d2d2d;
}

table.dataTable.stripe tbody tr.odd:hover {
    background-color: #2a2a2a;
}

table.dataTable thead {
    background: linear-gradient(90deg, #16365c 0%, #10243d 100%);
}

table.dataTable thead th {
    background: transparent;
    color: #ffffff;
    border-bottom: 2px solid #0a1a2d;
}

table.dataTable tbody td {
    color: #e0e0e0;
    border-bottom: 1px solid #333;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #444;
}

/* DataTables Buttons Styling */
.dt-buttons .dt-button {
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
    padding: 6px 16px;
    margin: 0 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dt-buttons .dt-button:hover {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.dt-buttons .dt-button:active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.dt-buttons {
    margin-bottom: 15px;
}

/* Compact Table Styling */
table.dataTable.compact tbody td,
table.dataTable.compact tbody th {
    padding: 4px 8px;
}

table.dataTable.compact thead th {
    padding: 8px 12px;
}

/* Bordered Table Styling */
table.dataTable.bordered {
    border: 1px solid #444;
}

table.dataTable.bordered thead th {
    border: 1px solid #444;
    border-bottom: 2px solid #0a1a2d;
}

table.dataTable.bordered tbody td {
    border: 1px solid #333;
}

table.dataTable.bordered tbody tr:hover td {
    background-color: #2a2a2a;
}

/* Drag and Drop Table Styling */
.drag-handle {
    cursor: grab;
    color: #666;
    font-size: 1.2rem;
    user-select: none;
    padding: 8px 12px;
    text-align: center;
}

.drag-handle:hover {
    color: #3b82f6;
}

.drag-handle:active {
    cursor: grabbing;
}

table.dataTable tbody tr.sortable-ghost {
    opacity: 0.4;
    background-color: #3b82f6;
}

table.dataTable tbody tr.sortable-drag {
    background-color: #2a2a2a;
}

/* ===== ADMIN PANEL STYLES ===== */
/* Admin Page Layout */
.main-content {
    display: flex;
    min-height: 100vh;
}

.content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white);
}

.breadcrumb {
    font-size: 0.9rem;
    color: var(--gray);
}

.breadcrumb a {
    color: var(--blue-light);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Admin Panels */
.panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
}

.panel-action {
    color: var(--blue-light);
    font-size: 0.9rem;
}

.panel-action:hover {
    text-decoration: underline;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge--system {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.badge--custom {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge--active {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge--inactive {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge--role {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-remove {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.badge-remove:hover {
    opacity: 1;
}

.badge--allow {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge--deny {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge--note {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.roles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Modal styles */
.modal--hidden {
    display: none !important;
}

.modal-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.modal-section:last-child {
    border-bottom: none;
}

.modal-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modal content form inputs */
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Permissions Container */
.permissions-container {
    max-height: 500px;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Permission Groups */
.permission-group {
    margin-bottom: 28px;
}

.permission-group:last-child {
    margin-bottom: 0;
}

.permission-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Permissions Grid */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Custom Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--white);
    cursor: pointer;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    user-select: none;
}

/* Hide default checkbox */
.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom checkbox */
.checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--bg3);
    border: 2px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Checkbox text */
.checkbox-text {
    flex: 1;
}

/* Role Edit Layout */
.role-edit-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 32px;
    margin-bottom: 24px;
}

.role-info-section {
    background: var(--bg3);
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.role-meta {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

.meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.meta-label {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 500;
}

.meta-value {
    font-size: 0.9rem;
    color: var(--white);
    font-weight: 600;
}

.permissions-section {
    background: var(--bg3);
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.permissions-header {
    margin-bottom: 20px;
}

.permissions-header h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin: 0 0 4px 0;
}

.permissions-subtitle {
    font-size: 0.85rem;
    color: var(--gray);
    margin: 0;
}

.assigned-users {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

.assigned-users-title {
    font-size: 0.9rem;
    color: var(--white);
    margin: 0 0 12px 0;
    font-weight: 600;
}

.assigned-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assigned-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg2);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.user-vusaf {
    font-size: 0.85rem;
    color: var(--gray);
    font-weight: 500;
    min-width: 80px;
}

.user-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--white);
}

.user-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.status--active {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.status--inactive {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.status--pending {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

/* Responsive */
@media (max-width: 1024px) {
    .role-edit-layout {
        grid-template-columns: 1fr;
    }
}

/* Checked state */
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--blue);
    border-color: var(--blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Focus state */
.checkbox-label input[type="checkbox"]:focus-visible + .checkbox-custom {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Buttons (Admin-specific) */
.btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn--edit {
    background: var(--blue);
    color: var(--white);
    margin-right: 4px;
}

.btn--edit:hover {
    background: var(--blue-light);
}

.btn--delete {
    background: var(--danger);
    color: var(--white);
}

.btn--delete:hover {
    background: #dc2626;
}

.btn--primary {
    background: var(--accent);
    color: var(--white);
}

.btn--primary:hover {
    background: var(--accent-hover);
}

.btn--secondary {
    background: var(--bg3);
    color: var(--white);
    border: 1px solid var(--border);
}

.btn--secondary:hover {
    background: var(--bg-elev-2);
    border-color: var(--border-strong);
}

.btn--danger {
    background: var(--danger);
    color: var(--white);
}

.btn--danger:hover {
    background: #dc2626;
}

/* Alerts */
.alert {
    padding: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid;
}

.alert--error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-border);
}

.alert--success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal--sm {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.modal-close:hover {
    background: var(--bg3);
    color: var(--white);
}

.modal-content > form {
    padding: 20px;
}

.modal-content > p {
    padding: 20px;
    margin: 0;
    color: var(--text-muted);
}

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--white);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group input::placeholder {
    color: var(--text-subtle);
}

.form-control--readonly {
    background: var(--bg3);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-help {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-subtle);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.form-group--button {
    padding-bottom: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.modal-content > .modal-actions {
    padding: 0 20px 20px 20px;
}

/* Permissions Grid */

.checkbox-label input[type="checkbox"] {
    width: auto;
    padding: 0;
}

/* Roles List */
.roles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Profile Page */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

.profile-header__info {
    flex: 1;
}

.profile-header__name {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.profile-header__name h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--white);
}

.profile-header__details {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.profile-detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-detail__label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.profile-detail__value {
    color: var(--white);
    font-weight: 500;
}

.profile-header__actions {
    display: flex;
    gap: 12px;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab-button {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-button:hover {
    color: var(--white);
    background: var(--bg3);
}

.tab-button--active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.tab-content {
    min-height: 400px;
}

.tab-pane {
    display: none;
}

.tab-pane--active {
    display: block;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-card {
    padding: 20px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

.stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 4px;
}

.stat-card__label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Narrative Items */
.narrative-item {
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.narrative-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.narrative-item__header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--white);
}

.narrative-item__content {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.narrative-item__meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* OPR Items */
.opr-item {
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.opr-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.opr-item__header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--white);
}

.opr-item__content {
    margin-bottom: 12px;
}

.opr-section {
    margin-bottom: 12px;
}

.opr-section strong {
    display: block;
    color: var(--white);
    margin-bottom: 4px;
}

.opr-section p {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}

.opr-item__meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Awards Grid */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.award-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.award-item__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.award-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.award-item__icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.award-item__info {
    flex: 1;
}

.award-item__info h4 {
    margin: 0 0 4px 0;
    font-size: 0.875rem;
    color: var(--white);
}

.award-item__date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.award-item__citation {
    font-size: 0.875rem;
    color: var(--text);
    margin: 0;
}

/* Comment Items */
.comment-item {
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.comment-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-item__author {
    font-weight: 600;
    color: var(--white);
}

.comment-item__date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.comment-item__content {
    color: var(--text);
    line-height: 1.6;
}

/* Badge Variants */
.badge--narrative {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
}

.badge--opr {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
}

.badge--opr-outstanding {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.badge--opr-excellent {
    background: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

.badge--opr-satisfactory {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.badge--opr-marginal {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.badge--opr-unsatisfactory {
    background: #e2e3e5;
    color: #383d41;
    border-color: #d6d8db;
}

.badge--comment {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
}

.badge--comment-general {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-ring);
}

.badge--comment-disciplinary {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.badge--comment-commendation {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.badge--comment-performance {
    background: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

.badge--comment-other {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
}

.data-table td {
    color: var(--white);
}

.data-table tbody tr:hover {
    background: var(--bg3);
}

/* Card */
.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
}

.card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card__header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--white);
}

.card__header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-input {
    padding: 8px 12px;
    background: var(--bg3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.85rem;
    min-width: 200px;
}

.filter-input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--accent-soft);
}

/* Form Validation */
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--danger);
}

.form-group--error .form-error {
    display: block;
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 4px;
}

.form-error {
    display: none;
}

.text-muted {
    color: var(--text-muted);
}

/* Roles List */
.roles-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.role-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    gap: 16px;
}

.role-card__info {
    flex: 1;
    min-width: 0;
}

.role-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.role-card__name h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--white);
}

.role-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.role-card__actions {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .role-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .role-card__actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .role-card__meta {
        flex-direction: column;
        gap: 4px;
    }
}

/* Comments List */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comment-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.comment-card__left {
    flex: 3;
    color: var(--white);
    line-height: 1.6;
}

.comment-card__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 120px;
    align-items: flex-start;
}

.comment-card__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {
    .comment-card {
        flex-direction: column;
    }

    .comment-card__right {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Loading Spinner */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state__title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 8px;
}

.empty-state__description {
    font-size: 0.9rem;
    max-width: 400px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.empty-state__action {
    margin-top: 8px;
}

/* Permission Matrix */
.permission-matrix {
    padding: 20px;
    overflow-x: auto;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.matrix-table th,
.matrix-table td {
    border: 1px solid var(--border);
    padding: 12px;
    text-align: center;
}

.matrix-table th {
    background: var(--bg3);
    font-weight: 600;
    color: var(--white);
}

.matrix-table td:first-child {
    text-align: left;
    min-width: 200px;
}

.matrix-cell {
    width: 80px;
}

.matrix-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-weight: bold;
}

.matrix--allow {
    background: var(--success-soft);
    color: var(--success);
}

.matrix--deny {
    background: var(--danger-soft);
    color: var(--danger);
}

.matrix--none {
    background: var(--bg3);
    color: var(--text-subtle);
}

/* Code blocks */
code {
    background: var(--bg3);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    color: var(--blue-light);
}

/* Text utilities */
.text-muted {
    color: var(--text-muted);
}