:root {
            --admin-sidebar: #1a1a2e;
            --admin-sidebar-hover: rgba(232,69,60,0.12);
            --admin-sidebar-active: var(--coral);
            --admin-content: #f7f5f2;
            --admin-card: #ffffff;
            --admin-border: rgba(0,0,0,0.07);
            --sidebar-width: 240px;
        }

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

        body.admin-body {
            font-family: 'Inter', sans-serif;
            background: var(--admin-content);
            color: #1a1a2e;
            min-height: 100vh;
            display: flex;
        }

        /* ── Sidebar ── */
        .admin-sidebar {
            width: var(--sidebar-width);
            min-height: 100vh;
            background: var(--admin-sidebar);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0;
            z-index: 100;
            transition: transform 0.3s ease;
        }

        .sidebar-brand {
            padding: 1.5rem 1.25rem 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .sidebar-brand-name {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
        }
        .sidebar-brand-sub {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 0.15rem;
        }

        .sidebar-nav {
            flex: 1;
            padding: 1rem 0;
            overflow-y: auto;
        }

        .nav-section-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.28);
            padding: 1rem 1.25rem 0.4rem;
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.65rem 1.25rem;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            border-left: 3px solid transparent;
            transition: all 0.18s ease;
        }
        .sidebar-link:hover {
            color: #fff;
            background: var(--admin-sidebar-hover);
            border-left-color: rgba(232,69,60,0.5);
        }
        .sidebar-link.active {
            color: #fff;
            background: var(--admin-sidebar-hover);
            border-left-color: var(--coral);
        }
        .sidebar-link .material-symbols-outlined {
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .sidebar-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .sidebar-user {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.5);
            margin-bottom: 0.75rem;
        }
        .sidebar-user strong {
            display: block;
            color: rgba(255,255,255,0.85);
            font-weight: 600;
        }

        /* ── Admin Content ── */
        .admin-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .admin-topbar {
            background: var(--admin-card);
            border-bottom: 1px solid var(--admin-border);
            padding: 0.9rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .admin-topbar h1 {
            font-size: 1.05rem;
            font-weight: 700;
            color: #1a1a2e;
        }
        .topbar-back {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            color: var(--coral);
            text-decoration: none;
            font-weight: 600;
            transition: opacity 0.2s;
        }
        .topbar-back:hover { opacity: 0.75; }

        .admin-main {
            flex: 1;
            padding: 2rem;
        }

        /* ── Admin Cards ── */
        .admin-card {
            background: var(--admin-card);
            border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); box-shadow: 0 12px 36px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .admin-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--admin-border);
        }
        .admin-card-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #1a1a2e;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .admin-card-title .material-symbols-outlined {
            font-size: 1.1rem;
            color: var(--coral);
        }

        /* ── Admin Table ── */
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        .admin-table th {
            text-align: left;
            padding: 0.6rem 1rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #555; background: #faf9f7; border-bottom: 2px solid rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.04);
        }
        .admin-table td {
            padding: 0.8rem 1rem;
            border-bottom: 1px solid var(--admin-border);
            color: #333;
            vertical-align: middle;
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: rgba(232,69,60,0.03); }

        /* ── Admin Form ── */
        .admin-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #555;
            margin-bottom: 0.35rem;
        }
        .admin-input {
            width: 100%;
            background: #fcfbf9;
            border: 1.5px solid #e5e2de;
            border-radius: 10px;
            padding: 0.65rem 0.9rem;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
            color: #1a1a2e;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .admin-input:focus {
            border-color: var(--coral);
            box-shadow: 0 0 0 3px rgba(232,69,60,0.1);
            background: #fff;
        }
        .admin-input::placeholder { color: #aaa; }

        /* ── Admin Buttons ── */
        .btn-admin-primary {
            background: linear-gradient(135deg, var(--coral), #ff6b52);
            color: #fff;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 14px rgba(232, 69, 60, 0.25);
            padding: 0.6rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: opacity 0.2s, transform 0.1s;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            text-decoration: none !important;
        }
        .btn-admin-primary:hover { box-shadow: 0 6px 20px rgba(232, 69, 60, 0.35); transform: translateY(-1px); }
        .btn-admin-primary:active { transform: scale(0.98); }

        .btn-admin-ghost {
            background: transparent;
            color: #555;
            border: 1.5px solid #e5e2de;
            border-radius: 10px;
            padding: 0.55rem 1.1rem;
            font-size: 0.875rem;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            text-decoration: none !important;
        }
        .btn-admin-ghost:hover { border-color: var(--coral); color: var(--coral); background: rgba(232, 69, 60, 0.04); }

        .btn-admin-danger {
            background: transparent;
            color: #dc2626;
            border: 1.5px solid #fecaca;
            border-radius: 10px;
            padding: 0.4rem 0.9rem;
            font-size: 0.8rem;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        .btn-admin-danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

        /* ── Role Badge ── */
        .role-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }
        .role-badge.admin { background: rgba(232,69,60,0.1); color: var(--coral); }
        .role-badge.user { background: rgba(0,0,0,0.06); color: #555; }

        /* ── Status Badge ── */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        .status-badge.active { background: rgba(34,197,94,0.1); color: #16a34a; }
        .status-badge.inactive { background: rgba(0,0,0,0.06); color: #888; }

        /* ── Alerts ── */
        .admin-alert {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            display: none;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .admin-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; display: flex; }
        .admin-alert.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; display: flex; }

        /* ── Stat cards ── */
        .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
        .stat-card {

            background: var(--admin-card);
            border-radius: 16px; border: 1px solid rgba(0,0,0,0.03); padding: 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .stat-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            background: rgba(232,69,60,0.1);
            display: flex; align-items: center; justify-content: center;
        }
        .stat-icon .material-symbols-outlined { color: var(--coral); font-size: 1.3rem; }
        .stat-num { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; line-height: 1; }
        .stat-label { font-size: 0.75rem; color: #888; margin-top: 0.2rem; }

        /* ── Form Row ── */
        .form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
        .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
        .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
        .form-group { display: flex; flex-direction: column; }

        /* ── Date picker / select ── */
        select.admin-input { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.25em; padding-right: 2.5rem; }

        @media (max-width: 768px) {
            .admin-sidebar { transform: translateX(-100%); }
            .admin-content { margin-left: 0; }
            .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
        }
    

.stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }



@media (max-width: 767px) {
    .admin-card-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .admin-card-header > div:last-child { width: 100%; flex-wrap: wrap; }
    .admin-card-header > div:last-child > * { flex: 1 1 auto; }
}

/* Custom scrollbar for Assign Labs dialog selection grid */
#labsGrid {
    max-height: clamp(240px, 50vh, 450px);
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 6px;
}
#labsGrid::-webkit-scrollbar {
    width: 6px;
}
#labsGrid::-webkit-scrollbar-track {
    background: #f7f5f2;
    border-radius: 10px;
}
#labsGrid::-webkit-scrollbar-thumb {
    background: #dcdad6;
    border-radius: 10px;
}
#labsGrid::-webkit-scrollbar-thumb:hover {
    background: #c8c6c2;
}

/* --- Inline Styles Cleanup Classes --- */
.admin-card-desc {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1.25rem;
}
.btn-admin-primary .material-symbols-outlined,
.btn-admin-danger .material-symbols-outlined,
.btn-admin-ghost .material-symbols-outlined {
    font-size: 1rem;
}
.admin-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.admin-modal-header {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1.5rem;
}
.admin-modal-body {
    padding: 1.5rem;
}
.admin-form-checkbox-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}
.admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.admin-checkbox-label input[type="checkbox"] {
    accent-color: var(--coral);
    width: 16px;
    height: 16px;
}
.admin-form-footer {
    text-align: right;
}
.admin-header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.admin-loading {
    text-align: center;
    padding: 2rem;
    color: #aaa;
}
.admin-loading .material-symbols-outlined {
    font-size: 2rem;
    animation: spin 1s linear infinite;
    display: block;
    margin-bottom: 0.5rem;
}
.admin-report-title {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 1rem;
}
.w-50px { width: 50px; }
.w-120px { width: 120px; }
.min-w-160 { min-width: 160px; }
.max-w-600 { max-width: 600px; }