/* public/assets/css/admin-theme.css */
:root {
    /* Base Surfaces (The No-Line Rule) */
    --surface: #0e0e0e;
    --surface-container-low: #131313;
    --surface-container-high: #201f1f;
    --surface-container-highest: #2c2c2c; /* Based on surface_bright */
    
    /* Accents & Glass */
    --primary: #ccff00;
    --primary-container: #cafd00;
    --primary-dim: rgba(204, 255, 0, 0.8);
    --secondary: #ece856;
    --surface-variant: rgba(38, 38, 38, 0.6); /* 60% opacity for Glassmorphism */
    --ghost-border: rgba(73, 72, 71, 0.15); /* outline_variant at 15% */
    
    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
}

body:has(.admin-sidebar) {
    background-color: var(--surface);
    color: var(--text-primary);
}

/* Layering Execution */
.admin-sidebar, .kanban-column {
    background-color: var(--surface-container-low);
    border: none; /* Strict No-Line Rule */
}

.card, .task-card, .admin-header {
    background-color: var(--surface-container-high);
    border-radius: 8px; /* Moderate radius (2) */
    border: none;
}

/* Typography Scales */
.display-lg {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.label-sm {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Buttons & Glassmorphism Modals */
.btn-primary {
    background: linear-gradient(135deg, #f3ffca, var(--primary-container));
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--primary-dim);
    box-shadow: 0 0 2px var(--primary);
}

.modal-glass {
    background-color: var(--surface-variant);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.04); /* Ghost Shadow */
}

/* Data Tables */
.data-table tr {
    border-bottom: 1px solid var(--ghost-border); /* Ghost Border Fallback */
}
.data-table tr:hover {
    background-color: var(--surface-container-highest);
}

/* Skeleton Loaders */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-loader {
    background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-container-highest) 50%, var(--surface-container-low) 75%);
    background-size: 200% 100%;
    animation: shimmer 2.5s linear infinite; /* Calm technical environment */
}