/* ==========================================================================
   TEMA BIRU GRADASI TEGAS & PROFESIONAL (MODERN BLUE TECH & BANKING)
   Asesmen Kolaborasi: Akuntansi Perbankan dan Koding & AI
   Komposisi Tipografi Proporsional, Rapi, & Elegan
   ========================================================================== */

:root {
    /* Palette Biru Gradasi Tegas */
    --blue-deep: #0A192F;           /* Midnight Navy */
    --blue-primary: #0F3460;        /* Deep Royal Blue */
    --blue-brand: #1E40AF;          /* Vivid Cobalt Blue */
    --blue-electric: #2563EB;       /* Electric Blue */
    --blue-sky: #0284C7;            /* Sky Blue */
    --blue-cyan: #0EA5E9;           /* Cyan Accent */
    --blue-soft: #EFF6FF;           /* Ice Blue Surface */
    --blue-light: #DBEAFE;          /* Soft Sky Border */
    --blue-hover: #1D4ED8;          /* Hover State */

    /* Warna Pendukung */
    --accent-amber: #D97706;        /* Warm Gold / Emas */
    --amber-soft: #FEF3C7;          /* Amber Light */
    --slate-bg: #F8FAFC;            /* Background Lembut Bersih */
    --slate-surface: #FFFFFF;       /* Card Surface */
    --slate-border: #E2E8F0;        /* Border Halus */
    --slate-border-strong: #CBD5E1; /* Border Tegas */
    --text-main: #0F172A;           /* Teks Utama Tajam */
    --text-secondary: #475569;      /* Teks Deskripsi */
    --text-muted: #64748B;          /* Teks Muted */

    /* Shadows & Radii */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 25px rgba(15, 52, 96, 0.14);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 9999px;
}

/* ==========================================================================
   TIPOGRAFI & UKURAN FONT PROPORSIONAL (TIDAK KEBESARAN)
   ========================================================================== */
