/* ===================================
   AdminKita - Soft UI Dashboard Stylesheet
   ===================================
   Urutan file:
   1. Definisi Variabel CSS (Root)
   2. Reset Global & Pengaturan Dasar
   3. Struktur Layout Utama
   4. Styling Sidebar
   5. Styling Header
   6. Styling Konten Utama (Umum)
   7. Styling Komponen (Form, Tombol, Tabel, dll)
   8. Styling Halaman Spesifik (Login, Dashboard, Rekap, etc)
   9. Styling Responsif
   =================================== */

/* 1. Definisi Variabel CSS (Root) */
:root {
    --bg-main: #F8F9FA;
    --bg-content: #FFFFFF;
    --bg-content-hover: #F1F5F9;
    --sidebar-dark: #1E293B;
    --sidebar-text: #FFFFFF;
    
    --accent-primary: #3B82F6;
    --accent-primary-hover: #2563EB;
    --color-primary-soft: #DBEAFE;

    --content-text: #334155;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    
    --color-success: #10B981;
    --color-success-soft: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-soft: #FEF3C7;
    --color-danger: #EF4444;
    --color-danger-soft: #FEE2E2;
    --color-info: #3B82F6; /* Sama dengan primary */
    --color-info-soft: #DBEAFE;
    
    --border-color: #E2E8F0;
    --border-color-light: #F1F5F9;
    --border-color-input-focus: var(--accent-primary);
    
    --radius-main: 12px;
    --radius-small: 8px;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-hard: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --sidebar-width-desktop: 260px;
    --sidebar-width-tablet: 80px;
    --header-height: 70px;
    
    --transition-main: all 0.3s ease;
}

/* 2. Reset Global dan Pengaturan Dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--content-text);
    display: grid;
    grid-template-columns: var(--sidebar-width-desktop) 1fr;
    grid-template-rows: var(--header-height) 1fr auto;
    grid-template-areas:
        "sidebar header"
        "sidebar content"
        "sidebar footer";
    height: 100vh;
    overflow-x: hidden;
    transition: grid-template-columns 0.3s ease;
}

a {
    text-decoration: none;
    color: var(--accent-primary);
}

ul {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: 'Inter', sans-serif;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

/* 3. Struktur Layout Utama */
.sidebar {
    grid-area: sidebar;
    background-color: var(--sidebar-dark);
    color: var(--sidebar-text);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: var(--transition-main);
    overflow-x: hidden;
    position: fixed;
    height: 100%;
    width: var(--sidebar-width-desktop);
    z-index: 1000;
}

.header {
    grid-area: header;
    background-color: var(--bg-content);
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Perbaikan Shadow Header (lebih halus) */
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.06);
    z-index: 10;
}

.main-content {
    grid-area: content;
    padding: 2rem;
    overflow-y: auto;
    /* Animasi Fade-in */
    animation: fadeIn 0.5s ease-out;
}

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

.footer {
    grid-area: footer;
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color-light);
}

/* 4. Styling Sidebar */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #334155; /* Garis pemisah */
}

.sidebar-logo-icon {
    background-color: var(--accent-primary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-small);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sidebar-logo-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.sidebar-logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #475569 var(--sidebar-dark);
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #475569;
    border-radius: 3px;
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-main);
    transition: var(--transition-main);
    white-space: nowrap;
    opacity: 0.8;
}

.sidebar-nav a svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: var(--transition-main);
}

.sidebar-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.sidebar-nav li.active a {
    background-color: var(--accent-primary);
    color: var(--sidebar-text);
    font-weight: 500;
    box-shadow: var(--shadow-hard);
    opacity: 1;
}

/* 5. Styling Header */
.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#menu-toggle {
    display: none; /* Sembunyi di desktop */
    padding: 0.5rem;
    border-radius: var(--radius-small);
    transition: var(--transition-main);
}
#menu-toggle:hover {
    background-color: var(--bg-main);
}
#menu-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--content-text);
}

