/* assets/css/style.css */

/* --------------------------------------------------------------
   GLOBAL STYLES & BOOTSTRAP OVERRIDES (JIKA PERLU)
   -------------------------------------------------------------- */
body {
    font-family: 'Poppins', sans-serif; /* Default font untuk aplikasi */
    background-color: #f8f9fa; /* Warna latar belakang netral dari Bootstrap */
    color: #212529; /* Warna teks default Bootstrap */
    font-size: 0.95rem; /* Ukuran font dasar awal */
}

a {
    color: #0d6efd; /* Warna link primary Bootstrap */
    text-decoration: none; /* Hapus underline default */
}
a:hover {
    color: #0a58ca; /* Warna link hover */
    text-decoration: underline;
}

/* Kustomisasi kecil untuk heading jika perlu */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* Sedikit lebih tebal dari default beberapa heading */
}

/* Kustomisasi Card Bootstrap jika perlu */
.card {
    border: none; /* Hapus border default card jika ingin tampilan lebih flat */
}
.card-header {
    background-color: #ffffff; /* Latar header card putih */
    border-bottom: 1px solid #e9ecef; /* Garis bawah header card yang lebih halus */
    font-weight: 600;
}

/* Kustomisasi Tombol jika perlu */
.btn {
    font-weight: 500;
}

/* Kustomisasi Tabel Bootstrap */
.table th {
    font-weight: 600; /* Header tabel lebih tebal */
    white-space: nowrap; /* Agar teks header tidak wrap */
}
.table-hover tbody tr:hover {
    background-color: #eef2f7; /* Warna hover yang lebih halus */
}
.table .btn-sm {
    padding: 0.2rem 0.4rem; /* Padding tombol kecil di tabel */
    font-size: 0.8em;
}
.table .btn-sm .fas { /* Ikon di dalam tombol kecil */
    font-size: 0.9em;
}

/* --------------------------------------------------------------
   SIDEBAR STYLING (Pelengkap untuk #sidebar-wrapper di header_layout)
   -------------------------------------------------------------- */
#sidebar-wrapper .sidebar-heading {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 1.25rem; 
    color: #fff; 
}
#sidebar-wrapper .sidebar-heading .fa-icon {
    margin-right: 0.5rem;
}

#sidebar-wrapper .nav-link {
    color: rgba(255, 255, 255, 0.8); 
    padding: 0.85rem 1.25rem; 
    font-size: 0.95rem; 
    border-left: 4px solid transparent; 
    transition: all 0.2s ease-in-out;
}
#sidebar-wrapper .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: #0d6efd; 
}
#sidebar-wrapper .nav-link.active {
    color: #ffffff;
    background-color: #0d6efd; 
    font-weight: 500;
    border-left-color: #ffffff; 
}
#sidebar-wrapper .nav-link .fa-icon {
    margin-right: 0.75rem;
    width: 20px; 
    text-align: center;
    font-size: 1em; 
}

#sidebar-wrapper .nav-item.mt-auto .nav-link { 
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 1rem !important; 
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
#sidebar-wrapper .nav-item.mt-auto .nav-link.text-danger:hover {
    background-color: #dc3545; 
    color: #ffffff !important;
    border-left-color: #ffffff;
}

/* --------------------------------------------------------------
   PAGE CONTENT WRAPPER STYLING
   -------------------------------------------------------------- */
#page-content-wrapper .navbar { 
    min-height: 60px; 
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0, .075); 
}
#page-content-wrapper .navbar #menu-toggle { 
    border: 1px solid #ced4da;
}
#page-content-wrapper .navbar #menu-toggle:hover {
    background-color: #e9ecef;
}

#page-content-wrapper main.container-fluid { 
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    min-height: calc(100vh - 60px - 65px); 
}

#page-content-wrapper footer.main-footer {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 0.9em;
    color: #6c757d; 
    border-top: 1px solid #dee2e6; 
    min-height: 65px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* --------------------------------------------------------------
   UTILITY & CUSTOM COMPONENTS
   -------------------------------------------------------------- */