body {
    background-color: var(--slate-bg);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;              /* Ukuran teks dasar proporsional */
    line-height: 1.55;
    letter-spacing: -0.011em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Skala Judul / Headings yang Pas & Seimbang */
h1, .h1 {
    font-size: 1.65rem !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

h2, .h2 {
    font-size: 1.4rem !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

h4, .h4 {
    font-size: 1.1rem !important;
    font-weight: 600;
    line-height: 1.4;
}

h5, .h5 {
    font-size: 0.98rem !important;
    font-weight: 600;
    line-height: 1.45;
}

h6, .h6 {
    font-size: 0.88rem !important;
    font-weight: 600;
    line-height: 1.45;
}

p, .p {
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}

small, .small {
    font-size: 0.8rem !important;
}

/* ==========================================================================
   NAVBAR BIRU GRADASI TEGAS
   ========================================================================== */
.navbar-rural,
.navbar-blue {
    background: linear-gradient(135deg, #0A192F 0%, #0F3460 55%, #1E40AF 100%) !important;
    box-shadow: 0 4px 20px rgba(10, 25, 47, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1rem;
}

.navbar-brand {
    font-weight: 700;
    color: #FFFFFF !important;
    font-size: 0.98rem !important;
    letter-spacing: -0.01em;
}

.navbar-rural .nav-link,
.navbar-blue .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    padding: 0.45rem 0.85rem !important;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.navbar-rural .nav-link:hover,
.navbar-rural .nav-link.active,
.navbar-blue .nav-link:hover,
.navbar-blue .nav-link.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Nav Pills / Tabs inside Cards & Body (Mengatasi Teks Tidak Terlihat) */
.nav-pills .nav-link {
    color: #1E3A8A !important;
    background-color: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    border-radius: 9999px !important;
    padding: 0.45rem 1rem !important;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background-color: #DBEAFE !important;
    color: #0F3460 !important;
    border-color: #93C5FD !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
    color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
}

.btn-nav-admin {
    background: linear-gradient(135deg, #38BDF8, #2563EB) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.82rem !important;
    border-radius: var(--radius-pill);
    padding: 0.35rem 1rem !important;
    border: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: all 0.25s;
}

.btn-nav-admin:hover {
    background: linear-gradient(135deg, #0284C7, #1D4ED8) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5);
    color: #FFFFFF !important;
}
    transition: all 0.25s;
}

.btn-nav-admin:hover {
    background: linear-gradient(135deg, #0284C7, #1D4ED8) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5);
    color: #FFFFFF !important;
}

/* ==========================================================================
   HERO BANNER GRADASI BIRU TEGAS
   ========================================================================== */
.hero-banner {
    background: linear-gradient(135deg, #0A192F 0%, #0F3460 40%, #1E40AF 85%, #2563EB 100%) !important;
    color: white;
    border-radius: var(--radius-lg);
    padding: 2rem 2.2rem !important;
    margin-bottom: 1.8rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-banner::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-banner::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: 20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ==========================================================================
   KARTU (CARDS) & SURFACES
   ========================================================================== */
.card-rural,
.card-blue {
    background: var(--slate-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.card-rural:hover,
.card-blue:hover {
    box-shadow: var(--shadow-md);
}

.card-header-rural {
    background: linear-gradient(to right, #F8FAFC, #F1F5F9);
    border-bottom: 1px solid var(--slate-border);
    padding: 0.85rem 1.15rem;
    color: var(--blue-primary);
    font-weight: 700;
    font-size: 0.92rem;
}

.card-header-dark-rural {
    background: linear-gradient(135deg, #0A192F 0%, #0F3460 60%, #1E40AF 100%) !important;
    color: #FFFFFF !important;
    padding: 0.85rem 1.25rem;
    font-weight: 600;
    font-size: 0.92rem;
    border: none;
}

.card-header-dark-rural h1,
.card-header-dark-rural h2,
.card-header-dark-rural h3,
.card-header-dark-rural h4,
.card-header-dark-rural h5,
.card-header-dark-rural h6,
.card-header-dark-rural strong,
.card-header-dark-rural p,
.card-header-dark-rural i {
    color: #FFFFFF !important;
}

.card-header-dark-rural span:not(.badge) {
    color: #FFFFFF !important;
}

.card-header-dark-rural .badge.bg-white {
    color: #0F3460 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.badge {
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    letter-spacing: 0.01em;
}

.badge-rural {
    background-color: var(--blue-soft) !important;
    color: var(--blue-brand) !important;
    border: 1px solid var(--blue-light) !important;
    border-radius: var(--radius-pill);
}

.badge-rural-gold {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
    border-radius: var(--radius-pill);
}

.badge-akuntansi {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
    border-radius: var(--radius-pill);
}

.badge-koding {
    background: #F0FDF4 !important;
    color: #15803D !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: var(--radius-pill);
}

/* Badge 5 Peran Proyek Siswa */
.badge-peran-presenter {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
    border-radius: var(--radius-pill);
}

.badge-peran-slide {
    background-color: #EFF6FF !important;
    color: #1E40AF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: var(--radius-pill);
}

.badge-peran-flyer {
    background-color: #FDF2F8 !important;
    color: #9D174D !important;
    border: 1px solid #FBCFE8 !important;
    border-radius: var(--radius-pill);
}

.badge-peran-video {
    background-color: #FEF2F2 !important;
    color: #991B1B !important;
    border: 1px solid #FECACA !important;
    border-radius: var(--radius-pill);
}

.badge-peran-ai {
    background-color: #F0FDF4 !important;
    color: #166534 !important;
    border: 1px solid #BBF7D0 !important;
    border-radius: var(--radius-pill);
}

/* Badge 2 Tema Perbankan Inovasi */
.badge-tema-layanan {
    background-color: #F0F9FF !important;
    color: #0369A1 !important;
    border: 1px solid #BAE6FD !important;
    border-radius: var(--radius-pill);
}

.badge-tema-produk {
    background-color: #FAF5FF !important;
    color: #7E22CE !important;
    border: 1px solid #E9D5FF !important;
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   TOMBOL (BUTTONS)
   ========================================================================== */
.btn {
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.45rem 1rem;
    transition: all 0.2s ease;
}

.btn-rural-primary {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
    border: 1px solid #1D4ED8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-rural-primary:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38);
    transform: translateY(-1px);
}

.btn-rural-outline {
    background: transparent;
    border: 1.5px solid var(--blue-brand);
    color: var(--blue-brand);
}

.btn-rural-outline:hover {
    background: var(--blue-soft);
    color: var(--blue-deep);
    border-color: var(--blue-deep);
}

/* ==========================================================================
   TABEL & MATRIKS SPREADSHEET
   ========================================================================== */
.table-rural-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--slate-border);
    background: white;
}

.table-rural {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.table-rural thead {
    background: linear-gradient(135deg, #0A192F 0%, #0F3460 70%, #1E40AF 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    border: none;
}

.table-rural thead th,
.table-rural thead td {
    padding: 0.75rem 0.65rem;
    border-bottom: none;
    vertical-align: middle;
    color: #FFFFFF !important;
    background: transparent !important;
}

.table-rural thead th strong,
.table-rural thead th small,
.table-rural thead th span:not(.badge),
.table-rural thead th i {
    color: #FFFFFF !important;
}

.table-rural tbody td {
    padding: 0.65rem 0.65rem;
    vertical-align: middle;
    border-color: #F1F5F9;
    font-size: 0.85rem;
}

.table-rural tbody tr:nth-of-type(even) {
    background-color: #F8FAFC;
}

.table-rural tbody tr:hover {
    background-color: #EFF6FF;
}

/* Sel Input Matriks Spreadsheet */
.cell-input-score {
    width: 68px;
    text-align: center;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--blue-deep);
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.35rem;
    background: #FFFFFF;
    transition: all 0.2s;
}

.cell-input-score:focus {
    border-color: var(--blue-electric);
    outline: none;
    background: #F0F7FF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.cell-input-score.saving {
    background-color: #FEF3C7;
    border-color: #F59E0B;
}

.cell-input-score.saved {
    background-color: #ECFDF5;
    border-color: #10B981;
}

.cell-input-score.error {
    background-color: #FEF2F2;
    border-color: #EF4444;
}

/* ==========================================================================
   CHECKLIST PROYEK
   ========================================================================== */
.checklist-item {
    background: #FFFFFF;
    border: 1px solid var(--slate-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
    border-left: 4px solid var(--blue-brand);
}

.checklist-item:hover {
    border-color: var(--blue-electric);
    border-left-color: var(--blue-electric);
    box-shadow: 0 3px 12px rgba(30, 64, 175, 0.08);
}

.checklist-item.completed {
    background: #F8FAFC;
    border-left-color: #10B981;
}

.checklist-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--blue-brand);
}

/* ==========================================================================
   SIDEBAR ADMIN
   ========================================================================== */
.admin-sidebar {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-border);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 0.85rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.admin-menu-link:hover,
.admin-menu-link.active {
    background: var(--blue-soft);
    color: var(--blue-brand);
    font-weight: 600;
    transform: translateX(2px);
}

.admin-menu-link i {
    font-size: 1.05rem;
    color: var(--blue-brand);
}

/* ==========================================================================
   KOP SURAT CONTAINER
   ========================================================================== */
.kop-surat-preview-container {
    background: #FFFFFF;
    border: 2px dashed #CBD5E1;
    border-radius: var(--radius-md);
    padding: 1.2rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.kop-surat-img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 4px;
}

/* ==========================================================================
   FOOTER BIRU ELEGAN
   ========================================================================== */
.footer-rural,
.footer-blue {
    background: linear-gradient(135deg, #0A192F 0%, #0F3460 70%, #132743 100%) !important;
    color: #E2E8F0;
    padding: 2.2rem 0 1.2rem;
    margin-top: 3.5rem;
    border-top: 3px solid #2563EB;
    font-size: 0.85rem;
}

.footer-rural a,
.footer-blue a {
    color: #93C5FD;
    text-decoration: none;
}

.footer-rural a:hover,
.footer-blue a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* ==========================================================================
   PRINT MEDIA
   ========================================================================== */
@media print {
    body {
        background: white !important;
        color: black !important;
        font-size: 0.82rem;
    }
    .no-print, .navbar, .footer-rural, .footer-blue, .btn, .admin-sidebar {
        display: none !important;
    }
    .card-rural, .card-blue {
        border: none !important;
        box-shadow: none !important;
    }
    .kop-surat-preview-container {
        border: none !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }
    .table-rural thead {
        background: #0F3460 !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}