/* user-style.css - Stylesheet untuk Modul User E-Presensi */
/* ============================================
           GOJEK NATIVE ANDROID DESIGN SYSTEM
           Gojek Green (#00AA13) + Material Design 3
           ============================================ */
:root {
    /* Primary — Gojek Signature Green */
    --primary: #00AA13;
    --primary-dark: #00880C;
    --primary-light: #E6F6E8;
    --primary-container: #F0FDF4;
    --primary-gradient: linear-gradient(135deg, #00AA13 0%, #00C853 100%);
    --on-primary: #ffffff;

    /* Secondary & Brand Colors (Go-Services Color Palette) */
    --secondary: #00AED6;
    /* Gojek Cyan / Blue */
    --accent: #FF5E00;
    /* Gojek Orange */
    --accent-light: #FFF0E6;

    /* Semantic Colors */
    --danger: #ED2736;
    /* Gojek Red */
    --danger-light: #FDEAEB;
    --warning: #FF9900;
    --warning-light: #FFF5E6;
    --success: #00AA13;
    --success-light: #E6F6E8;

    /* Surface / Background — Gojek Cool Grey Tones */
    --bg-app: #F9F9F9;
    --bg-card: #ffffff;
    --bg-surface1: #F0FDF4;
    --bg-surface2: #E6F6E8;
    --nav-bg: #ffffff;

    /* Text */
    --text-main: #101820;
    --text-primary: #101820;
    --text-muted: #687176;
    --text-secondary: #687176;

    /* Border / Divider */
    --border: #EAEAEA;

    /* Elevation Shadows (Gojek Soft Shadow) */
    --shadow-sm: 0 1px 4px rgba(0, 170, 19, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 14px rgba(0, 170, 19, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 170, 19, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);

    /* Radius System — Gojek Rounded Cards */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 100px;

    /* Bottom nav height */
    --nav-height: 70px;
}

[data-theme="dark"] {
    --primary: #00E676;
    --primary-dark: #00AA13;
    --primary-light: rgba(0, 230, 118, 0.18);
    --primary-container: rgba(0, 230, 118, 0.12);
    --primary-gradient: linear-gradient(135deg, #00E676 0%, #00AA13 100%);
    --on-primary: #0d1117;

    --secondary: #18FFFF;
    --accent: #FF6D00;
    --accent-light: rgba(255, 109, 0, 0.15);

    --danger: #FF5252;
    --danger-light: rgba(255, 82, 82, 0.15);
    --warning: #FFB74D;
    --warning-light: rgba(255, 183, 77, 0.12);
    --success: #00E676;
    --success-light: rgba(0, 230, 118, 0.12);

    --bg-app: #0D190E;
    --bg-card: #162518;
    --bg-surface1: #1C331E;
    --bg-surface2: #223D24;
    --nav-bg: #162518;

    --text-main: #F5F5F5;
    --text-primary: #F5F5F5;
    --text-muted: #9E9E9E;
    --text-secondary: #9E9E9E;

    --border: #243D27;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
           SCROLLING SYSTEM: Smooth scrolling with
           FIXED STICKY HEADER & FIXED BOTTOM NAV
           ============================================ */
html {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    user-select: none;
}

/* Izinkan seleksi teks di input/textarea agar tetap bisa diketik & di-copy */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}

/* Main container layout */
main {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Login section tetap bisa scroll saat keyboard muncul */
#loginSection {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Container dashboard */
#dashboardWrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* FIXED PROFILE HEADER (TETAP DIAM DI ATAS, TIDAK BISA TERSCROLL) */
#dashboardHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 990 !important;
    background: var(--bg-app) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* KONTEN DASHBOARD DI BAWAH HEADER */
#dashboardScroll {
    width: 100%;
    flex: 1;
    overflow-y: visible;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Padding atas memberi ruang persis agar tidak tertabrak header fixed */
    padding-top: 138px !important;
    /* Padding bawah memberi ruang agar tidak tertutup bottom nav */
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 30px) !important;
}

/* ============================================
           GLOBAL DARK MODE: Force text contrast
           All text defaults to var(--text-main)
           so no element is left with a dark color
           ============================================ */
body {
    background: var(--bg-app);
    color: var(--text-main);
}

[data-theme="dark"] body,
[data-theme="dark"] {
    color-scheme: dark;
}

/* Force all common text elements to use theme color */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge):not(.status-badge):not(.nav-label),
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] div:not(.card):not(.bottom-nav) {
    color: inherit;
}

