/* ══════════════════════════════════════════════
   Cloud167 — Design System
   Modern, Premium, Glassmorphism UI
   ══════════════════════════════════════════════ */

/* ─── CSS Variables ────────────────────────── */
:root {
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(21, 101, 192, 0.04);
    --bg-glass-hover: rgba(21, 101, 192, 0.08);

    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;

    --accent-primary: #1565C0;
    --accent-primary-glow: rgba(21, 101, 192, 0.2);
    --accent-secondary: #00897B;
    --accent-success: #22C55E;
    --accent-danger: #EF4444;
    --accent-warning: #F9A825;
    --accent-info: #3B82F6;

    --border-color: #E2E8F0;
    --border-focus: rgba(21, 101, 192, 0.5);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-glow: 0 4px 20px var(--accent-primary-glow);

    --sidebar-width: 240px;
    --topbar-height: 64px;
    --bottomnav-height: 64px;

    --transition: 0.2s ease;
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
}

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .page-title, .stat-value, .login-title {
    font-family: var(--font-heading);
}

a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-secondary); }

img { max-width: 100%; height: auto; }

/* ─── Layout ───────────────────────────────── */
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: #FFFFFF;
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--transition-slow);
}

/* Collapsed: icon-only mode (like e-Rapor) */
.sidebar.collapsed {
    width: 64px;
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-divider,
.sidebar.collapsed .user-details,
.sidebar.collapsed .logout-btn span,
.sidebar.collapsed .nav-group-toggle,
.sidebar.collapsed .badge { display: none; }

.sidebar.collapsed .sidebar-header {
    padding: 16px 8px;
    justify-content: center;
}
.sidebar.collapsed .logo { justify-content: center; }
.sidebar.collapsed .sidebar-header .sidebar-toggle { display: none; }

.sidebar.collapsed .sidebar-nav { padding: 8px 6px; }
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px;
    border-radius: var(--radius-sm);
}
.sidebar.collapsed .nav-item svg { margin: 0; }

.sidebar.collapsed .sidebar-footer { padding: 8px 6px; }
.sidebar.collapsed .user-info {
    justify-content: center;
    padding: 8px;
}
.sidebar.collapsed .logout-btn {
    justify-content: center;
    padding: 12px;
}

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

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

.logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-glow);
}
.logo-icon svg { width: 20px; height: 20px; }

.logo-text {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-primary);
}
.logo-text strong { font-weight: 700; }

.sidebar-toggle {
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 6px; border-radius: var(--radius-sm);
    transition: var(--transition);
}
.sidebar-toggle:hover { background: var(--bg-glass-hover); color: var(--text-primary); }

.sidebar-header .sidebar-toggle { display: flex; align-items: center; }

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition);
    margin-bottom: 2px;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { color: var(--text-primary); background: var(--bg-glass-hover); }
.nav-item.active {
    color: #FFFFFF;
    background: var(--accent-primary);
    box-shadow: 0 2px 8px var(--accent-primary-glow);
    border-radius: var(--radius-sm);
}

.nav-divider { height: 1px; background: var(--border-color); margin: 12px 14px; }
.nav-label {
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid var(--border-color);
}

.user-info {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: 4px;
}
.user-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--border-color);
}
.user-details { display: flex; flex-direction: column; overflow: hidden; }
.user-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.72rem; color: var(--text-muted); }

.logout-btn { color: var(--accent-danger) !important; }
.logout-btn:hover { background: rgba(239, 68, 68, 0.1) !important; }

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: 0;
    overflow-x: hidden;
    transition: margin-left var(--transition-slow);
}
.sidebar.collapsed ~ .main-content {
    margin-left: 64px;
}

.topbar {
    position: sticky; top: 0;
    height: var(--topbar-height);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 24px; gap: 16px;
    z-index: 50;
}
.topbar .sidebar-toggle { display: flex; }

.page-title {
    font-size: 1.15rem;
    font-weight: 600;
    flex: 1;
}

.topbar-actions { display: flex; gap: 8px; }

.page-content { padding: 24px; max-width: 1200px; overflow-x: auto; }

/* ─── Buttons ──────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }

.btn-primary {
    background: var(--accent-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 8px var(--accent-primary-glow);
}
.btn-primary:hover {
    background: #0D47A1;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--accent-primary-glow);
}

.btn-ghost {
    background: transparent; color: var(--accent-primary);
    border: 1px solid var(--border-color);
}
.btn-ghost:hover { background: var(--bg-glass-hover); border-color: var(--accent-primary); }

.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; width: 100%; justify-content: center; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary); cursor: pointer;
    transition: all var(--transition);
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon:hover { background: var(--bg-glass-hover); color: var(--text-primary); }
.btn-icon.btn-danger:hover { background: rgba(239, 68, 68, 0.1); color: var(--accent-danger); border-color: var(--accent-danger); }

/* ─── Cards ────────────────────────────────── */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex; align-items: center; gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.stat-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent, var(--accent-primary)) 15%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent, var(--accent-primary));
}
.stat-icon svg { width: 22px; height: 22px; }

