/* =========================================================
   SIMAS - Sistem Informasi Manajemen Arsip Surat
   MA Al-Inayah Pakenjeng
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --hijau-tua: #145A40;
    --hijau-gelap: #0E4631;
    --emas: #B8902F;
    --emas-terang: #D4AF54;
    --krem: #F7F5EF;
    --charcoal: #2B2B28;
    --sage: #DCE8DE;
    --merah-muted: #A3402F;
    --putih: #FFFFFF;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--krem);
    color: var(--charcoal);
    margin: 0;
}

h1, h2, h3, h4, .brand-font {
    font-family: 'Amiri', serif;
}

a { text-decoration: none; }

/* ===================== LAYOUT ===================== */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: linear-gradient(180deg, var(--hijau-tua) 0%, var(--hijau-gelap) 100%);
    color: var(--putih);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.sidebar::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 61,35 95,35 67,55 78,90 50,68 22,90 33,55 5,35 39,35' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    pointer-events: none;
}

.sidebar-brand {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar-brand .brand-title {
    font-family: 'Amiri', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--emas-terang);
    margin: 0;
    line-height: 1.3;
}

.sidebar-brand .brand-subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.sidebar-nav .nav-section-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    padding: 14px 20px 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,0.06);
}

.sidebar-nav a.active {
    background: rgba(255,255,255,0.1);
    border-left-color: var(--emas-terang);
    color: var(--putih);
    font-weight: 600;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

.sidebar-footer a { color: var(--emas-terang); }

/* ===================== MAIN CONTENT ===================== */
.main-content { flex: 1; min-width: 0; }

.topbar {
    background: var(--putih);
    border-bottom: 1px solid #E5E2D9;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar .page-title {
    font-family: 'Amiri', serif;
    font-size: 1.3rem;
    color: var(--hijau-tua);
    margin: 0;
}

.topbar .tanggal-hari-ini {
    font-size: 0.85rem;
    color: #7A7A72;
}

.content-area { padding: 28px; }

/* ===================== CARDS ===================== */
.card-simas {
    background: var(--putih);
    border-radius: var(--radius);
    border: 1px solid #E9E6DC;
    box-shadow: 0 1px 3px rgba(20,90,64,0.04);
}

.card-simas .card-header-simas {
    padding: 16px 20px;
    border-bottom: 1px solid #EFEDE3;
    border-left: 4px solid var(--emas);
    border-radius: var(--radius) var(--radius) 0 0;
    font-weight: 600;
    color: var(--hijau-tua);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-simas .card-body-simas { padding: 20px; }

/* ===================== STAT WIDGETS ===================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--putih);
    border-radius: var(--radius);
    padding: 18px 20px;
    border: 1px solid #E9E6DC;
    border-top: 3px solid var(--hijau-tua);
}

.stat-card.aksen-emas { border-top-color: var(--emas); }
.stat-card.aksen-merah { border-top-color: var(--merah-muted); }

.stat-card .stat-label {
    font-size: 0.78rem;
    color: #7A7A72;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card .stat-value {
    font-family: 'Amiri', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--hijau-tua);
    margin: 4px 0 0;
}

/* ===================== BUTTONS ===================== */
.btn-simas-primary {
    background: var(--hijau-tua);
    border: none;
    color: var(--putih);
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}
.btn-simas-primary:hover { background: var(--hijau-gelap); color: var(--putih); }

.btn-simas-emas {
    background: var(--emas);
    border: none;
    color: var(--putih);
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}
.btn-simas-emas:hover { background: #9c7a26; color: var(--putih); }

.btn-simas-outline {
    background: transparent;
    border: 1px solid var(--hijau-tua);
    color: var(--hijau-tua);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.88rem;
}
.btn-simas-outline:hover { background: var(--sage); }

/* ===================== TABLES ===================== */
.table-simas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.table-simas thead th {
    background: var(--hijau-tua);
    color: var(--putih);
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.table-simas tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #EFEDE3;
    vertical-align: middle;
}
.table-simas tbody tr:hover { background: #FAF9F4; }

.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
}
.badge-belum { background: #F6E3DC; color: var(--merah-muted); }
.badge-proses { background: #FBF0D9; color: #92711E; }
.badge-selesai { background: #DCEFE2; color: var(--hijau-tua); }

/* ===================== LOGIN PAGE ===================== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hijau-tua);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.04) 0, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(184,144,47,0.10) 0, transparent 40%);
    position: relative;
}

.login-card {
    background: var(--putih);
    border-radius: 14px;
    padding: 40px 36px;
    width: 380px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.login-card .brand-title {
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    color: var(--hijau-tua);
    text-align: center;
    margin: 0 0 4px;
}

.login-card .brand-subtitle {
    text-align: center;
    font-size: 0.8rem;
    color: #8A8A80;
    margin-bottom: 28px;
}

.login-card label {
    font-size: 0.85rem;
    color: var(--charcoal);
    font-weight: 500;
}

.login-card .form-control {
    border-radius: 7px;
    border: 1px solid #DEDBD0;
    padding: 10px 12px;
}

.login-card .form-control:focus {
    border-color: var(--hijau-tua);
    box-shadow: 0 0 0 3px rgba(20,90,64,0.12);
}

/* ===================== UTIL ===================== */
.text-emas { color: var(--emas); }
.text-hijau { color: var(--hijau-tua); }
.required-mark { color: var(--merah-muted); }

@media (max-width: 768px) {
    .sidebar { position: fixed; left: -250px; top: 0; height: 100%; z-index: 1000; transition: left 0.2s; }
    .sidebar.show { left: 0; }
    .content-area { padding: 16px; }
}