.caption-top { 
    caption-side: top;
    font-size: 0.9em;
    color: #6c757d;
    padding-bottom: 0.5rem;
}

.text-white-50 { color: rgba(255,255,255,.5) !important; }
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.text-dark-50 { color: rgba(33,37,41,.5) !important; }
.text-dark-75 { color: rgba(33,37,41,.75) !important; }

.stat-card-custom .card-title {
    font-weight: 600;
}
.stat-card-custom .card-text.fs-2 {
    font-weight: 700;
}
.stat-card-custom .fa-icon-bg { 
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-size: 3.5rem;
    opacity: 0.15;
    color: inherit; 
}

/* --------------------------------------------------------------
   RESPONSIVE & PAGE-SPECIFIC ADJUSTMENTS
   -------------------------------------------------------------- */

/* Penyesuaian Umum untuk Ukuran Font Dasar di Layar Lebih Kecil */
@media (max-width: 1366px) { /* Target laptop umum */
    body {
        font-size: 0.92rem; /* Sedikit kecilkan font dasar */
    }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.25rem; } 
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }   
    h6 { font-size: 0.9rem; } 

    #sidebar-wrapper .nav-link {
        font-size: 0.9rem; 
        padding: 0.75rem 1.1rem;
    }
}

@media (max-width: 1200px) { /* Lebih spesifik untuk laptop dengan lebar umum */
    .page-title h1,
    #page-content-wrapper main.container-fluid .h1 { /* Juga target H1 di konten */
        font-size: 1.5rem; 
    }
    .page-title .text-muted,
    #page-content-wrapper main.container-fluid .text-muted {
        font-size: 0.85rem; 
    }

    .card-header h5, .card-header h6 {
        font-size: 1rem;
    }

    /* Tombol-tombol utama di halaman pembayaran */
    #page-content-wrapper .btn { 
        padding: 0.35rem 0.75rem; 
        font-size: 0.875rem;      
    }
    #page-content-wrapper .btn-lg { 
        padding: 0.45rem 1rem;
        font-size: 0.95rem;
    }
    #page-content-wrapper .btn-sm { 
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Form Pencarian Pelanggan */
    .card-body form .form-label {
        font-size: 0.85rem; 
        margin-bottom: 0.3rem;
    }
    .card-body form .form-control { 
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }

    /* Card Data Pelanggan */
    #detail-pelanggan-card-display .card-body {
        padding: 0.8rem 1rem; 
    }
    #detail-pelanggan-card-display dl dt, 
    #detail-pelanggan-card-display dl dd {
        font-size: 0.875rem; 
        margin-bottom: 0.4rem; 
    }
    #detail-pelanggan-card-display dl dt {
        font-weight: 500; 
    }

    /* Card Ringkasan Tunggakan */
    #summary-tunggakan-card-display .card-body {
        padding: 0.75rem 1rem !important;
    }
    #summary-tunggakan-card-display .text-muted { 
        font-size: 0.8rem; 
        margin-bottom: 0.15rem !important;
    }
    #summary-tunggakan-card-display strong.fs-5 { 
        font-size: 1.05rem !important; 
    }
    
    /* Card Rincian Tagihan */
    #form-proses-pembayaran .card-body .h5 { 
        font-size: 1rem;
    }
    #form-proses-pembayaran .card-body .h4 { 
        font-size: 1.15rem;
    }

    #pin_konfirmasi_segel.form-control-lg {
        font-size: 1.1rem; 
        padding: 0.4rem 0.8rem;
    }
    .alert-warning strong { 
        font-size: 0.95rem;
    }

    #rincian_tagihan_table_wrapper .table {
        font-size: 0.85rem; 
    }
    #rincian_tagihan_table_wrapper .table th,
    #rincian_tagihan_table_wrapper .table td {
        padding: 0.5rem; 
        vertical-align: middle;
    }
    #rincian_tagihan_table_wrapper .table th {
        font-size: 0.8rem; 
    }
    #rincian_tagihan_table_wrapper .form-check-input {
        width: 1.1em; 
        height: 1.1em;
        margin-top: 0.1em; 
    }

    .alert-success strong { font-size: 0.95rem; }
    .alert-success .btn-sm { 
        font-size: 0.8rem; 
        padding: 0.25rem 0.5rem;
    }
    .alert-success .btn-info { 
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    .alert-dark[role="alert"] { 
        font-size: 0.9rem;
        padding: 0.6rem 1rem !important; 
    }
    .alert-dark[role="alert"] .fa-lg {
        font-size: 1.1em; 
    }
}