.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stats-grid-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Category Cards */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.category-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 12px; gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    cursor: pointer;
    text-align: center;
}
.category-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--accent-primary-glow);
}
.category-icon { color: var(--accent-primary); }
.category-icon svg { width: 28px; height: 28px; }
.category-name { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }

/* File Grid */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 32px; }

.file-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}
.file-card:hover { border-color: rgba(255, 255, 255, 0.1); }

.file-icon {
    width: 40px; height: 40px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.file-icon svg { width: 18px; height: 18px; }

.file-info { flex: 1; min-width: 0; }
.file-name { display: block; font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 0.75rem; color: var(--text-muted); }

.file-actions { display: flex; gap: 4px; }

/* ─── Tables ───────────────────────────────── */
.table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    max-width: 100%;
}
.data-table { min-width: 600px; width: 100%; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-glass-hover); }

/* ─── Matriks status pengumpulan ───────────────
   Tabel guru × jenis dokumen. Kolom nama dibekukan di kiri supaya saat
   digulir mendatar masih ketahuan barisnya milik siapa. Gaya ini dulu
   ditulis inline di view, dipindah ke sini agar bisa disesuaikan di layar
   kecil — style atribut tidak bisa ditimpa media query.
   ─────────────────────────────────────────────── */
.matrix-name {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg-card);
    white-space: nowrap;
    /* Bayangan tepi: menandai kolom ini beku, bukan sekadar terpotong */
    box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.10);
}
thead .matrix-name { z-index: 2; background: var(--bg-secondary); }
.matrix-name.mine { background: rgba(99, 102, 241, 0.08); }

/* Kolom status. min-width dulu ditulis inline (80–100px) sehingga tidak bisa
   ditimpa media query — judul panjang memaksa kolom melebar dan di ponsel
   cuma satu kolom yang kelihatan.
   Ditulis sebagai `.data-table thead th.matrix-col` bukan `.matrix-col` saja:
   aturan `.data-table thead th` lebih spesifik, jadi selektor pendek kalah
   dan text-align/white-space-nya tidak pernah tergantikan. */
.data-table thead th.matrix-col {
    text-align: center;
    min-width: 100px;
}

.matrix-hint { display: none; }

.file-name-cell { display: flex; align-items: center; gap: 8px; }
.file-name-cell svg { width: 16px; height: 16px; color: var(--accent-primary); flex-shrink: 0; }

.action-btns { display: flex; gap: 4px; }

.user-cell { display: flex; align-items: center; gap: 8px; }
.user-avatar-sm { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; }

/* ─── Badges ───────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--bg-glass);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.badge-primary { background: #E3F2FD; color: var(--accent-primary); border-color: #BBDEFB; }
.badge-success { background: #DCFCE7; color: #16A34A; border-color: #BBF7D0; }
.badge-danger { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }
.badge-warning { background: #FEF9C3; color: #CA8A04; border-color: #FDE68A; }
.badge-info { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; }

/* ─── Forms ────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }

.form-input, .form-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    transition: border-color var(--transition);
    outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-primary-glow); }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8fa3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-select-sm { padding: 5px 30px 5px 10px; font-size: 0.78rem; width: auto; }

/* Filter Bar */
.filter-bar { margin-bottom: 20px; }
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.filter-form .form-select, .filter-form .form-input { width: auto; min-width: 150px; }

.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
.search-box input { padding-left: 36px; width: 100%; }

/* ─── Upload / Dropzone ────────────────────── */
.upload-container { max-width: 600px; }

.dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--bg-card);
}
.dropzone:hover, .dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 30px var(--accent-primary-glow);
}

.dropzone-icon { margin-bottom: 16px; color: var(--accent-primary); }
.dropzone-icon svg { width: 48px; height: 48px; }
.dropzone-text { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 6px; }
.dropzone-link { color: var(--accent-primary); font-weight: 600; cursor: pointer; text-decoration: underline; }
.dropzone-hint { font-size: 0.78rem; color: var(--text-muted); }
.file-input { display: none; }

