/* public/assets/css/s39-calendar.css
   KHMER HRMS — Khmer Calendar & Events (M21)
   Season: S39 — Khmer Calendar & Events (visual polish patch, 2026-09-26)

   Scope: app/Views/calendar/index.php (month grid + events-this-month list),
   app/Views/calendar/show.php (event detail) and app/Views/calendar/form.php
   (create/edit event). Everything else (.card, .page-header, .badge,
   .detail-table, .form-row-2, .color-input-pair, .data-table) is already
   global (app.css / responsive.css / s31-staff-cards.css) and is reused
   as-is — this file only adds what those don't already cover, and every
   rule is scoped under .calendar-page / .calendar-form-card / .calendar-
   detail-card so nothing here can leak into other modules. Colours are
   CSS variables only (Day/Night/theme safe, Rule #4); spacing follows the
   8px scale already used across the app. No CDN, no external fonts. */

/* ── Shared: category legend chip (index + form live preview) ────── */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.calendar-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── 1. Month grid (index.php) ────────────────────────────────────
   Replaces the inline <style> block that used to live in index.php —
   same selectors, refined spacing/shadows so cells read as distinct
   "days" rather than flat boxes, and a bit more breathing room so the
   grid genuinely fills wide screens instead of looking cramped. ──── */
.calendar-page .calendar-header-card { margin-bottom: var(--space-3, 24px); }
.calendar-page .calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.calendar-page .calendar-title { text-align: center; }
.calendar-page .calendar-title h2 { margin: 0; }
.calendar-page .calendar-lunar-header {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-kh), sans-serif;
}
.calendar-page .calendar-nav .btn-sm {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-page .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.calendar-page .calendar-dow {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    padding: 4px 0 10px;
}
.calendar-page .calendar-cell {
    min-height: 96px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.calendar-page .calendar-cell:not(.calendar-cell-empty):hover {
    box-shadow: var(--shadow-ambient, 0 1px 2px rgba(16, 24, 40, 0.06));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.calendar-page .calendar-cell-empty { border: none; background: transparent; }
.calendar-page .calendar-cell-today {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary) inset;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.calendar-page .calendar-cell-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.calendar-page .calendar-daynum { font-weight: 700; font-size: 14px; }
.calendar-page .calendar-cell-today .calendar-daynum {
    color: var(--primary);
}
.calendar-page .calendar-lunar-caption {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-kh), sans-serif;
    white-space: nowrap;
}
.calendar-page .calendar-cell-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.calendar-page .calendar-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 0.1s ease;
}
.calendar-page .calendar-chip:hover { transform: translateY(-1px); }
.calendar-page .calendar-chip svg { width: 10px; height: 10px; flex-shrink: 0; }
.calendar-page .calendar-chip-more {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    padding-left: 6px;
}

@media (max-width: 767px) {
    .calendar-page .calendar-grid { gap: 3px; }
    .calendar-page .calendar-cell { min-height: 60px; padding: 4px; border-radius: 8px; }
    .calendar-page .calendar-daynum { font-size: 12px; }
    .calendar-page .calendar-lunar-caption { font-size: 8.5px; }
    .calendar-page .calendar-chip span { display: none; }
    .calendar-page .calendar-chip { justify-content: center; padding: 4px; }
    .calendar-page .calendar-dow { font-size: 10.5px; padding: 2px 0 6px; }
}

/* Very narrow phones — keep every one of the 7 columns readable
   instead of letting long cell borders/gaps push the grid wider than
   the viewport (Rule: support all devices, no horizontal scroll). */
@media (max-width: 380px) {
    .calendar-page .calendar-grid { gap: 2px; }
    .calendar-page .calendar-cell { min-height: 48px; padding: 3px; border-radius: 6px; }
}

/* ── 2. Event detail (show.php) ───────────────────────────────────
   Header banner (colour + icon lifted from the event itself) above a
   single .detail-table card — same "badges row + detail-table inside
   one card, max-width 720px" shape used by Room Bookings/Consultations
   (s37/s38), so the Khmer Calendar module now matches the rest of the
   system instead of standing out with ad-hoc <h3>/<p> pairs. ───────── */
.calendar-detail-card { max-width: 760px; }
.calendar-detail-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.calendar-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.calendar-detail-icon svg { width: 22px; height: 22px; }
.calendar-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.calendar-detail-card .detail-table th { width: 200px; }
.calendar-detail-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 0.85rem;
}
.calendar-detail-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── 3. Create / Edit form (form.php) ─────────────────────────────
   Wider card (fills the page instead of stopping at 640px), grouped
   into labelled sections, and native date/time/color controls styled
   to match every other input in the app instead of falling back to
   the browser's own tiny default widgets. ────────────────────────── */