@media (max-width: 992px) { /* Target tablet dan laptop lebih kecil */
    body {
        font-size: 0.9rem;
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.85rem; }

    #sidebar-wrapper .nav-link {
        font-size: 0.875rem;
        padding: 0.7rem 1rem;
    }
    #sidebar-wrapper .sidebar-heading {
        font-size: 1.1rem;
        padding: 0.9rem 1rem;
    }
}

@media (max-width: 768px) { /* Tablet Portrait */
    body {
        font-size: 0.875rem; 
    }
    h1, #page-content-wrapper main.container-fluid .h1 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    h5 { font-size: 0.9rem; }
    h6 { font-size: 0.8rem; }

    #page-content-wrapper .btn,
    #page-content-wrapper .btn-lg { 
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    #summary-tunggakan-card-display .col-lg-3 { 
        flex: 0 0 auto;
        width: 50%; 
        margin-bottom: 0.5rem; 
    }
    #summary-tunggakan-card-display strong.fs-5 {
        font-size: 0.95rem !important; 
    }

    #rincian_tagihan_table_wrapper .table {
        font-size: 0.8rem; 
    }
    #rincian_tagihan_table_wrapper .table th,
    #rincian_tagihan_table_wrapper .table td {
        padding: 0.35rem; 
    }
}


/* MOBILE-SPECIFIC ADJUSTMENTS (Handphone Portrait & Landscape) */
@media (max-width: 576px) {
    body {
        font-size: 0.85rem; 
    }
    h1, #page-content-wrapper main.container-fluid .h1 { font-size: 1.2rem; }
    h2 { font-size: 1.1rem; }
    h3 { font-size: 1rem; }  
    h4 { font-size: 0.95rem; }
    h5 { font-size: 0.9rem; }  
    h6 { font-size: 0.8rem; }

    #page-content-wrapper main.container-fluid {
        padding-left: 0.75rem !important; 
        padding-right: 0.75rem !important;
    }

    #page-content-wrapper .btn,
    #page-content-wrapper .btn-lg,
    #page-content-wrapper .btn-sm {
        font-size: 0.75rem; 
        padding: 0.25rem 0.5rem; 
    }
     #page-content-wrapper .btn-lg { 
        padding: 0.3rem 0.6rem;
    }

    .card-body form .form-label {
        font-size: 0.8rem;
    }
    .card-body form .form-control { 
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }
    .card-body form .col-md-auto .btn { 
        width: 100%; 
        margin-top: 0.5rem; 
    }

    /* Mobile-friendly sidebar (offcanvas-like) */
    #sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 84%; /* mobile width for menu */
        max-width: 420px;
        transform: translateX(-110%);
        transition: transform 0.28s ease-in-out;
        z-index: 1060; /* above backdrop and other content */
        pointer-events: none; /* disable interactions when hidden */
    }
    #wrapper.toggled #sidebar-wrapper {
        transform: translateX(0);
        box-shadow: 0 8px 30px rgba(0,0,0,0.25);
        pointer-events: auto; /* enable interactions when shown */
    }
    /* Backdrop when sidebar open */
    .mobile-sidebar-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; opacity: 0; transition: opacity .2s; pointer-events: none;
    }
    .mobile-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

    /* Table -> Card transform styles */
    .table-mobile-transform { display: block; border: none; }
    .table-mobile-transform thead { display: none; }
    .table-mobile-transform tbody { display: block; }
    .table-mobile-transform tbody tr { display: block; margin-bottom: 12px; padding: 12px; background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(22,28,37,0.06); border: 1px solid rgba(0,0,0,0.03); }
    .table-mobile-transform td { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: none; }
    .table-mobile-transform td .cell-label { font-size: 0.85rem; color: #6c757d; font-weight: 600; margin-right: 8px; }
    .table-mobile-transform td .cell-value { font-size: 0.95rem; color: #212529; text-align: right; }
    .table-mobile-transform td .cell-actions { display: flex; gap: 6px; }

    /* Modal adjustments for mobile: prefer fullscreen modal */
    .modal-content { border-radius: 12px; }
    .modal-backdrop.show { opacity: 0.55; }
}

/* Ensure idle warning modal appears above the mobile sidebar backdrop and is clearly visible */
#idleWarnModal.modal {
    z-index: 2100; /* above mobile sidebar (1060) and bootstrap default */
}
#idleWarnModal .modal-backdrop {
    z-index: 2090;
}

