/* =====================================================================
   EMS — Design tokens & shared styles (CLAUDE.md Section 13)
   Dimuat SETELAH bootstrap.min.css di views/partials/head.ejs.
   Daftar token & class + kapan dipakai: docs/ui-tokens.md.
   Jangan menambah warna hex baru di view — pakai token di :root.
   ===================================================================== */

/* ---- 13-G Tipografi: Sora (self-host, 4 bobot saja) ---- */
@font-face { font-family: "Sora"; src: url("/fonts/sora/sora-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora/sora-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora/sora-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora/sora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ---- Bootstrap 5 overrides ---- */
  --bs-font-sans-serif: "Sora", -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;            /* 15px */
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-bg: #F3F4F6;
  --bs-body-color: #111827;
  --bs-body-color-rgb: 17, 24, 39;
  --bs-secondary-color: #646B78;
  --bs-border-color: #E5E7EB;
  --bs-link-color: #2563EB;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1D4ED8;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-focus-ring-color: rgba(37, 99, 235, .25);

  /* ---- App tokens ---- */
  --ems-primary: #2563EB;
  --ems-primary-dark: #1D4ED8;
  --ems-primary-soft: #EFF4FF;
  --ems-accent: #C2410C;                    /* badge hitungan (mis. Pengajuan menunggu) */

  --ems-sidebar-bg: #111827;
  --ems-sidebar-active: #1F2937;
  --ems-sidebar-hover: rgba(255, 255, 255, .06);
  --ems-sidebar-text: #E5E7EB;
  --ems-sidebar-muted: #9CA3AF;
  --ems-sidebar-width: 248px;

  --ems-bg: #F3F4F6;
  --ems-surface: #FFFFFF;
  --ems-border: #E5E7EB;
  --ems-table-head-bg: #F9FAFB;
  --ems-ink: #111827;
  --ems-muted: #646B78;   /* >=4.5:1 di putih & --ems-bg */
  --ems-subtle: #9CA3AF;                    /* HANYA dekorasi/ikon, bukan teks isi (kontras < 4.5) */

  --ems-card-radius: .75rem;
  --ems-card-shadow: 0 1px 3px rgba(17, 24, 39, .08);
  --ems-card-shadow-hover: 0 6px 16px rgba(17, 24, 39, .10);
  --ems-card-padding: 1.25rem;
  --ems-focus: 0 0 0 3px rgba(37, 99, 235, .35);

  /* Status (bg / teks) — 13-C: hijau=hadir/masuk/aktif, kuning=terlambat/menunggu,
     merah=belum absen/alpa/pulang/nonaktif, biru=dinas/cuti/sakit/info */
  --ems-success-bg: #EAF7EE;  --ems-success-fg: #15803D;
  --ems-warning-bg: #FEF3C7;  --ems-warning-fg: #92400E;
  --ems-danger-bg:  #FDE8E8;  --ems-danger-fg:  #B91C1C;
  --ems-info-bg:    #E8EFFD;  --ems-info-fg:    #1D4ED8;
  --ems-neutral-bg: #F3F4F6;  --ems-neutral-fg: #4B5563;

  /* Warna angka KPI */
  --ems-kpi-hadir: #15803D;
  --ems-kpi-terlambat: #B45309;
  --ems-kpi-info: #1D4ED8;
  --ems-kpi-alpa: #B91C1C;

  /* ---- Alias lama (dipakai inline style di view lama: employee-print,
     recap-print, nav.ejs). Jangan dipakai di kode baru — pakai --ems-*. ---- */
  --brand: var(--ems-primary);
  --brand-dark: var(--ems-primary-dark);
  --brand-soft: var(--ems-primary-soft);
  --ink: var(--ems-ink);
  --muted: var(--ems-muted);
  --page-bg: var(--ems-bg);
  --card-radius: var(--ems-card-radius);
}

body {
  background: var(--ems-bg);
  color: var(--ems-ink);
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ems-primary); }
a:hover { color: var(--ems-primary-dark); }

/* ---- Focus terlihat jelas (13-E): jangan hapus outline tanpa pengganti ---- */
:focus-visible { outline: 2px solid var(--ems-primary); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 2px solid var(--ems-primary);
  outline-offset: 1px;
}

/* =====================================================================
   Skala tipe (13-G)
   ===================================================================== */
