/* ════════════════════════════════════════════════════════════════════════════
 * SOA-EDU Scheduling — Kalender Module Styles
 * v31 (29 Mei 2026 — sesi 116) — "Fix font-scale single-day tidak jalan (desktop)"
 *   - @media (min-width:1100px): .bulan-card-mini font-size 11.5px (hardcoded)
 *     → calc(11px * var(--kal-font-scale,1)). Sebelumnya media query desktop
 *     mengunci ukuran single-day card jadi 11.5px fix, sehingga tombol S/M/L/XL
 *     tidak berpengaruh di desktop (multi-day jalan karena tak punya override
 *     desktop). Mobile (<1100px) tidak terdampak — itu sebabnya mobile aman.
 *     Base 11px disamakan dgn .bulan-multiday-bar (konsisten sesi 115).
 *   - JS pair tetap schedule-kalender.js v32. Cache buster bump v=34.
 *
 * v30 (29 Mei 2026 — sesi 115) — "Fix beda font single vs multi-day (desktop)"
 *   - Tidak ada perubahan rule di file ini. Akar masalah ada di blok injeksi JS
 *     #soa-kal-v28-critical (font-family multi-day bar tanpa 'Plus Jakarta Sans')
 *     yang menang di cascade. Diperbaiki di schedule-kalender.js v32.
 *   - File CSS sudah benar sejak awal (.bulan-multiday-bar & .bulan-card-mini
 *     identik). Header di-bump untuk sinkron versi/cache buster v=33.
 *
 * v29 (27 Mei 2026 — sesi 105) — "Polish kalender mobile: 5 tweak ringan"
 *
 * Addendum v29b (27 Mei 2026 — sesi 105 lanjutan) — koreksi salah tafsir:
 *   - REVERT font .mobile-brand di schedule.html: balik ke Fraunces serif.
 *     Yang dimaksud "header" pada permintaan asli BUKAN nav-bar atas
 *     (One SOA · SCHEDULE), melainkan TOOLBAR KALENDER (label bulan,
 *     tombol panah, view selector, gear).
 *   - Toolbar kalender (.kal-period-label, .kal-nav-btn, .kal-today-btn,
 *     .kal-view-switcher-mobile select) sudah semua pakai
 *     'Outfit','Plus Jakarta Sans' — KONSISTEN. Yang masih ganjil:
 *       • .kal-period-label .today-hint masih pakai 'Plus Jakarta Sans' saja
 *         (tanpa Outfit) → DIBETULKAN ke 'Outfit','Plus Jakarta Sans'.
 *       • .kal-gear-btn tidak punya font-family explicit (inherit body=Inter)
 *         → DITAMBAH 'Outfit','Plus Jakarta Sans' supaya satu style guide.
 *   - .appt-card-time urutan diubah: jam mulai → durasi → jam selesai
 *     (sebelumnya v29: jam mulai → jam selesai → durasi).
 *   - Ukuran jam mulai & jam selesai DISAMAKAN: 13px / weight 600
 *     (sebelumnya jam selesai 11.5px/500 lebih kecil — sekarang setara
 *     dengan jam mulai). Durasi tetap 10px sebagai pembeda visual.
 *   - .appt-card-time .duration margin-top: 2px DIHAPUS (tidak relevan
 *     lagi karena posisinya di tengah, bukan paling bawah).
 *
 * Perubahan dari v28:
 *   1. #page-kalender: padding 0 → padding 0 6px (mobile breathing room
 *      kiri-kanan; desktop tetap pakai override @media ≥769px).
 *   2. .kal-toolbar padding: 10px 14px 10px 12px → 10px 8px (parent sudah
 *      ber-padding 6px, tidak perlu padding berlebih).
 *   3. .bulan-cell.selected: box-shadow inset 2px brand-light DIHAPUS.
 *      Pattern sekarang sama dengan .bulan-cell.today — cukup background
 *      brand-soft, tanpa frame 2px yang membuat tampilan kaku.
 *   4. .appt-card-time: layout 1 baris (jam mulai + durasi) → flex column
 *      3 baris (jam mulai + jam selesai + durasi). Width 54px → 60px.
 *      Element `<span class="time-end">` baru ditambahkan di JS.
 *      [v29b: urutan & ukuran direvisi — lihat addendum di atas]
 *   5. .appt-card.booked: tambahan rule background abu netral #f4f3f0
 *      + border-left abu, override warna center. Konsisten dengan pattern
 *      .bulan-card-mini.booked di grid (v27).
 *
 * v28 (27 Mei 2026 — sesi 104) — "Multi-day overlay arsitektur (Opsi A)"
 *
 * Perubahan dari v27:
 *   - REWRITE struktur DOM Bulan view. Sebelumnya .bulan-grid flat dengan 49
 *     children (7 DOW + 42 cells). Sekarang nested:
 *       .bulan-grid (flex column)
 *         .bulan-dow-row (grid 7-col)
 *         .bulan-week-row × 6 (grid 7-col, position: relative)
 *           .bulan-cell × 7
 *           .bulan-multiday-overlay (position: absolute, full week)
 *             .bulan-multiday-bar (position: absolute, left/width %)
 *   - Multi-day chunk yang dulu di-render INLINE di tiap .bulan-cell
 *     (.bulan-card-mini.is-multiday) sekarang di-render di OVERLAY layer per
 *     week. Text bisa membentang penuh sepanjang span, tidak terpotong di
 *     boundary cell. .bulan-cell tetap overflow:hidden untuk single-day.
 *   - .bulan-lane-filler: invisible spacer untuk reserve vertical space di
 *     dalam .bulan-cards, supaya single-day card tetap mulai di posisi lane
 *     yang benar (di bawah multi-day bar yang lewat week ini).
 *   - Semua aturan .bulan-card-mini.is-multiday.* (chunk-start/middle/end,
 *     continues-left/right) dihapus — tidak dipakai lagi. Diganti dengan
 *     .bulan-multiday-bar.* dengan styling yang setara.
 *
 * v27 (27 Mei 2026 — sesi 103) — "Polish kalender: minimalis + today no border"
 *
 * Perubahan dari v25:
 *   - HILANGKAN border-left 3px center indicator di .bulan-card-mini (single-day).
 *     Multi-day tetap pakai background tipis warna center sebagai pembeda visual.
 *   - HILANGKAN seluruh block .kal-legend* — legend di footer kalender ditiadakan.
 *   - .bulan-date font-size 13px → 12px (1 step lebih kecil).
 *   - Status booking: background #e9e7e4 abu-abu netral (sebelumnya amber #fef3c7).
 *     Confirmed tetap transparent.
 *   - Margin & padding kiri text card lebih mepet: total 4px dari edge cell
 *     (margin-left 1px + padding-left 3px), dari sebelumnya 8px.
 *   - .bulan-cell.today: box-shadow inset border DIHAPUS, background dibuat
 *     sedikit lebih gelap (#e8d8ee) supaya tetap jelas tanpa border.
 *
 * v24 (27 Mei 2026 — sesi 101 lanjutan) — "Cleanup mini-modal styles"
 *
 * Perubahan dari v23:
 *   - Seluruh block .mini-modal-* dihapus penuh (mini modal tidak dipakai
 *     lagi di v24 JS — klik event langsung buka list/full detail).
 *   - Override desktop .mini-modal-overlay { align-items: center } dihapus.
 *
 * v23 (27 Mei 2026) — "Warna sesuai palet logo SOA-EDU baru + font lebih tipis"
 *   - Color text di .bulan-card-mini variants disesuaikan ke palet baru:
 *     CC (#a61e6c pink), AC (#b45309 orange), LC (#1e40af blue), TC (#0f766e teal)
 *   - --cc/--ac/--lc/--tc CSS vars di-update di schedule.html (bukan di file ini)
 *   - .bulan-card-mini font-weight: 500 → 400 (lebih tipis, regular Roboto Condensed)
 *
 * Perubahan dari v21:
 * 1. Font isi card → Roboto Condensed (paling muat banyak karakter karena
 *    character width-nya paling sempit). Fallback chain: IBM Plex Sans →
 *    Plus Jakarta Sans → sans-serif.
 * 2. text-overflow: ellipsis DIHAPUS — text yang melebihi width sekarang
 *    langsung ter-cut bersih tanpa tanda "..." di belakang.
 *
 * ════════════════════════════════════════════════════════════════════════════ */


