/* ===== Reset & dasar ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1f2937;
    background: #f4f6f9;
    font-size: 15px;
    line-height: 1.5;
}
a { color: var(--warna-aksen-utama, #2563eb); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ===== Layout aplikasi (sidebar + konten + footer sticky) ===== */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-body {
    display: flex;
    flex: 1 0 auto;
    min-height: 0;
}
.topbar {
    background: var(--warna-header, #1e3a5f);
    color: var(--warna-teks-header, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 50;
    flex: 0 0 auto;
}
.topbar .merek { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; }
.topbar .merek img { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; background: #fff; }
.topbar-aksi { display: flex; align-items: center; gap: 8px; }
.btn-drawer {
    display: none;
    background: transparent;
    border: none;
    color: var(--warna-teks-header, #fff);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}
.btn-pasang {
    background: var(--warna-aksen-utama, #2563eb);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 36px;
}
.btn-keluar {
    color: var(--warna-teks-header, #fff);
    font-size: 0.85rem;
    opacity: 0.9;
}

.sidebar {
    background: var(--warna-sidebar, #f4f6f9);
    color: var(--warna-teks-sidebar, #1f2937);
    width: 230px;
    flex: 0 0 auto;
    padding: 16px 0;
    border-right: 1px solid rgba(0,0,0,0.08);
}
.sidebar nav a {
    display: block;
    padding: 12px 20px;
    color: inherit;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.sidebar nav a:hover { background: rgba(0,0,0,0.05); text-decoration: none; }
.sidebar nav a.aktif {
    border-left-color: var(--warna-aksen-utama, #2563eb);
    background: rgba(0,0,0,0.06);
    font-weight: 600;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
}

.konten {
    flex: 1 1 auto;
    padding: 20px;
    padding-bottom: 90px; /* ruang agar tidak tertutup footer fixed */
    min-width: 0;
    overflow-x: hidden;
}

.footer-app {
    background: var(--warna-footer, #1e3a5f);
    color: var(--warna-teks-footer, #fff);
    padding: 12px 20px;
    font-size: 0.82rem;
    text-align: center;
    position: sticky;
    bottom: 0;
    z-index: 30;
    flex: 0 0 auto;
}
.footer-app a { color: inherit; text-decoration: underline; }

/* ===== Drawer mobile ===== */
@media (max-width: 767px) {
    .btn-drawer { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 250px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 45;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    }
    .sidebar.terbuka { transform: translateX(0); }
    .sidebar-overlay.terbuka { display: block; }
    .konten { padding: 14px; padding-bottom: 90px; }
}

/* ===== Kartu, tombol, form umum ===== */
.kartu {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}
.grid-kartu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.kartu-ringkas { text-align: center; }
.kartu-ringkas .angka { font-size: 1.8rem; font-weight: 700; color: var(--warna-aksen-utama, #2563eb); }
.kartu-ringkas .label { font-size: 0.85rem; color: #6b7280; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
}
.btn-utama { background: var(--warna-aksen-utama, #2563eb); color: var(--warna-teks-aksen-utama, #fff); }
.btn-utama:hover { opacity: 0.92; text-decoration: none; }
.btn-sekunder { background: var(--warna-aksen-sekunder, #16a34a); color: #fff; }
.btn-luar { background: #fff; border: 1px solid #d1d5db; color: #1f2937; }
.btn-bahaya { background: #dc2626; color: #fff; }
.btn-kecil { padding: 6px 12px; min-height: 32px; font-size: 0.8rem; }
.btn-lebar { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.grup-field { margin-bottom: 14px; }
.grup-field label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: #374151; }
.grup-field input[type=text], .grup-field input[type=password], .grup-field input[type=number],
.grup-field input[type=email], .grup-field select, .grup-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.92rem;
    min-height: 44px;
}
.grup-field textarea { min-height: 80px; }
.grup-field input[type=color] { width: 60px; height: 40px; border: 1px solid #d1d5db; border-radius: 6px; padding: 2px; }
.grup-field small { color: #6b7280; display: block; margin-top: 4px; font-size: 0.78rem; }
.baris-form { display: flex; gap: 14px; flex-wrap: wrap; }
.baris-form .grup-field { flex: 1 1 200px; }

.pesan { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.pesan-sukses { background: #e8f5e9; border: 1px solid #b7dfb9; color: #1e5c22; }
.pesan-galat { background: #fdecea; border: 1px solid #f5c2c0; color: #7d2b23; }
.pesan-info { background: #e8f0fe; border: 1px solid #b9d0f5; color: #1a3f7d; }

table.tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.tabel th, table.tabel td { padding: 9px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; }
table.tabel th { background: #f9fafb; font-weight: 600; color: #374151; }
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel-bungkus table.tabel th:first-child, .tabel-bungkus table.tabel td:first-child {
    position: sticky; left: 0; background: #fff; z-index: 2;
}
table.tabel th:first-child { background: #f9fafb; }

.baris-diterima { background: #eafaf0; }
.baris-direvisi { background: #fff8e1; }
.baris-ditolak { background: #fdecea; }

.lencana { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.lencana-hijau { background: #d1fae5; color: #065f46; }
.lencana-kuning { background: #fef3c7; color: #92400e; }
.lencana-merah { background: #fee2e2; color: #991b1b; }
.lencana-abu { background: #e5e7eb; color: #374151; }

/* ===== Login ===== */
.halaman-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--warna-header, #1e3a5f), #0f1f33);
    padding: 20px;
}
.kartu-login {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    text-align: center;
}
.kartu-login .logo-login { height: 56px; margin-bottom: 12px; }
.kartu-login h1 { font-size: 1.3rem; margin: 0 0 4px; }
.kartu-login .tagline { color: #6b7280; font-size: 0.85rem; margin: 0 0 20px; }
.tab-login { display: flex; margin-bottom: 18px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: #f9fafb;
    cursor: pointer;
    font-size: 0.85rem;
    min-height: 44px;
}
.tab-btn.aktif { background: var(--warna-aksen-utama, #2563eb); color: #fff; font-weight: 600; }
.kartu-login form { text-align: left; }

/* ===== Cetak ===== */
@media print {
    .topbar, .sidebar, .footer-app, .sidebar-overlay, .btn-drawer, .no-cetak { display: none !important; }
    .konten { padding: 0; padding-bottom: 0; }
    body { background: #fff; }
}

/* ===== Modal instalasi iOS ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.terbuka { display: flex; }
.modal-kotak { background: #fff; border-radius: 12px; padding: 24px; max-width: 380px; text-align: center; }
.modal-kotak button { margin-top: 14px; }

.grid-warna { display: flex; flex-wrap: wrap; gap: 18px; }
.grid-warna .item-warna { text-align: center; font-size: 0.8rem; }
.grid-warna label { display: block; margin-bottom: 6px; }

.svg-grafik { max-width: 100%; }