/* Cards & containers */
[data-theme="dark"] .card {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

/* Section titles */
[data-theme="dark"] .section-title {
    color: var(--text-main) !important;
}

/* Form controls */
[data-theme="dark"] .form-control {
    background: #1a2942 !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

/* Select options */
[data-theme="dark"] select option {
    background: #1e293b;
    color: var(--text-main);
}

/* Stat cards / info cards that use gradient text */
[data-theme="dark"] .stat-card,
[data-theme="dark"] [class*="stat"] {
    color: var(--text-main) !important;
}

/* Activity Meta Tags Dark Mode */
[data-theme="dark"] .tag-nominal {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .tag-status {
    background: #1e293b !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .tag-status.disetujui {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

[data-theme="dark"] .tag-status.ditolak {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

[data-theme="dark"] .tag-status.catatansekolah {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .tag-status.pending {
    background: rgba(202, 138, 4, 0.2) !important;
    color: #facc15 !important;
}

/* Any element with inline dark color (common pattern) */
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#854d0e"],
[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color: #92400e"],
[data-theme="dark"] [style*="color:#9a3412"],
[data-theme="dark"] [style*="color:#c2410c"],
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color: #166534"],
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#6b21a8"],
[data-theme="dark"] [style*="color: #6b21a8"],
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color: #991b1b"] {
    color: var(--text-main) !important;
}

/* Dark-colored backgrounds with dark text need special handling */
[data-theme="dark"] [style*="background: linear-gradient(135deg, #fef9c3"] {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-theme="dark"] [style*="background:linear-gradient(135deg, #fef9c3"] {
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Pegawai khusus banner dark fix */
[data-theme="dark"] #statKhususBanner {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

[data-theme="dark"] #statKhususBanner * {
    color: #fbbf24 !important;
}

/* Fix any div/span with inline dark text-muted style */
[data-theme="dark"] [style*="color:var(--text-muted)"],
[data-theme="dark"] [style*="color: var(--text-muted)"] {
    color: var(--text-muted) !important;
}

/* Bottom nav text */
[data-theme="dark"] .nav-item {
    color: var(--text-muted);
}

[data-theme="dark"] .nav-item.active {
    color: var(--primary);
}

/* Filter Tabs for History */
.filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    scroll-behavior: smooth;
    touch-action: pan-x;
}

.tabs-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
}

.scroll-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
    flex-shrink: 0;
}

.scroll-btn:active {
    transform: scale(0.9);
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.filter-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(26, 77, 161, 0.25);
}

/* Activity Feed Items */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    gap: 10px;
    transition: transform 0.2s ease;
    position: relative;
    overflow: visible;
}

.activity-item:active {
    transform: scale(0.98);
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.activity-title {
    font-weight: 800;
    font-size: 13px;
    color: var(--text-main);
}

.activity-time {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

[data-theme="dark"] .activity-time {
    color: #94a3b8 !important;
}

.activity-desc {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}

.presensi-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 3px;
}

.presensi-row:last-child {
    margin-bottom: 0;
}

.presensi-row .badge-inline {
    white-space: nowrap;
}

/* Datang & Pulang side-by-side layout */
.presensi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 4px;
}

.presensi-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    min-width: 0;
}

.presensi-col-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.presensi-col-val {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
}

.presensi-col-nominal {
    font-size: 9.5px;
    font-weight: 800;
    margin-top: 4px;
    padding: 1px 0;
}

.presensi-col-nominal.nom-dtg {
    color: #059669;
}

.presensi-col-nominal.nom-plg {
    color: #2563eb;
}

/* Total insentif paling kanan di activity-meta */
.activity-total {
    font-size: 10px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #10b98130;
    border-radius: 8px;
    padding: 3px 10px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.activity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.meta-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tag-nominal {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #10b98120;
}

.tag-status {
    background: #f1f5f9;
    color: #475569;
}

.tag-status.disetujui,
.tag-status.tertib {
    background: #dcfce7;
    color: #15803d;
}

.tag-status.ditolak,
.tag-status.terlambat,
.tag-status.pulangcepat,
.tag-status.alpha {
    background: #fee2e2;
    color: #b91c1c;
}

.tag-status.hadir {
    background: #e0f2fe;
    color: #0369a1;
}

.tag-status.piketlibur {
    background: #ffedd5;
    color: #c2410c;
}

.tag-status.dinas {
    background: #f3e8ff;
    color: #6b21a8;
}

.tag-status.catatansekolah,
.tag-status.laporanacc {
    background: #fef3c7;
    color: #92400e;
}

.tag-status.pending {
    background: #fef9c3;
    color: #854d0e;
}

.tag-status.libur {
    background: #f1f5f9;
    color: #64748b;
}

/* DARK MODE ADJUSTMENTS FOR ACTIVITY FEED & NOMINALS */
[data-theme="dark"] .presensi-col {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .presensi-col-label {
    color: #94a3b8;
}

[data-theme="dark"] .presensi-col-val {
    color: #f1f5f9;
}

[data-theme="dark"] .presensi-col-nominal.nom-dtg {
    color: #34d399 !important;
}

[data-theme="dark"] .presensi-col-nominal.nom-plg {
    color: #60a5fa !important;
}

[data-theme="dark"] .activity-total {
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .tag-nominal {
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .tag-status {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .tag-status.disetujui,
[data-theme="dark"] .tag-status.presensiharian,
[data-theme="dark"] .tag-status.hadirlibur,
[data-theme="dark"] .tag-status.hadir {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
}

[data-theme="dark"] .tag-status.piketlibur,
[data-theme="dark"] .tag-status.presensipiket {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #fb923c !important;
}

[data-theme="dark"] .tag-status.laporanacc,
[data-theme="dark"] .tag-status.catatansekolah,
[data-theme="dark"] .tag-status.pending {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .tag-status.dinas {
    background: rgba(168, 85, 247, 0.18) !important;
    color: #c084fc !important;
}

[data-theme="dark"] .tag-status.ditolak,
[data-theme="dark"] .tag-status.alpha {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #f87171 !important;
}

/* ============================================
           ANDROID NATIVE: Material Ripple & Touch
           ============================================ */
.ripple {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.3s;
}

.ripple:active::after {
    opacity: 0.08;
    transition: none;
}

/* ============================================
           HEADER — Material You App Bar
           ============================================ */
[data-theme="dark"] .header {
    background: rgba(22, 27, 34, 0.92) !important;
    border-color: var(--border) !important;
}

/* 9px Mode Scoping — hanya untuk elemen teks, bukan semua elemen */
body.is-logged-in {
    font-size: 9px;
}

body.is-logged-in p,
body.is-logged-in span:not(.material-icons-round),
body.is-logged-in label,
body.is-logged-in td,
body.is-logged-in th,
body.is-logged-in div:not(.stat-card):not(.m3-bottom-nav):not(.header),
body.is-logged-in button:not(.btn-primary) {
    font-size: 9px;
}

body.is-logged-in i.material-icons-round {
    font-size: 18px !important;
}

i.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--bg-app);
    color: var(--text-main);
    /* min-height dihapus — body sudah position:fixed + height:100% dari rule di atas */
    display: flex;
    flex-direction: column;
    transition: background 0.25s ease, color 0.25s ease;
    font-size: 14px;
}

/* --- SKELETON LOADING --- */
@keyframes skeleton-loading {
    0% {
        background-color: var(--border);
    }

    100% {
        background-color: var(--bg-app);
    }
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    border-radius: 4px;
}

/* --- COMPONENTS --- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
    transition: transform 0.2s;
}

.btn {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, #00AA13 0%, #00C853 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 170, 19, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00880C 0%, #00AA13 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 170, 19, 0.45);
}

.btn-primary:disabled {
    background: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--bg-app);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.btn-danger {
    background: #fee2e2;
    color: var(--danger);
}

[data-theme="dark"] .btn-danger {
    background: rgba(239, 68, 68, 0.15);
}

.btn-outline {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.btn-outline-active {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(26, 77, 161, 0.2);
}

.form-control {
    display: block;
    width: 100% !important;
    padding: 10px 14px !important;
    /* Adjusted for better vertical centering */
    height: 45px !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 16px !important;
    background: var(--bg-app);
    color: var(--text-main);
    transition: 0.2s;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 4px;
    line-height: normal;
    touch-action: manipulation;
    cursor: text;
}

/* Specific fix for date/time inputs which can have internal padding issues */
input[type="date"].form-control,
input[type="time"].form-control {
    display: flex;
    align-items: center;
}

.form-control:focus {
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--primary-light);
}

textarea.form-control {
    padding: 12px 14px !important;
    height: 45px !important;
    /* Matched with other inputs as per user request */
    resize: none;
}

/* Ensure disabled inputs are readable in dark mode */
input:disabled,
textarea:disabled {
    color: var(--text-primary) !important;
    opacity: 0.9 !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    cursor: default;
}

/* --- HEADERS --- */
.header {
    background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.8);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-logo i {
    font-size: 20px;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px 38px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.profile-header::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--primary);
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    background: white;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    color: var(--primary);
}

/* --- STATS GRID --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 12px;
    margin-top: 0;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.stat-card {
    background: var(--bg-card);
    padding: 8px 4px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
}

.sc-hadir::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.sc-dtg::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.sc-plg::before {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.sc-telat::before {
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

.sc-early::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.sc-piket::before {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.sc-dinas::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.sc-izin::before {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.sc-uang::before {
    background: linear-gradient(90deg, #1a4da1, #60a5fa);
}

[data-theme="dark"] .sc-hadir {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .sc-dtg {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .sc-plg {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .sc-telat {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .sc-early {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .sc-piket {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .sc-dinas {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .sc-izin {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.3);
}

[data-theme="dark"] .sc-uang {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.4);
}

.stat-value {
    font-weight: 800;
    color: var(--text-main);
    display: block;
}

.stat-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* --- TABLE STYLES --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.agenda-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(26, 77, 161, 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    margin-bottom: 8px;
    color: var(--text-main);
}

.agenda-title {
    font-weight: 600;
    color: var(--text-main);
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    border: 1px solid var(--border);
}

th {
    background: var(--bg-app);
    text-align: center;
    padding: 10px 6px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid var(--border);
    border-right: 1px solid var(--border);
}

th:last-child {
    border-right: none;
}

td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-main);
    word-break: break-word;
}

td:last-child {
    border-right: none;
}

.text-right {
    text-align: right !important;
    padding-right: 8px !important;
}

.text-center {
    text-align: center !important;
}

.text-mono {
    font-family: 'Roboto Mono', monospace;
    letter-spacing: -0.5px;
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.bg-sekolah {
    background: #dcfce7;
    color: #166534;
}

.bg-pengajian {
    background: #fef3c7;
    color: #92400e;
}

.bg-xtra {
    background: #f3e8ff;
    color: #6b21a8;
}

/* Dark mode overrides for colored badges */
[data-theme="dark"] .bg-sekolah {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .bg-pengajian {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .bg-xtra {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .btn-primary {
    color: #fff !important;
}

/* --- STATUS BADGES (PRECISION) --- */
.status-badge {
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 7px;
    font-weight: 800;
    display: inline-block;
    min-width: 62px;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.st-ok {
    background: #dcfce7;
    color: #166534;
}

.st-warn {
    background: #fee2e2;
    color: #991b1b;
}

.st-info {
    background: #e0eaff;
    color: #1e40af;
}

.st-dinas {
    background: #fef3c7;
    color: #92400e;
}

.st-khusus {
    background: #f3e8ff;
    color: #6b21a8;
}

.st-laporan {
    background: #dbeafe;
    color: #1e3a8a;
}

[data-theme="dark"] .st-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .st-warn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .st-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .st-dinas {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .st-khusus {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .st-laporan {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}

/* Dark mode table contrast */
[data-theme="dark"] th {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #3d5068;
}

[data-theme="dark"] td {
    color: #e2e8f0;
    border-color: #2d3f55;
}

[data-theme="dark"] tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* ============================================
           GOJEK NATIVE: Bottom Navigation Bar
           ============================================ */
.gojek-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--nav-bg);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    /* Tinggi memperhitungkan home indicator iPhone */
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    padding-top: 6px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 170, 19, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .gojek-bottom-nav {
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.5);
    border-top-color: rgba(0, 230, 118, 0.2);
}

.gojek-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    gap: 3px;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gojek-nav-item:active {
    transform: scale(0.9);
}

.gojek-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gojek-nav-icon i {
    font-size: 24px;
    color: inherit;
}

.gojek-nav-label {
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.2px;
    line-height: 1;
}

.gojek-nav-item.active {
    color: var(--primary);
}

.gojek-nav-item.active .gojek-nav-icon {
    transform: translateY(-2px) scale(1.1);
}

.gojek-nav-item.active .gojek-nav-label {
    font-weight: 800;
}

/* Elevated Gojek Green Center FAB with 3D Gloss */
.gojek-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
}

.gojek-fab-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00AA13 0%, #00C853 100%);
    border: 3.5px solid var(--nav-bg);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 170, 19, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -3px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    top: -14px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    overflow: hidden;
}

.gojek-fab-btn::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 42%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 50px 50px 100px 100px;
    pointer-events: none;
}

.gojek-fab-btn i {
    font-size: 26px;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
}

.gojek-fab-btn:active {
    transform: scale(0.9) translateY(-10px);
    box-shadow: 0 2px 8px rgba(0, 170, 19, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

@keyframes gojek-fab-pulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translateX(-50%) scale(1.6);
        opacity: 0;
    }
}

.gojek-fab-ring {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: gojek-fab-pulse 2s ease-out infinite;
    pointer-events: none;
}

/* ============================================
           GOJEK NATIVE: Home Quick Categories Grid
           ============================================ */
.gojek-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 4px;
    padding: 16px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    margin: 12px 16px 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.gojek-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    gap: 0;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
    width: 100%;
    min-width: 0;
}

.gojek-grid-item:active {
    transform: scale(0.90);
}

/* Wrapper: fully transparent — no background, no border, no box-shadow */
.gojek-grid-icon-wrap {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon image itself — pure 3D standalone objects */
.gojek-grid-icon-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    border-radius: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.10));
}

