/* =====================================================================
   SIMSURAT — tema di atas AdminLTE 3
   Navy #012D50 · Primary #1565C0 · Gold #D4AF37 · Background #F4F7FB
   ===================================================================== */

:root {
    --ss-navy: #012D50;
    --ss-navy-2: #023b68;
    --ss-navy-3: #0a4a7d;
    --ss-primary: #1565C0;
    --ss-primary-gelap: #0f4f99;
    --ss-gold: #D4AF37;
    --ss-gold-lembut: #f6edcf;
    --ss-latar: #F4F7FB;
    --ss-kartu: #FFFFFF;
    --ss-teks: #1d2939;
    --ss-teks-redup: #667085;
    --ss-garis: #e4e9f1;
    --ss-radius: 12px;
    --ss-bayangan: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ss-teks);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}

.content-wrapper { background: var(--ss-latar); }

a { color: var(--ss-primary); }

/* ---------- Sidebar ---------- */
.main-sidebar.sidebar-ss { background: linear-gradient(180deg, var(--ss-navy) 0%, #011f38 100%); }

.sidebar-ss .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: .95rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.sidebar-ss .brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px;
    background: var(--ss-gold);
    color: var(--ss-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    margin-left: .3rem;
}

.sidebar-ss .brand-text { color: #fff; font-weight: 700 !important; letter-spacing: .06em; font-size: 1.05rem; }
.sidebar-ss .brand-text small { display: block; font-weight: 400; letter-spacing: 0; font-size: .68rem; color: rgba(255, 255, 255, .55); margin-top: -2px; }

.sidebar-ss .nav-header {
    color: rgba(255, 255, 255, .4) !important;
    font-size: .68rem !important;
    letter-spacing: .12em;
    font-weight: 600;
    padding: 1.1rem 1rem .4rem !important;
}

.sidebar-ss .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
    border-radius: 8px;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
}

.sidebar-ss .nav-sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.sidebar-ss .nav-sidebar .nav-link.active {
    background: rgba(212, 175, 55, .14) !important;
    color: #fff !important;
    border-left-color: var(--ss-gold);
    box-shadow: none !important;
}

.sidebar-ss .nav-sidebar .nav-link.active .nav-icon { color: var(--ss-gold); }

.sidebar-ss .user-panel { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; }
.sidebar-ss .user-panel .info a { color: #fff; font-weight: 600; }
.sidebar-ss .user-panel .info small { color: rgba(255, 255, 255, .55); display: block; line-height: 1.2; }

.avatar-inisial {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .8rem;
}

.avatar-inisial.gold { background: var(--ss-gold); color: var(--ss-navy); }

/* ---------- Navbar ---------- */
.main-header.navbar { border-bottom: 1px solid var(--ss-garis); background: #fff; }
.main-header .nav-link { color: var(--ss-teks-redup); }
.main-header .navbar-badge { font-size: .62rem; font-weight: 700; top: 6px; right: 3px; }
.navbar-identitas { line-height: 1.15; text-align: right; }
.navbar-identitas .nama { font-weight: 600; color: var(--ss-teks); font-size: .85rem; }
.navbar-identitas .unit { font-size: .72rem; color: var(--ss-teks-redup); }

.dropdown-notifikasi { width: 340px; max-width: 92vw; }
.dropdown-notifikasi .item-notifikasi { white-space: normal; padding: .65rem 1rem; border-bottom: 1px solid var(--ss-garis); }
.dropdown-notifikasi .item-notifikasi.belum { background: #f0f6ff; }
.dropdown-notifikasi .item-notifikasi .judul { font-weight: 600; font-size: .82rem; }
.dropdown-notifikasi .item-notifikasi .pesan { font-size: .78rem; color: var(--ss-teks-redup); }

/* ---------- Header halaman ---------- */
.content-header { padding: 1.25rem .5rem .5rem; }
.content-header h1 { font-size: 1.35rem; font-weight: 700; color: var(--ss-navy); }
.content-header .subjudul { color: var(--ss-teks-redup); font-size: .85rem; margin-top: .15rem; }
.breadcrumb { background: transparent; font-size: .8rem; margin: 0; }

/* ---------- Kartu ---------- */
.card {
    border: 1px solid var(--ss-garis);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-bayangan);
}

.card-header { background: transparent; border-bottom: 1px solid var(--ss-garis); padding: .9rem 1.15rem; }
.card-header .card-title { font-weight: 600; font-size: .95rem; color: var(--ss-navy); }
.card-body { padding: 1.15rem; }

/* Kartu statistik dashboard */
.kartu-stat { position: relative; overflow: hidden; height: 100%; transition: transform .15s, box-shadow .15s; }
.kartu-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .1); }
.kartu-stat .card-body { display: flex; align-items: center; gap: .9rem; }
.kartu-stat .ikon {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.kartu-stat .nilai { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--ss-navy); }
.kartu-stat .label { font-size: .78rem; color: var(--ss-teks-redup); }
.kartu-stat.stretched a.stretched-link { z-index: 1; }

.ikon-primary { background: #e3eefb; color: var(--ss-primary); }
.ikon-navy { background: #e1e8ef; color: var(--ss-navy); }
.ikon-gold { background: var(--ss-gold-lembut); color: #9a7a14; }
.ikon-success { background: #e3f6ec; color: #16884a; }
.ikon-warning { background: #fff2dc; color: #b26a00; }
.ikon-danger { background: #fde7e7; color: #c62828; }
.ikon-info { background: #e0f4f8; color: #0b7d93; }

/* ---------- Tombol & badge ---------- */
.btn { border-radius: 8px; font-weight: 500; font-size: .85rem; }
.btn-primary { background: var(--ss-primary); border-color: var(--ss-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--ss-primary-gelap); border-color: var(--ss-primary-gelap); }
.btn-navy { background: var(--ss-navy); border-color: var(--ss-navy); color: #fff; }
.btn-navy:hover { background: var(--ss-navy-2); color: #fff; }
.btn-gold { background: var(--ss-gold); border-color: var(--ss-gold); color: var(--ss-navy); }
.btn-gold:hover { background: #c49f2a; color: var(--ss-navy); }

.badge { font-weight: 600; padding: .38em .65em; border-radius: 6px; font-size: 74%; letter-spacing: .01em; }
.badge-lembut-primary { background: #e3eefb; color: var(--ss-primary); }
.badge-lembut-secondary { background: #eef1f5; color: #475467; }
.badge-lembut-info { background: #e0f4f8; color: #0b7d93; }
.badge-lembut-success { background: #e3f6ec; color: #16884a; }
.badge-lembut-warning { background: #fff2dc; color: #a35f00; }
.badge-lembut-danger { background: #fde7e7; color: #c62828; }
.badge-lembut-dark { background: #e1e8ef; color: var(--ss-navy); }

/* ---------- Form ---------- */
.form-control, .custom-select, .select2-container--bootstrap4 .select2-selection {
    border-radius: 8px;
    border-color: #d5dce6;
    font-size: .88rem;
}
.form-control:focus, .custom-select:focus { border-color: var(--ss-primary); box-shadow: 0 0 0 .18rem rgba(21, 101, 192, .15); }
label { font-weight: 600; font-size: .82rem; color: #344054; }
label .wajib { color: #c62828; }
.form-text { font-size: .76rem; }

.zona-unggah {
    border: 2px dashed #c6d3e3;
    border-radius: var(--ss-radius);
    background: #f9fbfe;
    padding: 1.4rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.zona-unggah:hover, .zona-unggah.aktif { border-color: var(--ss-primary); background: #f0f6ff; }
.zona-unggah .ikon { font-size: 1.8rem; color: var(--ss-primary); }
.zona-unggah .nama-file { font-weight: 600; color: var(--ss-navy); word-break: break-all; }

/* ---------- Tabel / DataTables ---------- */
.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ss-garis);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ss-teks-redup);
    font-weight: 600;
    background: #fafbfd;
}
.table td { vertical-align: middle; border-top-color: #eef1f6; }
.table-hover tbody tr:hover { background: #f7faff; }
div.dataTables_wrapper div.dataTables_processing {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--ss-garis);
    border-radius: 10px;
    box-shadow: var(--ss-bayangan);
    font-weight: 600;
    color: var(--ss-navy);
}
.page-item.active .page-link { background: var(--ss-primary); border-color: var(--ss-primary); }
.page-link { color: var(--ss-primary); }

.panel-filter { background: #fafbfd; border-bottom: 1px solid var(--ss-garis); padding: .9rem 1.15rem; }

/* ---------- Detail surat ---------- */
.daftar-info dt { font-weight: 500; color: var(--ss-teks-redup); font-size: .8rem; }
.daftar-info dd { font-weight: 500; margin-bottom: .75rem; }
.nomor-agenda {
    display: inline-block;
    background: var(--ss-gold-lembut);
    color: #7a5f0d;
    border: 1px solid #ecd893;
    font-weight: 700;
    border-radius: 8px;
    padding: .2rem .6rem;
    font-size: .85rem;
    letter-spacing: .02em;
}

.preview-dokumen { border-radius: 10px; border: 1px solid var(--ss-garis); background: #525659; overflow: hidden; }
.preview-dokumen iframe { width: 100%; height: 640px; border: 0; display: block; }
.preview-dokumen img { width: 100%; display: block; background: #fff; }

/* ---------- Timeline ---------- */
.timeline-ss { position: relative; margin: 0; padding: 0 0 0 1.6rem; list-style: none; }
.timeline-ss::before { content: ''; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: var(--ss-garis); }
.timeline-ss li { position: relative; padding-bottom: 1.1rem; }
.timeline-ss li:last-child { padding-bottom: 0; }
.timeline-ss .titik {
    position: absolute; left: -1.6rem; top: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ss-garis);
}
.timeline-ss .judul { font-weight: 600; font-size: .85rem; color: var(--ss-navy); }
.timeline-ss .meta { font-size: .74rem; color: var(--ss-teks-redup); }
.timeline-ss .keterangan { font-size: .8rem; margin-top: .2rem; color: #475467; }

/* ---------- Empty state ---------- */
.keadaan-kosong { text-align: center; padding: 2.2rem 1rem; color: var(--ss-teks-redup); }
.keadaan-kosong .ikon {
    width: 60px; height: 60px; border-radius: 50%;
    background: #eef3fa; color: #8aa3c2;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: .75rem;
}
.keadaan-kosong .judul { font-weight: 600; color: var(--ss-teks); }

/* ---------- Halaman login ---------- */
.halaman-login { min-height: 100vh; display: flex; background: var(--ss-latar); }
.login-panel-kiri {
    flex: 1 1 50%;
    background: radial-gradient(circle at 20% 10%, var(--ss-navy-3) 0%, var(--ss-navy) 45%, #011a30 100%);
    color: #fff;
    padding: 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.login-panel-kiri::after {
    content: ''; position: absolute; right: -120px; bottom: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    border: 40px solid rgba(212, 175, 55, .12);
}
.login-panel-kiri .garis-gold { width: 56px; height: 4px; background: var(--ss-gold); border-radius: 2px; margin: 1.2rem 0; }
.login-panel-kiri h1 { font-weight: 700; font-size: 2.1rem; line-height: 1.2; }
.login-panel-kiri p { color: rgba(255, 255, 255, .72); max-width: 420px; }
.login-fitur { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.login-fitur li { margin-bottom: .6rem; color: rgba(255, 255, 255, .85); }
.login-fitur i { color: var(--ss-gold); width: 22px; }
.login-panel-kanan { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.kartu-login { width: 100%; max-width: 400px; }
.kartu-login h2 { font-weight: 700; color: var(--ss-navy); font-size: 1.45rem; }

@media (max-width: 991.98px) {
    .login-panel-kiri { display: none; }
}

/* ---------- Lain-lain ---------- */
.main-footer { font-size: .78rem; color: var(--ss-teks-redup); border-top: 1px solid var(--ss-garis); }
.teks-redup { color: var(--ss-teks-redup) !important; }
.fw-semibold { font-weight: 600 !important; }
.swal2-popup { font-family: inherit; border-radius: 14px; }
.swal2-styled.swal2-confirm { border-radius: 8px !important; }

#overlay-muat {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(244, 247, 251, .6);
    display: none; align-items: center; justify-content: center;
}
#overlay-muat.tampil { display: flex; }

/* AdminLTE menambah .card-header::after (clearfix) yang ikut jadi item flex dan mengganggu justify-content. */
.card-header.d-flex::after { display: none; }

/* Submenu sidebar: menjorok agar jelas berada di dalam grup */
.sidebar-ss .nav-treeview { margin-bottom: .25rem; }
.sidebar-ss .nav-treeview > .nav-item > .nav-link { padding-left: 2.1rem; font-size: .92rem; }
.sidebar-ss .nav-treeview > .nav-item > .nav-link .nav-icon { font-size: .85rem; }
.sidebar-mini.sidebar-collapse .sidebar-ss .nav-treeview > .nav-item > .nav-link { padding-left: .8rem; }