/* ================== GLOBAL — Dual Theme (Light + Dark) ================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============== LIGHT THEME ============== */
:root,
[data-theme="light"] {
  --color-primary: #169AC4;
  --color-primary-dark: #0F7FA3;
  --color-primary-light: #E6F6FB;
  --color-accent: #FF6A00;
  --color-accent-hover: #E65C00;
  --color-accent-soft: #FFF1E8;

  --color-bg: #FFFFFF;
  --color-bg-section: #F5F9FC;
  --color-card: #FFFFFF;
  --color-card-hover: #F8FBFD;
  --color-border: #E3EDF5;
  --color-border-strong: #C9D6E2;
  --color-disabled-bg: #E3EDF5;
  --color-disabled-text: #6B7280;

  --color-text-heading: #0B0F12;
  --color-text-main: #2A3A4B;
  --color-text-secondary: #6B7C93;
  --color-text-subheading: #169AC4;
  --color-text-highlight: #FF6A00;

  --gradient-hero: linear-gradient(135deg, #0F7FA3 0%, #169AC4 100%);
  --gradient-header: linear-gradient(135deg, #0F7FA3 0%, #169AC4 100%);

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;
  --badge-success-bg: #DCFCE7; --badge-success-text: #166534; --badge-success-border: #86EFAC;
  --badge-warning-bg: #FEF3C7; --badge-warning-text: #92400E; --badge-warning-border: #FCD34D;
  --badge-danger-bg:  #FEE2E2; --badge-danger-text:  #991B1B; --badge-danger-border:  #FCA5A5;
  --badge-info-bg:    #DBEAFE; --badge-info-text:    #1E40AF; --badge-info-border:    #93C5FD;

  --shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 42, 68, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 42, 68, 0.15);
  --shadow-glow: 0 0 0 3px rgba(22, 154, 196, 0.20);

  /* ============== SKALA LAPISAN (z-index) ==============
     Satu tangga, dideklarasikan sekali, dipakai seluruh berkas CSS.
     Sebelumnya tiap berkas memilih angkanya sendiri dan .modal-backdrop
     sempat terdefinisi dua kali dengan nilai berbeda; yang dimuat
     belakangan menang, sehingga di panel admin dialog justru berada DI
     BAWAH navigasi bawah dan tombol bantuan. Angka di bawah ini berjarak
     lebar supaya lapisan baru dapat disisipkan tanpa menggeser yang lain.

     Urutannya mengikuti aturan sederhana: apa pun yang menuntut perhatian
     penuh menutupi apa yang hanya berdiri di latar. Dialog menutupi
     navigasi dan banner; indikator proses menutupi dialog; notifikasi
     berada paling atas karena ia harus terbaca dalam keadaan apa pun. */
  --z-sticky: 100;      /* navbar yang menempel di atas          */
  --z-dropdown: 300;    /* menu profil, daftar saran, popover    */
  --z-bottom-nav: 500;  /* navigasi bawah pada layar kecil       */
  --z-fab: 600;         /* tombol bantuan mengambang             */
  --z-banner: 700;      /* banner PWA, offline, "lihat sebagai"  */
  --z-overlay: 1000;    /* latar gelap dialog & sejenisnya       */
  --z-loader: 1100;     /* indikator proses, menutupi dialog     */
  --z-toast: 1200;      /* notifikasi ringkas, paling atas       */

  --overlay-bg: rgba(11, 15, 18, 0.45);
  --auth-overlay-1: rgba(22, 154, 196, 0.10);
  --auth-overlay-2: rgba(255, 106, 0, 0.06);
  --picker-filter: none;
  --picker-filter-hover: none;
  color-scheme: light;
}

/* ============== DARK THEME ============== */
[data-theme="dark"] {
  --color-primary: #38BDF8;
  --color-primary-dark: #169AC4;
  --color-primary-light: rgba(22, 154, 196, 0.15);
  --color-accent: #FF6A00;
  --color-accent-hover: #FF8124;
  --color-accent-soft: rgba(255, 106, 0, 0.12);

  --color-bg: #0B0F12;
  --color-bg-section: #11161B;
  --color-card: #1A1F24;
  --color-card-hover: #20262C;
  --color-border: #2A3137;
  --color-border-strong: #3A434B;
  --color-disabled-bg: #2A3137;
  --color-disabled-text: #6B7280;

  --color-text-heading: #FFFFFF;
  --color-text-main: #E5E7EB;
  --color-text-secondary: #A0AEC0;
  --color-text-subheading: #38BDF8;
  --color-text-highlight: #FF6A00;

  --gradient-hero: linear-gradient(135deg, #0B0F12 0%, #0F7FA3 100%);
  --gradient-header: linear-gradient(135deg, #0B0F12 0%, #0F7FA3 100%);

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --badge-success-bg: rgba(34, 197, 94, 0.15);  --badge-success-text: #4ADE80;  --badge-success-border: rgba(34, 197, 94, 0.30);
  --badge-warning-bg: rgba(245, 158, 11, 0.15); --badge-warning-text: #FBBF24;  --badge-warning-border: rgba(245, 158, 11, 0.30);
  --badge-danger-bg:  rgba(239, 68, 68, 0.15);  --badge-danger-text:  #F87171;  --badge-danger-border:  rgba(239, 68, 68, 0.30);
  --badge-info-bg:    rgba(56, 189, 248, 0.15); --badge-info-text:    #38BDF8;  --badge-info-border:    rgba(56, 189, 248, 0.30);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 3px rgba(56, 189, 248, 0.25);

  --overlay-bg: rgba(0, 0, 0, 0.7);
  --auth-overlay-1: rgba(22, 154, 196, 0.15);
  --auth-overlay-2: rgba(255, 106, 0, 0.08);
  --picker-filter: invert(1) opacity(0.6);
  --picker-filter-hover: invert(1) opacity(1);
  color-scheme: dark;
}

/* ============== BASE ============== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 { color: var(--color-text-heading); font-weight: 700; line-height: 1.3; }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-accent); }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
::selection { background: var(--color-primary); color: #fff; }

:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: all 0.25s ease;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: 1.5px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.btn:disabled {
  background: var(--color-disabled-bg); color: var(--color-disabled-text);
  border-color: transparent; cursor: not-allowed;
}
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.btn-accent {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.30);
}
.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-hover); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 106, 0, 0.40);
}
.btn-warning {
  background: var(--color-warning); color: #fff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30);
}
.btn-warning:hover:not(:disabled) { background: #D97706; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803D; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-block { width: 100%; }

/* ============== FORM ============== */
.phone-input-group{
    display:flex;
    align-items:center;
    width:100%;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-card);
    transition:var(--transition);
    overflow:hidden;
}
.phone-input-group:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(0,123,255,.12);
}
.phone-prefix{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    color:var(--color-text-heading);
    background:var(--color-bg-section);
    border-right:1.5px solid var(--color-border);
    white-space:nowrap;
    user-select:none;
}

.phone-input{
    flex:1;
    border:none;
    outline:none;
    padding:12px 14px;
    font-family:inherit;
    font-size:14px;
    color:var(--color-text-heading);
    background:transparent;
}
.phone-input::placeholder{
    color:#9ca3af;
}

.form-text{
    display:block;
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; margin-bottom: 6px; font-weight: 500;
  color: var(--color-text-heading); font-size: 14px;
}
.form-control {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); font-family: inherit; font-size: 14px;
  color: var(--color-text-heading); background: var(--color-card);
  transition: var(--transition);
}
.form-control::placeholder { color: var(--color-text-secondary); opacity: 0.7; }
.form-control:focus {
  outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-glow);
}
.form-control:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; }
select.form-control { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: var(--picker-filter); cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { filter: var(--picker-filter-hover); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

/* form helpers */
.form-helper { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }
.form-divider { border: none; border-top: 1px solid var(--color-border); margin: 22px 0 18px; }
.form-section-title { font-size: 14px; color: var(--color-primary); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 1.2px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Butir grid punya min-width: auto secara bawaan, artinya ia menolak
   menyusut lebih kecil daripada lebar alami isinya. Isian email dan grup
   nomor WhatsApp (awalan +62 ditambah kolom isian) lebar alaminya lebih
   dari 350 px, sehingga di layar 360 px keduanya menembus keluar kolom
   dan tepi kanannya terpotong — tanpa memunculkan gulir horizontal, jadi
   kerusakannya tidak kasatmata sampai ada yang mencoba mengetik di sana.
   min-width: 0 mengizinkan butir menyusut mengikuti kolomnya. */
.form-grid-2 > * { min-width: 0; }
.form-grid-2 .form-control,
.form-grid-2 .phone-input-group { max-width: 100%; }
.phone-input-group > input { min-width: 0; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ============== CARDS ============== */
.card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px; transition: var(--transition);
}
.card:hover {
  border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px);
}

/* ============== BADGE ============== */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; border: 1px solid transparent;
}
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-border); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--badge-warning-border); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  border-color: var(--badge-danger-border); }
.badge-info    { background: var(--badge-info-bg);    color: var(--badge-info-text);    border-color: var(--badge-info-border); }