.breadcrumb {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-muted);
}
.breadcrumb span {
    color: var(--content-text);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ... (Search bar & Notifikasi bisa di-uncomment jika perlu) ... */

.profile-dropdown {
    position: relative;
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Beri jarak antara nama dan ikon */
    padding: 0.5rem;
    border-radius: var(--radius-main);
    transition: var(--transition-main);
}
.profile-toggle:hover {
    background-color: var(--bg-content-hover);
}

.profile-toggle img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
/* Perbaikan Tampilan Nama di Header */
.profile-name-desktop {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--content-text);
}
.profile-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--bg-content);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-hard);
    border: 1px solid var(--border-color-light);
    width: 220px;
    overflow: hidden;
    z-index: 20;
    
    /* Sembunyi by default */
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dropdown-menu.visible { /* Ganti 'show' jadi 'visible' */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color-light);
}
.dropdown-header h6 {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--content-text);
}
.dropdown-header p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--content-text);
    transition: var(--transition-main);
}
.dropdown-menu a:hover {
    background-color: var(--bg-content-hover);
    color: var(--accent-primary);
}
.dropdown-menu a svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: var(--transition-main);
}
.dropdown-menu a:hover svg {
    color: var(--accent-primary);
}
.dropdown-divider {
    height: 1px;
    background-color: var(--border-color-light);
    margin: 0.5rem 0;
}

/* 6. Styling Konten Utama (Umum) */
.content-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--sidebar-dark);
}

/* Soft UI Card */
.card {
    background-color: var(--bg-content);
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    transition: var(--transition-main);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sidebar-dark);
    margin-bottom: 0.25rem;
}
.card-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* 7. Styling Komponen (Form, Tombol, Tabel, dll) */

/* Form */
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-main);
    border: 1px solid var(--border-color);
    background-color: var(--bg-content);
    transition: var(--transition-main);
    font-size: 0.9rem;
    color: var(--content-text);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-light);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--border-color-input-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-input-file {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    font-size: 0.9rem;
}
.form-input-file::file-selector-button {
    margin-right: 1rem;
    border: none;
    background: var(--bg-main);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-small);
    color: var(--content-text);
    cursor: pointer;
    transition: var(--transition-main);
}
.form-input-file::file-selector-button:hover {
    background: var(--bg-content-hover);
}
.form-input.input-error {
    border-color: var(--color-danger);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Tombol */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-main);
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-main);
    border: 1px solid transparent;
}
.btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
}
.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}
.btn-primary {
    background-color: var(--accent-primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--accent-primary-hover);
}
.btn-secondary {
    background-color: var(--bg-content);
    color: var(--content-text);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--bg-content-hover);
}
/* BARU: Button Success */
.btn-success {
    background-color: var(--color-success);
    color: white;
}
.btn-success:hover {
    background-color: #059669; /* Darker green */
}


/* Tombol Spinner */
.btn .spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.btn-secondary .spinner {
    border-color: rgba(0,0,0,0.3);
    border-top-color: var(--content-text);
}
.btn.loading .btn-text-label {
    display: none;
}
.btn.loading .spinner {
    display: inline-block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tabel */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th,
.data-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color-light);
    font-size: 0.9rem;
    vertical-align: middle;
}
.data-table th {
    background-color: var(--bg-main);
    font-weight: 600;
    color: var(--text-muted);
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}
.data-table tbody tr:hover {
    background-color: var(--bg-content-hover);
}
.data-table .aksi-buttons {
    display: flex;
    gap: 0.5rem;
}
.btn-aksi {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-small);
}
.btn-aksi.delete { color: var(--color-danger); }
.btn-aksi.delete:hover { background-color: var(--color-danger-soft); }
.btn-aksi.edit { color: var(--accent-primary); }
.btn-aksi.edit:hover { background-color: var(--color-primary-soft); }

/* Badge */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-success { background-color: var(--color-success-soft); color: var(--color-success); }
.badge-danger { background-color: var(--color-danger-soft); color: var(--color-danger); }
.badge-warning { background-color: var(--color-warning-soft); color: var(--color-warning); }
.badge-info { background-color: var(--color-info-soft); color: var(--color-info); }

/* Alert */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-main);
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.alert.alert-success { background-color: var(--color-success-soft); color: var(--color-success); }
.alert.alert-danger { background-color: var(--color-danger-soft); color: var(--color-danger); }
.alert.alert-info { background-color: var(--color-info-soft); color: var(--color-info); }

/* 8. Styling Halaman Spesifik */

/* --- Halaman Login --- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-main);
    grid-template: none; /* Reset grid */
}
.login-container {
    width: 100%;
    max-width: 450px;
    padding: 1rem;
}
.login-card {
    padding: 2.5rem;
}
.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--sidebar-dark);
    margin-bottom: 0.5rem;
}
.login-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.login-form {
    margin-top: 1.5rem;
}

