/* ==========================================================================
   🎨 DESIGN SYSTEM - ENTERPRISE NEW DESIGN SYSTEM (MANDATORY REDESIGN)
   ========================================================================== */

:root {
    --bg-main: #F8FAFC;
    --text-heading: #0F172A;
    --text-body: #334155;
    --text-secondary: #64748B;
    --border-color: #E2E8F0;
    
    /* Sidebar Theme (Identitas Utama) */
    --sidebar-bg: #1E3A8A;
    --sidebar-hover: #2563EB;
    --sidebar-active: #3B82F6;
    --sidebar-text: #FFFFFF;
    --sidebar-icon: #FFFFFF;
    --sidebar-divider: rgba(255, 255, 255, 0.08);

    /* Aksen Warna */
    --primary-color: #2563EB;
    --success-color: #16A34A;
    --warning-color: #F59E0B;
    --danger-color: #DC2626;
    --info-color: #0EA5E9;
}

/* --- 1. Global & Typography (Inter Font) --- */
body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--bg-main) !important;
    color: var(--text-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

h1, .h1 {
    font-size: 34px !important; /* Judul Dashboard 34px */
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    margin-bottom: 24px !important; /* Jarak heading ke card 24px */
}

h2, .h2 {
    font-size: 28px !important; /* Heading 28px */
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    margin-bottom: 24px !important;
}

h3, .h3 {
    font-size: 22px !important; /* Subheading 22px */
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    margin-bottom: 16px !important;
}

h6, .card-title, .card-header h6 {
    font-size: 18px !important; /* Card Title 18px */
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    margin-bottom: 0 !important;
}

/* --- 2. Sidebar (Identitas Utama Website) --- */
#accordionSidebar {
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

.sidebar .sidebar-brand {
    height: auto !important;
    padding: 32px 20px !important; /* Padding atas & bawah yang cukup */
    text-transform: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid var(--sidebar-divider) !important;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
}

.sidebar .sidebar-brand .sidebar-brand-icon {
    font-size: 24px !important;
    color: #FFFFFF !important;
    margin-right: 12px !important;
}

.sidebar .sidebar-brand .sidebar-brand-text {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.sidebar-heading {
    padding: 0 24px 8px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
}

.sidebar .nav-item {
    margin: 6px 16px !important; /* Menu tidak terlalu rapat */
}

.sidebar .nav-item .nav-link {
    font-size: 16px !important; /* Sidebar 16px */
    font-weight: 500 !important;
    padding: 12px 16px !important;
    color: var(--sidebar-text) !important;
    border-radius: 10px !important; /* Border radius 10px */
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out !important;
    border-left: 4px solid transparent !important;
}

.sidebar .nav-item .nav-link i {
    font-size: 18px !important;
    color: var(--sidebar-icon) !important;
    margin-right: 12px !important;
    transition: color 0.2s ease-in-out;
    opacity: 0.90 !important; /* Icon 90% opacity */
}

/* Hover Menu */
.sidebar .nav-item .nav-link:hover {
    background-color: var(--sidebar-hover) !important; /* #2563EB */
    color: #FFFFFF !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    border-radius: 10px !important;
}

.sidebar .nav-item .nav-link:hover i {
    color: #FFFFFF !important;
    opacity: 1.0 !important;
}

/* Menu Aktif */
.sidebar .nav-item.active .nav-link {
    background-color: var(--sidebar-active) !important; /* #3B82F6 */
    color: #FFFFFF !important; /* Text putih */
    font-weight: 600 !important;
    border-left: 4px solid #FFFFFF !important; /* Garis indikator di sisi kiri */
    border-radius: 10px !important;
}

.sidebar .nav-item.active .nav-link i {
    color: #FFFFFF !important; /* Icon putih */
    opacity: 1.0 !important;
}

.sidebar-divider {
    border-top: 1px solid var(--sidebar-divider) !important;
    margin: 12px 0 !important;
}

/* Submenu (Master Data & Absensi) */
.sidebar .collapse-inner {
    background-color: transparent !important; /* No container background */
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

.sidebar .collapse-inner .collapse-item {
    font-size: 15px !important;
    padding: 10px 14px !important;
    margin: 2px 0 2px 16px !important; /* Indentasi 16px dari kiri */
    color: #FFFFFF !important; /* Teks putih */
    background-color: transparent !important;
    border-radius: 10px !important; /* Border Radius 10px */
    transition: all 0.2s ease !important;
    display: block;
    border-left: none !important;
}

.sidebar .collapse-inner .collapse-item:hover {
    background-color: var(--sidebar-hover) !important; /* Hover background #2563EB */
    color: #FFFFFF !important;
}

.sidebar .collapse-inner .collapse-item.active {
    background-color: var(--sidebar-active) !important; /* Menu aktif submenu background #3B82F6 */
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* --- 3. Navbar (Putih, Border Bawah Tipis, Shadow Ringan) --- */
.navbar.topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    height: 70px !important;
    padding: 0 32px !important;
}

.navbar.topbar .nav-link {
    color: var(--text-body) !important;
    font-size: 16px !important; /* Navbar 16px */
}

.navbar.topbar .img-profile {
    height: 40px !important;
    width: 40px !important;
    border: 1px solid var(--border-color);
}

/* --- 4. Content Area Layout (Professional Grid & Spacing) --- */
#wrapper #content-wrapper {
    padding-left: 32px !important; /* Jarak sidebar ke content 32px */
    padding-right: 32px !important;
    background-color: var(--bg-main) !important;
}

.container-fluid {
    padding: 32px 0 !important; /* Padding halaman 32px terhadap seluruh sisi browser */
}

/* Jarak antar section */
.section-gap {
    margin-bottom: 32px !important;
}

/* --- 5. Card (Putih, Border Tipis, Radius 14px, Shadow Ringan) --- */
.card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    overflow: hidden; /* Clips bg-primary header to border-radius */
    padding: 0 !important; /* Padding dikelola oleh card-header & card-body */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 16px 24px !important; /* Desktop: header melebar penuh dengan padding yang benar */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    margin-bottom: 0 !important;
}

.card-body {
    padding: 20px 24px !important; /* Desktop: spacing konten card */
}

/* --- 6. Form Styling (Label di atas input, Input min tinggi 46px, Margin antar field 20px) --- */
.form-group {
    margin-bottom: 20px !important; /* Margin antar field 20px */
}

.form-group label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 8px !important; /* Label berada di atas input */
    display: inline-block;
}