.file-preview {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.preview-info { display: flex; align-items: center; gap: 12px; }
.preview-info svg { color: var(--accent-primary); width: 24px; height: 24px; }
.preview-name { display: block; font-weight: 600; font-size: 0.9rem; }
.preview-size { font-size: 0.78rem; color: var(--text-muted); }

.upload-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.progress-bar { flex: 1; height: 6px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); border-radius: var(--radius-full); transition: width 0.3s; width: 0; }
.progress-text { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); min-width: 36px; }

/* ─── Activity Timeline ────────────────────── */
.activity-list { margin-bottom: 32px; }
.activity-item {
    display: flex; gap: 12px;
    padding: 10px 0;
    position: relative;
}
.activity-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px; top: 28px; bottom: -4px;
    width: 2px;
    background: var(--border-color);
}
.activity-dot {
    width: 12px; height: 12px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 4px;
}
.activity-content { flex: 1; }
.activity-action { display: block; font-size: 0.88rem; color: var(--text-secondary); }
.activity-time { font-size: 0.75rem; color: var(--text-muted); }

/* ─── Section Headers ──────────────────────── */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.section-header h2 { font-size: 1.05rem; font-weight: 600; }

/* ─── Empty State ──────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state p { font-size: 0.9rem; }
.empty-state a { color: var(--accent-primary); font-weight: 600; }

/* ─── Alerts ───────────────────────────────── */
.alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; margin: 0 24px 0;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    animation: slideDown 0.3s ease;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.alert span { flex: 1; }
.alert-close {
    background: none; border: none; color: inherit; cursor: pointer; opacity: 0.7;
    padding: 4px;
}
.alert-close:hover { opacity: 1; }
.alert-success { background: #DCFCE7; color: #16A34A; border: 1px solid #BBF7D0; }
.alert-error { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.alert-info { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* ─── Toast Notification ───────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    animation: slideUp 0.3s ease;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
}
.toast-success { background: var(--accent-success); color: white; }
.toast-error { background: var(--accent-danger); color: white; }

/* ─── Profile ──────────────────────────────── */
.profile-container { max-width: 700px; }

.profile-header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.profile-avatar {
    width: 80px; height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--accent-primary);
    box-shadow: 0 0 20px var(--accent-primary-glow);
}
.profile-name { font-size: 1.3rem; font-weight: 700; }
.profile-email { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 6px; }

/* ─── Pagination ───────────────────────────── */
.pagination-wrapper { display: flex; justify-content: center; padding: 16px 0; }
.pagination-wrapper ul { display: flex; gap: 4px; list-style: none; }
.pagination-wrapper li a, .pagination-wrapper li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all var(--transition);
}
.pagination-wrapper li a:hover { background: var(--bg-glass-hover); color: var(--text-primary); }
/* Halaman aktif dirender sebagai <a>, bukan <span>. Aturan lama hanya
   menyasar <span> sehingga halaman yang sedang dibuka tidak pernah tersorot
   di semua daftar berpaging. */
.pagination-wrapper li.active a,
.pagination-wrapper li.active span {
    background: var(--accent-primary); color: white; border-color: var(--accent-primary);
}
.pagination-wrapper li.active a:hover { background: var(--accent-primary); color: white; }

/* Elipsis hanya penanda jeda nomor, bukan tombol. */
.pagination-wrapper li.ellipsis span {
    border-color: transparent; background: transparent; color: var(--text-muted);
    min-width: 20px; padding: 0 2px;
}
/* Tombol yang tidak bisa ditekan (First/Previous di halaman pertama) dibuat
   redup, bukan disembunyikan — supaya posisi tombol lain tidak bergeser
   setiap kali berpindah halaman. */
.pagination-wrapper li.disabled span {
    color: var(--text-muted); background: var(--bg-tertiary); cursor: default; opacity: 0.6;
}

/* Baris pager: keterangan jumlah di kiri, tombol halaman di kanan. */
.pager-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.pager-bar .pagination-wrapper { padding: 0; justify-content: flex-end; }
@media (max-width: 640px) {
    .pager-bar { justify-content: center; }
    .pager-bar .pagination-wrapper { justify-content: center; width: 100%; }
}