.gojek-grid-item:active .gojek-grid-icon-wrap {
    transform: scale(0.90);
}

.gojek-grid-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
    margin-top: 6px;
    text-align: center;
    width: 100%;
    max-width: 68px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

[data-theme="dark"] .m3-bottom-nav {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
}

/* Each nav item */
.m3-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    gap: 0;
    position: relative;
    min-width: 0;
}

/* Indicator pill — animated horizontal pill like Android M3 */
.m3-nav-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    transition: background 0.25s cubic-bezier(0.2, 0, 0, 1),
        width 0.25s cubic-bezier(0.2, 0, 0, 1);
    margin-bottom: 4px;
}

.m3-nav-item.active .m3-nav-indicator {
    background: var(--primary-light);
}

.m3-nav-indicator i {
    font-size: 22px;
    color: var(--text-muted);
    transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

.m3-nav-item.active .m3-nav-indicator i {
    color: var(--primary);
    transform: translateY(-1px);
}

.m3-nav-item:active .m3-nav-indicator {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .m3-nav-item:active .m3-nav-indicator {
    background: rgba(255, 255, 255, 0.08);
}

/* Badge on nav icon */
.m3-nav-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--nav-bg);
}

.m3-nav-badge.show {
    display: flex;
}

/* Label under indicator */
.m3-nav-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s, font-weight 0.2s;
    letter-spacing: 0.1px;
    text-align: center;
    line-height: 1;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m3-nav-item.active .m3-nav-label {
    color: var(--primary);
    font-weight: 700;
}