.form-control, select.form-control {
    height: 48px !important; /* Input tinggi minimal 46px */
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px 16px !important;
    font-size: 16px !important; /* Isi 16px */
    color: var(--text-body) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 1px !important;
}

/* --- 7. Table Styling (UX & Row Spacing) --- */
.table-responsive {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #FFFFFF;
    overflow: hidden; /* Clips table rows to border-radius */
    margin-top: 0;
}

.table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

.table th {
    background-color: #F8FAFC !important; /* Sedikit abu */
    color: var(--text-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 20px 24px !important; /* Padding Header 20px */
    border-bottom: 2px solid var(--border-color) !important;
    border-top: none !important;
}

.table td {
    padding: 18px 24px !important; /* Padding Body 18px */
    vertical-align: middle !important; /* Vertical align center */
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 16px !important; /* Table text 16px */
    color: var(--text-body) !important;
}

.table-hover tbody tr:hover {
    background-color: #F1F5F9 !important; /* Hover row */
}

/* Tata letak Area Filter/Search diatas Table */
.filter-action-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px; /* Jarak filter/search ke table 20px */
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kolom Action Buttons dengan Spacing */
.table .btn-group .btn {
    margin-right: 8px !important;
}

.table .btn-group .btn:last-child {
    margin-right: 0 !important;
}

/* --- 8. Buttons (Tinggi 44-46px, Radius 10px, Icon + Text dengan Spacing) --- */
.btn {
    height: 46px !important; /* Button tinggi 44-46px */
    font-size: 16px !important; /* Button 16px */
    font-weight: 600 !important;
    border-radius: 10px !important; /* Radius 10px */
    padding: 10px 24px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

.btn-sm {
    height: 38px !important;
    font-size: 14px !important;
    padding: 6px 16px !important;
}

.btn i {
    font-size: 16px !important;
    margin-right: 8px !important; /* Spacing icon rapi */
}

/* Focus outlines for Accessibility */
.btn:focus, select:focus, a:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Color theme mappings */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover {
    background-color: #1D4ED8 !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: #FFFFFF !important;
}
.btn-success:hover {
    background-color: #15803D !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #FFFFFF !important;
}
.btn-warning:hover {
    background-color: #D97706 !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #FFFFFF !important;
}
.btn-danger:hover {
    background-color: #B91C1C !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: #FFFFFF !important;
}
.btn-info:hover {
    background-color: #0284C7 !important;
}

/* --- 9. Alerts --- */
.alert {
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
}

.alert-success {
    background-color: #DCFCE7 !important;
    color: #14532D !important;
}

.alert-danger {
    background-color: #FEE2E2 !important;
    color: #7F1D1D !important;
}

.alert-warning {
    background-color: #FEF3C7 !important;
    color: #78350F !important;
}

.alert-info {
    background-color: #E0F2FE !important;
    color: #0C4A6E !important;
}

/* ==========================================================================
   🖥️ DESKTOP SUPPLEMENTARY — Kasus Khusus Desktop
   ========================================================================== */

/* --- btn-block: tombol full-width dalam form --- */
.btn-block {
    width: 100%;
    display: flex !important;
}

/* --- btn-icon-split: tombol dengan ikon terpisah (SB Admin 2) --- */
.btn-icon-split {
    padding: 0 !important;
    overflow: hidden;
    display: inline-flex !important;
}

.btn-icon-split .icon {
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 100%;
    min-width: 44px;
    flex-shrink: 0;
}

.btn-icon-split .text {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* --- Stat Cards Dashboard (border-left-*) --- */
.card.border-left-primary,
.card.border-left-success,
.card.border-left-info,
.card.border-left-warning {
    overflow: visible !important; /* Allow border-left to be visible */
}

/* --- Page Header Section (title + action button) --- */
.d-sm-flex.align-items-center.justify-content-between {
    margin-bottom: 24px;
}

/* --- Content Wrapper Desktop: sidebar + content layout --- */
@media (min-width: 1025px) {
    #wrapper {
        display: flex;
    }

    #accordionSidebar {
        width: 270px !important;
        min-width: 270px !important;
    }

    #content-wrapper {
        flex: 1;
        min-width: 0; /* prevent overflow */
    }

    /* Table-responsive inside padded card-body: clean top separator */
    .card-body > .table-responsive {
        margin-left: -24px;
        margin-right: -24px;
        margin-bottom: -20px;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
        margin-top: 16px;
    }

    /* Filter area above table: restore horizontal layout */
    .filter-action-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }

    .filter-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .filter-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Restore btn width — desktop buttons should NOT be 100% by default */
    .btn {
        width: auto;
    }

    /* Only btn-block should be 100% */
    .btn.btn-block {
        width: 100% !important;
    }
}

