/* Atlayo Meet - pole "Datum a cas" (jedno pole, dva segmenty) + vzhled flatpickr v barvach Atlayo (svetly i tmavy motiv).
   Nacita se po flatpickr.min.css, jen na strance /schedule. */

/* ------------------------------------------------------------ jedno pole, dva segmenty */
.dt-field {
  display: flex; align-items: stretch; height: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); transition: border-color 0.15s, box-shadow 0.15s;
}
.dt-field:hover { border-color: var(--ink-3); }
.dt-field:focus-within, .dt-field.is-open { border-color: #e5c100; box-shadow: 0 0 0 3px rgba(255, 219, 77, 0.35); }
.dt-field.invalid { border-color: #e5453f; box-shadow: 0 0 0 3px rgba(229, 69, 63, 0.22); }
.dt-part {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; cursor: pointer; color: var(--ink-2);
}
.dt-date { flex: 1 1 58%; }
.dt-time { flex: 1 1 42%; }
.dt-part svg { flex: none; width: 18px; height: 18px; }
.dt-part:focus-within svg { color: var(--ink); }
.dt-sep { flex: none; width: 1px; margin: 9px 0; background: var(--line); }
.s-field .dt-part input,
.s-field .dt-part input:focus {
  width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; outline: none; color: var(--ink); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.s-field .dt-part input::placeholder { color: var(--ink-3); }

/* ------------------------------------------------------------ flatpickr v barvach Atlayo */
.flatpickr-calendar.dt-cal {
  --dt-accent: #ffdb4d;
  --dt-accent-line: #e5c100;
  width: 308px; padding: 6px 0 4px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  font: inherit; font-size: 15px;
}
html[data-bs-theme="dark"] .flatpickr-calendar.dt-cal { --dt-accent-line: #ffdb4d; }
.flatpickr-calendar.dt-cal:before, .flatpickr-calendar.dt-cal:after { display: none; }
.dt-cal .flatpickr-innerContainer, .dt-cal .flatpickr-rContainer { width: 100%; }
.dt-cal .flatpickr-days { width: 100%; padding: 0 6px 4px; }
.dt-cal .dayContainer { width: 100%; min-width: 0; max-width: none; justify-content: flex-start; }

/* hlavicka: mesic a rok */
.dt-cal .flatpickr-months { align-items: center; }
.dt-cal .flatpickr-months .flatpickr-month { height: 44px; color: var(--ink); fill: var(--ink); }
.dt-cal .flatpickr-current-month { height: 44px; padding-top: 11px; font-size: 16px; font-weight: 700; }
.dt-cal .flatpickr-current-month span.cur-month { font-weight: 700; }
.dt-cal .flatpickr-current-month span.cur-month:hover { background: transparent; }
.dt-cal .flatpickr-current-month input.cur-year { font-weight: 700; color: var(--ink); }
.dt-cal .flatpickr-current-month .numInputWrapper:hover { background: transparent; }
.dt-cal .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--ink-2); }
.dt-cal .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--ink-2); }
.dt-cal .flatpickr-months .flatpickr-prev-month,
.dt-cal .flatpickr-months .flatpickr-next-month {
  top: 5px; height: 34px; width: 34px; padding: 10px; border-radius: 10px; color: var(--ink-2); fill: var(--ink-2);
  display: flex; align-items: center; justify-content: center; transition: background 0.12s;
}
.dt-cal .flatpickr-months .flatpickr-prev-month { left: 8px; }
.dt-cal .flatpickr-months .flatpickr-next-month { right: 8px; }
.dt-cal .flatpickr-months .flatpickr-prev-month:hover,
.dt-cal .flatpickr-months .flatpickr-next-month:hover { background: var(--soft); color: var(--ink); }
.dt-cal .flatpickr-months .flatpickr-prev-month:hover svg,
.dt-cal .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ink); }
.dt-cal .flatpickr-months .flatpickr-prev-month svg,
.dt-cal .flatpickr-months .flatpickr-next-month svg { width: 12px; height: 12px; }

/* dny v tydnu */
.dt-cal .flatpickr-weekdays { height: 30px; padding: 0 6px; }
.dt-cal span.flatpickr-weekday { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }

/* dny */
.dt-cal .flatpickr-day {
  width: 14.2857%; flex-basis: 14.2857%; max-width: none; height: 40px; line-height: 38px; border-radius: 12px;
  color: var(--ink); font-weight: 500; margin: 1px 0;
}
.dt-cal .flatpickr-day:hover,
.dt-cal .flatpickr-day:focus,
.dt-cal .flatpickr-day.prevMonthDay:hover,
.dt-cal .flatpickr-day.nextMonthDay:hover { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.dt-cal .flatpickr-day.today { border-color: var(--dt-accent-line); }
.dt-cal .flatpickr-day.today:hover,
.dt-cal .flatpickr-day.today:focus { background: var(--soft); border-color: var(--dt-accent-line); color: var(--ink); }
.dt-cal .flatpickr-day.selected,
.dt-cal .flatpickr-day.selected:hover,
.dt-cal .flatpickr-day.selected:focus,
.dt-cal .flatpickr-day.selected.prevMonthDay,
.dt-cal .flatpickr-day.selected.nextMonthDay {
  background: var(--dt-accent); border-color: var(--dt-accent); color: #1b1b1b; font-weight: 800;
}
.dt-cal .flatpickr-day.prevMonthDay,
.dt-cal .flatpickr-day.nextMonthDay { color: var(--ink-3); background: transparent; border-color: transparent; }
.dt-cal .flatpickr-day.prevMonthDay:hover,
.dt-cal .flatpickr-day.nextMonthDay:hover { color: var(--ink); }
.dt-cal .flatpickr-day.flatpickr-disabled,
.dt-cal .flatpickr-day.flatpickr-disabled:hover { color: var(--ink-3); opacity: 0.4; background: transparent; border-color: transparent; }

/* cas */
.dt-cal .flatpickr-time { border-top: 1px solid var(--line) !important; }
.dt-cal-time .flatpickr-time { border-top: 0 !important; }
.dt-cal .flatpickr-time input,
.dt-cal .flatpickr-time .flatpickr-time-separator,
.dt-cal .flatpickr-time .flatpickr-am-pm { color: var(--ink); }
.dt-cal .flatpickr-time input { font-size: 15px; border-radius: 10px; }
.dt-cal .flatpickr-time input:hover,
.dt-cal .flatpickr-time input:focus,
.dt-cal .flatpickr-time .flatpickr-am-pm:hover,
.dt-cal .flatpickr-time .flatpickr-am-pm:focus { background: var(--soft); }
.dt-cal .numInputWrapper { border-radius: 10px; }
.dt-cal .numInputWrapper:hover { background: var(--soft); }
.dt-cal .numInputWrapper span { border-color: var(--line); }
.dt-cal .numInputWrapper span:hover { background: rgba(128, 128, 128, 0.2); }
.dt-cal .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--ink-2); }
.dt-cal .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--ink-2); }

/* samostatny vyber casu: kompaktni, velka cisla (dobre se trefuje i prstem) */
.flatpickr-calendar.dt-cal-time { width: 200px; padding: 4px; }
.dt-cal-time .flatpickr-time { height: auto; max-height: 64px; line-height: 64px; padding: 0; }
.dt-cal-time .flatpickr-time .numInputWrapper { height: 64px; }
.dt-cal-time .flatpickr-time input { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-cal-time .flatpickr-time .flatpickr-time-separator { font-size: 26px; font-weight: 700; }
.dt-cal-time .numInputWrapper span { width: 18px; }