/* Temporary notice when idle countdown is cancelled */
#idle-cancel-notice {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2200;
    background: rgba(33,37,41,0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(22,28,37,0.12);
    font-size: 0.95rem;
}

/* Smooth fade-out for the cancel notice */
#idle-cancel-notice {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 360ms ease, transform 360ms ease;
}
#idle-cancel-notice.fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

/* Keepalive (success) notice */
#idle-keepalive-notice {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2200;
    background: rgba(25,135,84,0.95); /* bootstrap success */
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(22,28,37,0.12);
    font-size: 0.95rem;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 360ms ease, transform 360ms ease;
}
#idle-keepalive-notice.fade-out { opacity: 0; transform: translateY(-8px); }



/* Additional helper for slightly larger phones/tablets */
@media (max-width: 768px) {
    .table-mobile-transform tbody tr { padding: 10px; }
}
   
    #detail-pelanggan-card-display .card-body {
        padding: 0.6rem; 
    }
    #detail-pelanggan-card-display dl dt, 
    #detail-pelanggan-card-display dl dd {
        font-size: 0.8rem; 
        margin-bottom: 0.2rem;
    }
    #detail-pelanggan-card-display dl.row dt,
    #detail-pelanggan-card-display dl.row dd {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0; 
        padding-right: 0;
    }
     #detail-pelanggan-card-display dl.row dt {
        font-weight: 600; 
     }

    #summary-tunggakan-card-display .card-body {
        padding: 0.5rem !important;
    }
    #summary-tunggakan-card-display .text-muted {
        font-size: 0.7rem; 
    }
    #summary-tunggakan-card-display strong.fs-5 {
        font-size: 0.9rem !important; 
    }

    #form-proses-pembayaran .card-header h5 {
        font-size: 0.95rem; 
    }
    #form-proses-pembayaran .card-header .d-flex.align-items-center.gap-2 {
        flex-direction: column; 
        align-items: flex-start !important; 
        width: 100%;
    }
    #form-proses-pembayaran .card-header .d-flex.align-items-center.gap-2 .form-control-sm {
        width: 100% !important; 
        margin-bottom: 0.3rem;
    }
     #form-proses-pembayaran .card-header .d-flex.align-items-center.gap-2 .btn-outline-primary {
        width: 100%; 
    }

    #form-proses-pembayaran .card-body .h5 { 
        font-size: 0.9rem;
    }
    #form-proses-pembayaran .card-body .h4 { 
        font-size: 1rem;
    }
    #form-proses-pembayaran .card-body .text-md-end { 
        text-align: center !important; 
    }
     #form-proses-pembayaran .card-body .btn-lg { 
        width: 100%; 
        margin-bottom: 0.5rem;
    }
    #form-proses-pembayaran .card-body .form-text.text-muted {
         text-align: center !important;
    }

    #pin_konfirmasi_segel.form-control-lg {
        font-size: 1rem; 
        padding: 0.35rem 0.7rem;
    }
    .alert-warning { 
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    #rincian_tagihan_table_wrapper .table {
        font-size: 0.75rem; 
    }
    #rincian_tagihan_table_wrapper .table th,
    #rincian_tagihan_table_wrapper .table td {
        padding: 0.3rem; 
    }
    /* Sembunyikan kolom Stand Awal & Akhir di mobile jika diperlukan */
    /*
    #rincian_tagihan_table_wrapper .table th:nth-child(3), 
    #rincian_tagihan_table_wrapper .table td:nth-child(3),
    #rincian_tagihan_table_wrapper .table th:nth-child(4), 
    #rincian_tagihan_table_wrapper .table td:nth-child(4) {
        display: none;
    }
    */

    .alert-success .btn-sm,
    .alert-success .btn-info {
        width: 100%;
        margin-bottom: 0.3rem;
        font-size: 0.8rem;
    }
    .alert-success small { display: none; } 

    .alert-dark[role="alert"] {
        font-size: 0.85rem;
        padding: 0.5rem !important; 
    }
    .alert-dark[role="alert"] .fa-lg {
        font-size: 1em; 
    }