/* ============== TABLE ============== */
.table-wrapper {
  overflow-x: auto; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--color-border); color: var(--color-text-main);
}
.table th {
  background: var(--color-bg-section); color: var(--color-primary); font-weight: 600;
  position: sticky; top: 0; white-space: nowrap;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
}
.table tbody tr { transition: var(--transition); }
.table tbody tr:hover { background: var(--color-card-hover); }
.table tbody tr:hover td { color: var(--color-text-heading); }

/* clickable row (untuk jadwal admin) */
.table tbody tr.clickable-row { cursor: pointer; }
.table tbody tr.clickable-row:hover {
  background: var(--color-primary-light);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

/* ============== NOTIF ============== */
#notif-container {
  position: fixed; top: 90px; right: 20px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.notif {
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--color-card); color: var(--color-text-heading);
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  font-size: 14px; animation: slideIn 0.3s ease;
}
.notif.success { border-left-color: var(--color-success); }
.notif.error   { border-left-color: var(--color-danger); }
.notif.warning { border-left-color: var(--color-accent); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.notif.fadeout { animation: fadeOut 0.3s ease forwards; }
@keyframes fadeOut { to { transform: translateX(120%); opacity: 0; } }

/* ============== LOADER ==============
   Utils.showLoader() menyisipkan .loader-overlay ke <body>. Gaya di bawah
   ini sempat dinonaktifkan sehingga elemen itu tercipta tanpa tampilan
   apa pun — proses panjang seperti membuat arsip ZIP jadi tidak memberi
   tanda sedang berjalan. Lapisannya di atas dialog karena ia memang
   dipakai saat menyimpan dari dalam dialog. */
.loader-overlay {
  position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: var(--z-loader);
}
.loader-overlay.active { display: flex; }
.spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary); border-right-color: var(--color-accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ============== MODAL ============== */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-overlay); padding: 20px;
}
.modal-backdrop.active { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease;
  box-shadow: var(--shadow-lg);
}
.modal.modal-sm { max-width: 460px; }
.modal.modal-md { max-width: 720px; }
.modal.modal-lg { max-width: 960px; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  padding: 20px 24px; border-bottom: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 18px; color: var(--color-text-heading); }
.modal-close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--color-text-secondary); line-height: 1; transition: var(--transition);
}
.modal-close:hover { color: var(--color-accent); }
.modal-body { padding: 24px; }
.modal-body p { color: var(--color-text-main); }
.modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}