/* ==========================================================================
   📶 TABLET OPTIMIZATIONS (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    #wrapper {
        display: flex;
    }

    #content-wrapper {
        flex: 1;
        min-width: 0;
    }

    /* --- Hide Original Desktop Sidebar on Tablets --- */
    #accordionSidebar {
        display: none !important;
    }

    /* --- Show Hamburger Toggle Button on Tablets --- */
    #sidebarToggleTop {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        color: var(--primary-color) !important;
        background-color: #F1F5F9;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    #sidebarToggleTop:hover,
    #sidebarToggleTop:focus {
        background-color: #E2E8F0;
        text-decoration: none;
    }

    /* --- Tablet Sidebar Drawer --- */
    #tablet-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: var(--sidebar-bg);
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    }

    /* Portrait Width (300px) */
    @media (orientation: portrait) {
        #tablet-sidebar {
            width: 300px !important;
        }
    }

    /* Landscape Width (330px - 340px) */
    @media (orientation: landscape) {
        #tablet-sidebar {
            width: 330px !important;
        }
    }

    #tablet-sidebar.open {
        transform: translateX(0);
    }

    /* --- Tablet Sidebar Overlay --- */
    #tablet-sidebar-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(15, 23, 42, 0.4); /* Slate background with ~40% opacity */
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    #tablet-sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Lock Body Scroll when Drawer Open --- */
    body.tablet-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    /* --- Header Drawer --- */
    .tablet-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--sidebar-divider);
        background-color: rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .tablet-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 700;
    }

    .tablet-sidebar-brand i {
        font-size: 22px;
    }

    .tablet-sidebar-close-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: #FFFFFF;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s;
        outline: none !important;
    }

    .tablet-sidebar-close-btn:hover,
    .tablet-sidebar-close-btn:focus {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* --- Menu List di Drawer --- */
    .tablet-sidebar-menu {
        list-style: none;
        padding: 12px 16px;
        margin: 0;
        flex: 1;
    }

    .tablet-sidebar-menu .nav-item {
        margin: 6px 0 !important;
        list-style: none;
    }

    .tablet-sidebar-menu .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 16px;
        padding: 14px 16px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        color: var(--sidebar-text) !important;
        text-decoration: none !important;
        transition: background-color 0.2s, color 0.2s;
    }

    .tablet-sidebar-menu .nav-link i {
        font-size: 20px !important; /* Visual 24px container size equivalent */
        width: 24px;
        text-align: center;
        color: var(--sidebar-icon) !important;
        flex-shrink: 0;
    }

    .tablet-sidebar-menu .nav-link span {
        font-size: 16px !important;
        font-weight: 500;
    }

    .tablet-sidebar-menu .nav-link:hover,
    .tablet-sidebar-menu .nav-link:focus {
        background-color: var(--sidebar-hover) !important;
        color: #FFFFFF !important;
    }

    .tablet-sidebar-menu .nav-item.active .nav-link {
        background-color: var(--sidebar-active) !important;
        color: #FFFFFF !important;
        font-weight: 600;
    }

    /* Divider */
    .tablet-divider {
        border-top: 1px solid var(--sidebar-divider);
        margin: 12px 0;
        list-style: none;
    }

    /* Submenu collapse */
    .tablet-submenu {
        list-style: none;
        padding: 4px 0 4px 40px !important;
        margin: 0;
    }

    .tablet-submenu .collapse-item {
        display: block !important;
        padding: 10px 16px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        font-size: 15px !important;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .tablet-submenu .collapse-item:hover,
    .tablet-submenu .collapse-item:focus {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #FFFFFF !important;
    }

    .tablet-submenu .collapse-item.active {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #FFFFFF !important;
        font-weight: 600;
    }

    /* Prevent content wrapper padding leak */
    #wrapper #content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .container-fluid {
        padding: 24px 0 !important;
    }

    /* Stats Cards in Dashboard: ensure 2 columns spacing */
    .row .col-xl-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


/* ==========================================================================
   📱 ANDROID MOBILE UI SYSTEM — Material Design 3
   Target: Pengguna Sekolah Usia 40–60 Tahun
   ========================================================================== */


/* --------------------------------------------------------
   LOCK BODY SCROLL SAAT DRAWER TERBUKA
   -------------------------------------------------------- */
body.drawer-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* --------------------------------------------------------
   SEMBUNYIKAN DESKTOP SIDEBAR DI MOBILE
   -------------------------------------------------------- */
@media (max-width: 767px) {
    #accordionSidebar {
        display: none !important;
    }
}

/* =========================================================
   ANDROID TOP APP BAR (Material Design 3)
   ========================================================= */
