/* ============================================
   UiTM PERAK DASHBOARD - THEME SYSTEM
   Light/Dark Theme Support
   ============================================ */

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: all 150ms ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Hide/show icons based on theme */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

.dark .theme-toggle .icon-sun {
    display: block;
}

.dark .theme-toggle .icon-moon {
    display: none;
}

/* Smooth theme transition */
body,
.sidebar,
.header,
.tabs,
.viz-card,
.card,
.btn,
.tab,
.table,
.footer,
.pagination,
.search-box__input,
.select,
.loading__spinner,
.viz-card__body,
.viz-card__header,
.viz-card__footer,
.quick-stat,
.card__header,
.card__body {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============ DARK THEME OVERRIDES ============ */
/* Color scheme based on RMU_V5.html (slate-based) */
.dark {
    /* Primary Purple Palette - Brighter for dark mode */
    --primary-900: #4c1d95;
    --primary-800: #5b21b6;
    --primary-700: #6d28d9;
    --primary-600: #7c3aed;
    --primary-500: #8b5cf6;
    --primary-400: #a78bfa;
    --primary-300: #c4b5fd;
    --primary-200: #ddd6fe;
    --primary-100: #ede9fe;
    --primary-50: rgba(139, 92, 246, 0.15);

    /* Slate-based Neutrals for dark mode */
    --gray-900: #f8fafc;
    --gray-800: #f1f5f9;
    --gray-700: #e2e8f0;
    --gray-600: #cbd5e1;
    --gray-500: #94a3b8;
    --gray-400: #64748b;
    --gray-300: #475569;
    --gray-200: #334155;
    --gray-100: #1e293b;
    --white: #0f172a;

    /* Dark Surfaces - Slate based */
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --bg-elevated: #334155;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);

    /* Dark Typography */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;

    /* Dark Semantic Colors - Vibrant for dark mode */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --error: #ef4444;
    --error-light: rgba(239, 68, 68, 0.15);
    --info: #22d3ee;
    --info-light: rgba(34, 211, 238, 0.15);

    /* Dark Chart Colors - More vibrant */
    --chart-1: #8b5cf6;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #22d3ee;
    --chart-6: #a78bfa;
}

/* Dark mode specific overrides */
.dark body {
    background: var(--bg-page);
}

.dark .sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-right: 1px solid var(--border-color);
}

.dark .sidebar__logo {
    background: rgba(139, 92, 246, 0.2);
}

.dark .header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .header__title {
    color: #f8fafc;
}

.dark .header__subtitle {
    color: rgba(248, 250, 252, 0.7);
}

.dark .header__year-label {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .header__timestamp .label {
    color: rgba(248, 250, 252, 0.6);
}

.dark .header__timestamp .value {
    color: #f8fafc;
}

.dark .tabs {
    background: var(--bg-card);
    border-bottom: 2px solid var(--border-color);
}

.dark .tab {
    color: var(--text-secondary);
}

.dark .tab:hover {
    color: var(--primary-400);
    background: rgba(139, 92, 246, 0.1);
}

.dark .tab--active {
    color: var(--primary-400);
    border-bottom-color: var(--primary-500);
}

.dark .tab__badge {
    color: var(--primary-300);
    background: rgba(139, 92, 246, 0.2);
}

.dark .tab--active .tab__badge {
    color: #ffffff;
    background: var(--primary-600);
}

.dark .main {
    background: var(--bg-page);
}

.dark .viz-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.dark .viz-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

.dark .viz-card__header {
    border-bottom-color: var(--border-light);
}

.dark .viz-card__title {
    color: var(--text-primary);
}

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

.dark .viz-card__footer {
    background: var(--bg-elevated);
    border-top-color: var(--border-light);
}

.dark .viz-stat__value {
    color: var(--primary-400);
}

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

.dark .viz-card__big-number {
    color: var(--text-primary);
}

.dark .viz-card--number .viz-card__label {
    color: var(--text-secondary);
}

.dark .viz-card__icon--primary {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary-400);
}

.dark .viz-card__icon--success {
    background: var(--success-light);
    color: var(--success);
}

.dark .viz-card__icon--warning {
    background: var(--warning-light);
    color: var(--warning);
}

.dark .viz-card__trend {
    border-top-color: var(--border-light);
}

.dark .viz-card__legend {
    background: var(--bg-elevated);
    border-top-color: var(--border-light);
}

.dark .legend-item {
    color: var(--text-secondary);
}

.dark .quarter-circle__value {
    color: var(--text-primary);
}

.dark .quarter-circle__label {
    color: var(--text-primary);
}

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

/* Tables dark mode */
.dark .card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark .card__header {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-color);
}

.dark .card__title {
    color: var(--text-primary);
}

.dark .search-box__input {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark .search-box__input::placeholder {
    color: var(--text-muted);
}

.dark .search-box__input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

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

.dark .select {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark .select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.dark .table th {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
}

.dark .table td {
    color: var(--text-primary);
    border-bottom-color: var(--border-light);
}

.dark .table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

.dark .btn--ghost {
    color: var(--text-secondary);
}

.dark .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark .pagination__btn {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.dark .pagination__btn:hover:not([disabled]) {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.dark .pagination__btn--active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #ffffff;
}

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

/* PI Cards dark mode */
.dark .pi-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.dark .pi-card__code {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary-400);
}

.dark .pi-card__chart-bg {
    stroke: oklch(0.3 0.05 280);
}

.dark .pi-card__stat {
    background: oklch(0.22 0.04 280);
}

/* ============ SUMMARY STATS CARDS - THEME SUPPORT ============ */
/* Light theme (default) - Purple gradient */
.summary-stat-card {
    background: linear-gradient(135deg, #5b21b6 0%, #3b0764 100%) !important;
    box-shadow: 0 4px 20px rgba(91, 33, 182, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.summary-stat-card__value {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.summary-stat-card__label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.summary-stat-card__subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
}

.summary-stat-card__icon {
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Dark theme - Slate gradient */
.dark .summary-stat-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dark .summary-stat-card__value {
    color: #22d3ee !important;
    text-shadow: none;
}

.dark .summary-stat-card__label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark .summary-stat-card__subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
}

.dark .summary-stat-card__icon {
    color: rgba(255, 255, 255, 0.15) !important;
}