.calendar-form-card {
    max-width: min(880px, 100%);
    width: 100%;
}
.calendar-form-section {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--border);
}
.calendar-form-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
.calendar-form-card .form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}
.calendar-form-card .form-section-title svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Native time input had no rule anywhere in the app (only type="date"
   did) — bring it up to the same look as every other field. */
.calendar-form-card input[type="time"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calendar-form-card input[type="time"]:focus,
.calendar-form-card input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* Make the native calendar-picker/clock glyph on date/time inputs
   theme-aware instead of a hard black icon that vanishes on dark mode. */
.calendar-form-card input[type="date"]::-webkit-calendar-picker-indicator,
.calendar-form-card input[type="time"]::-webkit-calendar-picker-indicator {
    filter: var(--calendar-icon-filter, none);
    cursor: pointer;
}
[data-theme="dark"] .calendar-form-card input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .calendar-form-card input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Colour field: swap the bare square colour input for the same
   colour + hex-text pairing used on Card/Certificate templates
   (.color-input-pair / .color-hex-input from s31-staff-cards.css). */
.calendar-form-card .color-input-pair { width: 100%; }
.calendar-form-card .color-hex-input { flex: 1; width: auto; }

.calendar-form-card .btn-group { margin-top: 4px; }

@media (max-width: 640px) {
    .calendar-form-card { padding: 20px 16px; }
}

/* ── Settings lookup tables: compact, readable, collapsible ───────── */
.calendar-lookup-card {
    overflow: visible;
}
.calendar-lookup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}
.calendar-lookup-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.calendar-lookup-title-wrap h3 { margin: 0 0 4px; }
.calendar-lookup-title-wrap p { margin: 0; }
.calendar-lookup-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.calendar-lookup-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: auto;
}
/* Show/Hide toggle — single label swapped via JS (never two competing
   text nodes, so it can never wrap onto its own second line), chevron
   rotates 180° on open instead of swapping icons, and a min-width keeps
   the button's footprint stable when "Show"/"Hide" differ in length
   (esp. in Khmer). Matches the standard .btn-outline.btn-sm shape used
   everywhere else in the app. */