#android-appbar {
    display: none; /* Hanya tampil di mobile via JS */
}

@media (max-width: 767px) {
    #android-appbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background-color: #1E3A8A;
        z-index: 1030;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .android-appbar-inner {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 8px 0 4px;
        gap: 4px;
    }

    .android-appbar-nav-btn,
    .android-appbar-action-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 20px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.2s ease;
        -webkit-tap-highlight-color: rgba(255,255,255,0.15);
    }

    .android-appbar-nav-btn:active,
    .android-appbar-action-btn:active {
        background: rgba(255, 255, 255, 0.15);
    }

    .android-appbar-title {
        flex: 1;
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        margin: 0 !important;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2 !important;
    }

    .android-appbar-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }

    /* Sembunyikan topbar desktop */
    .navbar.topbar {
        display: none !important;
    }

    /* Geser seluruh content ke bawah appbar dan di atas bottom nav */
    #content-wrapper {
        padding-top: 64px !important;
        padding-bottom: 96px !important;
    }

    #wrapper #content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container-fluid {
        padding: 16px 16px 96px 16px !important;
    }

    footer.sticky-footer {
        margin-bottom: 72px !important;
    }
}

/* =========================================================
   NAVIGATION DRAWER — Slide dari Kiri (Material Design 3)
   ========================================================= */
#android-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* Lebar spesifik Android (Diatur pas untuk kenyamanan membaca lansia & gaptek) */
    width: min(290px, 82vw) !important;
    background-color: #1c3474 !important;
    background-image: linear-gradient(180deg, #1d367d 0%, #172a60 100%) !important;
    background-size: cover;
    z-index: 1060;
    transform: translateX(-105%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    border-radius: 0 20px 20px 0;
}

#android-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none;
}

@media (max-width: 767px) {
    #android-drawer {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #android-drawer-overlay {
        display: block;
    }

    #android-drawer.open {
        transform: translateX(0);
    }

    #android-drawer-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* FORCING SIDEBAR STYLES ON ANDROID DRAWER */
    #android-drawer .sidebar {
        width: 100% !important;
        min-height: 100% !important;
        background: transparent !important;
        padding: 0.5rem 0.5rem 2rem 0.5rem !important;
    }

    /* Fixed/Sticky Brand Header */
    #android-drawer .sidebar .sidebar-brand {
        position: sticky !important;
        top: 0;
        z-index: 1020 !important;
        background-color: #1d367d !important;
        padding: 1.25rem 1rem !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin-bottom: 0.75rem !important;
    }

    #android-drawer .sidebar .sidebar-brand .sidebar-brand-icon {
        font-size: 1.8rem !important;
        color: #ffffff !important;
        margin-right: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    #android-drawer .sidebar .sidebar-brand .sidebar-brand-text {
        display: block !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
        text-align: left !important;
        letter-spacing: 0.2px !important;
    }

    /* Category Headings (MASTER DATA, PRESENSI, SISTEM) */
    #android-drawer .sidebar .sidebar-heading {
        color: #8fa7e8 !important;
        font-weight: 700 !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        padding: 1.25rem 1rem 0.5rem 1rem !important;
        text-align: left !important;
    }

    /* Divider Lines */
    #android-drawer .sidebar .sidebar-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 0.75rem 0.5rem !important;
    }

    /* Navigation Items Container */
    #android-drawer .sidebar .nav-item {
        margin: 0.35rem 0.5rem !important;
    }

    /* Menu Link styling - High contrast, left-aligned & large touch target for 50+ gaptek users */
    #android-drawer .sidebar .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0.9rem 1.1rem !important;
        min-height: 52px !important; /* Area tekan lapang (touch target 52px+) */
        border-radius: 12px !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 1.05rem !important; /* Teks besar & jelas */
        transition: all 0.2s ease !important;
        position: relative !important;
        background: transparent;
    }

    /* Touch / Hover state */
    #android-drawer .sidebar .nav-item .nav-link:hover,
    #android-drawer .sidebar .nav-item .nav-link:focus,
    #android-drawer .sidebar .nav-item .nav-link:active {
        background-color: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* ACTIVE ITEM - Tombol Pill Biru Terang dengan Aksesibilitas Tinggi & Indikator Putih di Sisi Kiri */
    #android-drawer .sidebar .nav-item.active .nav-link {
        background-color: #3b82f6 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45) !important;
        padding-left: 1.3rem !important;
    }

    /* Aksen putih vertical di sisi kiri tombol aktif (Sesuai persis dengan gambar referensi) */
    #android-drawer .sidebar .nav-item.active .nav-link::before {
        content: '' !important;
        position: absolute !important;
        left: 4px !important;
        top: 15% !important;
        bottom: 15% !important;
        width: 7px !important;
        background-color: #ffffff !important;
        border-radius: 4px !important;
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.6) !important;
    }

    /* Icon styling */
    #android-drawer .sidebar .nav-item .nav-link i {
        font-size: 1.25rem !important;
        width: 28px !important;
        text-align: center !important;
        margin-right: 0.85rem !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }

    #android-drawer .sidebar .nav-item .nav-link span {
        font-size: 1.05rem !important;
        display: inline-block !important;
        text-align: left !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        flex-grow: 1 !important;
    }

    /* Submenu Expand Arrow Indicator (">" saat tertutup, "v" saat terbuka) */
    #android-drawer .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        display: inline-block !important;
        width: 1.2rem !important;
        text-align: center !important;
        float: right !important;
        vertical-align: middle !important;
        border: 0 !important;
        font-weight: 900 !important;
        content: '\f107' !important; /* Arrow down */
        font-family: 'Font Awesome 5 Free' !important;
        color: #ffffff !important;
        font-size: 1.1rem !important;
        transition: transform 0.2s ease !important;
    }

    #android-drawer .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105' !important; /* Chevron Right ">" persis seperti gambar referensi */
    }

    /* Submenu Container (Master Data Dropdown) */
    #android-drawer .sidebar .nav-item .collapse {
        position: relative !important;
        left: 0 !important;
        z-index: 1 !important;
        top: 0 !important;
        box-shadow: none !important;
        animation: none !important;
    }

    #android-drawer .sidebar .nav-item .collapse .collapse-inner {
        border-radius: 12px !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
        background-color: rgba(0, 0, 0, 0.25) !important;
        padding: 0.5rem 0.25rem !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.5rem !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #android-drawer .sidebar .nav-item .collapse .collapse-inner .collapse-item {
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 0.8rem 1rem 0.8rem 2.2rem !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        border-radius: 8px !important;
        margin: 0.2rem 0.25rem !important;
        transition: all 0.2s ease !important;
    }

    #android-drawer .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
    #android-drawer .sidebar .nav-item .collapse .collapse-inner .collapse-item:focus {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    #android-drawer .sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
        background-color: #3b82f6 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* Logout Button Styling - High visibility for 50+ gaptek users */
    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"] {
        background-color: rgba(239, 68, 68, 0.18) !important;
        border: 1px solid rgba(239, 68, 68, 0.4) !important;
        color: #ff8a8a !important;
        margin-top: 0.75rem !important;
    }

    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"] i {
        color: #ff8a8a !important;
    }

    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"] span {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"]:hover,
    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"]:focus,
    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"]:active {
        background-color: #dc2626 !important;
        color: #ffffff !important;
    }

    #android-drawer .sidebar .nav-item [id*="drawer-logout-btn"]:hover i {
        color: #ffffff !important;
    }
}

