:root {
  --brand-dark: #10231c;
  --brand: #1f6f50;
  --brand-light: #e8f3ee;
  --accent: #c9a24b;
  --bg: #f7f8f7;
  --card-radius: 14px;
}

body {
  background: var(--bg);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #223229;
  overflow-x: hidden; /* jaring pengaman terakhir agar halaman tidak pernah scroll ke samping */
}

/* PENTING: tanpa min-width:0 di sini, konten lebar (mis. tabel schedule) akan
   memaksa flex item ini melebar dan mendorong SELURUH halaman (termasuk sidebar
   di kirinya) ikut bergeser saat discroll ke kanan. Ini akar masalah utama
   kenapa nav-menu ikut bergeser sebelumnya. */
.main-content-col {
  min-width: 0;
  flex: 1 1 auto;
}

.navbar-brand-logo {
  height: 36px;
  width: 36px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.app-sidebar {
  background: var(--brand-dark);
  min-height: 100vh;
  color: #eef5f0;
}

.app-sidebar a {
  color: #cfe3d8;
  text-decoration: none;
  display: block;
  padding: 10px 18px;
  border-radius: 10px;
  margin: 3px 10px;
  font-size: 0.94rem;
}

.app-sidebar a.active,
.app-sidebar a:hover {
  background: var(--brand);
  color: #fff;
}

.app-sidebar .side-heading {
  color: #8fac9d;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 20px 4px;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e7ece9;
}

.card {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 10px rgba(20, 40, 30, 0.06);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid #eef1ef;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  font-weight: 600;
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover {
  background: #17573e;
  border-color: #17573e;
  color: #fff;
}

.stat-card {
  border-radius: var(--card-radius);
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #0f4a34);
}

.stat-card.gold { background: linear-gradient(135deg, var(--accent), #9c7a2e); }
.stat-card.slate { background: linear-gradient(135deg, #4a5a68, #263542); }
.stat-card.rose { background: linear-gradient(135deg, #b6486a, #7d2e46); }

.avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
}
.avatar-lg {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7c73;
  border-bottom-width: 1px;
}

.badge { font-weight: 500; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10231c, #1f6f50);
}

.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 18px;
  overflow: hidden;
}

/* Tombol "Atur Schedule": dulu position:fixed di pojok kanan atas sehingga
   bertumpuk dengan info profil user di topbar (masalah 1). Sekarang tombol
   ditaruh sebagai bagian normal dari baris judul halaman (lihat schedule/index.php),
   jadi class ini tidak lagi memakai position:fixed - hanya sedikit aksen visual. */
.schedule-fixed-btn {
  box-shadow: 0 3px 10px rgba(20, 40, 30, 0.15);
}
.notif-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e64545;
  box-shadow: 0 0 0 2px rgba(230, 69, 69, 0.25);
  margin-left: 6px;
  vertical-align: middle;
}

/* ---- Tabel Schedule ---- */
.sched-cell { min-width: 110px; font-size: 0.8rem; }
.sched-clickable { cursor: pointer; }
.sched-clickable:hover { filter: brightness(0.96); outline: 1px solid rgba(31, 111, 80, 0.35); outline-offset: -1px; }

/* PENTING (masalah 2 - warna tidak pernah berubah): Bootstrap 5 mendefinisikan
   warna latar sel tabel lewat selector ".table > :not(caption) > * > *" yang
   spesifisitasnya LEBIH TINGGI daripada satu class biasa seperti ".sched-off",
   walaupun stylesheet kita dimuat setelah Bootstrap. Akibatnya background-color
   dari class kategori di bawah ini selalu ditimpa oleh Bootstrap dan terlihat
   seperti "tidak berubah". Solusinya: pakai !important di sini supaya warna
   kategori schedule selalu menang. */
.sched-off,
.sched-holiday,
.sched-al,
.sched-dp,
.sched-eo,
.sched-ph {
  font-weight: 600;
}
.sched-off { background: #fdeeee !important; color: #a13030 !important; }       /* OFF - merah */
.sched-holiday { background: #fff6e1 !important; color: #8a6a12 !important; }
.sched-al { background: #e3f6e8 !important; color: #1f7a3d !important; }        /* Annual Leave - hijau */
.sched-dp { background: #e3edfb !important; color: #1d5ba6 !important; }        /* Day Payment - biru */
.sched-eo { background: #eceff1 !important; color: #4b5a63 !important; }        /* Extra Off - abu-abu */
.sched-ph { background: #fce4ec !important; color: #a8305a !important; }        /* Public Holiday - merah muda */

/* ---- Rekap jumlah pegawai per shift (masalah 4), ditampilkan sebagai tfoot
   yang menempel di bawah area scroll tabel schedule ---- */
.schedule-table-wrap tfoot td,
.schedule-table-wrap tfoot th {
  position: sticky;
  bottom: 0;
  background: #f3f6f4 !important;
  font-weight: 600;
  z-index: 2;
}
.schedule-table-wrap tfoot .sched-sticky-col { z-index: 5; }
.schedule-table-wrap tfoot tr.recap-total td,
.schedule-table-wrap tfoot tr.recap-total th {
  background: #e8f3ee !important;
  color: var(--brand);
  border-top: 2px solid var(--brand);
}

/* Kolom "Nama" tetap diam saat tabel schedule di-scroll ke kanan (masalah 2),
   dan baris tanggal (header) tetap diam saat di-scroll ke bawah (vertical scroll) */
.schedule-table-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: 75vh; /* tabel discroll di dalam area ini, bukan seluruh halaman */
}
.schedule-table-wrap table { margin-bottom: 0; }

.schedule-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
.schedule-table-wrap thead th.sched-ph { background: #fce4ec; }

.sched-sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 2px 0 4px rgba(20, 40, 30, 0.08);
}
/* Sel pojok kiri-atas (Nama) harus di atas segalanya saat scroll 2 arah */
.schedule-table-wrap thead .sched-sticky-col { z-index: 4; }

/* ---- Kalender pemilihan tanggal (Bulk Action - Atur Schedule) ----
   Dipakai bukan Bootstrap row-cols karena versi Bootstrap yang dipakai
   di aplikasi ini tidak menyediakan kelas row-cols-7 (maksimal row-cols-6),
   sehingga grid 7 kolom (Senin s/d Minggu) harus dibuat manual agar tanggal
   selalu sejajar tepat di bawah header harinya masing-masing. */
.bulk-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.bulk-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.bulk-calendar-grid .cal-cell-empty { min-height: 1px; }
.bulk-calendar-grid label.cal-day {
  aspect-ratio: 1 / 1;
  width: 100%;
}