/* ─── Login Page ───────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E3F2FD 0%, #F8FAFC 50%, #E0F2F1 100%);
    position: relative;
}

.login-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: url('../img/bg-login.jpg') center/cover no-repeat;
}
.login-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(21,101,192,0.08), rgba(0,137,123,0.05));
}
.bg-circle { display: none; }
.bg-circle-1 { width: 500px; height: 500px; background: var(--accent-primary); top: -10%; right: -10%; }
.bg-circle-2 { width: 400px; height: 400px; background: var(--accent-secondary); bottom: -10%; left: -10%; }
.bg-circle-3 { width: 300px; height: 300px; background: var(--accent-info); top: 40%; left: 50%; }

.login-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 24px;
    text-align: center;
    z-index: 1;
}

.login-card {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 48px 36px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}

.login-logo { margin-bottom: 20px; }
.logo-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 20px var(--accent-primary-glow);
}

.login-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 4px; }
.login-subtitle { font-size: 1rem; color: var(--accent-primary); font-weight: 600; margin-bottom: 12px; }
.login-desc { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.5; }

.login-alert {
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-sm);
    color: var(--accent-danger);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: white;
    color: #333;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.btn-google:hover {
    background: #f8f8f8;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: #333;
}

.login-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 20px; line-height: 1.6; }
.login-note strong { color: var(--text-secondary); }

.login-footer {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
/* ─── Modal ─────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-header h3 { font-size: 1.1rem; font-weight: 600; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(-10px); }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(20px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

/* ─── Notification Bell ────────────────────── */
.notif-wrapper { position: relative; }
.notif-btn {
    position: relative;
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; padding: 8px; border-radius: var(--radius-sm);
    transition: var(--transition); display: flex; align-items: center;
}
.notif-btn:hover { background: var(--bg-glass-hover); color: var(--text-primary); }
.notif-btn svg { width: 20px; height: 20px; }
.notif-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px;
    background: var(--accent-danger); color: white;
    border-radius: var(--radius-full);
    font-size: 0.65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.notif-dropdown {
    position: absolute; top: 100%; right: 0;
    width: 340px; max-height: 400px;
    background: #FFFFFF; border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    overflow-y: auto; z-index: 200;
    display: none; animation: slideDown 0.2s ease;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header {
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 0.9rem;
}
.notif-item {
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    display: flex; gap: 10px; transition: background var(--transition); cursor: pointer;
}
.notif-item:hover { background: var(--bg-tertiary); }
.notif-item.unread { background: #F0F7FF; }
.notif-item:last-child { border-bottom: none; }
.notif-icon-wrap {
    width: 36px; height: 36px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.85rem;
}
.notif-icon-wrap.info { background: #DBEAFE; color: #1D4ED8; }
.notif-icon-wrap.success { background: #DCFCE7; color: #16A34A; }
.notif-icon-wrap.warning { background: #FEF9C3; color: #CA8A04; }
.notif-icon-wrap.danger { background: #FEE2E2; color: #DC2626; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: block; }
.notif-msg { font-size: 0.75rem; color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 0.7rem; color: var(--text-muted); }
.notif-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.notif-footer { padding: 10px 16px; border-top: 1px solid var(--border-color); text-align: center; }
.notif-footer a { font-size: 0.82rem; font-weight: 600; }

/* ─── Greeting Header ──────────────────────── */
.greeting-header {
    margin-bottom: 24px;
}
.greeting-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.greeting-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── Dashboard Schedule Table ─────────────── */
.schedule-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.schedule-table th {
    padding: 10px 14px; text-align: left; font-size: 0.75rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); border-bottom: 1px solid var(--border-color);
}
.schedule-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:hover { background: var(--bg-tertiary); }

/* ─── Dashboard Quick Cards ────────────────── */
.quick-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 20px;
    box-shadow: var(--shadow-sm); height: 100%;
}
.quick-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.quick-card-header h3 {
    font-size: 0.95rem; font-weight: 600;
}
.quick-card-list { list-style: none; }
.quick-card-list li {
    padding: 10px 0; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    font-size: 0.85rem; color: var(--text-secondary);
}
.quick-card-list li:last-child { border-bottom: none; }

.dashboard-grid {
    display: grid; gap: 20px; margin-bottom: 24px;
}
.dashboard-grid-2 { grid-template-columns: 1fr 1fr; }
.dashboard-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Deadline colors */
.deadline-urgent { color: var(--accent-danger); font-weight: 600; }
.deadline-soon { color: var(--accent-warning); font-weight: 600; }
.deadline-ok { color: var(--accent-success); font-weight: 600; }

/* ─── Bottom Navigation (Mobile) ───────────── */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottomnav-height);
    background: #FFFFFF;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    z-index: 100;
    justify-content: space-around; align-items: center;
    padding: 0 8px;
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 12px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.65rem; font-weight: 500;
    transition: color var(--transition);
    border-radius: var(--radius-sm);
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item:hover { color: var(--accent-primary); }
.bottom-nav-item.active { color: var(--accent-primary); font-weight: 700; }

/* ─── Sidebar Overlay ──────────────────────── */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3); z-index: 99;
    display: none;
}
.sidebar-overlay.show { display: block; }

/* ─── Nav Group Collapsible ────────────────── */
.nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 8px 14px;
    background: none; border: none; cursor: pointer;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-muted);
    transition: color var(--transition);
}
.nav-group-toggle:hover { color: var(--text-primary); }
.nav-group-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.nav-group-toggle.collapsed svg { transform: rotate(-90deg); }
.nav-group-items { overflow: hidden; transition: max-height 0.3s ease; }
.nav-group-items.collapsed { max-height: 0 !important; }

