/*
 * thx-calendar.css — Canonical Threshold date/datetime/range picker
 *
 * Source: W:/threshold-documents/design/components/thx-calendar.css
 * Pair with: thx-calendar.js (same folder)
 * Doctrine: W:/threshold-documents/doctrine/design/15-date-picker.md
 *
 * Consumes design tokens from W:/threshold-documents/design/tokens.css.
 * Host surface MUST load tokens.css (or equivalent) before this file.
 *
 * Theming:
 *   - Light is the default.
 *   - body.dark-mode flips surface/text colors via the cascade below.
 *   - Lapis (--thx-color-lapis) is the accent in every theme.
 */

/* ── Root trigger button ─────────────────────────────────────── */
.thxcal-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--thx-color-lapis) 8%, transparent);
    color: var(--thx-text, var(--text, inherit));
    border: none;
    border-radius: var(--thx-radius-card-sm, 6px);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--thx-dur-fast, 0.15s) var(--thx-ease, ease-in-out);
}
.thxcal-trigger:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 16%, transparent);
}
.thxcal-trigger:focus-visible {
    outline: 2px solid var(--thx-color-lapis);
    outline-offset: 2px;
}
.thxcal-trigger__icon { opacity: 0.85; }
body.dark-mode .thxcal-trigger {
    background: color-mix(in srgb, var(--thx-color-lapis) 14%, transparent);
}
body.dark-mode .thxcal-trigger:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 22%, transparent);
}

/* ── Modal overlay + shell ──────────────────────────────────── */
.thxcal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: thxcal-overlay-in 0.15s var(--thx-ease, ease-in-out);
}
@keyframes thxcal-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.thxcal-modal {
    background: var(--thx-surface-card, var(--thx-bg, #fff));
    color: var(--thx-text, var(--text, inherit));
    border-radius: var(--thx-radius-modal, 12px);
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--thx-shadow-modal, 0 8px 32px rgba(0, 0, 0, 0.18));
    animation: thxcal-modal-in 0.18s var(--thx-ease, ease-in-out);
}
@keyframes thxcal-modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.dark-mode .thxcal-modal {
    background: var(--thx-surface, var(--bg-card, #0a2238));
    color: var(--thx-color-white);
}

/* Single-mode modal is narrower — one calendar fits in less space. */
.thxcal-modal--single {
    max-width: 420px;
}

.thxcal-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--thx-divider, var(--border, #e2e2e2));
}
.thxcal-modal__title {
    margin: 0;
    font-size: var(--thx-fs-h4, 18px);
    font-weight: 700;
}
.thxcal-modal__close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--thx-text-muted, var(--fg-dim, #888));
    padding: 4px 8px;
    border-radius: var(--thx-radius-card-sm, 6px);
    font-family: inherit;
}
.thxcal-modal__close:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 8%, transparent);
}
body.dark-mode .thxcal-modal__close:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 18%, transparent);
}
.thxcal-modal__body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.thxcal-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--thx-divider, var(--border, #e2e2e2));
}

/* ── Buttons (Cancel / Use this date) ───────────────────────── */
.thxcal-btn {
    appearance: none;
    border: none;
    border-radius: var(--thx-radius-card-sm, 6px);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--thx-dur-fast, 0.15s) var(--thx-ease, ease-in-out);
}
.thxcal-btn--ghost {
    background: transparent;
    color: var(--thx-text-muted, var(--fg-dim, #666));
}
.thxcal-btn--ghost:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 8%, transparent);
}
.thxcal-btn--primary {
    background: var(--thx-color-lapis);
    color: var(--thx-color-white, #fff);
}
.thxcal-btn--primary:hover {
    background: color-mix(in srgb, var(--thx-color-lapis) 88%, black);
}
.thxcal-btn:focus-visible {
    outline: 2px solid var(--thx-color-lapis);
    outline-offset: 2px;
}

/* ── Hint line ─────────────────────────────────────────────── */
.thxcal-hint {
    font-size: 13px;
    color: var(--thx-text-muted, var(--fg-dim, #555));
    margin-bottom: 12px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--thx-color-lapis) 6%, transparent);
    border-radius: var(--thx-radius-card-sm, 6px);
}
.thxcal-hint--nudge {
    background: color-mix(in srgb, var(--thx-color-yellow-500) 14%, transparent);
    color: var(--thx-text, var(--text, inherit));
    animation: thxcal-nudge 0.4s var(--thx-ease, ease-in-out);
}
@keyframes thxcal-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .thxcal-overlay,
    .thxcal-modal,
    .thxcal-hint--nudge { animation: none; }
}

/* ── Calendar header (prev/next month) ─────────────────────── */
.thxcal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.thxcal-header__spacer {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--thx-text, var(--text, inherit));
}
.thxcal-nav {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--thx-text, var(--text, inherit));
    width: 28px;
    height: 28px;
    border-radius: var(--thx-radius-card-sm, 6px);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.thxcal-nav:hover { background: color-mix(in srgb, var(--thx-color-lapis) 8%, transparent); }
.thxcal-nav:focus-visible { outline: 2px solid var(--thx-color-lapis); outline-offset: 1px; }
body.dark-mode .thxcal-nav:hover { background: color-mix(in srgb, var(--thx-color-lapis) 18%, transparent); }