.page-title     { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--ems-ink); margin: 0; }
.card-title-ems { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--ems-ink); margin: 0; }
.label-ems, .form-label { font-size: .8125rem; font-weight: 600; color: var(--ems-ink); }
.meta           { font-size: .75rem; font-weight: 400; color: var(--ems-muted); }
.kpi-value      { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ems-ink); font-variant-numeric: tabular-nums; }
.kpi-label      { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ems-muted); }
.kpi-hadir      { color: var(--ems-kpi-hadir); }
.kpi-terlambat  { color: var(--ems-kpi-terlambat); }
.kpi-info       { color: var(--ems-kpi-info); }
.kpi-alpa       { color: var(--ems-kpi-alpa); }

/* Angka sejajar: .tabular = angka tabular saja; .num = tabular + rata kanan
   (kolom jam, menit telat, rupiah, persen). */
.tabular, .num  { font-variant-numeric: tabular-nums; }
.num            { text-align: right; white-space: nowrap; }

/* =====================================================================
   Kartu
   ===================================================================== */
.card { --bs-card-border-color: var(--ems-border); --bs-card-border-radius: var(--ems-card-radius); }
.card-ems,
.kpi-card,
.table-card,
.card.mobile-card {
  background: var(--ems-surface);
  border: 0;
  border-radius: var(--ems-card-radius);
  box-shadow: var(--ems-card-shadow);
}
.card-ems { padding: var(--ems-card-padding); }
.kpi-card.clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; display: block; color: inherit; }
.kpi-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--ems-card-shadow-hover); }
.kpi-card.clickable:focus-visible { box-shadow: var(--ems-card-shadow-hover); outline: 2px solid var(--ems-primary); outline-offset: 2px; }
.kpi-icon { width: 44px; height: 44px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* =====================================================================
   Tabel padat (13-G): .table-ems; tabel lama di dalam .table-card ikut gaya ini
   ===================================================================== */
.table-ems,
.table-card .table {
  font-size: .875rem;
  letter-spacing: -.005em;
  --bs-table-border-color: var(--ems-border);
  margin-bottom: 0;
}
.table-ems > thead > tr > th,
.table-card .table > thead > tr > th {
  --bs-table-bg: var(--ems-table-head-bg);
  --bs-table-color: var(--ems-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom-width: 1px;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.table-ems > tbody > tr > td,
.table-card .table > tbody > tr > td { vertical-align: middle; }

/* =====================================================================
   Pill status (dipakai di semua halaman baru — warna konsisten 13-C)
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--ems-neutral-bg);
  color: var(--ems-neutral-fg);
}
.pill-hadir, .pill-disetujui                { background: var(--ems-success-bg); color: var(--ems-success-fg); }
.pill-terlambat, .pill-menunggu             { background: var(--ems-warning-bg); color: var(--ems-warning-fg); }
.pill-alpa, .pill-mangkir, .pill-ditolak    { background: var(--ems-danger-bg);  color: var(--ems-danger-fg); }
.pill-info                                  { background: var(--ems-info-bg);    color: var(--ems-info-fg); }
.pill-muted                                 { background: var(--ems-neutral-bg); color: var(--ems-neutral-fg); }

/* Badge lama (Bootstrap .badge + class ini) — dipertahankan, warnanya ikut token */
.badge-masuk, .badge-pulang, .badge-off, .badge-ontime,
.badge-late, .badge-early, .badge-manual { font-weight: 600; letter-spacing: .02em; }
.badge-masuk  { background: var(--ems-success-bg); color: var(--ems-success-fg); }
.badge-pulang { background: var(--ems-danger-bg);  color: var(--ems-danger-fg); }
.badge-off    { background: var(--ems-warning-bg); color: var(--ems-warning-fg); }
.badge-ontime { background: var(--ems-success-bg); color: var(--ems-success-fg); }
.badge-late   { background: var(--ems-warning-bg); color: var(--ems-warning-fg); }
.badge-early  { background: var(--ems-warning-bg); color: var(--ems-warning-fg); }
.badge-manual { background: var(--ems-info-bg);    color: var(--ems-info-fg); }

/* =====================================================================
   Tombol & form
   ===================================================================== */
.btn { border-radius: .6rem; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--ems-primary);
  --bs-btn-border-color: var(--ems-primary);
  --bs-btn-hover-bg: var(--ems-primary-dark);
  --bs-btn-hover-border-color: var(--ems-primary-dark);
  --bs-btn-active-bg: var(--ems-primary-dark);
  --bs-btn-active-border-color: var(--ems-primary-dark);
  --bs-btn-disabled-bg: var(--ems-primary);
  --bs-btn-disabled-border-color: var(--ems-primary);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
  --bs-btn-color: var(--ems-primary);
  --bs-btn-border-color: var(--ems-primary);
  --bs-btn-hover-bg: var(--ems-primary);
  --bs-btn-hover-border-color: var(--ems-primary);
  --bs-btn-active-bg: var(--ems-primary-dark);
  --bs-btn-active-border-color: var(--ems-primary-dark);
  --bs-btn-disabled-color: var(--ems-primary);
  --bs-btn-disabled-border-color: var(--ems-primary);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.form-control, .form-select { border-radius: .6rem; border-color: var(--ems-border); }
.form-control:focus, .form-select:focus { border-color: var(--ems-primary); box-shadow: var(--ems-focus); }
.form-check-input:checked { background-color: var(--ems-primary); border-color: var(--ems-primary); }

.text-brand { color: var(--ems-primary) !important; } /* utilitas lama, sejajar .text-primary Bootstrap */
.page-link { color: var(--ems-primary); }
.page-item.active .page-link { background: var(--ems-primary); border-color: var(--ems-primary); color: #FFFFFF; }
.pagination { --bs-pagination-color: var(--ems-primary); --bs-pagination-active-bg: var(--ems-primary); --bs-pagination-active-border-color: var(--ems-primary); --bs-pagination-focus-box-shadow: var(--ems-focus); }
.nav-tabs .nav-link.active { color: var(--ems-primary); border-color: var(--ems-border) var(--ems-border) var(--ems-surface); }

/* =====================================================================
   Sidebar (navy) — markup di views/partials/nav.ejs
   ===================================================================== */
.sidebar {
  width: var(--ems-sidebar-width);
  min-width: var(--ems-sidebar-width);
  flex-shrink: 0;
  background: var(--ems-sidebar-bg);
  color: var(--ems-sidebar-text);
  /* offcanvas-md (<768px) membaca variabel ini */
  --bs-offcanvas-bg: var(--ems-sidebar-bg);
  --bs-offcanvas-color: var(--ems-sidebar-text);
  --bs-offcanvas-width: 280px;
}
/* Bootstrap memaksa `.offcanvas-md { background-color: transparent !important }`
   di >=768px; satu !important dgn spesifisitas lebih tinggi diperlukan di sini. */
.sidebar.offcanvas-md { background-color: var(--ems-sidebar-bg) !important; }
@media (min-width: 768px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.sidebar .brand {
  padding: 1.25rem 1.25rem .75rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #FFFFFF;
}
.sidebar .brand .bi { color: #60A5FA; }
.sidebar-nav { padding: .5rem .75rem 1rem; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .8rem;
  border-radius: .6rem;
  color: var(--ems-sidebar-text);
  text-decoration: none;
  font-weight: 500;
  font-size: .875rem;
  margin-bottom: .125rem;
}
.sidebar-nav a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; color: var(--ems-sidebar-muted); }
.sidebar-nav a:hover { background: var(--ems-sidebar-hover); color: #FFFFFF; }
.sidebar-nav a.active { background: var(--ems-sidebar-active); color: #FFFFFF; font-weight: 600; }
.sidebar-nav a.active .bi, .sidebar-nav a:hover .bi { color: #FFFFFF; }
.sidebar-nav a:focus-visible { outline: 2px solid #93C5FD; outline-offset: 1px; }
.sidebar-nav hr { border-color: rgba(255, 255, 255, .12); opacity: 1; margin: .75rem .3rem; }
/* Grup menu yang bisa dibuka-tutup (<details>): judul kategori + item di dalamnya */
.sidebar-group { margin-bottom: .125rem; }
.sidebar-group > summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: .6rem; cursor: pointer; list-style: none;
  color: var(--ems-sidebar-text); font-weight: 500; font-size: .875rem; user-select: none;
}
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; color: var(--ems-sidebar-muted); }
.sidebar-group > summary .group-chevron { margin-left: auto; font-size: .8rem; width: auto; transition: transform .15s ease; }
.sidebar-group[open] > summary .group-chevron { transform: rotate(180deg); }
.sidebar-group > summary:hover { background: var(--ems-sidebar-hover); color: #FFFFFF; }
.sidebar-group > summary:hover .bi { color: #FFFFFF; }
.sidebar-group > summary:focus-visible { outline: 2px solid #93C5FD; outline-offset: 1px; }
.sidebar-group.has-active > summary { color: #FFFFFF; font-weight: 600; }
.sidebar-group.has-active > summary .bi { color: #FFFFFF; }
.sidebar-group > summary .group-badge { margin-left: auto; }
.sidebar-group > summary .group-badge + .group-chevron { margin-left: .4rem; }
.sidebar-group[open] > summary .group-badge { display: none; }
.sidebar-group-items { padding-left: 1.85rem; padding-top: .125rem; }
.sidebar-group-items a { font-size: .8125rem; padding: .45rem .75rem; }
@media (prefers-reduced-motion: reduce) { .sidebar-group > summary .group-chevron { transition: none; } }
.sidebar-section-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ems-sidebar-muted); padding: .9rem .8rem .3rem; font-weight: 600; }
/* Badge hitungan oranye di samping item (mis. "Pengajuan  3") */
.sidebar-nav .nav-count {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--ems-accent);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Topbar ---- */
.topbar { background: var(--ems-surface); border-bottom: 1px solid var(--ems-border); }
.mobile-topbar { background: var(--ems-sidebar-bg); }
.mobile-topbar .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .35); }
.mobile-topbar .btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.user-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--ems-primary-soft); border: none; border-radius: 3rem;
  padding: .35rem .6rem .35rem .35rem; color: var(--ems-ink); font-weight: 600; font-size: .875rem;
}
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ems-primary); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}

/* ---- Footer ---- */
.app-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ems-border);
  text-align: center;
  font-size: .75rem;
  color: var(--ems-muted);
}

/* =====================================================================
   Mobile (<768px)
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Ruang ekstra supaya konten terakhir tidak ketutup bottom-nav floating */
  main.container-fluid { padding-bottom: 5.75rem; }
  /* Offcanvas default tidak auto-scroll — menu panjang (SUPERADMIN) bisa mentok */
  .sidebar.offcanvas-md { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Bottom nav floating (admin, mobile) ---- */
.bottom-nav {
  position: fixed;
  left: .75rem; right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  z-index: 1030;
  background: var(--ems-surface);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .16);
  display: flex;
  align-items: stretch;
  padding: .35rem;
  gap: .15rem;
}
.bottom-nav a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .4rem .1rem;
  border-radius: .75rem;
  color: var(--ems-muted);
  text-decoration: none;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.1;
}
.bottom-nav a .bi { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--ems-primary); background: var(--ems-primary-soft); }

