/* ============================================================
 * calendars.css — styles for Phase 14 custom date pickers
 *
 * Components styled here:
 *   - DatetimePicker (Plan 14-01)         — .tt-picker-* / .tt-datetime-*
 *   - DateRangePicker (Plan 14-02 appends — see marker at bottom)
 *
 * Tokens sourced from public/accounts.css :root + [data-theme="dark"].
 * Only literal color used: #0a1410 — the LOCKED dark-on-brand text override
 * required for WCAG contrast in dark theme (no token exists for it).
 *
 * Design refs:
 *   ui-mockups/datetime-round2.html variant 05 (light)
 *   ui-mockups/picked-dark.html               (dark)
 * ============================================================ */

/* ─── Trigger wrapper + closed-state field ─────────────────── */
.tt-picker-wrap {
  display: inline-block;
  position: relative;
  width: 100%;
  font-feature-settings: "tnum" 1;
}

.tt-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 180ms, border-color 180ms, box-shadow 180ms;
  outline: none;
}

.tt-picker-trigger:hover {
  border-color: var(--line-strong);
  background: var(--panel-hover);
}

.tt-picker-trigger:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.tt-picker-trigger--disabled,
.tt-picker-trigger--disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--panel);
  border-color: var(--line);
}

.tt-picker-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.tt-picker-value--empty {
  color: var(--muted);
  font-weight: 400;
}

.tt-picker-icon {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  opacity: 0.8;
}

/* ─── Popover container ───────────────────────────────────── */
.tt-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--modal-shadow);
  padding: 18px;
  font-feature-settings: "tnum" 1, "ss01" 1;
  color: var(--ink);
}

/* DatetimePicker-specific layout: 1.5fr calendar + 1fr time column */
.tt-datetime-popover {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  width: 560px;
  max-width: calc(100vw - 32px);
}

/* ─── Calendar column ─────────────────────────────────────── */
.tt-cal {
  min-width: 0;
}

.tt-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tt-cal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.tt-cal-nav {
  display: inline-flex;
  gap: 6px;
}

.tt-cal-navbtn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 180ms, border-color 180ms;
}

.tt-cal-navbtn:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

.tt-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.tt-cal-dow > div {
  text-align: center;
  padding: 6px 0;
}

.tt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tt-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  padding: 0;
  font-family: inherit;
  transition: background 180ms, color 180ms;
  position: relative;
}

.tt-day:hover {
  background: var(--brand-soft);
}

.tt-day--out {
  color: var(--muted);
  opacity: 0.6;
}

.tt-day--today {
  color: var(--brand-dark);
  font-weight: 700;
}

.tt-day--today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

.tt-day--selected,
.tt-day--selected:hover {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ─── Time column ─────────────────────────────────────────── */
.tt-time {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tt-time-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tt-time-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-time-readout {
  font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.tt-time-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.tt-time-list {
  height: 196px;
  overflow-y: scroll;
  padding: 4px;
  font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.tt-time-list::-webkit-scrollbar { width: 4px; }
.tt-time-list::-webkit-scrollbar-track { background: transparent; }
.tt-time-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 2px;
}

.tt-time-row {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 0;
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
  transition: background 180ms, color 180ms;
}

.tt-time-row:hover {
  background: var(--panel-hover);
}

.tt-time-row--selected,
.tt-time-row--selected:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
}

/* ─── Actions row (Now button + chip presets) ─────────────── */
.tt-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--brand-dark);
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms, border-color 180ms;
}

.tt-now-btn:hover {
  background: var(--brand-dark);
}

.tt-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tt-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-hover);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms, border-color 180ms;
}

.tt-chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-hover);
}

/* ─── Dark-mode overrides ─────────────────────────────────── */
[data-theme="dark"] .tt-picker-trigger {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .tt-picker-trigger:hover {
  background: var(--panel-hover);
}

[data-theme="dark"] .tt-picker-popover {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .tt-day:hover {
  background: var(--brand-soft);
  color: var(--ink);
}

[data-theme="dark"] .tt-day--today {
  color: var(--brand);
}

[data-theme="dark"] .tt-day--today::after {
  background: var(--brand);
  box-shadow: 0 0 6px rgba(45, 184, 118, 0.7);
}

/* LOCKED: dark-on-brand text per Phase 14 CONTEXT.md.
   Brand background + WHITE text fails WCAG; dark text #0a1410 is the
   approved fix. Do NOT replace with var(--ink) — that token resolves
   to a near-white in dark theme. */
[data-theme="dark"] .tt-day--selected,
[data-theme="dark"] .tt-day--selected:hover {
  background: var(--brand);
  color: #0a1410;
  font-weight: 700;
}

[data-theme="dark"] .tt-time-lists {
  background: var(--bg);
  border-color: var(--line);
}

[data-theme="dark"] .tt-time-row {
  color: var(--ink);
}

[data-theme="dark"] .tt-time-row:hover {
  background: var(--panel-hover);
}

/* LOCKED: dark-on-brand text on selected time rows (same rationale as above). */
[data-theme="dark"] .tt-time-row--selected,
[data-theme="dark"] .tt-time-row--selected:hover {
  background: var(--brand);
  color: #0a1410;
  font-weight: 700;
  border: 1px solid var(--brand-dark);
}

/* LOCKED: primary "Зараз +30с" button keeps dark text on brand in dark theme. */
[data-theme="dark"] .tt-now-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #0a1410;
  font-weight: 700;
}

[data-theme="dark"] .tt-now-btn:hover {
  background: var(--brand-dark);
}

[data-theme="dark"] .tt-chip {
  background: var(--panel-hover);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .tt-chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-hover);
}