/* ── Calendar grid ─────────────────────────────────────────── */
.thxcal-months {
    display: grid;
    gap: 18px;
}
.thxcal-months--one { grid-template-columns: 1fr; }
.thxcal-months--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
    .thxcal-months--two { grid-template-columns: 1fr; }
}

.thxcal-month__title {
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    margin-bottom: 6px;
    color: var(--thx-text-muted, var(--fg-dim, #555));
}
.thxcal-dow, .thxcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.thxcal-dow__cell {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--thx-text-muted, var(--fg-dim, #888));
    padding: 4px 0;
}

.thxcal-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--thx-radius-tag, 4px);
    font-size: 13px;
    color: var(--thx-text, var(--text, inherit));
    cursor: pointer;
    user-select: none;
    transition: background var(--thx-dur-fast, 0.12s) var(--thx-ease, ease-in-out),
                color var(--thx-dur-fast, 0.12s) var(--thx-ease, ease-in-out);
}
.thxcal-cell--blank { cursor: default; }
.thxcal-cell:hover:not(.thxcal-cell--blank):not(.thxcal-cell--past):not(.thxcal-cell--future) {
    background: color-mix(in srgb, var(--thx-color-lapis) 10%, transparent);
}
.thxcal-cell--past, .thxcal-cell--future {
    color: var(--thx-text-muted, var(--fg-dim, #bbb));
    opacity: 0.45;
    cursor: not-allowed;
}
/* Single-mode selection */
.thxcal-cell--selected {
    background: var(--thx-color-lapis);
    color: var(--thx-color-white, #fff);
    font-weight: 700;
}
/* Range-mode selection */
.thxcal-cell--in-range {
    background: color-mix(in srgb, var(--thx-color-lapis) 18%, transparent);
}
.thxcal-cell--start, .thxcal-cell--end {
    background: var(--thx-color-lapis);
    color: var(--thx-color-white, #fff);
    font-weight: 700;
}
/* Conflict cells — range modes only */
.thxcal-cell--booked {
    background: color-mix(in srgb, var(--thx-color-crimson) 30%, transparent);
    color: color-mix(in srgb, var(--thx-color-crimson) 85%, var(--thx-color-grey-222));
    font-weight: 600;
}
.thxcal-cell--booked:hover { background: color-mix(in srgb, var(--thx-color-crimson) 45%, transparent); }
.thxcal-cell--tail {
    background: color-mix(in srgb, var(--thx-color-crimson) 14%, transparent);
    color: color-mix(in srgb, var(--thx-color-crimson) 75%, var(--thx-color-grey-222));
}
.thxcal-cell--tail:hover { background: color-mix(in srgb, var(--thx-color-crimson) 24%, transparent); }
body.dark-mode .thxcal-cell--booked {
    background: color-mix(in srgb, var(--thx-color-crimson) 40%, transparent);
    color: var(--thx-color-white, #fff);
}
body.dark-mode .thxcal-cell--tail {
    background: color-mix(in srgb, var(--thx-color-crimson) 18%, transparent);
    color: color-mix(in srgb, var(--thx-color-white, #fff) 90%, var(--thx-color-crimson));
}

/* ── Time row (datetime modes) ─────────────────────────────── */
.thxcal-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--thx-divider, var(--border, #e2e2e2));
}
.thxcal-time__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--thx-text-muted, var(--fg-dim, #666));
    margin-right: 2px;
}
.thxcal-time__field {
    width: 56px;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: color-mix(in srgb, var(--thx-color-lapis) 6%, transparent);
    border: none;
    border-radius: var(--thx-radius-card-sm, 6px);
    color: var(--thx-text, var(--text, inherit));
    font-family: inherit;
    -moz-appearance: textfield;
}
.thxcal-time__field::-webkit-outer-spin-button,
.thxcal-time__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.thxcal-time__field:focus-visible {
    outline: 2px solid var(--thx-color-lapis);
    outline-offset: 1px;
}
body.dark-mode .thxcal-time__field {
    background: color-mix(in srgb, var(--thx-color-lapis) 14%, transparent);
    color: var(--thx-color-white, #fff);
}
.thxcal-time__sep {
    font-weight: 700;
    font-size: 16px;
    color: var(--thx-text-muted, var(--fg-dim, #888));
}
.thxcal-time__hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--thx-text-muted, var(--fg-dim, #888));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Legend (range modes with shading) ─────────────────────── */
.thxcal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--thx-text-muted, var(--fg-dim, #666));
}
.thxcal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.thxcal-legend__sw {
    width: 12px;
    height: 12px;
    border-radius: var(--thx-radius-tag, 4px);
    display: inline-block;
}
.thxcal-legend__sw--avail    { background: transparent; border: 1px solid var(--thx-divider, var(--border, #ccc)); }
.thxcal-legend__sw--selected { background: var(--thx-color-lapis); }
.thxcal-legend__sw--booked   { background: color-mix(in srgb, var(--thx-color-crimson) 30%, transparent); }
.thxcal-legend__sw--tail     { background: color-mix(in srgb, var(--thx-color-crimson) 14%, transparent); }