/* =====================================================================
   Custom date+time picker (kalender + jam analog) — public/js
   ===================================================================== */
.dtp-popover {
  position: fixed; z-index: 1080; width: min(300px, calc(100vw - 24px));
  background: var(--ems-surface); border-radius: var(--ems-card-radius);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .18);
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.dtp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .1rem; }
.dtp-month-label { font-weight: 700; font-size: .9rem; color: var(--ems-ink); }
.dtp-nav { border: none; background: transparent; color: var(--ems-muted); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dtp-nav:hover { background: var(--ems-primary-soft); color: var(--ems-primary); }
.dtp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .68rem; color: var(--ems-muted); margin-top: .35rem; }
.dtp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: .15rem; }
.dtp-day { border: none; background: transparent; width: 100%; aspect-ratio: 1; border-radius: 50%; font-size: .8rem; color: var(--ems-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-day:hover { background: var(--ems-primary-soft); }
.dtp-day.dtp-muted { color: #C4C8CF; }
.dtp-day.dtp-today { box-shadow: inset 0 0 0 1.5px var(--ems-primary); }
.dtp-day.dtp-selected { background: var(--ems-primary); color: #FFFFFF; }
.dtp-divider { border-top: 1px solid var(--ems-border); }

.dtp-readout { display: flex; align-items: center; justify-content: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.dtp-seg { border: none; background: transparent; font-size: 1.5rem; font-weight: 700; color: var(--ems-muted); border-radius: .5rem; padding: 0 .25rem; line-height: 1.3; }
.dtp-seg.dtp-seg-active { color: var(--ems-primary); background: var(--ems-primary-soft); }
.dtp-colon { font-size: 1.5rem; font-weight: 700; color: var(--ems-muted); }
.dtp-ampm { display: flex; flex-direction: column; margin-left: .5rem; border: 1px solid var(--ems-border); border-radius: .5rem; overflow: hidden; }
.dtp-ampm-btn { border: none; background: var(--ems-surface); color: var(--ems-muted); font-size: .66rem; font-weight: 700; padding: .15rem .45rem; }
.dtp-ampm-btn.dtp-ap-active { background: var(--ems-primary); color: #FFFFFF; }

.dtp-dial {
  position: relative; width: 220px; height: 220px; margin: .5rem auto 0;
  border-radius: 50%; background: var(--ems-bg); touch-action: none; user-select: none;
}
.dtp-dial-center { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--ems-primary); z-index: 3; }
.dtp-dial-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 92px; background: var(--ems-primary); transform-origin: top center; margin-left: -1px; z-index: 2; border-radius: 2px; pointer-events: none; }
.dtp-dial-hand::after { content: ''; position: absolute; bottom: -14px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--ems-primary); opacity: .18; }
.dtp-num { position: absolute; width: 32px; height: 32px; margin: -16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: var(--ems-ink); z-index: 4; cursor: pointer; }
.dtp-num.dtp-num-active { background: var(--ems-primary); color: #FFFFFF; }

.dtp-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .1rem; }
.dtp-footer-actions { display: flex; gap: .4rem; }

/* =====================================================================
   Cetak (recap-print, employee-print, Ctrl+P dari halaman mana pun)
   ===================================================================== */
@media print {
  body { background: #FFFFFF; color: #000000; }
  .sidebar, .topbar, .mobile-topbar, .bottom-nav, .app-footer, .no-print { display: none !important; }
  main.container-fluid { padding: 0; }
  .card-ems, .kpi-card, .table-card, .card.mobile-card, .card { box-shadow: none; border: 1px solid #D1D5DB; break-inside: avoid; }
  .pill, .badge-masuk, .badge-pulang, .badge-off, .badge-ontime, .badge-late, .badge-early, .badge-manual {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .table-ems > thead, .table-card .table > thead { display: table-header-group; }
  .table-ems tr, .table-card .table tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Jadwal Shift (/schedules) ---------- */
.sch-scroll { overflow-x: auto; max-width: 100%; }
.sch-table { border-collapse: separate; border-spacing: 0; font-size: .8125rem; min-width: max-content; }
.sch-table th, .sch-table td { border-bottom: 1px solid var(--ems-border); border-right: 1px solid var(--ems-border); }
.sch-table thead th { background: var(--ems-table-head-bg); color: var(--ems-muted); font-weight: 600; text-align: center; padding: .35rem .25rem; position: sticky; top: 0; z-index: 1; }
.sch-table .sch-first { position: sticky; left: 0; z-index: 2; background: var(--ems-surface); min-width: 15rem; max-width: 15rem; padding: .4rem .75rem; text-align: left; font-weight: 500; }
.sch-table thead .sch-first { z-index: 3; background: var(--ems-table-head-bg); }
.sch-day { min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.sch-day.is-weekend { color: var(--ems-danger-fg); }
.sch-day.is-today { background: var(--ems-info-bg) !important; color: var(--ems-info-fg); }
.sch-cell { text-align: center; font-variant-numeric: tabular-nums; min-width: 2.6rem; padding: .35rem .2rem; border-radius: .25rem; }
td.sch-cell { border-radius: 0; }
.sch-base { color: var(--ems-muted); }
.sch-base-libur { color: var(--ems-muted); background: var(--ems-neutral-bg); }
.sch-ovr { color: var(--ems-info-fg); background: var(--ems-info-bg); font-weight: 700; }
.sch-ovr-libur { color: var(--ems-danger-fg); background: var(--ems-danger-bg); font-weight: 700; }
.sch-holiday { color: var(--ems-warning-fg); background: var(--ems-warning-bg); }
.sch-out { color: var(--ems-subtle); background: var(--ems-neutral-bg); }
.sch-edit { cursor: pointer; }
.sch-edit:hover, .sch-edit:focus-visible { outline: 2px solid var(--ems-primary); outline-offset: -2px; }