/* ─── Responsive ───────────────────────────── */
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar { width: 64px; }
    .sidebar .logo-text,
    .sidebar .nav-item span,
    .sidebar .nav-label,
    .sidebar .nav-divider,
    .sidebar .user-details,
    .sidebar .logout-btn span,
    .sidebar .nav-group-toggle { display: none; }
    .sidebar .sidebar-header .sidebar-toggle { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 12px; }
    .sidebar .user-info { justify-content: center; padding: 8px; }
    .main-content { margin-left: 64px; }
    .page-content { padding: 20px; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid-2 { grid-template-columns: 1fr 1fr; }
    .dashboard-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    /* On mobile, collapsed should still hide completely */
    .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }
    .sidebar.collapsed ~ .main-content { margin-left: 0; }

    .main-content { margin-left: 0; padding-bottom: var(--bottomnav-height); }
    .page-content { padding: 16px; }

    .bottom-nav { display: flex; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .file-grid { grid-template-columns: 1fr; }

    .filter-form { flex-direction: column; }
    .filter-form .form-select, .filter-form .form-input, .search-box { width: 100%; min-width: 0; }

    .profile-header { flex-direction: column; text-align: center; }
    .topbar-actions .btn span { display: none; }
    .form-row { grid-template-columns: 1fr; }

    .dashboard-grid-2, .dashboard-grid-3 { grid-template-columns: 1fr; }

    .greeting-text { font-size: 1.2rem; }

    /* Dijepit ke lebar layar. Nilai lama (300px, right:-60px) menggantung
       keluar tepi kanan di ponsel 360px sehingga isinya terpotong. */
    .notif-dropdown {
        position: fixed;
        top: calc(var(--topbar-height) + 4px);
        left: 12px; right: 12px;
        width: auto; max-width: none;
    }

    /* ─── Tombol Logout ───────────────────────
       Sidebar dan bottom-nav sama-sama z-index 100, dan bottom-nav lebih
       belakang di DOM — jadi ia menang dan menutupi 64px terbawah sidebar,
       tepat tempat tombol Logout. Drawer harus berada di atas segalanya. */
    .sidebar         { z-index: 160; }
    .sidebar-overlay { z-index: 150; }

    /* Ruang untuk bilah gestur / notch, supaya Logout tidak mepet tepi */
    .sidebar-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .bottom-nav {
        height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        align-items: flex-start;
    }
    .main-content {
        padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
    }

    /* ─── Matriks status di layar kecil ───────
       Nama guru boleh turun baris dan dibatasi lebarnya; kalau dibiarkan
       nowrap, satu nama panjang memakan hampir seluruh layar dan kolom
       statusnya tidak kebagian tempat. */
    /* Kolom nama diberi lebar tetap. Tanpa ini algoritma tabel memampatkan
       kolom terpaksa agar muat layar, dan nama jadi patah tiap 4 huruf.
       Biarkan tabel tetap lebar — kolom nama yang beku plus petunjuk geser
       yang membuatnya terbaca, bukan memaksa semuanya muat sekaligus. */
    .matrix-name {
        min-width: 132px;
        max-width: 132px;
        white-space: normal;
        /* break-word, bukan anywhere: patah hanya di spasi, sehingga
           "Annisa Mitha Ardillah" tidak jadi "Anni sa Mith a" */
        overflow-wrap: break-word;
        font-size: 0.76rem;
        line-height: 1.35;
    }
    .table-wrapper.matrix .data-table thead th { padding: 10px 6px; font-size: 0.66rem; }
    .table-wrapper.matrix .data-table tbody td { padding: 10px 6px; }

    /* Judul kolom boleh turun baris. Dibiarkan nowrap, satu judul seperti
       "Perencanaan Pembelajaran" melebar sampai kolom lain terdorong keluar
       layar dan hanya satu yang terlihat sekali geser. */
    .data-table thead th.matrix-col {
        white-space: normal;
        min-width: 82px;
        line-height: 1.25;
        letter-spacing: 0;
    }
    /* Kolom nama juga: aturan thead th memasang nowrap yang harus dikalahkan */
    .data-table thead th.matrix-name { white-space: normal; }

    /* Guru dua jenjang punya dua status dalam satu sel: biarkan menumpuk
       ke bawah daripada terdorong keluar layar. */
    .table-wrapper.matrix td:not(.matrix-name) { white-space: normal; }
    .table-wrapper.matrix .slot-status {
        margin: 3px 2px;
        font-size: 1.15rem;
        /* Sasaran sentuh — ikon 16px terlalu kecil untuk jempol */
        min-width: 32px; min-height: 32px;
        justify-content: center;
    }

    .matrix-hint {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin: 0 0 6px;
    }

    /* ─── Tabel bertumpuk ─────────────────────
       Tabel enam kolom tidak mungkin muat di layar 375px. Digulir mendatar,
       kolom Aksi — tombol Upload/Upload Ulang, yang paling sering dipakai
       guru dari ponsel — terdampar di luar layar dan nyaris tak ditemukan.
       Di ponsel tiap baris jadi satu kartu, label kolom pindah ke kiri sel. */
    .table-wrapper.stacked { border: none; background: none; }
    .table-wrapper.stacked .data-table { min-width: 0; }
    .table-wrapper.stacked thead { display: none; }

    .table-wrapper.stacked tbody tr {
        display: block;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 6px 4px;
        margin-bottom: 12px;
    }
    .table-wrapper.stacked tbody tr:hover { background: var(--bg-card); }

    /* Label diposisikan mutlak, bukan sebagai kolom grid. Dengan grid, tiap
       potongan isi sel (teks, <br>, <span>) jadi item terpisah: baris kedua
       "Terlambat 4 hari" jatuh ke kolom label dan pil status melar selebar
       kolom. Cara ini tidak peduli isi selnya seperti apa. */
    .table-wrapper.stacked tbody td {
        display: block;
        position: relative;
        padding: 6px 12px 6px 100px;
        min-height: 26px;
        border-bottom: none;
        white-space: normal;
        /* `anywhere`, bukan `break-word` seperti pada kolom nama guru. Nama
           berkas semacam "BERKAS_GABUNGAN_Informatika_VIII_Ganjil.pdf" tidak
           punya spasi untuk dipatahkan — dibiarkan utuh, kartunya melebar
           keluar layar dan tombol Aksi ikut terpotong. */
        overflow-wrap: anywhere;
    }
    .table-wrapper.stacked tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px; top: 8px;
        width: 82px;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        line-height: 1.2;
        color: var(--text-muted);
    }
    /* Baris pertama (nama dokumen) tampil sebagai judul kartu */
    .table-wrapper.stacked tbody td:first-child {
        padding: 8px 12px 6px;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 4px;
    }
    .table-wrapper.stacked tbody td:first-child::before { content: none; }
    .table-wrapper.stacked tbody td:last-child .btn { width: 100%; justify-content: center; }
}