.calendar-lookup-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    white-space: nowrap;
    flex-shrink: 0;
}
.calendar-lookup-toggle svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.18s ease; }
.calendar-lookup-toggle.is-open svg { transform: rotate(180deg); }
.calendar-lookup-toggle .calendar-toggle-label { line-height: 1; }
.calendar-lookup-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.calendar-add-details { position: relative; }
.calendar-add-details > summary { list-style: none; }
.calendar-add-details > summary::-webkit-details-marker { display: none; }
.calendar-add-details[open] .calendar-lookup-form { display: flex; }
.calendar-lookup-form {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-alt);
}
.calendar-lookup-form input[type="text"] { min-width: 180px; }
.calendar-color-field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.calendar-color-field input[type="color"] { width: 30px; height: 26px; padding: 2px; border: 0; background: transparent; }
.calendar-lookup-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.calendar-lookup-table { width: 100%; margin: 0; }
.calendar-lookup-table thead th {
    padding: 10px 12px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.calendar-lookup-table tbody td { padding: 10px 12px; vertical-align: middle; }
.calendar-lookup-row:hover { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.calendar-row-no { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.lookup-display { display: inline-flex; align-items: center; min-height: 34px; }
.lookup-input { width: 100%; min-width: 120px; }
.calendar-kh-value { font-family: var(--font-kh), sans-serif; }
.calendar-color-display { gap: 8px; }
.calendar-color-display i { width: 22px; height: 22px; display: inline-block; border-radius: 6px; border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.calendar-color-display code { font-size: .78rem; color: var(--text-muted); background: transparent; }
.calendar-lookup-actions { white-space: nowrap; }
.calendar-empty-row { text-align: center; color: var(--text-muted); padding: 22px !important; }

.calendar-holiday-filter { position: relative; }

/* Add Holiday now lives in its own .table-action-dock above the table
   (see settings/calendar.php) — the year/month .filter-bar above no
   longer shares its row with the button, so it's free to use the
   standard filter-responsive.css layout with no dock-specific override. */

.calendar-add-holiday-inline {
    flex: 0 0 auto;
    /* Self-contained positioning context for its own dropdown form
       below — works the same wherever this <details> is placed
       (previously required the old .calendar-holiday-filter wrapper's
       position:relative; now independent of any specific parent). */
    position: relative;
}
.calendar-add-holiday-inline > summary { list-style: none; }
.calendar-add-holiday-inline > summary::-webkit-details-marker { display: none; }
.calendar-add-holiday-inline[open] > form {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    padding: 16px;
    width: 480px;
    max-width: calc(100vw - 32px);
}

@media (max-width: 767.98px) {
    .calendar-holiday-filter { flex-direction: column; align-items: stretch; }
    .calendar-add-holiday-inline { width: 100%; }
    .calendar-add-holiday-inline > summary { width: 100%; justify-content: center; }
    .calendar-add-holiday-inline[open] > form {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: none;
        margin-top: 10px;
    }
}

@media (max-width: 720px) {
    .calendar-lookup-head { align-items: flex-start; flex-wrap: wrap; }
    .calendar-lookup-head-actions { width: 100%; }
    .calendar-add-details { flex: 1; }
    .calendar-add-details > summary, .calendar-lookup-toggle { width: 100%; justify-content: center; }
    .calendar-lookup-form { flex-direction: column; align-items: stretch; }
    .calendar-lookup-form input[type="text"], .calendar-color-field, .calendar-lookup-form .btn { width: 100%; min-width: 0; }
    .calendar-lookup-table-wrap { overflow-x: auto; }
    .calendar-lookup-table { min-width: 620px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Settings → Calendar & Public Holidays — responsive polish
   (moved out of the inline <style> in settings/calendar.php)
   ═══════════════════════════════════════════════════════════════════ */
.page-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.page-section-head h3 { margin:0 0 4px; }
.page-section-head-text { min-width:220px; flex:1 1 260px; }

.calendar-policy-card { max-width:720px; }
.calendar-policy-save { margin-top:20px; }

/* Clone panel */
.calendar-clone-panel { margin:16px 0; }
.calendar-clone-summary { cursor:pointer; display:inline-flex; list-style:none; }
.calendar-clone-summary::-webkit-details-marker { display:none; }
.calendar-clone-panel[open] > form {
    margin-top:12px; padding:16px; border:1px solid var(--border);
    border-radius:12px; background:var(--surface-alt);
}
.calendar-clone-panel .form-grid { margin-top:0; }
.calendar-clone-panel .form-group select { width:100%; }
.clone-select-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.calendar-clone-table-wrap { max-height:340px; overflow:auto; margin-top:10px; }
.calendar-clone-submit { margin-top:12px; }

/* Filter + Add Holiday */
.calendar-holiday-filter { margin:14px 0; }
.calendar-add-holiday-summary { cursor:pointer; display:inline-flex; }

/* Holiday table cells */
.holiday-status-badges { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.holiday-cell-date { white-space:nowrap; }

/* Lookup tables: fixed action/colour columns on desktop */
.calendar-col-color { width:170px; }
.calendar-col-actions { width:150px; }

/* Head row may wrap on tablets instead of squeezing the title */
@media (max-width: 1023.98px) {
    .calendar-lookup-head { flex-wrap:wrap; }
    .calendar-lookup-head-actions { margin-left:0; }
}

/* Phones: stacked cards for both the holiday table and the lookup tables */
@media (max-width: 767.98px) {
    .calendar-policy-card { max-width:none; }
    .calendar-clone-panel > summary { width:100%; justify-content:center; }
    .calendar-clone-panel[open] > form { padding:12px; }
    .clone-select-actions .btn { flex:1; justify-content:center; }
    .calendar-clone-submit { width:100%; justify-content:center; }

}
}


/* ═══════════════════════════════════════════════════════════════════
   Settings → Calendar & Public Holidays — responsive FIX pass
   (view: settings/calendar.php, wrapper class .calendar-settings-grid)

   All three tables (Public Holidays, Event categories, Holiday types) are
   plain `.data-table` inside `.table-wrap` — the same table pattern as
   Departments and Employees — so the toolbar/row-number helpers, column
   headers and horizontal scroll behave exactly like those pages.

   1. Root cause of "cards spill off the right edge on phones": the shared
      .card-grid uses `1fr` tracks (= minmax(auto,1fr)), so the nowrap
      Add/Show button row inside the lookup cards stretched the single
      column far wider than the screen. Every card here spans the full row,
      so one shrinkable column is right at every breakpoint.
   2. `hidden` was defeated by .btn / .lookup-display display rules, so
      Save/Cancel were always visible and the read-only value stayed next
      to its input while editing.
   3. On tablets the global `.data-table{min-width:760px}` forced sideways
      scrolling that clipped the Actions column.
   ═══════════════════════════════════════════════════════════════════ */
.calendar-settings-grid { grid-template-columns: minmax(0, 1fr); }
.calendar-settings-grid > .card { min-width: 0; }

.calendar-lookup-row [hidden],
.calendar-lookup-panel[hidden] { display: none !important; }
.lookup-input[type="color"] { width: 56px; min-width: 0; flex: 0 0 auto; padding: 2px; height: 36px; cursor: pointer; }

/* Add-category / Add-type form: a floating panel under the header actions
   on wide screens (it used to open inline inside a nowrap flex row and
   shove the Show/Hide button sideways). Stacks full-width on phones. */
@media (min-width: 721px) {
    .calendar-lookup-head-actions { position: relative; }
    .calendar-lookup-head-actions .calendar-add-details { position: static; }
    .calendar-add-details[open] .calendar-lookup-form {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: 30;
        width: min(560px, calc(100vw - 64px));
        box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
        background: var(--surface, #fff);
    }
}

/* Tablets: fit the card instead of scrolling sideways. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .calendar-settings-grid .data-table { min-width: 0 !important; }
    .calendar-settings-grid .data-table:not(.table-card) td.actions,
    .calendar-settings-grid .data-table:not(.table-card) th:last-child {
        width: 1% !important; min-width: 0 !important; max-width: none !important;
        white-space: nowrap;
    }
    .calendar-holiday-table td,
    .calendar-holiday-table th { white-space: normal; }
    .calendar-holiday-table .holiday-cell-date,
    .calendar-holiday-table td.actions { white-space: nowrap; }
    .calendar-lookup-table-wrap { overflow-x: auto !important; }
    .calendar-lookup-table .calendar-col-color { width: 150px; }
    .calendar-lookup-table .calendar-col-actions { width: 140px; }
}

/* Phones: real tables that scroll sideways INSIDE their own card (like
   Employees), with the Actions column pinned to the right edge so the
   Edit / Delete buttons are always reachable without scrolling. */
@media (max-width: 767.98px) {
    .calendar-settings-grid .table-wrap { -webkit-overflow-scrolling: touch; }
    .calendar-lookup-table-wrap { overflow-x: auto !important; border: 1px solid var(--border); }
    .calendar-lookup-table { min-width: 680px; }
    .calendar-holiday-table { min-width: 860px; }
    .calendar-clone-table { min-width: 0 !important; }
    .calendar-clone-table td, .calendar-clone-table th { white-space: normal; padding: 8px 10px; }

    /* selectors carry :not(.table-card) so they out-rank responsive.css's
       `.data-table:not(.table-card) td.actions {width:180px !important}` */
    .calendar-settings-grid .data-table:not(.table-card) td.actions,
    .calendar-settings-grid .data-table:not(.table-card) th:last-child {
        position: sticky; right: 0; z-index: 3;
        width: 1% !important; min-width: 0 !important; max-width: none !important;
        text-align: right !important;
        box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18);
    }
    .calendar-settings-grid .data-table:not(.table-card) td.actions { background: var(--surface); }
    .calendar-settings-grid .data-table:not(.table-card) th:last-child { background: var(--surface-alt); }
    .calendar-holiday-table td.actions .btn,
    .calendar-lookup-table td.actions .btn { margin: 0 1px; }

    /* policy switch row: keep the toggle on the same line, text may shrink */
    .calendar-policy-card .source-row { gap: 12px; }
    .calendar-policy-card .switch { flex-shrink: 0; margin-top: 4px; }
}

@media (max-width: 720px) {
    .calendar-lookup-head-actions { flex-wrap: wrap; }
    .calendar-lookup-head-actions .calendar-add-details { flex: 1 1 180px; min-width: 0; }
    .calendar-lookup-head-actions .calendar-lookup-toggle { flex: 1 1 auto; width: auto; min-width: 104px; }
    .calendar-lookup-title-wrap { flex-wrap: wrap; }
    .calendar-lookup-form { margin-top: 10px; }
}

@media (max-width: 480px) {
    .calendar-settings-grid > .card { padding: 16px 14px; }
    .page-section-head-text { min-width: 0; flex-basis: 100%; }
    .calendar-holiday-filter .filter-form { width: 100%; }
    .calendar-holiday-filter .filter-form select,
    .calendar-holiday-filter .filter-form .btn { width: 100%; }
    .calendar-lookup-head-actions .calendar-add-details,
    .calendar-lookup-head-actions .calendar-lookup-toggle { flex: 1 1 100%; }
}