/* ── KALENDER PAGE CONTAINER (v29: padding horizontal 6px di mobile supaya tidak edge-flush) ───── */
#page-kalender {
  padding: 0 6px;                  /* v29 (sesi 105): mobile breathing room kiri-kanan */
  max-width: 100%;
  background: #ffffff;             /* v11: putih bersih, override cream parent */
  min-height: 100vh;
  /* v13: font scale variable yang di-set via JS toggle (S/M/L/XL).
     Default = M (1.0). S=0.85, L=1.15, XL=1.3 */
  --kal-font-scale: 1;
}


/* ── TOOLBAR (v12: 1 baris compact, layout 2-cluster) ─────────────────────
   FIX: container pakai ID #kal-toolbar (dari JS _ensureDOM), bukan class.
   Selector ditulis dua-duanya supaya backward-compat.
   v29 (sesi 105): padding horizontal turun (10/8px) karena parent
   #page-kalender sudah punya padding 6px kiri-kanan di mobile. */
#kal-toolbar,
.kal-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 8px;               /* v29: lebih compact, parent sudah ber-padding */
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  flex-wrap: nowrap;
}
.kal-toolbar-row {
  display: contents;
}
.kal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;                  /* v11: jangan stretch! */
  min-width: 0;
}
.kal-nav-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: #ffffff;             /* v11: putih, bukan bg-soft */
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
  padding: 0;
}
.kal-nav-btn:hover { background: var(--brand-soft); border-color: var(--brand-light); color: var(--brand); }
.kal-nav-btn:active { transform: scale(0.94); }