/* --- Halaman Dashboard --- */
.dashboard-header {
    margin-bottom: 2rem;
}
.dashboard-header p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.stat-card-info h5 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.stat-card-info p {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--content-text);
}
.stat-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-main);
    display: grid;
    place-items: center;
}
.stat-card-icon svg {
    width: 24px;
    height: 24px;
}
.dashboard-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.quick-access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-main);
    background-color: var(--bg-main);
    transition: var(--transition-main);
    text-align: center;
}
.quick-access-item:hover {
    background-color: var(--bg-content-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
}
.quick-access-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--content-text);
}
.activity-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.activity-item, .activity-item-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.activity-item-empty {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 1rem;
    justify-content: center;
}
.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.activity-info {
    display: flex;
    flex-direction: column;
}
.activity-info strong {
    font-size: 0.9rem;
    font-weight: 500;
}
.activity-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* BARU: Styling Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    /* height: 300px; (ditetapkan inline) */
    margin-top: 1.5rem;
}


/* --- Halaman Filter (Rekap, Export) --- */
.filter-card {
    margin-bottom: 2rem;
}
.filter-form {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

/* --- Halaman Rekap (Grid) --- */
.bulk-action-card {
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.bulk-label {
    font-weight: 500;
}
.horizontal-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
}
.sticky-header-wrapper {
    max-height: 70vh;
    overflow-y: auto;
}
.grid-table {
    border-collapse: separate; /* Penting untuk sticky */
    border-spacing: 0;
}
.grid-table th {
    background-color: var(--bg-main);
    z-index: 11;
}
.grid-table th, .grid-table td {
    padding: 0.5rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color-light);
    white-space: nowrap;
}
/* Sticky Header */
.sticky-header th {
    position: sticky;
    top: 0;
}
/* Sticky Columns */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: var(--bg-content);
    /* Perbaikan Z-Index: Kolom data harus di atas header tanggal saat scroll */
    z-index: 12 !important; 
}
.sticky-header .sticky-col {
    z-index: 13 !important; /* Header sticky harus di atas segalanya */
}
/* Urutan kolom sticky */
.col-checkbox { left: 0; width: 50px; min-width: 50px; }
.col-nama { left: 50px; width: 220px; min-width: 220px; }
.col-nid { left: 270px; width: 100px; min-width: 100px; }
.col-fungsi { left: 370px; width: 200px; min-width: 200px; }

/* Kolom Tanggal */
.col-tanggal {
    width: 60px; /* Perkecil lebar */
    min-width: 60px;
    padding: 0;
}
/* Perbaikan Rata Tengah Header Tanggal */
.grid-table th.col-tanggal {
    text-align: center;
    padding: 1rem 0.5rem;
}

/* Dropdown di Grid */
.status-select {
    width: 100%;
    height: 48px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.status-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary) inset;
}