/* Desktop */
@media (min-width: 1024px) {
    .sidebar .sidebar-header .sidebar-toggle { display: flex; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════
   Kalender Sekolah
   ══════════════════════════════════════════════ */

.cal-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-title {
    font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
    min-width: 180px; text-align: center;
}

.cal-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-bottom: 16px; font-size: 0.8rem; color: var(--text-secondary);
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: var(--radius-full); display: inline-block; }

.cal-grid-wrapper { overflow-x: auto; }
.cal-grid {
    display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr));
    gap: 1px; background: var(--border-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; min-width: 680px;
}
.cal-head {
    background: var(--bg-tertiary); padding: 10px 8px; text-align: center;
    font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);
    font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-cell {
    background: var(--bg-card); min-height: 104px; padding: 6px;
    display: flex; flex-direction: column; gap: 4px;
}
.cal-cell-muted { background: var(--bg-tertiary); }
.cal-cell-today { background: rgba(21, 101, 192, 0.06); box-shadow: inset 0 0 0 2px var(--accent-primary); }
.cal-daynum { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.cal-cell-today .cal-daynum { color: var(--accent-primary); font-weight: 800; }
.cal-events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip {
    border: none; cursor: pointer; color: #fff; text-align: left;
    font-family: var(--font-body); font-size: 0.7rem; line-height: 1.3;
    padding: 3px 6px; border-radius: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: filter var(--transition);
}
.cal-chip:hover { filter: brightness(1.12); }

.cal-agenda { display: flex; flex-direction: column; gap: 8px; }
.cal-agenda-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 12px 16px;
    transition: box-shadow var(--transition);
}
.cal-agenda-item:hover { box-shadow: var(--shadow-md); }
.cal-bar { width: 4px; align-self: stretch; border-radius: var(--radius-full); flex-shrink: 0; }
.cal-agenda-body { flex: 1; min-width: 0; }
.cal-agenda-title { font-weight: 600; font-family: var(--font-heading); }
.cal-agenda-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 767px) {
    .cal-title { min-width: 130px; font-size: 1.05rem; }
    .cal-cell { min-height: 84px; }
}

