/* =========================================================================
   1. DEĞİŞKENLER VE TEMA SİSTEMİ (Tüm renkler tek merkezde toplandı)
   ========================================================================= */
:root {
    /* Temel Renkler */
    --primary: #4f46e5;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    
    /* Yüzey ve Yazı Renkleri (Açık Tema) */
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --border: #e2e8f0;
    --hover: #f1f5f9;
    --input-bg: #ffffff;
    --shadow: 0 10px 25px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
    --bg: #0f172a;
    --card: #111827;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #334155;
    --hover: #1e293b;
    --input-bg: #0b1220;
    --shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* =========================================================================
   2. GENEL SIFIRLAMA VE TEMEL STÄ°LLER
   ========================================================================= */
* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.hidden { display: none !important; }
.main-wrapper { width: 95%; max-width: 1100px; margin: 0 auto; padding: 20px 0; }

/* =========================================================================
   3. FORM ELEMANLARI VE BUTONLAR
   ========================================================================= */
input, select, textarea, .input-field, .doc-input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}

textarea { height: 150px; resize: none; }

.btn-main, .btn-success, .btn-warning, .btn-danger, .btn-pdf, .theme-toggle-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-main { background: var(--primary); width: 100%; }
.btn-success { background: var(--success); }
.btn-warning { background: var(--warning); }
.btn-danger { background: var(--danger); }
.btn-pdf { background: #8b5cf6; }

.theme-toggle-btn {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Tema butonu hedef modu anlatsin:
   acik temada buton "Koyu Mod" oldugu icin siyah,
   koyu temada buton "Acik Mod" oldugu icin beyaz. */
[data-theme="light"] .theme-toggle-btn {
    background: #000000;
    color: #f8fafc;
    border-color: #1f2937;
}

[data-theme="dark"] .theme-toggle-btn {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

.btn-main:hover, .btn-success:hover, .theme-toggle-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* =========================================================================
   4. PANEL VE KART YAPILARI
   ========================================================================= */
.user-bar, .top-bar {
    background: var(--card);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

[data-theme="dark"] .top-bar { background: #020617; }

.section-box, .auth-card, .section-card {
    background: var(--card);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.auth-card { max-width: 400px; margin: 80px auto; }

.list-grid, .folder-grid, .diaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.diary-card, .student-card, .folder-card {
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.diary-card:hover, .student-card:hover, .folder-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* =========================================================================
   5. TAKVÄ°M SÄ°STEMÄ°
   ========================================================================= */
.calendar-container {
    background:
        radial-gradient(1200px 280px at 10% -25%, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 60%),
        var(--card);
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, var(--hover)) 0%, var(--hover) 100%);
    padding: 13px 0;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: color-mix(in srgb, var(--primary) 10%, var(--border));
    gap: 1px;
}

.day {
    min-height: 102px;
    background: var(--card);
    padding: 10px;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    position: relative;
}

.day span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-weight: 700;
    color: var(--text);
}

.day .day-reminder-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
    background: color-mix(in srgb, #fef3c7 88%, #ffffff);
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 6px;
    cursor: pointer;
}

.day.has-reminder {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 24%, transparent) 0%,
            color-mix(in srgb, #f59e0b 12%, transparent) 22%,
            transparent 44%),
        var(--card);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #f59e0b 42%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 78%, transparent);
}

.day.has-reminder::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 24%, transparent);
    pointer-events: none;
}

.day.has-reminder .day-reminder-btn {
    background: #f59e0b;
    color: #111827;
    border-color: #f59e0b;
    box-shadow:
        0 2px 10px color-mix(in srgb, #f59e0b 42%, transparent),
        0 0 0 1px color-mix(in srgb, #111827 12%, transparent);
}

/* Not + hatirlatici ayni gun:
   yesil (not) daima baskin kalsin, turuncu sadece capraz vurgu olsun. */
.day.has-content.has-reminder {
    background:
        linear-gradient(180deg, color-mix(in srgb, #22c55e 26%, var(--card)) 0%, var(--card) 52%),
        radial-gradient(180px 120px at 100% 100%, color-mix(in srgb, #22c55e 20%, transparent) 0%, transparent 62%),
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 26%, transparent) 0%,
            color-mix(in srgb, #f59e0b 12%, transparent) 20%,
            transparent 54%),
        var(--card);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #22c55e 36%, transparent),
        inset 0 0 0 2px color-mix(in srgb, #f59e0b 22%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 80%, transparent);
}

.day.has-content.has-reminder .day-reminder-btn {
    background: #f59e0b;
    color: #111827;
    border-color: #f59e0b;
    box-shadow:
        0 2px 12px color-mix(in srgb, #f59e0b 52%, transparent),
        0 0 0 2px color-mix(in srgb, #fff7ed 60%, transparent);
}

.day:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--hover));
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.day.weekend span {
    color: color-mix(in srgb, #f97316 60%, var(--text));
}

.day.absent-day {
    background:
        linear-gradient(180deg, color-mix(in srgb, #ef4444 26%, var(--card)) 0%, var(--card) 58%),
        radial-gradient(200px 130px at 100% 100%, color-mix(in srgb, #ef4444 16%, transparent) 0%, transparent 66%),
        var(--card);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ef4444 58%, transparent),
        inset 0 -2px 0 color-mix(in srgb, #ef4444 34%, transparent);
}

.day.absent-day span {
    color: color-mix(in srgb, #ef4444 70%, #7f1d1d);
}

.day.absent-day.has-reminder {
    background:
        linear-gradient(180deg, color-mix(in srgb, #ef4444 24%, var(--card)) 0%, var(--card) 58%),
        radial-gradient(200px 130px at 100% 100%, color-mix(in srgb, #ef4444 16%, transparent) 0%, transparent 66%),
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 26%, transparent) 0%,
            color-mix(in srgb, #f59e0b 12%, transparent) 22%,
            transparent 50%),
        var(--card);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ef4444 62%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 70%, transparent);
}

.day.today span {
    background: color-mix(in srgb, var(--primary) 90%, #ffffff);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.has-content {
    background:
        linear-gradient(180deg, color-mix(in srgb, #22c55e 26%, var(--card)) 0%, var(--card) 52%),
        radial-gradient(180px 120px at 100% 100%, color-mix(in srgb, #22c55e 20%, transparent) 0%, transparent 62%),
        var(--card);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c55e 36%, transparent);
}

.has-content::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 18%, transparent);
}

[data-theme="dark"] .calendar-container {
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.45);
}

[data-theme="dark"] .day:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

[data-theme="dark"] .day.has-reminder {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 28%, transparent) 0%,
            color-mix(in srgb, #f59e0b 16%, transparent) 24%,
            transparent 46%),
        #1f2937;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #f59e0b 44%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 82%, transparent);
}

[data-theme="dark"] .day.has-content.has-reminder {
    background:
        linear-gradient(180deg, color-mix(in srgb, #22c55e 28%, #052e1a) 0%, #052e1a 54%),
        radial-gradient(220px 150px at 100% 100%, color-mix(in srgb, #22c55e 18%, transparent) 0%, transparent 64%),
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 32%, transparent) 0%,
            color-mix(in srgb, #f59e0b 14%, transparent) 22%,
            transparent 56%),
        #052e1a;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #22c55e 40%, transparent),
        inset 0 0 0 2px color-mix(in srgb, #f59e0b 24%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 80%, transparent);
}

[data-theme="dark"] .day.has-reminder::before {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.28);
}

[data-theme="dark"] .day.absent-day {
    background:
        linear-gradient(180deg, color-mix(in srgb, #ef4444 28%, #3b0a0a) 0%, #1f2937 60%),
        radial-gradient(240px 160px at 100% 100%, color-mix(in srgb, #ef4444 20%, transparent) 0%, transparent 68%),
        #1f2937;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ef4444 56%, transparent),
        inset 0 -2px 0 color-mix(in srgb, #ef4444 30%, transparent);
}

[data-theme="dark"] .day.absent-day span {
    color: color-mix(in srgb, #ef4444 82%, #fecaca);
}

[data-theme="dark"] .day.absent-day.has-reminder {
    background:
        linear-gradient(180deg, color-mix(in srgb, #ef4444 28%, #3b0a0a) 0%, #1f2937 60%),
        radial-gradient(240px 160px at 100% 100%, color-mix(in srgb, #ef4444 20%, transparent) 0%, transparent 68%),
        linear-gradient(135deg,
            color-mix(in srgb, #f59e0b 30%, transparent) 0%,
            color-mix(in srgb, #f59e0b 14%, transparent) 24%,
            transparent 52%),
        #1f2937;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #ef4444 62%, transparent),
        inset 3px 0 0 color-mix(in srgb, #f59e0b 76%, transparent);
}

[data-theme="dark"] .has-content {
    background:
        linear-gradient(180deg, color-mix(in srgb, #22c55e 26%, #052e1a) 0%, #052e1a 54%),
        radial-gradient(220px 150px at 100% 100%, color-mix(in srgb, #22c55e 18%, transparent) 0%, transparent 64%),
        #052e1a;
}

[data-theme="dark"] .has-content::after {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
}

/* =========================================================================
   6. MODAL VE BÄ°LDÄ°RÄ°MLER
   ========================================================================= */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--card);
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
}

.reminder-alert-content {
    max-width: 560px;
    max-height: min(88vh, 700px);
    overflow: auto;
}

#reminder-alert-list {
    margin: 10px 0 14px 0;
}

.reminder-alert-item {
    border: 1px solid var(--border);
    background: var(--hover);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.reminder-alert-title {
    font-weight: 700;
    color: var(--text);
}

.reminder-alert-note {
    margin-top: 4px;
    color: var(--muted);
    white-space: pre-line;
}

.reminder-alert-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--hover);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.reminder-alert-close:hover {
    transform: scale(1.04);
    border-color: var(--primary);
}

#log-modal .log-modal-content {
    max-height: min(92vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#log-modal #log-image-preview {
    max-height: 38vh;
    object-fit: contain;
}

#log-modal #log-input {
    min-height: 140px;
    max-height: 30vh;
    resize: vertical;
}

#log-modal .log-modal-actions {
    position: static;
    background: var(--card);
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    #log-modal .log-modal-content {
        width: 96%;
        padding: 16px;
        max-height: 94vh;
    }
}

.shift-proof-box {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--hover);
}

.shift-proof-badge {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-weight: 700;
}

.shift-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.shift-proof-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
}

.shift-photo-preview {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 8px;
}

.zoomable-image {
    cursor: zoom-in;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(2, 6, 23, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.image-lightbox.hidden {
    display: none;
}

.image-lightbox-img {
    max-width: min(96vw, 1280px);
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}

.image-lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(15, 23, 42, 0.74);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

body.lightbox-open {
    overflow: hidden;
}

.shift-proof-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.shift-location-text {
    margin-top: 8px;
    font-size: 0.85rem;
}

.shift-cooldown-text {
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.shift-meta-warning {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #b91c1c;
    font-weight: 700;
}

@media (max-width: 640px) {
    .shift-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* Bildirim Paneli */
.noti-container { position: relative; cursor: pointer; }
.noti-dropdown {
    position: absolute; top: 40px; right: 0; width: 300px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
    padding: 15px; display: none; z-index: 1000;
}
.noti-dropdown.active { display: block; }

/* =========================================================================
   7. RESMİ EVRAK VE ÖZEL BÖLÜMLER
   ========================================================================= */
.official-doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--hover);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.btn-link-doc {
    background: var(--primary);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
}

.btn-delete-doc {
    background: var(--danger);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
}

#monthly-suggestion-container {
    background: var(--hover);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

/* Kaydırma Çubuğu */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; }

/* =========================================================================
   8. DESIGN REFRESH (PANEL + AUTH + GUNLUK)
   ========================================================================= */
:root {
    --bg-grad-1: #f6f8fc;
    --bg-grad-2: #eef3ff;
    --ring: rgba(30, 64, 175, 0.15);
}

[data-theme="dark"] {
    --bg-grad-1: #070d1b;
    --bg-grad-2: #101a31;
    --ring: rgba(96, 165, 250, 0.25);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 90% -10%, var(--bg-grad-2), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, var(--bg-grad-2), transparent 50%),
        var(--bg-grad-1);
}

.main-container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 26px 20px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

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

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

.danger-text {
    color: #dc2626;
    font-weight: 600;
}

.lock-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--hover) 82%, transparent);
    padding: 14px;
}

#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.spinner {
    width: 52px;
    height: 52px;
    border: 5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: spin 0.9s linear infinite;
}

.btn-back,
.btn-link {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 13px;
    background: var(--card);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-back:hover,
.btn-link:hover {
    background: var(--hover);
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

input:focus, select:focus, textarea:focus, .input-field:focus, .doc-input:focus {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: 0 0 0 4px var(--ring);
}

.top-bar, .user-bar {
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .top-bar,
[data-theme="dark"] .user-bar {
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
}

.theme-toggle-btn {
    border-radius: 999px;
    padding-inline: 14px;
    min-height: 36px;
}

.section-box, .section-card, .auth-card, .calendar-container {
    border-radius: 16px;
}

.folder-card, .student-card, .diary-card {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.folder-card:hover, .student-card:hover, .diary-card:hover {
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.18);
}

.doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.panel-setting-box {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--hover);
}

.weekday-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.weekday-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.panel-page .top-bar h2 {
    margin: 0;
    font-size: 1.18rem;
}

.panel-page #user-email {
    color: var(--muted) !important;
    font-weight: 600;
}

.panel-page .section-box:first-of-type {
    background: linear-gradient(180deg, color-mix(in srgb, #fb923c 12%, var(--card)) 0%, var(--card) 100%) !important;
    border-color: color-mix(in srgb, #fb923c 32%, var(--border)) !important;
}

.panel-page .section-box:first-of-type .section-header {
    border-bottom-color: color-mix(in srgb, #fb923c 25%, var(--border)) !important;
}

.panel-page .personal-section {
    background: linear-gradient(180deg, color-mix(in srgb, #fb923c 12%, var(--card)) 0%, var(--card) 100%);
    border-color: color-mix(in srgb, #fb923c 32%, var(--border));
}

.panel-page .personal-section .section-header {
    border-bottom-color: color-mix(in srgb, #fb923c 25%, var(--border)) !important;
}

.panel-page #class-insights {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.panel-page #class-summary-card,
.panel-page #class-suspicious-card,
.panel-page #class-plan-card {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: var(--hover) !important;
}

.noti-bell {
    font-size: 1.05rem;
}

.noti-dot {
    position: absolute;
    right: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--card);
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 22px;
}

.auth-page .auth-card {
    width: min(450px, 96vw);
    margin: 0;
}

.auth-page .auth-card h2 {
    margin-top: 4px;
}

#toast-container {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
}

.toast-stack {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

.toast {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.28);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(8px);
    color: var(--text);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.toast-show {
    opacity: 1;
    transform: translateY(0);
}

.toast-hide {
    opacity: 0;
    transform: translateY(8px);
}

.toast-message {
    flex: 1;
    white-space: pre-line;
    line-height: 1.35;
    font-size: 0.92rem;
    font-weight: 600;
}

.toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 900;
    border: 1px solid transparent;
}

.toast-close {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--hover);
    color: var(--text);
    width: 24px;
    height: 24px;
    line-height: 20px;
    cursor: pointer;
    flex: 0 0 24px;
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation-name: toastShrink;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes toastShrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast-success {
    border-left: 4px solid #10b981;
    background: color-mix(in srgb, #10b981 12%, var(--card));
}
.toast-success .toast-icon {
    background: color-mix(in srgb, #10b981 18%, transparent);
    color: #065f46;
    border-color: color-mix(in srgb, #10b981 35%, transparent);
}
.toast-success .toast-progress {
    background: #10b981;
}

.toast-warn {
    border-left: 4px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, var(--card));
}
.toast-warn .toast-icon {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #92400e;
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}
.toast-warn .toast-progress {
    background: #f59e0b;
}

.toast-error {
    border-left: 4px solid #ef4444;
    background: color-mix(in srgb, #ef4444 12%, var(--card));
}
.toast-error .toast-icon {
    background: color-mix(in srgb, #ef4444 18%, transparent);
    color: #991b1b;
    border-color: color-mix(in srgb, #ef4444 35%, transparent);
}
.toast-error .toast-progress {
    background: #ef4444;
}

.toast-info {
    border-left: 4px solid #3b82f6;
    background: color-mix(in srgb, #3b82f6 12%, var(--card));
}
.toast-info .toast-icon {
    background: color-mix(in srgb, #3b82f6 18%, transparent);
    color: #1e40af;
    border-color: color-mix(in srgb, #3b82f6 35%, transparent);
}
.toast-info .toast-progress {
    background: #3b82f6;
}

.live-chat-widget {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: min(360px, calc(100vw - 24px));
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.24);
    z-index: 2100;
    padding: 10px;
}

.live-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.live-chat-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
}

.live-chat-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.live-chat-messages {
    max-height: 220px;
    min-height: 90px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px 8px;
}

.chat-row {
    display: flex;
}

.chat-row.mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 82%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 0.88rem;
    line-height: 1.35;
    background: var(--hover);
    color: var(--text);
}

.chat-row.mine .chat-bubble {
    background: color-mix(in srgb, #3b82f6 16%, var(--card));
    border-color: color-mix(in srgb, #3b82f6 30%, var(--border));
}

.chat-meta {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 4px;
}

.live-chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#live-chat-input {
    margin: 0;
}

@media (max-width: 640px) {
    .live-chat-widget {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 8px;
    }
}

.panel-chat-widget {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: min(430px, calc(100vw - 24px));
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.24);
    z-index: 2300;
    padding: 10px;
}

@media (max-width: 640px) {
    .panel-chat-widget {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 8px;
    }
}

@media (max-width: 900px) {
    .panel-page #class-insights {
        grid-template-columns: 1fr !important;
    }

    .user-bar, .top-bar {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .main-container {
        padding: 14px 10px 24px;
        gap: 14px;
    }

    .section-box, .section-card, .auth-card {
        padding: 14px;
        margin-bottom: 14px;
    }

    .list-grid, .folder-grid, .diaries-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 900px) {
    .diary-page .user-bar {
        align-items: flex-start;
    }

    .diary-page .user-bar > div {
        width: 100%;
    }

    .diary-page .user-bar > div:last-child {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .diary-page .user-bar .btn-back,
    .diary-page .user-bar .btn-success,
    .diary-page .user-bar .theme-toggle-btn,
    .diary-page .user-bar #settings-btn,
    .diary-page .user-bar #reminder-btn,
    .diary-page .user-bar #deleted-photos-btn,
    .diary-page .user-bar #student-send-btn,
    .diary-page .user-bar #instructor-approve-btn,
    .diary-page .user-bar #instructor-reject-btn {
        width: auto;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .main-wrapper {
        width: 100%;
        padding: 10px 8px 20px;
    }

    .calendar-header {
        padding: 10px 12px;
    }

    .weekdays {
        padding: 10px 0;
        font-size: 0.82rem;
    }

    .day {
        min-height: 76px;
        padding: 8px;
    }

    .day span {
        min-width: 24px;
        height: 24px;
        font-size: 0.86rem;
    }

    .modal-content {
        width: calc(100vw - 12px);
        max-height: 92vh;
        overflow-y: auto;
        padding: 16px;
    }

    #official-doc-upload-box {
        grid-template-columns: 1fr !important;
    }

    .official-doc-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .official-doc-item > div:last-child {
        width: 100%;
    }

    .official-doc-item .btn-link-doc,
    .official-doc-item .btn-delete-doc {
        flex: 1;
        text-align: center;
    }

    #toast-container {
        right: 8px;
        left: 8px;
        bottom: 8px;
    }

    #class-settings-modal {
        padding: 8px;
    }

    #class-settings-modal .modal-content {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 14px;
    }
}

/* =========================================================================
   9. FINAL UI POLISH (PANEL + GUNLUK)
   ========================================================================= */
.modal {
    backdrop-filter: blur(3px);
}

.modal-content {
    border: 1px solid var(--border);
    box-shadow: 0 22px 52px rgba(2, 6, 23, 0.28);
    max-height: min(92vh, 860px);
    overflow-y: auto;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.btn-link {
    background: color-mix(in srgb, var(--hover) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    color: var(--text);
}

.btn-link:hover {
    background: color-mix(in srgb, var(--hover) 72%, transparent);
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

#class-settings-modal {
    align-items: center;
    justify-content: center;
    padding: 12px;
}

#class-settings-modal .modal-content {
    width: min(860px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
}

.panel-settings-modal {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.panel-setting-box {
    background: color-mix(in srgb, var(--hover) 92%, transparent);
}

.panel-setting-box > label {
    font-weight: 700;
}

.panel-page .section-header button {
    min-height: 38px;
}

.diary-page .user-bar #settings-btn,
.diary-page .user-bar #student-send-btn,
.diary-page .user-bar #instructor-approve-btn,
.diary-page .user-bar #instructor-reject-btn {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 13px;
    font-weight: 700;
    background: var(--card);
    color: var(--text);
    transition: 0.2s ease;
}

.diary-page .user-bar #student-send-btn {
    background: color-mix(in srgb, var(--primary) 14%, var(--card));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.diary-page .user-bar #instructor-approve-btn {
    background: color-mix(in srgb, #10b981 16%, var(--card));
    border-color: color-mix(in srgb, #10b981 42%, var(--border));
}

.diary-page .user-bar #instructor-reject-btn {
    background: color-mix(in srgb, #ef4444 12%, var(--card));
    border-color: color-mix(in srgb, #ef4444 38%, var(--border));
}

.diary-page .user-bar #settings-btn:hover,
.diary-page .user-bar #student-send-btn:hover,
.diary-page .user-bar #instructor-approve-btn:hover,
.diary-page .user-bar #instructor-reject-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.top-bar {
    gap: 10px;
    flex-wrap: wrap;
}

.modal-content .btn-main,
.modal-content .btn-success,
.modal-content .btn-warning,
.modal-content .btn-danger,
.modal-content .btn-link,
.modal-content .btn-pdf {
    min-height: 40px;
    font-size: 0.96rem;
}

@media (max-width: 640px) {
    #class-settings-modal {
        align-items: flex-start;
    }
}

/* =========================================================================
   10. MOBILE BROWSER HARDENING
   ========================================================================= */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img, video, canvas {
    max-width: 100%;
}

@media (max-width: 760px) {
    .user-bar,
    .top-bar {
        position: sticky;
        top: 0;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
        gap: 10px;
        align-items: stretch;
    }

    .user-bar > div,
    .top-bar > div {
        min-width: 0;
    }

    .user-bar > div:first-child,
    .top-bar > h2 {
        width: 100%;
    }

    .user-bar > div:first-child {
        gap: 8px !important;
    }

    #diary-title-label,
    .top-bar h2,
    #user-email,
    #view-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-bar > div:last-child,
    .user-bar > div:last-child {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        align-items: stretch !important;
    }

    .top-bar > div:last-child > *,
    .user-bar > div:last-child > * {
        width: 100% !important;
        min-width: 0;
    }

    .noti-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card);
    }

    .noti-dropdown {
        position: fixed;
        top: auto;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: min(55dvh, 420px);
        overflow: auto;
    }

    .main-wrapper,
    .main-container {
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .section-header > div {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px !important;
    }

    .section-header button,
    .section-header .btn-main,
    .section-header .btn-success,
    .section-header .btn-warning,
    .section-header .btn-danger,
    .section-header .btn-pdf {
        width: 100%;
    }

    #students-view > div:first-child {
        align-items: stretch !important;
        flex-direction: column;
        gap: 12px;
    }

    #students-view > div:first-child > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    #class-insights {
        grid-template-columns: 1fr !important;
    }

    .calendar-container {
        border-radius: 12px;
        margin-inline: 0;
    }

    .calendar-header {
        gap: 10px;
    }

    .calendar-header h2 {
        min-width: 0;
        font-size: clamp(1.1rem, 6vw, 1.55rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .weekdays {
        font-size: 0.74rem;
        padding: 8px 0;
    }

    .calendar-grid {
        gap: 1px;
    }

    .day {
        min-height: clamp(54px, 15vw, 72px);
        padding: 6px;
        overflow: hidden;
    }

    .day span {
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        font-size: 0.78rem;
    }

    .day .day-reminder-btn {
        right: 4px;
        top: 4px;
        min-width: 21px;
        height: 21px;
        padding: 0 4px;
        font-size: 0.62rem;
        max-width: calc(100% - 8px);
        overflow: hidden;
    }

    .day.has-reminder::before {
        left: 6px;
        top: auto;
        bottom: 7px;
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 24%, transparent);
    }

    .has-content::after {
        right: 7px;
        bottom: 7px;
        width: 6px;
        height: 6px;
    }

    .modal {
        align-items: flex-start;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 8px calc(10px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    .modal-content,
    #class-settings-modal .modal-content,
    #log-modal .log-modal-content {
        width: min(100%, 560px);
        max-width: none;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        padding: 14px;
        border-radius: 12px;
    }

    #log-modal #log-input {
        min-height: 120px;
        max-height: 28dvh;
    }

    #upload-section,
    #settings-student-work-box > div,
    .live-chat-input-row,
    .panel-chat-widget > div:last-child,
    #bulk-modal .panel-setting-box > div,
    #class-settings-modal .panel-setting-box > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #settings-student-work-box button,
    #settings-student-work-box input,
    .live-chat-input-row button,
    .panel-chat-widget button,
    .panel-chat-widget input {
        width: 100% !important;
    }

    #official-doc-upload-box,
    #bulk-modal .panel-setting-box > div[style*="grid-template-columns"],
    #class-settings-modal .panel-setting-box > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .doc-item,
    .official-doc-item,
    .student-card,
    .folder-card,
    .diary-card {
        min-width: 0;
    }

    .live-chat-widget,
    .panel-chat-widget {
        right: 8px;
        left: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: min(72dvh, 560px);
        overflow: auto;
    }

    .live-chat-messages,
    #panel-chat-feed {
        max-height: 42dvh !important;
    }

    #toast-container {
        right: 8px;
        left: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        max-width: none;
    }
}

@media (max-width: 380px) {
    .top-bar > div:last-child,
    .user-bar > div:last-child {
        grid-template-columns: 1fr;
    }

    .day {
        min-height: 50px;
        padding: 5px;
    }

    .day .day-reminder-btn {
        font-size: 0;
        width: 20px;
        min-width: 20px;
    }

    .day .day-reminder-btn::after {
        content: "+";
        font-size: 0.72rem;
    }
}


/* Version notes card */
.release-notes-card {
    position: sticky;
    top: 92px;
    float: left;
    width: min(260px, calc(100vw - 32px));
    margin: 0 18px 18px 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--border));
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, #f59e0b 20%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, #fff7ed 70%, var(--card)), var(--card));
    box-shadow: var(--shadow);
    color: var(--text);
    z-index: 1;
}

.release-notes-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, #f59e0b 18%, var(--card));
    color: #b45309;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.release-notes-head {
    margin-top: 10px;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text);
}

.release-notes-card ul {
    margin: 12px 0 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.release-notes-card li + li {
    margin-top: 6px;
}

.release-notes-next {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 650;
}

[data-theme="dark"] .release-notes-card {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, #f59e0b 16%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, #1f2937 70%, var(--card)), var(--card));
}

@media (max-width: 1180px) {
    .release-notes-card {
        position: relative;
        top: auto;
        float: none;
        width: auto;
        margin: 0 0 16px 0;
    }
}


.release-version-block {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.release-version-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.release-version-block .release-notes-head {
    font-size: 1rem;
}


.day-weekly-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(79,70,229,.35);
  background: linear-gradient(135deg, #eef2ff, #c7d2fe);
  color: #312e81;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(79,70,229,.18);
}
.day-weekly-btn.has-weekly {
  background: linear-gradient(135deg, #fef3c7, #f59e0b);
  color: #111827;
}
[data-theme="dark"] .day-weekly-btn {
  background: linear-gradient(135deg, #1e1b4b, #4f46e5);
  color: #fff;
}
[data-theme="dark"] .day-weekly-btn.has-weekly {
  background: linear-gradient(135deg, #78350f, #f59e0b);
  color: #fff7ed;
}


.split-action {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.split-action .split-arrow {
  min-width: 38px;
  padding-left: 10px;
  padding-right: 10px;
}
.action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  padding: 6px;
}
.action-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.action-menu button:hover {
  background: var(--hover);
}

.profile-modal-content {
    max-width: 520px;
    border: 1px solid color-mix(in srgb, #0f766e 30%, var(--border));
    background: linear-gradient(180deg, color-mix(in srgb, #14b8a6 8%, var(--card)) 0%, var(--card) 100%);
}