/* =========================================================
   SIMKIN - Stylesheet Kustom
   Font utama: Inter (body & UI), Source Serif 4 (judul/heading)
   Tema: minimalist, warm neutral, aksen terracotta ala Claude
   ========================================================= */

:root {
    --accent: #C2703D;
    --accent-dark: #A85A2C;
    --accent-soft: #F3E7DC;
}

.dark {
    --accent: #D98B5F;
    --accent-dark: #C2703D;
    --accent-soft: #3A2A20;
}

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-heading {
    font-family: 'Source Serif 4', Georgia, serif;
}

/* Scrollbar tipis & senada tema */
* {
    scrollbar-width: thin;
    scrollbar-color: #d6d3d1 transparent;
}
.dark * {
    scrollbar-color: #44403c transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #44403c; }

/* Transisi halus untuk elemen yang berubah warna/ukuran saat toggle sidebar/tema */
.transition-theme {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Sidebar item aktif */
.nav-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    color: #57534e;
    transition: background-color .15s ease, color .15s ease;
}
.dark .nav-item { color: #a8a29e; }
.nav-item:hover { background-color: #f1efec; color: #292524; }
.dark .nav-item:hover { background-color: #262220; color: #f5f5f4; }
.nav-item.active {
    background-color: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600;
}
.dark .nav-item.active { color: var(--accent); }

/* Sidebar diciutkan: sembunyikan label teks */
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-section-label {
    display: none;
}
.sidebar-collapsed .nav-item {
    justify-content: center;
}

/* Kartu statistik / panel */
.card {
    background-color: #ffffff;
    border: 1px solid #e7e5e4;
    border-radius: .75rem;
}
.dark .card {
    background-color: #1c1917;
    border-color: #292524;
}

/* Progress bar tugas */
.progress-track {
    background-color: #f1efec;
    border-radius: 999px;
    height: .375rem;
    overflow: hidden;
}
.dark .progress-track { background-color: #292524; }
.progress-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--accent);
    transition: width .3s ease;
}

/* Tombol utama */
.btn-primary {
    background-color: var(--accent);
    color: #fff;
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .15s ease;
}
.btn-primary:hover { background-color: var(--accent-dark); }

.btn-secondary {
    background-color: transparent;
    border: 1px solid #d6d3d1;
    color: #44403c;
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .15s ease;
}
.dark .btn-secondary { border-color: #44403c; color: #d6d3d1; }
.btn-secondary:hover { background-color: #f1efec; }
.dark .btn-secondary:hover { background-color: #262220; }

/* Kalender grid */
.calendar-cell {
    min-height: 96px;
    border: 1px solid #e7e5e4;
}
.dark .calendar-cell { border-color: #292524; }

/* Toast notifikasi */
#toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}