/* ══════════════════════════════════════════════
   Pesan Internal
   ══════════════════════════════════════════════ */

.msg-layout {
    display: grid; grid-template-columns: 320px 1fr; gap: 16px;
    height: calc(100vh - var(--topbar-height) - 72px); min-height: 460px;
}

.msg-list {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden;
}
.msg-list-header {
    padding: 12px; border-bottom: 1px solid var(--border-color);
    display: flex; gap: 8px; align-items: center;
}
.msg-list-header .btn-primary { flex: 1; }
.msg-threads { overflow-y: auto; flex: 1; }

.msg-thread-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px; border-bottom: 1px solid var(--border-color);
    text-decoration: none; color: inherit; transition: background var(--transition);
}
.msg-thread-item:hover { background: var(--bg-glass); }
.msg-thread-item.active { background: var(--bg-glass-hover); box-shadow: inset 3px 0 0 var(--accent-primary); }
.msg-thread-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); color: var(--accent-primary);
}
.msg-thread-icon i { width: 18px; height: 18px; }
.msg-thread-icon.broadcast { background: rgba(249, 168, 37, 0.15); color: #B45309; }
.msg-thread-icon.group { background: rgba(0, 137, 123, 0.15); color: var(--accent-secondary); }
.msg-thread-body { flex: 1; min-width: 0; }
.msg-thread-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-thread-name {
    font-weight: 600; font-size: 0.88rem; font-family: var(--font-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-thread-time { font-size: 0.68rem; color: var(--text-muted); flex-shrink: 0; }
.msg-thread-preview {
    font-size: 0.78rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.msg-pane {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden;
}
.msg-pane-header {
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
}
.msg-pane-title { font-size: 0.98rem; font-family: var(--font-heading); font-weight: 700; }
.msg-pane-sub { font-size: 0.74rem; color: var(--text-muted); }
.msg-back { display: none; }

.msg-body {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-primary);
}
.msg-bubble-row { display: flex; }
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble {
    max-width: 76%; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 8px 12px;
    display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-sm);
}
.msg-bubble-row.mine .msg-bubble {
    background: var(--accent-primary); border-color: var(--accent-primary); color: #fff;
}
.msg-sender {
    font-size: 0.72rem; font-weight: 700;
    color: var(--accent-primary); font-family: var(--font-heading);
}
.msg-text { font-size: 0.88rem; line-height: 1.5; word-break: break-word; }
.msg-time { font-size: 0.66rem; color: var(--text-muted); align-self: flex-end; }
.msg-bubble-row.mine .msg-time { color: rgba(255, 255, 255, 0.75); }

.msg-composer {
    display: flex; gap: 8px; padding: 12px;
    border-top: 1px solid var(--border-color); align-items: flex-end;
}
.msg-composer textarea { resize: none; flex: 1; max-height: 120px; }
.msg-composer .btn { flex-shrink: 0; }

.msg-readonly {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px; border-top: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 0.82rem;
}
.msg-readonly i { width: 16px; height: 16px; }

/* Layar kecil: tampilkan satu panel saja */
@media (max-width: 900px) {
    .msg-layout { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-height) - var(--bottomnav-height) - 32px); }
    .msg-layout .msg-pane { display: none; }
    .msg-layout.has-active .msg-list { display: none; }
    .msg-layout.has-active .msg-pane { display: flex; }
    .msg-back { display: inline-flex; }
}

/* Badge pesan di bottom navigation (butuh parent ber-posisi) */
.bottom-nav-item { position: relative; }
.bottom-nav-item .notif-badge {
    top: 0; right: 50%; transform: translateX(28px);
    min-width: 16px; height: 16px; font-size: 0.6rem;
}

/* ══════════════════════════════════════════════
   SK & Surat Terbitan
   ══════════════════════════════════════════════ */

.sk-list { display: flex; flex-direction: column; gap: 12px; }

.sk-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px 18px;
    transition: box-shadow var(--transition);
}
.sk-card:hover { box-shadow: var(--shadow-md); }