/* =========================================================
   BOTTOM NAVIGATION BAR (Material Design 3)
   ========================================================= */
#android-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    #android-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 72px;
        background-color: #FFFFFF;
        border-top: 1px solid #E2E8F0;
        z-index: 1020;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        align-items: stretch;
        justify-content: space-around;
    }

    .android-bottom-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: transparent;
        border: none;
        color: #64748B;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 4px;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    .android-bottom-tab i {
        font-size: 22px;
        line-height: 1;
    }

    .android-bottom-tab span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: 10px;
    }

    .android-bottom-tab.active {
        color: #1E3A8A;
    }

    .android-bottom-tab.active i {
        font-size: 24px;
    }

    .android-bottom-tab:active {
        background-color: rgba(30, 58, 138, 0.08);
    }
}

/* =========================================================
   LAYOUT & TYPOGRAPHY — ANDROID RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
    /* Page Header */
    .d-sm-flex.align-items-center.justify-content-between.mb-4 {
        margin-bottom: 16px !important;
    }

    h1.h3 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    h2, .h2 {
        font-size: 20px !important;
    }

    h3, .h3 {
        font-size: 18px !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 13px !important;
        padding: 4px 0 !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   CARDS — Android Material Card Style
   ========================================================= */
@media (max-width: 767px) {
    .card {
        border-radius: 14px !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        overflow: hidden;
    }

    /* Card header — responsive alignment */
    .card-header {
        padding: 14px 18px !important;
        border-bottom: 1px solid #E2E8F0 !important;
        margin-bottom: 0 !important;
        background-color: #FFFFFF !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .card-header h6,
    .card-header .card-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
        color: var(--text-heading) !important;
    }

    /* Tombol di dalam card-header → auto width, tidak stretch */
    .card-header .btn {
        width: auto !important;
        flex: 0 0 auto !important;
        height: 40px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    /* Grup tombol di header → tetap inline */
    .card-header .d-flex {
        flex-shrink: 0;
    }
}

/* =========================================================
   BUTTONS — Android Touch Target (min 48dp)
   ========================================================= */
@media (max-width: 767px) {
    /* Reset btn-block & 100% width yang merusak layout */
    .btn {
        min-height: 48px !important;
        font-size: 15px !important;
        padding: 10px 20px !important;
        border-radius: 10px !important;
    }

    .btn.btn-icon-split {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .btn.btn-icon-split .icon {
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .btn.btn-icon-split .text {
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    /* KHUSUS tombol di dalam form/card body → full width */
    .card-body .btn,
    .tab-content .btn,
    .tab-pane .btn,
    form .btn,
    .btn-block {
        width: 100% !important;
        display: flex !important;
        box-sizing: border-box !important;
        margin-top: 4px;
    }

    form {
        width: 100% !important;
        display: block !important;
    }

    /* Tombol dalam card-header → JANGAN full width */
    .card-header .btn,
    .d-flex .btn,
    .align-items-center .btn,
    .btn-group .btn {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Tombol export PDF/Excel yang berderet */
    .card-header .d-flex.align-items-center .btn {
        width: auto !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .btn-sm {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 6px 14px !important;
    }

    /* btn-block dalam form → tetap 100% */
    .btn-block {
        width: 100% !important;
        display: flex !important;
    }

    /* Button grup jadi baris vertikal jika standalone */
    .d-flex.mt-3 > .btn,
    .d-flex.mt-4 > .btn {
        flex: 1;
        min-width: 0;
    }
}

/* =========================================================
   FORMS — Android Input Style (Material Design 3)
   ========================================================= */
@media (max-width: 767px) {
    .form-group {
        margin-bottom: 20px !important;
    }

    .form-group label {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .form-control,
    select.form-control,
    textarea.form-control {
        height: 52px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        border: 1.5px solid #CBD5E1 !important;
        background-color: #FFFFFF !important;
    }

    textarea.form-control {
        height: auto !important;
        min-height: 100px !important;
    }

    .form-control:focus {
        border-color: #2563EB !important;
        outline: 3px solid rgba(37, 99, 235, 0.2) !important;
        outline-offset: 0 !important;
    }

    /* Checkbox & Radio yang mudah ditekan */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        cursor: pointer;
        margin-right: 8px !important;
        vertical-align: middle;
    }

    .form-check-label {
        font-size: 16px !important;
        vertical-align: middle;
        cursor: pointer;
    }

    .form-check {
        padding-left: 4px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Filter action area — stack vertikal */
    .filter-action-area {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .filter-left,
    .filter-right {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .filter-left .form-control,
    .filter-right .form-control,
    .filter-left select,
    .filter-right select,
    .filter-left .btn,
    .filter-right .btn {
        width: 100% !important;
    }
}

/* =========================================================
   TABLE → ANDROID CARD LIST (Konversi Otomatis via JS)
   ========================================================= */
@media (max-width: 767px) {
    .table-responsive {
        border: none !important;
        background: transparent !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    /* Force tables in mobile viewport to have a minimum width to fit columns nicely */
    .table-responsive .table {
        min-width: 850px !important;
        width: 100% !important;
    }

    /* Prevent cells text wrapping to preserve clean horizontal alignment */
    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap !important;
        vertical-align: middle !important;
        padding: 14px 16px !important; /* Touch-friendly padding */
    }

    /* Card list yang dihasilkan JS */
    .android-card-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 8px;
    }

    .android-list-card {
        background-color: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #E2E8F0;
        padding: 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        position: relative;
        overflow: hidden;
    }

    .alc-badge-num {
        position: absolute;
        top: 12px;
        right: 12px;
        background-color: #EFF6FF;
        color: #1E3A8A;
        font-size: 12px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
    }

    /* Baris primary (label + nilai utama) */
    .alc-primary {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #F1F5F9;
    }

    .alc-primary-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #94A3B8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .alc-primary-value {
        display: block;
        font-size: 17px;
        font-weight: 700;
        color: #0F172A;
        line-height: 1.3;
    }

    /* Secondary rows */
    .alc-secondary {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .alc-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        border-bottom: 1px dashed #F1F5F9;
        gap: 8px;
    }

    .alc-row:last-child {
        border-bottom: none;
    }

    .alc-label {
        font-size: 13px;
        font-weight: 600;
        color: #64748B;
        flex-shrink: 0;
        max-width: 44%;
    }

    .alc-value {
        font-size: 14px;
        font-weight: 600;
        color: #1E293B;
        text-align: right;
        word-break: break-word;
        max-width: 56%;
    }

    /* Action buttons di card list */
    .alc-actions {
        display: flex;
        gap: 8px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #F1F5F9;
        flex-wrap: wrap;
    }

    .alc-actions .btn,
    .alc-actions .android-action-btn {
        flex: 1;
        min-width: 80px;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   STATS CARDS (Dashboard Summary)
   ========================================================= */
@media (max-width: 767px) {
    /* Stat card grid: 2 kolom di mobile */
    .row .col-xl-3.col-md-6 {
        padding: 0 8px;
        margin-bottom: 16px;
    }

    .card.border-left-primary,
    .card.border-left-success,
    .card.border-left-info,
    .card.border-left-warning {
        padding: 12px 14px !important;
    }

    .card-body .text-xs {
        font-size: 11px !important;
    }

    .card-body .h5 {
        font-size: 22px !important;
    }
}

/* =========================================================
   BADGE / PILL STATUS
   ========================================================= */
@media (max-width: 767px) {
    .badge {
        font-size: 12px !important;
        padding: 5px 10px !important;
        border-radius: 20px !important;
    }
}

/* =========================================================
   ALERT / NOTIFICATION
   ========================================================= */
@media (max-width: 767px) {
    .alert {
        font-size: 15px !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
        line-height: 1.5;
    }
}

/* =========================================================
   PAGINATION
   ========================================================= */
@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
}

/* =========================================================
   MODAL — Android Bottom Sheet Style
   ========================================================= */
@media (max-width: 767px) {
    .modal-dialog {
        margin: auto 0 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
    }

    .modal-header {
        padding: 20px 20px 16px !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .modal-body {
        padding: 20px !important;
        font-size: 16px !important;
        line-height: 1.6;
    }

    .modal-footer {
        padding: 16px 20px 24px !important;
        gap: 12px;
        flex-direction: row;
        justify-content: stretch;
    }

    .modal-footer .btn {
        flex: 1;
        height: 52px !important;
        font-size: 16px !important;
    }

    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }
}

/* =========================================================
   SCROLL-TO-TOP BUTTON
   ========================================================= */
@media (max-width: 767px) {
    .scroll-to-top {
        bottom: 88px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* =========================================================
   MATERIAL DESIGN RIPPLE EFFECT
   ========================================================= */
.md-ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    animation: md-ripple-anim 0.6s linear;
    pointer-events: none;
    z-index: 0;
}

@keyframes md-ripple-anim {
    from {
        transform: scale(0);
        opacity: 0.5;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

/* =========================================================
   PRINT MEDIA — Sembunyikan UI Mobile saat Print
   ========================================================= */
@media print {
    #android-appbar,
    #android-drawer,
    #android-drawer-overlay,
    #android-bottom-nav,
    .mobile-mode-toggle-btn {
        display: none !important;
    }
}

/* =========================================================
   MODE UX 1: SIMPLE BUSINESS (Aksesibilitas Tinggi)
   ========================================================= */
body.mode-simple-business {
    font-size: 17px !important;
}

body.mode-simple-business .card {
    border: 2px solid #64748B !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}

body.mode-simple-business .card-header {
    border-bottom: 2px solid #64748B !important;
}

body.mode-simple-business .btn {
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.mode-simple-business .btn-primary {
    background-color: #0F172A !important;
    border-color: #0F172A !important;
}

body.mode-simple-business .btn-success {
    background-color: #15803D !important;
    border-color: #15803D !important;
}

body.mode-simple-business .btn-danger {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
}

body.mode-simple-business .form-control,
body.mode-simple-business select.form-control {
    border: 2px solid #64748B !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 500 !important;
}

body.mode-simple-business .form-control:focus {
    border-color: #0F172A !important;
    outline: 3px solid #0F172A !important;
}

body.mode-simple-business .form-group label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

body.mode-simple-business .table th {
    background-color: #E2E8F0 !important;
    color: #000000 !important;
    border-bottom: 3px solid #64748B !important;
    font-weight: 700 !important;
}

body.mode-simple-business .table td {
    color: #000000 !important;
    border-bottom: 2px solid #E2E8F0 !important;
    font-weight: 600 !important;
}

body.mode-simple-business .android-list-card {
    border: 2px solid #64748B !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.mode-simple-business .alc-label {
    color: #334155 !important;
    font-weight: 800 !important;
}

body.mode-simple-business .alc-value {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* =========================================================
   MODE UX 2: MODERN EDUCATION (Premium School Branding)
   ========================================================= */
body.mode-modern-education .card {
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
    box-shadow: 0 10px 25px rgba(30, 58, 138, 0.05), 0 2px 6px rgba(30, 58, 138, 0.02) !important;
    border-radius: 18px !important;
}

body.mode-modern-education .card-header {
    border-bottom: 1px solid rgba(37, 99, 235, 0.1) !important;
}

body.mode-modern-education .btn {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.mode-modern-education .btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1) !important;
}

body.mode-modern-education .btn-primary {
    background: linear-gradient(135deg, #1E3A8A, #3B82F6) !important;
    border: none !important;
    color: #FFFFFF !important;
}

body.mode-modern-education .btn-success {
    background: linear-gradient(135deg, #16A34A, #4ADE80) !important;
    border: none !important;
}

body.mode-modern-education .btn-danger {
    background: linear-gradient(135deg, #DC2626, #F87171) !important;
    border: none !important;
}

body.mode-modern-education .form-control,
body.mode-modern-education select.form-control {
    border: 1px solid #CBD5E1 !important;
    border-radius: 12px !important;
    background-color: #F8FAFC !important;
}

body.mode-modern-education .form-control:focus {
    background-color: #FFFFFF !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

body.mode-modern-education .table th {
    background-color: rgba(37, 99, 235, 0.04) !important;
    color: #1E3A8A !important;
    border-bottom: 2px solid rgba(37, 99, 235, 0.15) !important;
}

body.mode-modern-education .table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.02) !important;
}

body.mode-modern-education .android-list-card {
    border: 1px solid rgba(37, 99, 235, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.04) !important;
}

body.mode-modern-education .alc-label {
    color: var(--text-secondary);
}

body.mode-modern-education .alc-value {
    color: #1E3A8A !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE: HORIZONTAL SCROLLING TABLES
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Pastikan tidak ada scroll horizontal pada seluruh halaman */
    body, html {
        overflow-x: hidden !important;
    }
    
    /* Cegah text wrapping agar kolom tidak terjepit dan memicu scroll horizontal pada container .table-responsive */
    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap !important;
    }

    /* Spasial Footer & Scroll-To-Top yang rapi di atas Bottom Navigation Bar */
    footer.sticky-footer {
        padding-top: 1.25rem !important;
        padding-bottom: 90px !important;
        background-color: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .scroll-to-top {
        bottom: 86px !important;
        right: 14px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background-color: rgba(30, 58, 138, 0.88) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        z-index: 1030 !important;
    }
}

/* ==========================================================================
   LOGIN FORM INPUT FIELDS & PAGE OVERRIDES (Fix Overlay / Tertimpa Icon)
   ========================================================================== */
/* Sembunyikan Bottom Nav, Top Appbar, dan Drawer pada Halaman Login */
body.bg-gradient-primary #android-bottom-nav,
body.bg-gradient-primary #android-appbar,
body.bg-gradient-primary #android-drawer,
body.bg-gradient-primary #android-drawer-overlay,
.bg-gradient-primary #android-bottom-nav,
.bg-gradient-primary #android-appbar,
.bg-gradient-primary #android-drawer {
    display: none !important;
}

.login-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.login-input-group .input-icon-left,
form.user .login-input-group .input-icon-left {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    z-index: 20 !important;
    width: 18px !important;
    text-align: center !important;
}

body form.user .login-input-group input.form-control.login-input-field,
body .login-input-group input.form-control.login-input-field,
form.user .login-input-group input.login-input-field,
.login-input-group input.login-input-field {
    padding-left: 42px !important; /* Perfect clearance for left icon */
    padding-right: 14px !important;
    height: 46px !important;
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 0.9rem !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

body form.user .login-input-group input.form-control.login-input-field.has-eye-toggle,
body .login-input-group input.form-control.login-input-field.has-eye-toggle,
form.user .login-input-group input.login-input-field.has-eye-toggle {
    padding-right: 44px !important;
}

.login-input-group input.login-input-field::placeholder {
    color: #94a3b8 !important;
    opacity: 0.9 !important;
    font-size: 0.88rem !important;
}

body form.user .login-input-group input.form-control.login-input-field:focus,
.login-input-group input.form-control.login-input-field:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15) !important;
}

.login-input-group .btn-eye-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    border: none !important;
    background: transparent !important;
    z-index: 20 !important;
    font-size: 0.95rem !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   RESPONSIVE MOBILE LOGIN CARD (Scaled Up 3 Responsive Font Sizes)
   ========================================================================== */
.login-title {
    font-size: 1.22rem !important;
    letter-spacing: -0.2px !important;
}

.login-subtitle {
    font-size: 0.88rem !important;
}

@media (max-width: 575.98px) {
    .login-card-body {
        padding: 1.25rem 1.1rem !important;
    }
    .login-title {
        font-size: 1.15rem !important;
    }
    .login-subtitle {
        font-size: 0.84rem !important;
    }
}

    @media (max-width: 380px) {
    .login-card-body {
        padding: 1.1rem 0.95rem !important;
    }
    .login-title {
        font-size: 1.08rem !important;
    }
    .login-subtitle {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   📱 ANDROID MOBILE DASHBOARD & CONTAINER SPACING (Clean Margins & Padding)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Spasi & Padding di bawah Top Appbar (64px Appbar Height) */
    body.android-view #content-wrapper {
        padding-top: 64px !important;
    }

    body.android-view .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 16px !important;
        padding-bottom: 90px !important; /* Spasi di atas Bottom Navigation Bar */
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Page Header di HP */
    body.android-view .container-fluid > div:first-child.d-sm-flex {
        margin-bottom: 16px !important;
    }

    body.android-view h1, 
    body.android-view .h1,
    body.android-view .h3 {
        font-size: 1.35rem !important; /* ~21px */
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 4px !important;
    }

    body.android-view .text-gray-600 {
        font-size: 0.85rem !important;
        color: #64748b !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    body.android-view .breadcrumb {
        padding: 0 !important;
        background: transparent !important;
        font-size: 0.78rem !important;
        margin-bottom: 16px !important;
    }

    /* Card Spacing & Margin Rapi di HP */
    body.android-view .card {
        margin-bottom: 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid #e2e8f0 !important;
    }

    body.android-view .card-body {
        padding: 16px 18px !important;
    }
}

/* ==========================================================================
   TITLE & BUTTON OVERFLOW FIXES (Mobile Appbar & Action Buttons)
   ========================================================================== */
/* Title di Top App Bar HP WAJIB Putih (Cegah Teks Tersamar dengan Background Navy) */
#android-appbar .android-appbar-title,
body.android-view #android-appbar .android-appbar-title,
header#android-appbar h1.android-appbar-title,
header#android-appbar .android-appbar-title {
    color: #ffffff !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Header Page Action Buttons (Mencegah Button Overflow di HP) */
.header-page-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
}

.header-page-actions .btn {
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-size: 0.85rem !important;
}

@media (max-width: 575.98px) {
    .header-page-actions {
        width: 100% !important;
        margin-top: 8px !important;
        justify-content: flex-start !important;
    }
    .header-page-actions .btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   DATATABLES ENHANCEMENTS & NEAT LAYOUT
   ========================================================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right !important;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 14px !important;
    margin-left: 8px !important;
    font-size: 0.88rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    outline: none !important;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 4px 10px !important;
    margin: 0 6px !important;
    font-size: 0.88rem !important;
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

table.dataTable thead th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    position: relative !important;
    white-space: nowrap !important;
}

/* Fix DataTables Sort Icons overlap */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 32px !important;
}

table.dataTable thead th.no-sort:before,
table.dataTable thead th.no-sort:after {
    display: none !important;
}

table.dataTable tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    border-top: 1px solid #f1f5f9 !important;
}

table.dataTable tbody tr:hover {
    background-color: #f8fafc !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.85rem !important;
    color: #64748b !important;
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
}