/* === DateRangePicker styles below (added in Plan 14-02) === */

/* ─── Range popover container (sits on top of base .tt-picker-popover) ─── */
.tt-range-popover {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
}

/* Range trigger inherits everything from .tt-picker-trigger — no overrides
   needed unless the visible value text width forces a wider min. */
.tt-range-trigger .tt-picker-value {
  /* Range strings are longer than datetime ("DD.MM.YYYY — DD.MM.YYYY") —
     keep monospace + tighter letter-spacing for tabular alignment. */
  letter-spacing: -0.01em;
}

/* ─── Chip row (preset shortcuts at the top of the popover) ─── */
.tt-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.tt-range-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms, border-color 180ms, color 180ms;
}

.tt-range-chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-hover);
}

.tt-chip--active,
.tt-chip--active:hover {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
  font-weight: 600;
}

/* ─── Calendar inside the range popover ─── */
.tt-range-cal {
  margin-bottom: 4px;
}

/* Range-specific day-cell states.
   Endpoints (start/end) are brand-solid with dark text on light theme
   (matches DatetimePicker .tt-day--selected rule).
   In-range cells use brand-soft bg + brand-dark ink in light, normal ink
   in dark — they are NEVER brand-solid. */
.tt-day--range-start,
.tt-day--range-start:hover,
.tt-day--range-end,
.tt-day--range-end:hover {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.tt-day--range-in,
.tt-day--range-in:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 500;
  border-radius: 4px;
}

/* When a day is BOTH range-start AND range-end (single-day range),
   the combined class set is applied — base brand styling already covers it. */

/* Half-selected preview hint: tone down endpoints/in-range slightly so user
   sees the difference between "committed" range and "tentative" hover range. */
.tt-day--preview.tt-day--range-start,
.tt-day--preview.tt-day--range-end {
  opacity: 0.85;
}

/* ─── Summary bar (dashed Від → До display) ─── */
.tt-range-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

.tt-summary-endpoint {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tt-summary-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-summary-val {
  font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.tt-summary-conn {
  flex: 0 0 auto;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
}

/* ─── Duration line (X днів · sub-text) ─── */
.tt-range-duration {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
}

.tt-range-duration strong {
  color: var(--brand-dark);
  font-weight: 600;
}

.tt-range-duration-empty {
  font-style: italic;
}

/* ─── Action row (Скинути / Застосувати) ───
   This overrides the base .tt-actions rule (which sets column-direction for
   the datetime picker time column) for the range popover only. */
.tt-range-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms, border-color 180ms, color 180ms;
}

.tt-action-btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.tt-action-btn--ghost:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

.tt-action-btn--primary {
  background: var(--brand);
  border: 1px solid var(--brand-dark);
  color: #fff;
}

.tt-action-btn--primary:hover {
  background: var(--brand-dark);
}

/* ─── Dark-mode overrides for the range block ─── */
[data-theme="dark"] .tt-range-chip {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .tt-range-chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-hover);
  color: var(--ink);
}

/* LOCKED: dark-on-brand text on the active chip per Phase 14 CONTEXT.md.
   Brand background + WHITE text fails WCAG; dark text #0a1410 is the
   approved fix. Same rule applies to range-start / range-end below and
   to the primary action button. */
[data-theme="dark"] .tt-chip--active,
[data-theme="dark"] .tt-chip--active:hover {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #0a1410;
  font-weight: 700;
}

/* LOCKED: dark-on-brand text on range endpoints. */
[data-theme="dark"] .tt-day--range-start,
[data-theme="dark"] .tt-day--range-start:hover,
[data-theme="dark"] .tt-day--range-end,
[data-theme="dark"] .tt-day--range-end:hover {
  background: var(--brand);
  color: #0a1410;
  font-weight: 700;
}

/* In-range cells in dark mode keep brand-soft bg (NOT brand solid) with
   normal ink text — endpoints are the only brand-solid cells. */
[data-theme="dark"] .tt-day--range-in,
[data-theme="dark"] .tt-day--range-in:hover {
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 500;
}

[data-theme="dark"] .tt-range-summary {
  border-color: var(--line-strong);
  background: transparent;
}

[data-theme="dark"] .tt-summary-val {
  color: var(--ink);
}

[data-theme="dark"] .tt-summary-conn {
  color: var(--brand);
}

[data-theme="dark"] .tt-range-duration strong {
  color: var(--brand);
}

[data-theme="dark"] .tt-action-btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .tt-action-btn--ghost:hover {
  background: var(--panel-hover);
  border-color: var(--line-strong);
}

/* LOCKED: dark-on-brand text on the primary "Застосувати" button. */
[data-theme="dark"] .tt-action-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #0a1410;
  font-weight: 700;
}

[data-theme="dark"] .tt-action-btn--primary:hover {
  background: var(--brand-dark);
}