/* Mobile minimized state: narrow icon-only menu */
@media (max-width: 576px) {
    .mobile-minimized #sidebar-wrapper {
        width: 72px !important;
        transform: translateX(0) !important; /* keep visible */
    }
    .mobile-minimized #page-content-wrapper { padding-left: 72px !important; }
    .mobile-minimized .sidebar .nav-link { justify-content: center !important; padding: 0.6rem 0.3rem !important; }
    .mobile-minimized .sidebar .nav-link i { margin-right: 0 !important; }
    .mobile-minimized .sidebar .nav-link .nav-text { display: none !important; }
    .mobile-minimized .sidebar .nav .submenu-item a { justify-content: center; }
    .mobile-minimized .sidebar .sidebar-heading h5,
    .mobile-minimized .sidebar #digital-clock,
    .mobile-minimized .sidebar #date-display,
    .mobile-minimized .sidebar .app-credit {
        display: none !important;
    }
    /* show minimize toggle button on mobile when supported */
    #mobile-minimize-toggle.d-none { display: inline-block !important; }
}

/* --------------------------------------------------------------
   MOBILE OFFCANVAS (APP-LIKE) STYLES
   Applied to #mobileOffcanvas and the cloned #mobile-sidebar-clone
   -------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Offcanvas header styling */
    #mobileOffcanvas .offcanvas-header {
        background: linear-gradient(90deg, #0d6efd 0%, #283645 100%);
        color: #fff;
        border-bottom: none;
        padding: 0.75rem 1rem;
    }
    #mobileOffcanvas .offcanvas-title {
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 0.2px;
    }

    /* Offcanvas body contains the cloned sidebar - restyle it to look like a modern mobile menu */
    #mobileOffcanvasBody { background: transparent; padding: 0.75rem; }
    #mobileOffcanvasBody #mobile-sidebar-clone {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 14px;
        padding: 0.6rem;
        box-shadow: 0 10px 30px rgba(16,24,40,0.12);
        overflow: hidden;
    }

    /* Sidebar header inside offcanvas */
    #mobile-sidebar-clone .sidebar-heading {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 0.6rem;
        background: transparent;
    }
    #mobile-sidebar-clone .sidebar-heading h5 { margin: 0; color: #0b2540; font-size: 1.05rem; font-weight: 700; }

    /* User clock/date area - more subtle */
    #mobile-sidebar-clone #digital-clock { font-size: 1.25rem; color: #0b2540; }
    #mobile-sidebar-clone #date-display { font-size: 0.82rem; color: #6c7a89; }

    /* Nav list modern look */
    #mobile-sidebar-clone .nav { gap: 6px; }
    #mobile-sidebar-clone .nav .nav-item { margin-bottom: 6px; }
    #mobile-sidebar-clone .nav .nav-link {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 10px; border-radius: 10px; color: #0b2540;
        transition: background .18s ease, transform .12s ease;
    }
    #mobile-sidebar-clone .nav .nav-link i { 
        width: 44px; height: 44px; min-width:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
        background: rgba(13,110,253,0.08); color: #0d6efd; font-size:1.05rem;
        box-shadow: 0 2px 6px rgba(13,110,253,0.06) inset;
    }
    #mobile-sidebar-clone .nav .nav-link .nav-text { font-weight:600; color: #071428; }

    /* Hover & active */
    #mobile-sidebar-clone .nav .nav-link:hover { background: rgba(13,110,253,0.04); transform: translateY(-1px); }
    #mobile-sidebar-clone .nav .nav-link.active, #mobile-sidebar-clone .nav .nav-link.active-submenu {
        background: linear-gradient(90deg, rgba(13,110,253,0.12), rgba(13,110,253,0.06));
        box-shadow: 0 6px 18px rgba(13,110,253,0.06);
        color: #0b2540;
    }

    /* Submenu: slightly indented cards */
    #mobile-sidebar-clone .collapse .nav .submenu-item a {
        padding-left: 18px; border-radius: 8px; display:block;
    }

    /* Footer credit smaller */
    #mobile-sidebar-clone .app-credit { display:block; margin-top: 8px; padding: 8px; background: transparent; color: #6c7a89; font-weight:600; border-radius:8px; text-align:center; }

    /* Make sure offcanvas close button stands out */
    #mobileOffcanvas .btn-close { filter: brightness(1.2); }
}