/* FAB — center elevated action */
.m3-fab {
    position: relative;
    flex-shrink: 0;
}

.m3-fab-btn {
    background: var(--primary);
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.4), 0 2px 4px rgba(26, 86, 219, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
    position: relative;
    top: -12px;
    -webkit-tap-highlight-color: transparent;
}

.m3-fab-btn i {
    font-size: 28px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m3-fab-btn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.3);
}

/* Pulse ring animation on FAB */
@keyframes fab-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.m3-fab-ring {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 2px solid var(--primary);
    animation: fab-pulse 2s ease-out infinite;
    pointer-events: none;
}

/* ============================================
           GOJEK NATIVE: Profile Header & App Bar
           ============================================ */
.profile-header {
    background: linear-gradient(145deg, #00AA13 0%, #00880C 60%, #005E08 100%) !important;
    /* Safe area: konten tidak masuk ke notch/Dynamic Island iPhone */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    padding-bottom: 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    position: relative;
    overflow: visible;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 6px 20px rgba(0, 170, 19, 0.25);
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.profile-header::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

[data-theme="dark"] .profile-header {
    background: linear-gradient(145deg, #1C331E 0%, #162518 60%, #0D190E 100%) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.2);
}

/* ============================================
           ANDROID NATIVE: M3 Stat Cards
           ============================================ */
.stat-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.stat-card:active {
    transform: scale(0.97);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sc-hadir::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.sc-dtg::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.sc-plg::before {
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.sc-telat::before {
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
}

.sc-early::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.sc-piket::before {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.sc-dinas::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.sc-izin::before {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.sc-uang::before {
    background: linear-gradient(90deg, #1a56db, #60a5fa);
}

[data-theme="dark"] .sc-hadir {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .sc-dtg {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .sc-plg {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

[data-theme="dark"] .sc-telat {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .sc-early {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

[data-theme="dark"] .sc-piket {
    background: rgba(249, 115, 22, 0.08) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

[data-theme="dark"] .sc-dinas {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .sc-izin {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

[data-theme="dark"] .sc-uang {
    background: rgba(96, 165, 250, 0.10) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* ============================================
           ANDROID NATIVE: M3 Cards
           ============================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease;
}

/* ============================================
           ANDROID NATIVE: Buttons (M3 style)
           ============================================ */
.btn-close-module,
.btn-back-module {
    background: var(--bg-surface1);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.2s, transform 0.15s;
}

.btn-close-module:active,
.btn-back-module:active {
    transform: scale(0.92);
    background: var(--primary-light);
    color: var(--primary);
}

/* ============================================
           GOJEK NATIVE: Top Header App Bar
           ============================================ */
.header {
    background: linear-gradient(135deg, #00AA13 0%, #00880C 100%);
    border-bottom: none;
    /* Safe area untuk iPhone dengan notch/Dynamic Island */
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(0, 170, 19, 0.25);
    color: #ffffff;
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
}

.header h1 {
    color: #ffffff !important;
}

.header p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.header h1 {
    color: #ffffff !important;
}

.header p {
    color: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="dark"] .header {
    background: linear-gradient(135deg, #0D190E 0%, #162518 100%) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================
           ANDROID NATIVE: Menu Grid (bottom sheet)
           ============================================ */
/* MENU GRID MODAL */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 10px;
}

/* E-PRESENSI TERPADU — TAB NAVIGATION */
.epresensi-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

.epresensi-tab:active {
    opacity: 0.7;
}

.epresensi-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

[data-theme="dark"] .epresensi-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

#epresensiTabContent {
    min-height: 300px;
}

.menu-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 10px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-item-box:active {
    transform: scale(0.95);
    background: var(--primary-light);
}

.menu-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item-icon i {
    font-size: 24px;
}

.menu-item-box span {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary);
}

/* ============================================
           GOJEK NATIVE: Full-Screen Page Navigation
           Semua module-modal & mainMenuModal
           → slide dari kanan (bukan popup dari bawah)
           ============================================ */

/* mainMenuModal — full-screen Semua Layanan */
#mainMenuModal {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    /* FIX: sebelumnya "transparent" — menyebabkan dashboard "kedip" kelihatan
               sesaat di balik overlay selagi modal-container masih slide-in (0.32s).
               Overlay full-screen ini seharusnya solid sejak awal muncul. */
    background: var(--bg-app) !important;
    backdrop-filter: none !important;
}

#mainMenuModal.open {
    display: flex !important;
    /* FIX KEDIP (lanjutan): rule generic ".modal.open{animation:fadeIn}" di bawah
               ikut menganimasikan opacity elemen overlay ini dari 0 → 1. Walau background-nya
               sudah solid, opacity 0 tetap membuatnya tembus pandang sesaat sehingga dashboard
               di baliknya kelihatan kedip. Overlay full-screen harus langsung solid, transisi
               cukup dari geser modal-container saja. */
    animation: none !important;
    opacity: 1 !important;
}

#mainMenuModal .modal-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--bg-app);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#mainMenuModal.open .modal-container {
    transform: translateX(0) !important;
}

/* MODULE MODAL — full-screen, slide dari kanan */
.module-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    /* FIX: sebelumnya "transparent" — menyebabkan dashboard "kedip" kelihatan
               sesaat di balik overlay selagi modal-container masih slide-in (0.32s),
               terutama saat pindah dari satu module-modal ke module-modal lain
               (mis. dari E-Presensi Hub ke Izin/Riwayat/Gaji). Overlay full-screen ini
               seharusnya solid sejak awal muncul, bukan menunggu kartu selesai geser. */
    background: var(--bg-app) !important;
    backdrop-filter: none !important;
}

.module-modal.open {
    /* FIX KEDIP: sama seperti #mainMenuModal — matikan animasi opacity dari rule
               generic ".modal.open{animation:fadeIn}" supaya overlay solid ini tidak pernah
               transparan sesaat. Ini penyebab utama kedip saat pindah antar menu
               (mis. dari E-Presensi Hub ke Izin/Riwayat/Gaji), bukan cuma soal warna background. */
    animation: none !important;
    opacity: 1 !important;
}

.module-modal .modal-container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--bg-app);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.module-modal.open .modal-container {
    transform: translateX(0) !important;
}

/* Sembunyikan drag handle & modal-kop di halaman full-screen */
.module-modal .modal-kop,
#mainMenuModal .modal-kop {
    display: none !important;
}

/* Bar drag-handle (untuk bottom-sheet) tidak relevan di halaman
           full-screen dan sebelumnya masih tampil sendirian (kosong) di atas
           module-header, membuat header terlihat turun & ada celah di
           atasnya. Sembunyikan juga di sini. */
.module-modal .modal-container>div[style*="margin: 12px auto 0"] {
    display: none !important;
}

.module-body {
    padding: 20px;
    /* Bottom: tambah safe area agar konten tidak tertutup home indicator iPhone */
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-kop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 12px 15px 4px;
    background: transparent;
    border-bottom: none;
}

.modal-kop img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.modal-kop-info h3 {
    font-size: 11px;
    font-weight: 900;
    margin: 0;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1.1;
}

.modal-kop-info p {
    font-size: 8px;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
}

.module-header {
    background: linear-gradient(135deg, #00AA13 0%, #00880C 100%);
    /* Safe area: konten tidak masuk ke notch / Dynamic Island iOS */
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
    /* Tinggi otomatis menyesuaikan safe area */
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 170, 19, 0.25);
}

[data-theme="dark"] .module-header {
    background: linear-gradient(135deg, #0D2B10 0%, #162518 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Judul halaman di header = putih */
.module-header .module-title,
.module-header h2,
.module-header h2 i,
.module-header .module-title i {
    color: #ffffff !important;
}

.module-header .module-title,
.module-header h2 {
    font-size: 16px;
    font-weight: 800;
}

/* Tombol back & close di header = putih */
.module-header .btn-back-module,
.module-header .btn-close-module {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.module-header .btn-back-module:active,
.module-header .btn-close-module:active {
    background: rgba(255, 255, 255, 0.3) !important;
}

.module-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

@keyframes blink-red {
    0% {
        border-color: #f1f5f9;
        transform: scale(1);
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }

    50% {
        border-color: #ef4444;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
    }

    100% {
        border-color: #f1f5f9;
        transform: scale(1);
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
}

.agenda-top-blink {
    border: 2px solid #ef4444 !important;
    animation: border-glow-colors 1.5s infinite;
}

.agenda-top-blink * {
    animation: text-glow-colors 1.5s infinite;
}

.agenda-top-blink span {
    font-weight: 800 !important;
}

.agenda-item-user {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
}

.agenda-item-user:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.agenda-item-user:active {
    transform: scale(0.98);
}

.btn-edit-agenda {
    transition: all 0.2s;
}

.btn-edit-agenda:hover {
    transform: scale(1.1);
    background: var(--primary) !important;
    color: white !important;
}

@keyframes text-glow-colors {
    0% {
        color: #ef4444;
    }

    50% {
        color: #f59e0b;
    }

    100% {
        color: #ef4444;
    }
}

@keyframes border-glow-colors {
    0% {
        border-color: #ef4444;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
    }

    50% {
        border-color: #f59e0b;
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
    }

    100% {
        border-color: #ef4444;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
    }
}

.btn-edit-agenda:active {
    transform: scale(0.9);
    background: #cbd5e1 !important;
}

/* --- MODAL --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: none;
    align-items: flex-start;
    /* Ubah ke flex-start agar tidak clipping saat keyboard muncul */
    justify-content: center;
    padding: 40px 20px;
    /* Tambah padding atas agar modal punya ruang */
    overflow-y: auto;
    /* Izinkan scroll di level overlay */
    backdrop-filter: blur(5px);
    -webkit-overflow-scrolling: touch;
}

.modal.open {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-container {
    background: var(--bg-card);
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

#toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-main);
    color: var(--bg-app);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 200000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 90vw;
    text-align: center;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none !important;
}

.section-title {
    font-size: 8px;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 0 4px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 8px;
    font-weight: 600;
    background: var(--bg-app);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
}

.checkbox-container input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- PWA INSTALL BANNER --- */
#installBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 -4px 24px rgba(26, 77, 161, 0.4);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

#installBanner.show {
    transform: translateY(0);
}

.install-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.install-text {
    flex: 1;
}

.install-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.install-text span {
    font-size: 8px;
    opacity: 0.85;
}

.install-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.btn-install {
    padding: 8px 16px;
    background: white;
    color: #4f46e5;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-dismiss {
    padding: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    text-align: center;
}

/* --- LOGIN PAGE STYLES (NEW) --- */
#loginSection {
    max-width: 420px !important;
    margin: 15px auto;
    padding: 24px 20px !important;
    background: var(--bg-card);
    border-radius: 32px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.6s ease;
}

.login-header-text {
    text-align: center;
}

.login-header-text h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin-bottom: 4px;
}

.login-header-text p {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 15px;
}

.input-wrapper {
    position: relative;
    margin-bottom: 16px;
    text-align: left;
}

.input-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    margin-left: 4px;
}

.input-wrapper i {
    position: absolute;
    left: 14px;
    top: 22px;
    /* Adjusted to align with input start after label */
    height: 45px;
    /* Match input height */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 20px;
    z-index: 10;
    pointer-events: none;
}

.input-wrapper .form-control {
    padding-left: 48px !important;
}

/* --- PWA INSTALL MODAL --- */
#installModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

#installModal.open {
    display: flex;
    animation: fadeIn 0.3s;
}

.install-modal-box {
    background: var(--bg-card);
    color: var(--text-main);
    width: 100%;
    max-width: 480px;
    border-radius: 28px 28px 0 0;
    padding: 32px 24px 48px;
    max-height: 90vh;
    overflow-y: auto;
}

/* install-modal-box now uses var(--bg-card) — no separate dark override needed */

.os-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.os-tab {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: white;
    font-weight: 700;
    font-size: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.os-tab.active {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #4f46e5;
}

[data-theme="dark"] .os-tab {
    background: #0f172a;
    border-color: #1e293b;
    color: #f8fafc;
}

[data-theme="dark"] .os-tab.active {
    background: rgba(26, 77, 161, 0.1);
    border-color: #4f46e5;
    color: #818cf8;
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    font-weight: 800;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-desc {
    font-size: 8px;
    line-height: 1.6;
    padding-top: 4px;
}

.step-desc strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.step-desc em {
    font-style: normal;
    background: #eef2ff;
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 8px;
}

[data-theme="dark"] .step-desc em {
    background: rgba(26, 77, 161, 0.1);
    color: #818cf8;
}

.install-note {
    margin-top: 20px;
    padding: 12px 16px;
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    font-size: 8px;
    color: #166534;
    line-height: 1.5;
}

[data-theme="dark"] .install-note {
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

/* Standalone mode: tambah padding atas untuk notch */
@media (display-mode: standalone) {
    body {
        /* height sengaja tidak diset di sini — biarkan rule dasar
                   `height: calc(var(--real-vh, 1vh) * 100)` yang berlaku,
                   supaya tidak ada dua sumber kebenaran tinggi body */
        padding-top: 0;
        /* Tidak ada padding-bottom — scroll dan spacing ditangani #dashboardScroll */
    }

    main {
        overflow: hidden !important;
    }

    #installBanner {
        display: none !important;
    }

    .profile-header {
        padding-top: calc(env(safe-area-inset-top, 44px) + 12px) !important;
    }

    .header {
        padding-top: calc(env(safe-area-inset-top, 44px) + 10px) !important;
        min-height: calc(52px + env(safe-area-inset-top, 44px)) !important;
    }

    .module-header {
        padding-top: calc(env(safe-area-inset-top, 44px) + 10px) !important;
        min-height: calc(58px + env(safe-area-inset-top, 44px)) !important;
    }

    .gojek-bottom-nav {
        height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Pastikan scroll container dashboard punya padding atas & bawah yang benar.
               #dashboardHeader (fixed) ikut membesar oleh safe-area-inset-top di mode
               standalone, jadi padding-top dasar (138px) harus ditambah insetnya juga —
               kalau tidak, konten pertama (mis. banner libur) kepotong di bawah header. */
    #dashboardScroll {
        padding-top: calc(138px + env(safe-area-inset-top, 44px)) !important;
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
}

#fsBtnUser {
    border: 1px solid var(--border);
    background: var(--bg-app);
    color: var(--text-muted);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

#fsBtnUser:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

#fsBtnUser.fs-active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

#fsBtnUser i {
    font-size: 18px;
}

.btn-period-nav:hover {
    background: var(--primary-light) !important;
}

/* Additional Modal & UI Styles */
/* ---- Kiosk Notification Toast ---- */
#kioskNotifToastContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: env(safe-area-inset-top, 12px);
    pointer-events: none;
    gap: 8px;
}

.kiosk-toast {
    pointer-events: all;
    background: #0f172a;
    border-radius: 20px;
    padding: 0;
    width: calc(100% - 24px);
    max-width: 440px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kiosk-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.kiosk-toast.hide {
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.35s ease-in, opacity 0.25s ease-in;
}

.kiosk-toast-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    position: relative;
}

.kiosk-toast-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.kiosk-toast-icon.datang {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.kiosk-toast-icon.pulang {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}

.kiosk-toast-icon.terlambat {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.kiosk-toast-icon.pengajian {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.kiosk-toast-icon.default {
    background: linear-gradient(135deg, #475569, #334155);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.kiosk-toast-content {
    flex: 1;
    min-width: 0;
}

.kiosk-toast-title {
    font-size: 13px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.kiosk-toast-body {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kiosk-toast-progress {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.kiosk-toast-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: transform linear;
}

.kiosk-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.kiosk-toast-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

@keyframes kioskToastVibrate {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    20% {
        transform: translateY(-2px) rotate(-1deg);
    }

    40% {
        transform: translateY(0) rotate(1deg);
    }

    60% {
        transform: translateY(-2px) rotate(-0.5deg);
    }

    80% {
        transform: translateY(0) rotate(0.5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.kiosk-toast.vibrate {
    animation: kioskToastVibrate 0.4s ease 0.5s;
}

/* ============================================================
   MODUL PENGANTARAN SISWA (MOBILE-FIRST RESPONSIVE ARCHITECTURE)
   ============================================================ */

/* Modal Container & Fullscreen Frame */
#pengantaranModal {
    z-index: 1050;
}

#pengantaranModal .modal-container.tp-modal-container {
    width: 100%;
    max-width: 680px;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-main, #f8fafc);
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #pengantaranModal .modal-container.tp-modal-container {
        height: 92vh;
        max-height: 900px;
        margin: auto;
        border-radius: 20px;
        border: 1px solid var(--border);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    }
}

/* ── 2. HEADER ──────────────────────────────────────────────── */
.tp-module-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #00AA13 0%, #00880C 100%) !important;
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-height: 58px;
}

[data-theme="dark"] .tp-module-header {
    background: linear-gradient(135deg, #0B2B11 0%, #133918 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Judul tengah */
.tp-header-title {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.tp-header-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.3;
}

/* Tanggal di bawah judul */
.tp-header-date {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

/* Tombol kiri: pill dengan icon + teks (Menu / Back) */
.tp-header-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    min-width: 60px;
    height: 36px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.tp-header-pill-btn i {
    font-size: 18px;
    color: #ffffff;
}

.tp-header-pill-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.tp-header-pill-btn:active {
    transform: scale(0.94);
}

/* Tombol kanan: icon-only (Close) */
.tp-header-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
}

.tp-header-icon-btn i {
    font-size: 20px;
    color: #ffffff;
}

.tp-header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.tp-header-icon-btn:active {
    transform: scale(0.92);
}

/* Backward compat — tombol lama modal lain (tetap ada) */
.tp-btn-back,
.tp-btn-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
}

.tp-btn-back:hover,
.tp-btn-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.tp-btn-back:active,
.tp-btn-close:active {
    transform: scale(0.92);
}

.tp-btn-back i,
.tp-btn-close i {
    font-size: 20px;
    color: #ffffff;
}

/* ── 3. TAB NAVIGASI ────────────────────────────────────────── */
.tp-tab-nav {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tp-tab-nav::-webkit-scrollbar {
    display: none;
}

.tp-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

.tp-tab-btn i {
    font-size: 16px;
}

.tp-tab-btn:hover {
    color: var(--text-main);
    border-color: rgba(0, 170, 19, 0.3);
}

.tp-tab-btn.active {
    background: #00AA13;
    color: #ffffff;
    border-color: #00AA13;
    box-shadow: 0 2px 8px rgba(0, 170, 19, 0.35);
}

/* ── 16. PAGE CONTAINER ─────────────────────────────────────── */
.tp-page-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px 36px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* ── 4 & 5. CARD TANGGAL PENGANTARAN & JUDUL ────────────────── */
.tp-date-selector-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.tp-date-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.tp-date-title-wrap {
    flex: 1;
    min-width: 0;
}

.tp-section-subhead {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

.tp-date-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-date-main-title {
    font-size: clamp(15px, 4.2vw, 19px);
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
    margin: 0;
    overflow-wrap: break-word;
}

.tp-date-picker-wrap {
    position: relative;
    flex-shrink: 0;
}

.tp-date-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-main);
    cursor: pointer;
    box-sizing: border-box;
}

.tp-date-picker-btn i {
    font-size: 17px;
    color: #00AA13;
}

.tp-native-date-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

@media (max-width: 420px) {
    .tp-date-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .tp-date-picker-wrap,
    .tp-date-picker-btn {
        width: 100%;
    }
}

/* ── 6. QUICK DATE BUTTONS ──────────────────────────────────── */
.tp-quick-date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.tp-quick-date-chips::-webkit-scrollbar {
    display: none;
}

.tp-quick-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    user-select: none;
}

.tp-quick-chip:hover {
    background: rgba(0, 170, 19, 0.08);
    color: #00AA13;
    border-color: rgba(0, 170, 19, 0.3);
}

.tp-quick-chip.active {
    background: #00AA13;
    color: #ffffff;
    border-color: #00AA13;
    box-shadow: 0 2px 6px rgba(0, 170, 19, 0.28);
}

.tp-backdate-badge {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #f59e0b;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

[data-theme="dark"] .tp-backdate-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

.tp-backdate-alert {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    box-sizing: border-box;
}

[data-theme="dark"] .tp-backdate-alert {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-left-color: #f59e0b;
}

/* ── MODE CEPAT HARI H VS MODE MENU LENGKAP ─────────────────── */
#pengantaranModal.tp-is-quick-mode .tp-tab-nav {
    display: none !important;
}

#pengantaranModal.tp-is-quick-mode .tp-date-selector-box {
    display: none !important;
}

#pengantaranModal.tp-is-quick-mode .tp-week-strip-box {
    display: none !important;
}

#pengantaranModal.tp-is-quick-mode #tpReturnToQuickModeBar {
    display: none !important;
}

#pengantaranModal.tp-is-full-mode #tpReturnToQuickModeBar {
    display: block !important;
}

/* ── 7. STATUS INPUT 7 HARI TERAKHIR (HORIZONTAL SCROLL) ───── */
.tp-week-strip-box {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.tp-week-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tp-week-strip-hint {
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.tp-week-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.tp-week-grid::-webkit-scrollbar {
    display: none;
}

.tp-week-day-cell {
    flex: 0 0 74px;
    min-width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    box-sizing: border-box;
    user-select: none;
}

.tp-week-day-cell:hover {
    border-color: rgba(0, 170, 19, 0.4);
}

.tp-week-day-cell:active {
    transform: scale(0.96);
}

.tp-week-day-cell.selected {
    border-color: #00AA13;
    background: rgba(0, 170, 19, 0.08);
    box-shadow: 0 0 0 1.5px #00AA13;
}

.tp-week-day-name {
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tp-week-day-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin: 3px 0 5px;
}

.tp-week-day-badge {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.tp-week-day-badge.done {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.tp-week-day-badge.empty {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.tp-week-day-badge.today-empty {
    background: rgba(0, 170, 19, 0.12);
    color: #00AA13;
}

[data-theme="dark"] .tp-week-day-badge.done {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}

[data-theme="dark"] .tp-week-day-badge.empty {
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

/* ── 8. STATISTIK DASHBOARD (COMPACT 4 KOLOM) ───────────────── */
.tp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.tp-kpi-card {
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.tp-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
}

.tp-kpi-card.kpi-total::before { background: #3b82f6; }
.tp-kpi-card.kpi-done::before { background: #10b981; }
.tp-kpi-card.kpi-pending::before { background: #f59e0b; }
.tp-kpi-card.kpi-nominal::before { background: #00AA13; }

.tp-kpi-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 2px;
}

.tp-kpi-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-kpi-icon {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tp-kpi-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    word-break: break-word;
    margin-top: 0;
}

.tp-kpi-card.kpi-nominal .tp-kpi-val {
    color: #00AA13;
    font-size: 11.5px;
}

/* ── 10. TOMBOL "+ PILIH SISWA YANG DIANTAR" ────────────────── */
.tp-btn-primary.tp-btn-lg {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 14px;
    box-sizing: border-box;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ── 11, 12, 13, 14, 15. CARD SISWA & RESPONSIVE ─────────────── */
.tp-student-card {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tp-student-card:hover {
    box-shadow: var(--shadow-md);
}

.tp-student-card.is-completed {
    background: rgba(16, 185, 129, 0.03);
    border-color: rgba(16, 185, 129, 0.28);
}

[data-theme="dark"] .tp-student-card.is-completed {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
}

.tp-student-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    box-sizing: border-box;
}

@media (max-width: 360px) {
    .tp-student-main {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tp-student-tariff {
        grid-column: 2;
        text-align: left !important;
        margin-top: 4px;
    }
}

.tp-student-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(0, 170, 19, 0.12);
    color: #00AA13;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-student-info {
    min-width: 0;
}

.tp-student-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    overflow-wrap: anywhere;
    line-height: 1.35;
    margin-bottom: 4px;
}

.tp-student-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tp-class-tag {
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-secondary);
    color: var(--text-main);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* 14. BADGE */
.tp-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    gap: 4px;
    box-sizing: border-box;
}

.tp-badge-langganan {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.tp-badge-insidental {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* 13. NOMINAL PRICE */
.tp-student-tariff {
    text-align: right;
    white-space: nowrap;
}

.tp-price {
    white-space: nowrap;
    font-weight: 800;
    font-size: 14px;
    color: #00AA13;
}

.tp-tariff-unit {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* 15. STATUS SUDAH DIANTAR BAR */
.tp-card-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    box-sizing: border-box;
}

.tp-status-indicator {
    min-width: 0;
}

.tp-badge-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    box-sizing: border-box;
}

.status-done {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.status-waiting {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-paid {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-revision {
    background: rgba(249, 115, 22, 0.15);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.tp-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-antar-done {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 10px;
}

.tp-done-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #00AA13;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── BUTTON STYLES & SHARED UTILITIES ───────────────────────── */
.tp-btn-primary {
    background: linear-gradient(135deg, #00AA13 0%, #00880C 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 170, 19, 0.3);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tp-btn-primary:active {
    transform: scale(0.97);
}

.tp-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tp-btn-secondary:active {
    transform: scale(0.97);
}

.tp-btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 10px;
    min-height: 32px;
}

.tp-empty-state {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-muted);
}

.tp-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.tp-empty-state h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.tp-empty-state p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

/* Stat Box in Data Siswa Card */
.tp-card-stat-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 10px;
    margin-top: 12px;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.tp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tp-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.tp-stat-val {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
    margin-top: 2px;
}

.tp-stat-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
}

/* ── TAB 2 & SECTION HEADERS ────────────────────────────────── */
.tp-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tp-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.tp-section-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── TAB 3: REKAP BULANAN ───────────────────────────────────── */
.tp-period-nav-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.tp-rekap-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.tp-rekap-header {
    display: flex;
    align-items: center;
    padding: 14px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

.tp-rekap-student-info {
    flex: 1;
    min-width: 0;
}

.tp-rekap-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.tp-rekap-sub {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tp-rekap-summary-badge {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.tp-rekap-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.tp-rekap-total {
    font-size: 14px;
    font-weight: 800;
    color: #00AA13;
}

.tp-rekap-chevron {
    color: var(--text-muted);
    font-size: 22px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.tp-rekap-detail {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 12px 14px;
    box-sizing: border-box;
}

.tp-rekap-detail-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.tp-trip-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-trip-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg-card);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.tp-trip-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tp-trip-badge-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.tp-trip-snapshot {
    font-size: 11.5px;
    font-weight: 800;
    color: #00AA13;
}

.tp-rekap-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 11.5px;
    font-weight: 700;
}

/* Rekap Harian Card */
.tp-rekap-daily-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
    gap: 10px;
}

.tp-rekap-daily-card:hover {
    border-color: rgba(0, 170, 19, 0.4);
    box-shadow: var(--shadow-md);
}

.tp-rekap-subtab-btn {
    flex: 1;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.tp-rekap-subtab-btn.active {
    background: #00AA13;
    color: #ffffff;
    border-color: #00AA13;
    box-shadow: 0 2px 6px rgba(0, 170, 19, 0.25);
}

/* ── TAB 4: CLAIMS / PENGAJUAN ──────────────────────────────── */
.tp-claim-status-card {
    background: var(--bg-card);
    border: 1.5px solid #00AA13;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
}

.tp-claim-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.tp-claim-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.tp-claim-period {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.tp-claim-officer {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tp-claim-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.tp-claim-notes {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── SUB-MODALS & SELECTION DIALOGS ─────────────────────────── */
.tp-select-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tp-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.tp-select-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 170, 19, 0.12);
    color: #00AA13;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-select-info {
    flex: 1;
    min-width: 0;
}

.tp-select-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.tp-select-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.tp-select-action {
    flex-shrink: 0;
}

.tp-radio-group {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.tp-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}

/* ============================================================
   MODUL NATIVE E-KESISWAAN (PORTAL PEGAWAI)
   ============================================================ */
.ks-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.ks-badge-synced {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.28);
}
.ks-badge-syncing {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.28);
}
.ks-badge-offline {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.28);
}
.ks-badge-error {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.ks-tab-nav {
    display: flex;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 14px;
    gap: 4px;
}
.ks-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ks-tab-btn i {
    font-size: 16px;
}
.ks-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 170, 19, 0.25);
}

.ks-search-wrap {
    position: relative;
    margin-bottom: 12px;
}
.ks-search-wrap i.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
}
.ks-search-input {
    width: 100%;
    padding: 11px 40px 11px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13.5px;
    color: var(--text-main);
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.ks-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 170, 19, 0.12);
}
.ks-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
}

.ks-chip-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 12px;
    scrollbar-width: none;
}
.ks-chip-wrap::-webkit-scrollbar {
    display: none;
}
.ks-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.ks-chip.active {
    background: var(--text-main);
    color: var(--bg-app);
    border-color: var(--text-main);
}

.ks-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ks-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ks-card:active {
    transform: scale(0.985);
}
.ks-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ks-card-avatar i {
    font-size: 24px;
}
.ks-card-info {
    flex: 1;
    min-width: 0;
}
.ks-card-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.ks-card-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-badge-kelas {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 170, 19, 0.1);
    color: var(--primary);
}
.ks-card-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ks-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.ks-action-btn:active {
    transform: scale(0.9);
}
.ks-wa-btn {
    background: rgba(37, 211, 102, 0.15);
    color: #16a34a;
}
.ks-call-btn {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.ks-disabled-btn {
    background: var(--bg-secondary);
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

.ks-empty-state,
.ks-loading-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.ks-empty-state i,
.ks-loading-state i {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.7;
}
.ks-empty-state h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    color: var(--text-main);
}
.ks-empty-state p,
.ks-loading-state p {
    margin: 0;
    font-size: 12.5px;
}

.ks-spin {
    animation: ksSpinAnim 1s linear infinite;
    display: inline-block;
}
@keyframes ksSpinAnim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ks-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.ks-detail-box {
    background: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.ks-detail-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.ks-detail-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    overflow-wrap: break-word;
}
.ks-btn-contact {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.ks-riwayat-item {
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.ks-border-danger {
    border-left: 3.5px solid #ef4444;
}
.ks-border-success {
    border-left: 3.5px solid #10b981;
}

/* ── PEMBAYARAN BULANAN PENGANTARAN ─────────────────────────── */
.tp-pay-filter { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tp-pay-chip {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-secondary); color: var(--text-muted);
    font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.tp-pay-chip.active { background: #00AA13; color: #fff; border-color: #00AA13; }
.tp-pay-remain { font-size: 10px; font-weight: 700; color: #b91c1c; }
.tp-pay-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tp-pay-info { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.tp-pay-info strong { color: var(--text-main); }
.tp-pay-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-pay-actions .tp-btn-sm { flex: 1; justify-content: center; white-space: nowrap; }