/* v11: Period label — rapat antara dua nav-btn, NO flex stretch */
.kal-period-label {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 0 0 auto;                  /* v11: jangan stretch */
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.3px;
  padding: 0 6px;
  line-height: 1.2;
}
.kal-period-label .today-hint {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;   /* v29 (sesi 105 lanjutan): samakan dengan parent .kal-period-label */
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  margin-left: 5px;
  letter-spacing: 0;
}

/* v11: spacer setelah nav untuk push group kanan ke ujung */
.kal-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.kal-today-btn {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text2);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.1px;
  line-height: 1.4;
}
.kal-today-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-light); }


/* ── VIEW SWITCHER (v10: HP juga compact dropdown 60-70px) ────────────────── */
.kal-view-switcher-mobile {
  display: inline-block;
  width: auto;
  flex-shrink: 0;
}
.kal-view-switcher-mobile select {
  width: auto;
  min-width: 76px;
  padding: 5px 24px 5px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  border: 1px solid var(--brand-light);
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a5594' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}
.kal-view-switcher-desktop { display: none; }


/* ── GEAR BUTTON (v10: ganti filter row → trigger popover) ────────────────── */
.kal-gear-btn {
  width: 32px; height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  cursor: pointer;
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;   /* v29 (sesi 105 lanjutan): konsisten dgn toolbar lain */
  font-size: 14px;
  position: relative;
}
.kal-gear-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-light); }
.kal-gear-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Dot indicator kalau filter aktif (bukan "Semua") */
.kal-gear-btn.has-filter::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 7px; height: 7px;
  background: var(--brand);
  border: 1.5px solid var(--surface);
  border-radius: 50%;
}


/* ── GEAR POPOVER PANEL (v10: berisi filter + density toggle) ─────────────── */
.kal-gear-panel {
  position: absolute;
  top: 44px;
  right: 8px;
  width: 280px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px;
  z-index: 1200;
  display: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.kal-gear-panel.show { display: block; animation: gearPanelFadeIn 0.15s ease-out; }
@keyframes gearPanelFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.kal-gear-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  margin-top: 10px;
}
.kal-gear-panel-title:first-child { margin-top: 0; }
.kal-gear-panel-field {
  margin-bottom: 10px;
}
.kal-gear-panel-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--text);
}
.kal-gear-panel-close {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.kal-gear-panel-close:hover { background: var(--brand-dark); }
/* Backdrop untuk close on outside click */
.kal-gear-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1150;
  display: none;
}
.kal-gear-backdrop.show { display: block; }


/* ── FILTER ROW LAMA (v10: di-HIDE secara default; konten dipindah ke panel) */
/* Tetap render di DOM untuk backward compatibility JS; cuma visually hidden */
.kal-filter-row {
  display: none !important;
}


/* ── COMPACT/COMFORTABLE TOGGLE (v10: pindah ke gear panel) ───────────────── */
.kal-density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}
.kal-density-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: 5px;
}
.kal-density-btn.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}


/* v13: Font size toggle (S/M/L/XL) — 4 button row di gear panel */
.kal-fontsize-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 7px;
  width: 100%;
  box-sizing: border-box;
}
.kal-fontsize-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: 5px;
  letter-spacing: 0.2px;
}
.kal-fontsize-btn:hover { color: var(--text); }
.kal-fontsize-btn.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}


/* ════════════════════════════════════════════════════════════════════════════
 * BULAN VIEW (v28 — DOM bertingkat: grid → week-row → cells + overlay)
 * ════════════════════════════════════════════════════════════════════════════ */

/* v28: .bulan-grid jadi flex column. Anak-anaknya:
   1× .bulan-dow-row + 6× .bulan-week-row. Variable CSS dihoist di sini
   supaya overlay bar (anak .bulan-week-row) bisa pakai via inheritance. */
.bulan-grid {
  display: flex;
  flex-direction: column;
  background: #f1efe8;             /* v11: garis grid abu lembut (terlihat via gap) */
  border: none;
  border-top: 1px solid #f1efe8;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  /* v19/v28: variables di parent supaya overlay bar & single-day card
     pakai sizing yang sama via inheritance. */
  --date-block-h: calc(8px + 15.6px * var(--kal-font-scale, 1));
  --bar-h: calc(17px * var(--kal-font-scale, 1));
  --bar-gap: 2px;
}

/* v28: Header row Mon-Sun, grid 7 kolom dengan 1px gap matching week-row */
.bulan-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #f1efe8;
}

/* v28: Setiap week — grid 7-col + position:relative untuk anchor overlay.
   margin-bottom 1px untuk separator antar week (background grid terlihat). */
.bulan-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #f1efe8;
  position: relative;
  margin-bottom: 1px;
}
.bulan-week-row:last-child { margin-bottom: 0; }