/* Warna Status */
.status-P, .status-PN { color: var(--accent-primary); background-color: var(--color-primary-soft); }
.status-S, .status-SN { color: #D97706; background-color: #FEF3C7; }
.status-M, .status-MN { color: #5B21B6; background-color: #EDE9FE; }
.status-L { color: var(--text-light); }
.status-DL, .status-DL\(P\) { color: #065F46; background-color: #D1FAE5; }
.status-C { color: #DB2777; background-color: #FCE7F3; }
.status-SK { color: #6D28D9; background-color: #EDE9FE; }
/* Warna Proyek/Piket (Ganti ✓ jadi teks) */
.status-PROYEK, .status-PIKET { 
    color: var(--color-success) !important; 
    background-color: var(--color-success-soft) !important;
    font-size: 1.25rem; /* Perbesar centang */
}
.status-select option[value="PROYEK"],
.status-select option[value="PIKET"] {
    font-size: 0.9rem; /* Kembalikan font normal di dropdown */
}

/* Warna Hari Libur */
.hari-sabtu, .hari-minggu { background-color: #FFF7ED; } /* Oranye Sangat Muda */
.hari-libur-nasional { background-color: #EFF6FF; } /* Biru Sangat Muda */
.hari-cuti-bersama { background-color: #FEFCE8; } /* Kuning Sangat Muda */

/* PERBAIKAN BUG FOOTER MENUTUPI DATA (Rekap Payroll) */
.footer-actions {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-content);
    border-top: 1px solid var(--border-color-light);
    /* HAPUS position: sticky, bottom, dan z-index */
}

/* === PERBAIKAN BUG TOMBOL SIMPAN (REKAP LAINNYA) === */
/* Nonaktifkan 'sticky' jika footer-actions ada di dalam .card */
.card .footer-actions {
    position: static;
    bottom: auto;
    border-top: none;
    padding: 1.5rem 0 0 0; /* Jaga padding atas dari form PHP */
    margin-top: 0;
    background: transparent;
}
/* ============================================== */


/* --- Modal Bulk Action --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content {
    transform: scale(1);
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-light);
    cursor: pointer; /* Tambahkan cursor */
}
.modal-close-btn:hover {
    color: var(--content-text);
}
.modal-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Grid Kalender Modal */
.bulk-date-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.grid-header-cell {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.5rem 0;
}
.bulk-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    border-top: 1px solid var(--border-color-light);
    border-left: 1px solid var(--border-color-light);
}
.date-cell {
    border-right: 1px solid var(--border-color-light);
    border-bottom: 1px solid var(--border-color-light);
    min-height: 80px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}
.date-cell.empty {
    background-color: var(--bg-main);
}
.date-cell-day {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.status-select-modal {
    width: 100%;
    flex-grow: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.bulk-date-toggles {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* --- Halaman Tabs (Pengaturan, Rekap Lainnya) --- */
.tabs-container {
    width: 100%;
}
.tab-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.tab-link {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: var(--transition-main);
    transform: translateY(2px);
    
    /* Ganti button jadi <a> */
    display: inline-block;
    background: none;
    border: none;
}
.tab-link:hover {
    color: var(--content-text);
}
.tab-link.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}
.tab-content.active {
    display: block;
}

/* Layout Rekap Lainnya */
.rekap-lainnya-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom (diubah) */
    gap: 1.5rem;
}
/* Filter & Search di Tabel Transport/Oncall */
.table-filter-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    gap: 1rem;
}
.table-search-input {
    width: 100%;
    max-width: 400px;
}

/* --- (Style .table-transport-oncall dan .qty-input DIHAPUS DARI SINI) --- */

/* --- Halaman Export --- */
.export-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.export-option-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.export-option-card svg {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}
.export-option-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.export-option-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

/* 9. Styling Responsif */

/* Overlay untuk menu mobile */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999; /* Di bawah sidebar */
}

/* -- Tablet (Sidebar Collapsed) -- */
@media (max-width: 1024px) {
    body {
        grid-template-columns: var(--sidebar-width-tablet) 1fr;
    }
    .sidebar {
        width: var(--sidebar-width-tablet);
    }
    .sidebar-logo-text,
    .sidebar-nav .nav-text {
        display: none; /* Sembunyikan teks */
    }
    .sidebar-nav a {
        justify-content: center; /* Ikon di tengah */
    }
    .sidebar-logo {
        justify-content: center;
    }
    .profile-name-desktop {
        display: none; /* Sembunyikan nama di header */
    }
    .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .rekap-lainnya-grid {
        grid-template-columns: 1fr;
    }
    .export-options-grid {
        grid-template-columns: 1fr;
    }
}

/* -- Mobile (Sidebar Hidden) -- */
@media (max-width: 768px) {
    body {
        grid-template-columns: 1fr; /* Hanya 1 kolom */
        grid-template-areas:
            "header"
            "content"
            "footer";
    }

    .sidebar {
        left: -300px; /* Sembunyi di luar layar */
        width: 300px; /* Lebar saat muncul */
        transition: left 0.3s ease;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    /* Tampilkan teks lagi saat mobile menu aktif */
    .sidebar-logo-text,
    .sidebar-nav .nav-text {
        display: block;
    }
    .sidebar-nav a {
        justify-content: flex-start;
    }
    .sidebar-logo {
        justify-content: flex-start;
    }

    #menu-toggle {
        display: block; /* Tampilkan hamburger */
    }
    
    .breadcrumb {
        display: none; /* Sembunyikan breadcrumb */
    }
    
    .header {
        padding: 0 1.5rem;
    }
    .main-content {
        padding: 1.5rem;
    }
    .footer {
        padding: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .quick-access-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-form .form-group,
    .filter-form button {
        width: 100%;
    }
    
    .table-filter-search {
        flex-direction: column;
        align-items: stretch;
    }
    .table-search-input {
        max-width: none;
    }

    /* State Aktif Mobile */
    body.sidebar-mobile-active .sidebar {
        left: 0;
    }
    body.sidebar-mobile-active .mobile-overlay {
        display: block;
    }
}

/* --- (Style .card-sticky-wrapper dll DIHAPUS DARI SINI) --- */

/* --- PERBAIKAN: Layout Grid Kiri-Kanan (Tab Lembur) --- */
.rekap-lainnya-grid-lembur {
    display: grid;
    /* Perbandingan 2 (kiri) : 3 (kanan) */
    grid-template-columns: 2fr 3fr; 
    gap: 1.5rem;
}

/* Responsif untuk grid lembur */
@media (max-width: 1024px) {
    .rekap-lainnya-grid-lembur {
        grid-template-columns: 1fr; /* Stack di tablet */
    }
}

/* --- Styling Modal Edit Generik --- */
.modal-overlay-edit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ganti ke flex-start */
    padding: 3rem 1rem; /* Beri padding atas */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto; /* Izinkan modal di-scroll */
}
.modal-overlay-edit.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content-edit {
    width: 100%;
    max-width: 600px; /* Lebar modal */
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay-edit.visible .modal-content-edit {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.modal-header .card-title {
    margin-bottom: 0; /* Hapus margin dari title */
}
.modal-close-btn {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
}
.modal-close-btn:hover {
    color: var(--content-text);
}

/* --- Styling Paginasi Generik --- */
.pagination {
    display: flex;
    justify-content: flex-end; /* Pindahkan ke kanan */
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-small);
    transition: var(--transition-main);
    color: var(--text-muted);
}
.pagination a:hover {
    background-color: var(--bg-content-hover);
    color: var(--content-text);
}
.pagination a.active {
    background-color: var(--accent-primary);
    color: white;
    box-shadow: var(--shadow-hard);
}
.pagination span.disabled {
    color: var(--text-light);
}

/* --- Styling Info Total Durasi --- */
.total-durasi-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-info-soft);
    border-radius: var(--radius-main);
    margin-bottom: 1.5rem; /* Ganti dari table-filter-search */
}
.total-durasi-info svg {
    color: var(--color-info);
    flex-shrink: 0;
}
.total-durasi-info p {
    font-size: 0.9rem;
    color: var(--content-text);
    font-weight: 500;
}
.total-durasi-info p strong {
    color: var(--color-info);
    font-size: 1rem;
}

/* === BARU: Style untuk Checkbox Transport === */
.form-check-group {
    background-color: #f7f9fc; /* Sesuaikan dengan var(--bg-main) atau soft color */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}
.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color); /* Beri border */
    border-radius: var(--radius-small); /* Samakan radius */
}
.form-check-input:focus {
     /* Style fokus sama dengan form-input */
    outline: none;
    border-color: var(--border-color-input-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-check-label {
    font-weight: 600;
    color: var(--content-text);
    margin: 0;
    padding-top: 0.15rem; /* Sejajarkan */
}
.form-check-keterangan {
    /* Style ini untuk <small> di dalam group */
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-left: 2rem; /* Sejajarkan di bawah label */
    margin-top: -0.25rem; /* Tarik ke atas sedikit */
}

/* === BARU: Style untuk Badge Transport di Tabel === */
.badge-transport-yes, .badge-transport-no {
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
}
.badge-transport-yes {
    background-color: var(--color-success-soft);
    color: var(--color-success);
    border-color: var(--color-success);
}
.badge-transport-no {
    background-color: var(--bg-main);
    color: var(--text-muted);
    border-color: var(--border-color);
}


/* === DIPERBARUI: Styling Multi-Select Pegawai === */
.pegawai-multi-select-container {
    display: flex;
    gap: 0.5rem;
}
.pegawai-multi-select-container .form-select {
    flex-grow: 1; /* Dropdown mengambil sisa ruang */
}
.pegawai-multi-select-container .btn {
    flex-shrink: 0; /* Tombol tidak mengecil */
    padding: 0.75rem 1rem; /* Samakan tinggi */
}

/* Kontainer untuk 'pill' pegawai yang dipilih (Gunakan ID unik) */
#pegawai-selected-list-lembur,
#pegawai-selected-list-oncall {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    margin-top: 0.75rem;
    min-height: 40px; /* Tinggi minimum */
}
#pegawai-selected-list-lembur.empty,
#pegawai-selected-list-oncall.empty {
    /* Tampilkan placeholder jika kosong */
    color: var(--text-light);
    font-style: italic;
    font-size: 0.9rem;
}

.pegawai-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-primary-soft);
    color: var(--accent-primary);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}
.pegawai-pill-remove {
    font-size: 1rem;
    font-weight: bold;
    color: var(--accent-primary);
    cursor: pointer;
    line-height: 1;
}
.pegawai-pill-remove:hover {
    color: var(--content-text);
}