/* Idle modal visual tweaks */
#idleWarnModal .modal-content {
    background: #ffffff; /* white card */
    color: #212529; /* dark text */
    border-radius: 12px;
    padding: 12px;
}
#idleWarnModal .modal-body p { font-size: 1rem; }
#idleWarnModal .modal-body #idle-countdown { font-weight: 700; font-size: 1.6rem; color: #d63384; }

@media (max-width: 576px) {
    #idleWarnModal .modal-content { margin: 0.5rem; }
    #idleWarnModal .modal-body #idle-countdown { font-size: 2.2rem; }
}

/* Custom overlay for idle warning */
#idleWarnOverlay { position: fixed; inset: 0; z-index: 22000; display: flex; align-items: center; justify-content: center; }
#idleWarnOverlay .idle-overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); }
#idleWarnOverlay .idle-overlay-card { position: relative; z-index: 22010; background: #fff; color: #111; padding: 28px; border-radius: 12px; text-align: center; max-width: 520px; width: calc(100% - 40px); box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
#idleWarnOverlay h2 { margin-bottom: 6px; font-size: 1.6rem; }
#idleWarnOverlay .lead { color: #6c757d; margin-bottom: 12px; }
#idleWarnOverlay #idle-countdown-big { font-size: 3.4rem; font-weight: 700; color: #d63384; margin-bottom: 12px; }
#idleWarnOverlay .btn { min-width: 140px; }

@media (max-width: 420px) {
    #idleWarnOverlay #idle-countdown-big { font-size: 2.6rem; }
}

/* Styles for mobile cards converted from tabelNilaiTunggakan */
@media (max-width: 576px) {
    .tunggakan-cards { margin-top: 0.5rem; }
    .tunggakan-card .card-body { padding: 0.75rem; }
    .tunggakan-card h5 { font-size: 1rem; margin-bottom: 0.2rem; }
    .tunggakan-card .small { font-size: 0.78rem; }
    .tunggakan-detail div { border-top: 1px dashed rgba(0,0,0,0.06); padding-top: 6px; margin-top: 6px; }
}