.sk-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-glass); color: var(--accent-primary);
}
.sk-icon i { width: 20px; height: 20px; }
.sk-icon.surat_tugas { background: rgba(0,137,123,0.12); color: var(--accent-secondary); }
.sk-icon.edaran { background: rgba(249,168,37,0.15); color: #B45309; }

.sk-body { flex: 1; min-width: 0; }
.sk-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sk-title {
    font-family: var(--font-heading); font-size: 1rem;
    font-weight: 700; line-height: 1.35; word-break: break-word;
}
.sk-number { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.sk-desc { font-size: 0.84rem; color: var(--text-secondary); margin-top: 6px; }

.sk-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
    font-size: 0.76rem; color: var(--text-muted);
}
.sk-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sk-meta i { width: 13px; height: 13px; }

.sk-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

@media (max-width: 640px) {
    .sk-card { flex-wrap: wrap; }
    .sk-actions { flex-direction: row; width: 100%; }
    .sk-actions .btn { flex: 1; justify-content: center; }
}

/* Pemilih penerima (SK panitia) */
.recipient-box {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 4px; background: var(--bg-primary);
}
.recipient-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    font-size: 0.84rem; cursor: pointer;
    transition: background var(--transition);
}
.recipient-item:hover { background: var(--bg-glass); }
.recipient-item input { cursor: pointer; }

/* ══════════════════════════════════════════════
   Administrasi MGMP
   ══════════════════════════════════════════════ */

.mgmp-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px;
}
.mgmp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.mgmp-name {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
}
.mgmp-name i { width: 18px; height: 18px; color: var(--accent-primary); }

/* ══════════════════════════════════════════════
   Dashboard — pintasan, tanggal penting, status
   ══════════════════════════════════════════════ */

.shortcut-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.shortcut-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; text-decoration: none;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.shortcut-card:hover {
    box-shadow: var(--shadow-md); border-color: var(--accent-primary);
}
.shortcut-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-glass); color: var(--accent-primary);
}
.shortcut-icon i { width: 17px; height: 17px; }
.shortcut-text {
    font-size: 0.84rem; font-weight: 600; font-family: var(--font-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tanggal penting */
.agenda-list { display: flex; flex-direction: column; gap: 10px; }
.agenda-row { display: flex; align-items: center; gap: 12px; }
.agenda-date {
    width: 46px; flex-shrink: 0; text-align: center;
    padding: 5px 0; border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-primary);
}
.agenda-day {
    display: block; font-family: var(--font-heading);
    font-size: 1.05rem; font-weight: 800; line-height: 1.1;
}
.agenda-mon {
    display: block; font-size: 0.62rem; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
}
.agenda-body { flex: 1; min-width: 0; }
.agenda-title {
    display: block; font-size: 0.86rem; font-weight: 600;
    font-family: var(--font-heading); word-break: break-word;
}
.agenda-meta {
    display: block; font-size: 0.74rem;
    color: var(--text-muted); margin-top: 2px;
}

/* Status administrasi */
.admin-progress { display: flex; align-items: center; gap: 10px; }
.admin-progress .progress-bar { flex: 1; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.admin-chip {
    font-size: 0.74rem; padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary); color: var(--text-secondary);
}
.admin-chip.ok   { background: #DCFCE7; color: #16A34A; }
.admin-chip.wait { background: #DBEAFE; color: #1D4ED8; }
.admin-chip.bad  { background: #FEE2E2; color: #DC2626; }

@media (max-width: 640px) {
    .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   Daftar hadir — penanda versi data
   ══════════════════════════════════════════════ */

.roster-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 14px 18px;
}
.roster-title {
    font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800;
}
.roster-version {
    text-align: center; flex-shrink: 0;
    border: 1.5px solid var(--accent-primary); border-radius: var(--radius-sm);
    padding: 6px 12px; background: var(--bg-glass);
}
.roster-version-code {
    display: block; font-family: "Courier New", monospace;
    font-size: 1.05rem; font-weight: 700; letter-spacing: 2px;
    color: var(--accent-primary);
}
.roster-version-time {
    display: block; font-size: 0.66rem; color: var(--text-muted);
}

/* Pemilih jenjang mengajar */
.jenjang-pilih { display: flex; gap: 8px; flex-wrap: wrap; }
.jenjang-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--radius-full);
    border: 1px solid var(--border-color); background: var(--bg-card);
    font-size: 0.82rem; cursor: pointer; user-select: none;
    transition: border-color var(--transition), background var(--transition);
}
.jenjang-chip:hover { border-color: var(--accent-primary); }
.jenjang-chip:has(input:checked) {
    border-color: var(--accent-primary); background: var(--bg-glass);
    font-weight: 600; color: var(--accent-primary);
}

/* Sel matriks yang memuat beberapa jenjang */
.slot-status {
    display: inline-flex; align-items: center; gap: 2px;
    margin: 0 3px; font-size: 1.05rem; line-height: 1;
}
.slot-level {
    font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
    background: var(--bg-tertiary); border-radius: 3px; padding: 1px 3px;
}