.bulan-dow {
  background: #fafaf7;             /* v11: header DOW abu sangat lembut */
  padding: 8px 2px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  color: var(--muted);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

/* v28: Overlay multi-day bars — absolute layer di atas .bulan-week-row.
   pointer-events: none di overlay, bar itu sendiri auto (clickable).
   Posisi top dihitung inline berdasarkan lane × (bar-h + bar-gap) + date-block-h. */
.bulan-multiday-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;             /* overlay transparan ke klik; bar punya pointer-events sendiri */
  z-index: 2;
}
.bulan-multiday-bar {
  position: absolute;
  height: var(--bar-h, 17px);
  line-height: var(--bar-h, 17px);
  pointer-events: auto;
  cursor: pointer;
  font-family: 'Roboto Condensed', 'IBM Plex Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: calc(11px * var(--kal-font-scale, 1));
  font-weight: 400;                 /* v28b polish: disamakan dengan single-day card (sebelumnya 600) */
  text-align: center;               /* v28b polish: rata tengah */
  padding: 0 6px 0 5px;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  /* Default: tanpa rounded (untuk continues-left/right) */
  border-radius: 0;
}
.bulan-multiday-bar.chunk-start {
  border-radius: 3px 0 0 3px;
}
.bulan-multiday-bar.chunk-end {
  border-radius: 0 3px 3px 0;
}
.bulan-multiday-bar.chunk-start.chunk-end {
  border-radius: 3px;
}
.bulan-multiday-bar.continues-left {
  border-radius: 0 3px 3px 0;
}
.bulan-multiday-bar.continues-right {
  border-radius: 3px 0 0 3px;
}