/* ============== EQUIPMENT (modal absen) - request 11 ============== */
.equipment-section {
  background: var(--color-bg-section); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px;
}
.equipment-section h4 {
  font-size: 14px; margin-bottom: 12px; color: var(--color-primary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.equipment-detail {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px;
}
.equipment-detail summary {
  cursor: pointer; padding: 4px 0; user-select: none;
  font-size: 13px; color: var(--color-text-heading);
  display: flex; align-items: center; gap: 8px;
}
.equipment-detail summary::-webkit-details-marker { color: var(--color-primary); }
.equipment-detail summary small {
  color: var(--color-text-secondary); font-weight: 400; font-size: 11px;
}
.equipment-detail ul {
  list-style: none; padding: 10px 0 6px 8px; margin: 0;
  border-top: 1px solid var(--color-border); margin-top: 8px;
}
.equipment-detail ul li {
  padding: 5px 0; font-size: 13px; color: var(--color-text-main);
  position: relative; padding-left: 18px;
}
.equipment-detail ul li::before {
  content: '▸'; position: absolute; left: 0; color: var(--color-accent); font-weight: bold;
}

.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 14px; border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md); transition: var(--transition); margin-bottom: 4px;
}
.checkbox-row:hover { border-color: var(--color-primary); background: var(--color-card-hover); }
.checkbox-row input[type="checkbox"]:checked + span {
  color: var(--color-primary); font-weight: 500;
}
.checkbox-row span { font-size: 13px; color: var(--color-text-main); flex: 1; }

.divider { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; }

/* ============== RAPOR ============== */
.rapor-empty {
  text-align: center; padding: 30px 16px;
}
.rapor-empty .icon { font-size: 56px; margin-bottom: 14px; opacity: 0.4; }
.rapor-empty h4 { color: var(--color-text-heading); margin-bottom: 10px; font-size: 18px; }
.rapor-empty p { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px; }