/* v28: Multi-day bar color + bg per center — sebelumnya di .bulan-card-mini.is-multiday */
.bulan-multiday-bar.klien_soa-cc { background: var(--cc-bg); color: #a61e6c; }
.bulan-multiday-bar.klien_soa-ac { background: var(--ac-bg); color: #b45309; }
.bulan-multiday-bar.klien_soa-lc { background: var(--lc-bg); color: #1e40af; }
.bulan-multiday-bar.klien_soa-tc { background: var(--tc-bg); color: #0f766e; }
.bulan-multiday-bar.klien_soa    { background: var(--cc-bg); color: #a61e6c; }
.bulan-multiday-bar.marketing      { background: #fef3c7; color: #78350f; }
.bulan-multiday-bar.event_external { background: #f3f4f6; color: #1f2937; }
.bulan-multiday-bar.cuti           { background: #fee2e2; color: #7f1d1d; }
/* v33 (sesi 109): Multi-day holiday → bar merah penuh, teks putih bold.
   Konsisten dengan .bulan-card-mini.holiday single-day. */
.bulan-multiday-bar.holiday        {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}

/* Status modifier (booked) — sama pattern dengan .bulan-card-mini.booked */
.bulan-multiday-bar.booked {
  background: #e9e7e4 !important;
  color: #4a4a4a !important;
}
.bulan-multiday-bar.done,
.bulan-multiday-bar.no_show {
  opacity: 0.55;
  text-decoration: line-through;
}
.bulan-multiday-bar:hover {
  filter: brightness(0.97);
}

/* v28: Lane filler invisible — reserve vertical space dalam .bulan-cards
   untuk lane multi-day bar di overlay. Tinggi = bar-h + bar-gap supaya
   posisi single-day card setelahnya pas mulai di lane yang benar. */
.bulan-lane-filler {
  height: var(--bar-h, 17px);
  flex-shrink: 0;
  /* gap di .bulan-cards (2px) akan tetap di-respect; tidak perlu margin extra */
}

/* ── KOTAK TANGGAL (v28: overflow tetap hidden untuk single-day) ── */
.bulan-cell {
  background: #ffffff;
  min-height: 90px;
  padding: 4px 0 3px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bulan-grid.compact .bulan-cell { min-height: 76px; padding: 3px 0; }
.bulan-grid.compact .bulan-date { font-size: 10px; }
.bulan-grid.compact .bulan-card-mini { font-size: 9.5px; }

.bulan-cell:hover { background: #fafaf7; }
.bulan-cell.other-month { background: #fbfaf7; }       /* v11: sangat lembut */
.bulan-cell.other-month .bulan-date { color: var(--text3); opacity: 0.5; }
.bulan-cell.weekend { background: #ffffff; }            /* v11: weekend tetap putih */

/* v33 (sesi 109): Minggu & Hari Libur Nasional pakai pill merah eye-catching.
   Sebelumnya: .sunday cuma color merah teks (.holiday tidak ada styling angka).
   Sekarang: keduanya pakai pill merah penuh (background --danger, teks putih),
   konsisten dengan style pill ungu pada .today.
   Selector kombinasi (sunday & holiday) supaya rule sama persis tanpa duplikasi. */
.bulan-cell.sunday .bulan-date,
.bulan-cell.holiday .bulan-date {
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  display: inline-block;
  align-self: flex-end;
  font-weight: 700;
  font-size: 10px;
  min-width: 18px;
  text-align: center;
  letter-spacing: -0.1px;
}
.bulan-cell.holiday { background: #fef5f5; }            /* v11: holiday pink sangat lembut */
/* v29 (27 Mei 2026 — sesi 105): .bulan-cell.selected — box-shadow border DIHAPUS,
   mengikuti pattern .bulan-cell.today (lihat block di bawah). Tanggal yang dipilih
   cukup ditandai dengan background brand-soft, tanpa frame 2px yang terkesan kaku. */
.bulan-cell.selected {
  background: var(--brand-soft);
  /* v29: box-shadow inset 0 0 0 2px brand-light → DIHAPUS */
}

/* v27 (27 Mei 2026 — sesi 103): Today marker — box-shadow border DIHAPUS.
   Hari ini ditandai cukup dengan background sedikit lebih gelap dari brand-soft
   (yang dipakai untuk .selected). Pill ungu di tanggal tetap sebagai marker primary. */
.bulan-cell.today {
  background: #e8d8ee;               /* v27: lebih gelap dari --brand-soft (#f3eaf6) */
  /* v27: box-shadow inset 2px brand DIHAPUS — cukup background sebagai marker */
}
.bulan-cell.today .bulan-date {
  background: var(--brand);
  color: white;
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-block;
  align-self: flex-end;
  font-weight: 700;
  font-size: 10px;
  min-width: 18px;
  text-align: center;
}

/* v33 (sesi 109): Today + Minggu/Holiday → pill TETAP merah.
   Background cell tetap ungu (today marker sekunder), tapi angkanya merah
   supaya status libur tetap dominan. Spesifisitas .today.sunday > .today saja. */
.bulan-cell.today.sunday .bulan-date,
.bulan-cell.today.holiday .bulan-date {
  background: var(--danger);
  border-radius: 10px;
  padding: 1px 7px;
}

/* v27: Tanggal — FIXED 12px (turun 1 step dari 13px), tidak ikut --kal-font-scale.
   Hanya isi card yang ikut scale, tanggal stabil di size M. */
.bulan-date {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;                   /* v27: 13px → 12px */
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 4px;
  text-align: right;
  padding-right: 4px;
  line-height: 1.2;
  flex-shrink: 0;
  letter-spacing: -0.1px;
}

/* ── MINI CARDS dalam kotak ───────────────────────────────────────────────── */
.bulan-cards {
  display: flex;
  flex-direction: column;
  gap: var(--bar-gap, 2px);     /* v15: match dengan multi-day lane gap */
  flex: 1;
  min-height: 0;
}

/* v27 (27 Mei 2026 — sesi 103): HILANGKAN border-left 3px center indicator.
   Card sekarang polos — kontras booking vs confirmed lebih penting daripada
   warna center. Text mepet 4px dari edge (margin-left 1px + padding-left 3px). */
.bulan-card-mini {
  font-family: 'Roboto Condensed', 'IBM Plex Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: calc(11px * var(--kal-font-scale, 1));
  height: var(--bar-h, 17px);
  line-height: var(--bar-h, 17px);   /* v15: line-height = height untuk vertical center */
  padding: 0 4px 0 3px;              /* v27: padding-left 3px (rapat) */
  margin: 0 4px 0 1px;               /* v27: margin-left 1px (mepet ke edge cell) */
  border-radius: 0;
  overflow: hidden;                  /* single-day text ter-clip di boundary cell */
  /* v22: text-overflow: ellipsis DIHAPUS supaya tidak ada "..." */
  white-space: nowrap;
  cursor: pointer;
  /* v27: border-left DIHAPUS */
  background: transparent;
  color: var(--text);
  font-weight: 400;
  box-sizing: border-box;
}
.bulan-card-mini:hover { background: rgba(0,0,0,0.03); }
.bulan-card-mini.done,
.bulan-card-mini.no_show { opacity: 0.55; text-decoration: line-through; }

/* v27: Single-day center variants — HANYA color text per center.
   Border-left dihilangkan. Background biarkan transparent (kontras booking utama). */
.bulan-card-mini.klien_soa-cc { color: #a61e6c; }
.bulan-card-mini.klien_soa-ac { color: #b45309; }
.bulan-card-mini.klien_soa-lc { color: #1e40af; }
.bulan-card-mini.klien_soa-tc { color: #0f766e; }
.bulan-card-mini.klien_soa    { color: #a61e6c; }
.bulan-card-mini.marketing      { color: #78350f; }
.bulan-card-mini.event_external { color: #1f2937; }
.bulan-card-mini.cuti           { color: #7f1d1d; }
/* v33 (sesi 109): Holiday eye-catching — bar merah penuh, teks putih bold.
   Sebelumnya cuma color #831843 (pink lembut) di atas bg transparent → tenggelam.
   Sekarang background --danger (merah) + teks putih + font-weight 700, paralel
   dengan pill merah angka tanggal di cell. */
.bulan-card-mini.holiday        {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  padding: 0 5px 0 5px;
}

/* v27: STATUS = booked → background abu-abu netral tipis untuk pembeda jelas
   vs confirmed (yang transparent). Sebelumnya amber #fef3c7. */
.bulan-card-mini.booked {
  background: #e9e7e4 !important;    /* abu-abu netral */
  color: #4a4a4a !important;
}
.bulan-cards-overflow {
  font-family: 'Roboto Condensed', 'IBM Plex Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  color: var(--text3);
  padding: 0 4px;
  font-weight: 600;
  margin-top: auto;
  flex-shrink: 0;
}

/* v17: .bulan-cell-multiday-spacer dihapus — multi-day sekarang render inline,
   tidak butuh spacer reserve space. */

/* v28: Block .bulan-card-mini.is-multiday.* DIHAPUS PENUH. Multi-day sekarang
   di-render sebagai .bulan-multiday-bar di overlay layer per week (lihat
   block di atas — sekitar line 417 ke bawah). Aturan styling color/bg per
   center, status booked, rounded chunk-start/end, continues-left/right semua
   sudah dipindahkan ke .bulan-multiday-bar. */

.bulan-dots, .bulan-dot, .bulan-dots-overflow { display: none !important; }


/* HP-only: list view di bawah grid saat tanggal di-tap */
.bulan-day-detail {
  margin: 10px 8px 0;             /* v10: tambah margin horizontal supaya tidak edge-flush */
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bulan-day-detail-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -0.1px;
}
.bulan-day-detail-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}


/* v27: ── LEGEND DIHAPUS ─────────────────────────────────────────────────────
   Footer legend (CC/AC/LC/TC/Marketing/Event/Cuti/Holiday) tidak relevan lagi
   karena indikator warna strip di card single-day sudah dihilangkan.
   ─────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
 * APPOINTMENT CARD (shared)
 * ════════════════════════════════════════════════════════════════════════════ */
.appt-card {
  display: flex;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text3);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.15s;
}
.appt-card:hover { background: var(--bg-soft); }
.appt-card:last-child { margin-bottom: 0; }
.appt-card.done, .appt-card.no_show { opacity: 0.6; }
.appt-card.cancelled { display: none; }

.appt-card.klien_soa-cc { border-left-color: var(--cc); }
.appt-card.klien_soa-ac { border-left-color: var(--ac); }
.appt-card.klien_soa-lc { border-left-color: var(--lc); }
.appt-card.klien_soa-tc { border-left-color: var(--tc); }
.appt-card.klien_soa { border-left-color: var(--cc); }
.appt-card.marketing { border-left-color: #d97706; }
.appt-card.event_external { border-left-color: #6b7280; }
.appt-card.cuti { border-left-color: #dc2626; }
.appt-card.holiday { border-left-color: var(--danger); }

/* v29 (27 Mei 2026 — sesi 105): Status BOOKED → seluruh card abu-abu netral.
   Override warna center supaya status booking jelas terbeda dari confirmed.
   Konsisten dengan pattern .bulan-card-mini.booked di grid kalender (v27).
   Border-left dibuat abu juga supaya tidak ada konflik visual.
   !important diperlukan karena selector .appt-card.klien_soa-xx di atas
   punya specificity yang sama. */
.appt-card.booked {
  background: #f4f3f0 !important;       /* abu netral lebih lembut dari grid (#e9e7e4) */
  border-left-color: #a8a39a !important;
}
.appt-card.booked:hover {
  background: #ebe9e4 !important;
}

/* v29 (sesi 105): appt-card-time sekarang tampilkan 3 baris bersusun:
   jam mulai (top) → durasi (middle, kecil) → jam selesai (bottom).
   v29b (sesi 105 lanjutan): urutan diubah ke jam mulai → durasi → jam selesai
   (sebelumnya jam mulai → jam selesai → durasi). Jam mulai & selesai
   ukurannya disamakan (13px, weight 600); durasi tetap 10px sebagai pembeda. */
.appt-card-time {
  flex-shrink: 0;
  width: 60px;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.1px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.appt-card-time .time-start,
.appt-card-time .time-end {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.1px;
}
.appt-card-time .duration {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  /* v29b: margin-top dihapus — posisi durasi sekarang di tengah, bukan paling bawah.
     Spacing antar baris di-handle oleh `gap: 1px` di parent .appt-card-time. */
}
.appt-card-main {
  flex: 1;
  min-width: 0;
}
.appt-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.appt-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-card-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.appt-card-meta span { display: inline-flex; align-items: center; gap: 2px; }


.appt-section-divider {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text3);
  text-transform: uppercase;
  padding: 8px 4px 4px;
  margin-top: 4px;
}
.appt-section-divider:first-child { margin-top: 0; }


/* ════════════════════════════════════════════════════════════════════════════
 * MINGGU VIEW (HP fallback: list)
 * ════════════════════════════════════════════════════════════════════════════ */
.minggu-container { display: none; }
.hari-mobile-container {
  display: block;
  padding: 0 8px;                 /* v10: kasih sedikit margin supaya appt-card tidak edge-flush */
}
.hari-mobile-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


/* ════════════════════════════════════════════════════════════════════════════
 * CARI SLOT VIEW
 * ════════════════════════════════════════════════════════════════════════════ */
.carislot-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 0 8px 12px;             /* v10: kasih margin horizontal */
}
.carislot-form-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.carislot-field { margin-bottom: 10px; }
.carislot-field-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}
.carislot-psikolog-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafaf9;
  min-height: 38px;
  align-items: center;
}
.carislot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #eff6ff;
  color: #1e40af;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.carislot-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: #1e40af;
  font-size: 13px;
  padding: 0;
  line-height: 1;
}
.carislot-add-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text2);
}
.carislot-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.carislot-row > * { flex: 1; min-width: 0; }
.carislot-row input,
.carislot-row select {
  padding: 7px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  width: 100%;
}
.carislot-intersect {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.carislot-search-btn {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.2px;
}
.carislot-search-btn:hover { background: var(--brand-dark); }
.carislot-search-btn:disabled { background: var(--text3); cursor: not-allowed; }

.carislot-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 0 8px;
}
.carislot-result-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}
.carislot-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
}
.carislot-slot-date {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  min-width: 70px;
}
.carislot-slot-time {
  font-size: 12px;
  color: var(--text2);
  flex: 1;
  min-width: 0;
}
.carislot-slot-rooms {
  font-size: 10.5px;
  color: var(--success);
  font-weight: 500;
  flex-shrink: 0;
}
.carislot-slot-rooms.partial { color: var(--warning); }
.carislot-slot-pick {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
 * (v24: Block CSS .mini-modal-* sudah dihapus penuh — mini modal tidak dipakai
 *  lagi. Klik event sekarang langsung buka list day detail atau full detail.)
 * ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
 * LOADING & EMPTY STATES
 * ════════════════════════════════════════════════════════════════════════════ */
.kal-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.kal-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* v10: empty state day-detail dengan CTA */
.bulan-day-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.bulan-day-detail-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.bulan-day-detail-cta {
  padding: 10px 22px;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bulan-day-detail-cta:hover { background: var(--brand-dark); }


/* ════════════════════════════════════════════════════════════════════════════
 * DESKTOP STYLES (≥769px) — v10: edge-to-edge maksimal lebar
 * ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #page-kalender {
    padding: 12px 16px;            /* v10: dari 18/24 → 12/16 */
    max-width: 100%;               /* v10: dari 1400 → full width (sesuai permintaan Pak) */
  }

  /* Toolbar tetap 1 baris horizontal */
  #kal-toolbar,
  .kal-toolbar {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 8px;
  }
  .kal-period-label {
    font-size: 17px;
    flex: 0 0 auto;
    margin: 0 6px 0 4px;
  }
  .kal-period-label .today-hint { font-size: 12px; }
  .kal-nav { flex: 0 0 auto; }
  .kal-nav-btn { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; }
  .kal-today-btn { padding: 6px 14px; font-size: 12px; }
  .kal-gear-btn { width: 34px; height: 32px; }

  /* Desktop view switcher: tetap dropdown (lebih konsisten dengan HP),
     atau bisa di-toggle ke button group via class.
     Default: tetap pakai dropdown HP-style untuk simplicity. */
  .kal-view-switcher-mobile select { font-size: 12px; padding: 6px 26px 6px 12px; }

  /* Push gear ke kanan jauh dari view switcher */
  .kal-gear-btn { margin-left: auto; }


  /* ── BULAN VIEW desktop ─────────────────────────────────────────────── */
  .bulan-grid {
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .bulan-dow { font-size: 11px; padding: 7px 2px; }
  .bulan-cell {
    min-height: 110px;
    padding: 5px;
  }
  .bulan-grid.compact .bulan-cell { min-height: 92px; }
  .bulan-date { font-size: 12px; padding-right: 4px; }
  .bulan-cell.today .bulan-date { font-size: 11px; padding: 2px 7px; }

  .bulan-card-mini {
    font-size: 11px;
    padding: 2px 6px;
    line-height: 1.4;
  }
  .bulan-grid.compact .bulan-card-mini { font-size: 10px; padding: 1px 5px; }

  .bulan-day-detail { padding: 14px; margin: 12px 0 0; }

  /* v17: .bulan-multiday-bar desktop block dihapus — inline approach pakai .bulan-card-mini.is-multiday */

  /* Gear panel position relative ke toolbar (desktop) */
  .kal-gear-panel {
    top: 56px;
    right: 16px;
    width: 320px;
  }


  /* ── MINGGU VIEW desktop ─────────────────────────────────────────────── */
  .hari-mobile-container { display: none; }
  .minggu-container {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .minggu-header {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
  }
  .minggu-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    border-right: 1px solid var(--border);
  }
  .minggu-header-cell:last-child { border-right: none; }
  .minggu-header-cell .dow {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .minggu-header-cell .day-num {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
    letter-spacing: -0.2px;
  }
  .minggu-header-cell.today { background: var(--brand-soft); }
  .minggu-header-cell.today .day-num { color: var(--brand); }
  /* v33 (sesi 109): Minggu & Holiday → DOW + angka MERAH (eye-catching).
     Sebelumnya: .weekend dibikin abu-abu lemah (--text3), .holiday tidak ada styling teks.
     Sekarang konsisten dengan Bulan view: hari libur (Minggu + libur nasional) merah. */
  .minggu-header-cell.weekend .dow,
  .minggu-header-cell.weekend .day-num,
  .minggu-header-cell.holiday .dow,
  .minggu-header-cell.holiday .day-num {
    color: var(--danger);
    font-weight: 700;
  }
  .minggu-header-cell.holiday { background: #fef2f2; }
  /* v33 (sesi 109): today + weekend/holiday → angka TETAP merah (konsisten dgn Bulan view).
     Background today (brand-soft ungu) tetap, tapi angka merah supaya status libur dominan. */
  .minggu-header-cell.today.weekend .day-num,
  .minggu-header-cell.today.holiday .day-num {
    color: var(--danger);
  }

  .minggu-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    position: relative;
  }
  .minggu-time-col {
    border-right: 1px solid var(--border);
    background: var(--bg-soft);
  }
  .minggu-hour-label {
    height: 60px;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--muted);
    text-align: right;
    border-bottom: 1px solid var(--line-soft);
  }
  .minggu-day-col {
    border-right: 1px solid var(--border);
    position: relative;
  }
  .minggu-day-col:last-child { border-right: none; }
  .minggu-day-col.weekend { background: #fafaf9; }
  .minggu-day-col.holiday { background: #fef2f2; }
  .minggu-hour-slot {
    height: 60px;
    border-bottom: 1px solid var(--line-soft);
  }
  .minggu-hour-slot::after {
    content: '';
    display: block;
    height: 50%;
    border-bottom: 1px dashed var(--line-soft);
  }

  .minggu-appt {
    position: absolute;
    left: 2px; right: 2px;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    z-index: 1;
  }
  .minggu-appt:hover { z-index: 2; filter: brightness(0.95); }
  .minggu-appt.done, .minggu-appt.no_show { opacity: 0.6; }
  .minggu-appt-time {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    margin-bottom: 1px;
  }
  .minggu-appt-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .minggu-appt.klien_soa-cc { background: var(--cc-bg); color: var(--cc); border-left: 3px solid var(--cc); }
  .minggu-appt.klien_soa-ac { background: var(--ac-bg); color: var(--ac); border-left: 3px solid var(--ac); }
  .minggu-appt.klien_soa-lc { background: var(--lc-bg); color: var(--lc); border-left: 3px solid var(--lc); }
  .minggu-appt.klien_soa-tc { background: var(--tc-bg); color: var(--tc); border-left: 3px solid var(--tc); }
  .minggu-appt.klien_soa { background: var(--cc-bg); color: var(--cc); border-left: 3px solid var(--cc); }
  .minggu-appt.marketing { background: #fef3c7; color: #92400e; border-left: 3px solid #d97706; }
  .minggu-appt.event_external { background: #f3f4f6; color: #374151; border-left: 3px solid #6b7280; }
  .minggu-appt.cuti { background: #fee2e2; color: #991b1b; border-left: 3px solid #dc2626; }
  /* v33 (sesi 109): Holiday di Minggu view → bar merah penuh teks putih bold,
     konsisten dengan Bulan view. */
  .minggu-appt.holiday {
    background: var(--danger);
    color: #fff;
    font-weight: 700;
    border-left: 3px solid #991b1b;
  }


  /* v24: Mini-modal sudah dihapus, tidak perlu override desktop lagi. */


  /* Cari Slot desktop */
  .carislot-form { margin: 0 0 12px; }
  .carislot-result { margin: 0; }
  .hari-mobile-container { padding: 0; }
  .carislot-row > * { flex: 0 0 auto; }
  .carislot-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr;
    gap: 12px;
  }
  .carislot-search-btn { width: auto; min-width: 200px; padding: 10px 24px; }
  .carislot-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
 * LARGE DESKTOP TWEAKS (≥1100px)
 * ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  #page-kalender { padding: 16px 24px; }
  .bulan-cell { min-height: 130px; }
  .bulan-grid.compact .bulan-cell { min-height: 104px; }
  .bulan-date { font-size: 13px; }
  .bulan-cell.today .bulan-date { font-size: 12px; }
  /* v33 (sesi 116): ikut --kal-font-scale supaya tombol S/M/L/XL berfungsi di
     desktop (sebelumnya hardcoded 11.5px → terkunci, scale tidak jalan).
     Base disamakan ke 11px agar identik dengan .bulan-multiday-bar (sesi 115). */
  .bulan-card-mini { font-size: calc(11px * var(--kal-font-scale, 1)); padding: 2px 7px; }
  .minggu-hour-slot { height: 60px; }
}


/* ════════════════════════════════════════════════════════════════════════════
 * FLOATING ACTION BUTTON (FAB) untuk Booking Baru
 * ════════════════════════════════════════════════════════════════════════════ */
.kal-fab {
  position: fixed;
  bottom: 22px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  border: none;
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(122, 85, 148, 0.35);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.kal-fab:hover {
  background: var(--brand-dark);
  box-shadow: 0 8px 24px rgba(122, 85, 148, 0.45);
}
.kal-fab:active { transform: scale(0.94); }
.kal-fab svg {
  width: 26px; height: 26px;
  stroke: white;
  stroke-width: 2.5;
  fill: none;
}

@media (min-width: 769px) {
  .kal-fab {
    width: 52px;
    height: 52px;
    bottom: 28px;
    right: 28px;
    font-size: 26px;
  }
  .kal-fab svg { width: 24px; height: 24px; }
}