.rapor-content { display: flex; flex-direction: column; gap: 18px; }
.rapor-section {
  background: var(--color-bg-section); padding: 16px;
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
}
.rapor-section h4 {
  font-size: 12px; color: var(--color-primary); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.rapor-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: 14px;
}
.rapor-row:last-child { border-bottom: none; }
.rapor-row span { color: var(--color-text-secondary); }
.rapor-row strong { color: var(--color-text-heading); text-align: right; }
.rapor-grade {
  text-align: center; padding: 18px; background: var(--color-primary-light);
  border-radius: var(--radius-md); border: 1px solid rgba(22, 154, 196, 0.2);
}
.grade-nilai {
  font-size: 48px; font-weight: 800;
  color: var(--color-primary); letter-spacing: -1px;
}
.grade-predikat {
  font-size: 16px; font-weight: 600; color: var(--color-accent); margin-top: 4px;
}
.rapor-catatan {
  background: var(--color-card); padding: 14px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent); font-size: 14px;
  line-height: 1.7; color: var(--color-text-main); white-space: pre-wrap;
}

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-section); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ============== THEME TOGGLE ============== */
.theme-toggle {
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-strong); background: transparent;
  color: var(--color-text-heading); border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; transition: var(--transition); flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--color-primary); border-color: var(--color-primary);
  /* color: #fff; transform: rotate(15deg); */
}
.theme-toggle:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* ============== INFO TIP ============== */
.info-tip {
  background: var(--color-primary-light); color: var(--color-primary-dark);
  padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(22, 154, 196, 0.2);
  font-size: 13px; margin-bottom: 14px;
}
[data-theme="dark"] .info-tip { color: var(--color-text-main); }

/* ============== UTILS ============== */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-secondary); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-highlight { color: var(--color-text-highlight); }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.hidden { display: none !important; }

.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
}
.toolbar-left {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; flex: 1;
}
.search-input,
.filter-select {
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px;
  background: var(--color-card); color: var(--color-text-heading);
  transition: var(--transition);
}
.search-input { min-width: 240px; flex: 1; max-width: 320px; }
.search-input::placeholder { color: var(--color-text-secondary); }
.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}
.filter-select { cursor: pointer; min-width: 140px; }
.hint-text { font-size: 12px; color: var(--color-text-secondary); margin: 0; }

/* ============== PWA INSTALL BANNER ============== */
.pwa-banner {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  /* Sama seperti banner offline: saat tersembunyi ia digeser, bukan
     dilepas dari DOM, jadi sentuhan harus dimatikan agar tidak menghalangi
     apa pun di belakangnya. */
  pointer-events: none;
  width: calc(100% - 32px); max-width: 460px;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px 18px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  z-index: var(--z-banner);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s;
  opacity: 0;
}
.pwa-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.pwa-banner-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: var(--gradient-hero); color: white;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-body h4 {
  margin: 0 0 6px; font-size: 15px;
  color: var(--color-text-heading);
}
.pwa-banner-body p {
  margin: 0 0 10px; font-size: 13px; line-height: 1.5;
  color: var(--color-text-main);
}
.pwa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pwa-btn-primary, .pwa-btn-ghost {
  padding: 8px 14px; border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: var(--transition);
}
.pwa-btn-primary {
  background: var(--color-accent); color: white;
}
.pwa-btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}
.pwa-btn-ghost {
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.pwa-btn-ghost:hover { background: var(--color-bg-section); }
.pwa-close {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px;
  background: transparent; border: none;
  font-size: 20px; cursor: pointer; line-height: 1;
  color: var(--color-text-secondary);
  border-radius: 50%; transition: var(--transition);
}
.pwa-close:hover { background: var(--color-bg-section); color: var(--color-text-heading); }

@media (max-width: 480px) {
  .pwa-banner { bottom: 12px; padding: 14px 16px; }
  .pwa-banner-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 20px; }
  .pwa-banner-body h4 { font-size: 14px; }
}
/* Responsive toolbar */
@media (max-width: 768px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { width: 100%; }
  .search-input { min-width: 0; max-width: none; width: 100%; }
  .filter-select { flex: 1; min-width: 120px; }
}

/* ============== RESPONSIVE ============== */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .card { padding: 18px; }
  .modal-body { padding: 18px; }
  body { font-size: 14px; }
  .table th, .table td { padding: 10px; font-size: 12px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { width: 100%; }
  .search-input { min-width: 0; max-width: none; width: 100%; }
  .filter-select { flex: 1; min-width: 120px; }
}