/* ==========================================================================
   Taha Auto admin: the Schedule's layouts (js/calendar-views.js), booking
   lengths (js/durations.js) and their warnings. Sits on admin.css and the
   look files (navy is the default; its overrides are at the end).
   - the day strip that scrolls through weeks
   - the hour grid: blocks as tall as the booking is long
   - Day / Week / Month, the view switcher, the "Calendar views" switch (Look)
   - the overlap warning line, the Job lengths editor (Website settings)
   ========================================================================== */

/* ---------- the day strip: a week per page, snapping, more weeks load at either end ---------- */
.daystrip.daystrip--weeks { display: flex; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.daystrip--weeks::-webkit-scrollbar { display: none; }
.daystrip__wk { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; scroll-snap-align: start; scroll-snap-stop: always; }
.daystrip--weeks button:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: -3px; }
@media (min-width: 721px) {
  /* the phone draws these in admin.css; the desktop Day view needs them too */
  .daystrip--weeks button { min-height: 62px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font: inherit; display: grid; gap: 2px; justify-items: center; align-content: center; padding: 6px 0; cursor: pointer; }
  .daystrip--weeks small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .daystrip--weeks b { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1; }
  .daystrip--weeks i { font-style: normal; font-size: 11px; color: var(--text-2); min-height: 13px; }
  .daystrip--weeks button:hover { border-color: var(--line-2); }
  .daystrip--weeks button.is-selected { background: var(--card); border-color: var(--accent-ui); color: var(--text); }
  .daystrip--weeks button.is-today small { color: var(--accent-text); }
}

/* ---------- an agenda card's time: "2:00–2:45 PM · 45 min" ---------- */
.aitem__when { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.aitem__when svg { width: 14px; height: 14px; flex: none; color: var(--text-3); }

/* ---------- Agenda · Day · Week · Month (only with Calendar views on) ---------- */
.calseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.calseg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.calseg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.calseg button:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: -2px; }
@media (hover: hover) { .calseg button[aria-pressed="false"]:hover { color: var(--text); } }
.cal__head .calseg { flex: none; width: 340px; max-width: 100%; }
#calendar.cal--wide { grid-template-columns: minmax(0, 1fr); }   /* Week (desktop): the grid takes the whole width */

/* "3 requests need a confirmed time": Day, Week and Month send you to the Agenda for them */
.calneeds { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.calneeds svg { width: 18px; height: 18px; flex: none; color: var(--text-3); }

/* ---------- the hour grid (desktop week, Day, phone Week) ---------- */
.tgrid { --gutter: 64px; --hour-h: 64px; display: grid; grid-template-columns: var(--gutter) repeat(var(--days), minmax(0, 1fr)); }
.tgrid--desk { min-width: calc(64px + var(--days) * 118px); }
.tgrid--day { --gutter: 52px; }
.tgrid--wk { --gutter: 38px; --hour-h: 44px; }   /* room for "12 PM" at 11px */
.tgrid__corner, .tgrid__day { border-bottom: 1px solid var(--line); }
.tgrid__day { display: grid; justify-items: center; align-content: center; gap: 1px; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: center; min-width: 0; }
button.tgrid__day { cursor: pointer; }
@media (hover: hover) { button.tgrid__day:hover { background: rgba(255, 255, 255, .04); } }
button.tgrid__day:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: -2px; }
.tgrid__day small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tgrid__day b { font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tgrid__day span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.tgrid__day.is-today b, .tgrid__day.is-today small { color: var(--accent-text); }
.tgrid--desk .tgrid__day.is-today b::after { content: "today"; display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 2px 6px; border-radius: 999px; vertical-align: middle; }
.tgrid--wk .tgrid__day { padding: 6px 0 5px; min-height: 52px; }
.tgrid--wk .tgrid__day b { font-size: 15px; }
.tgrid--wk .tgrid__day small { font-size: 11px; }
.tgrid--wk .tgrid__day i { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; }
.tgrid--wk .tgrid__day i.is-on { background: var(--accent-ui); }
.tgrid__times { display: grid; grid-template-rows: repeat(var(--rows), var(--hour-h)); }
.tgrid__times span { padding: 5px 8px 0 0; border-top: 1px solid var(--line); text-align: right; font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgrid--wk .tgrid__times span { padding: 3px 3px 0 0; font-size: 11px; letter-spacing: -.01em; }
.tgrid__col { position: relative; min-width: 0; display: grid; grid-template-rows: repeat(var(--rows), var(--hour-h)); border-left: 1px solid var(--line); }
.tgrid__col.is-today { background: rgba(var(--accent-rgb), .04); }
.tgrid__times span:first-child, .tgrid__col > .tgrid__slot:first-child { border-top: 0; }
.tgrid__slot { display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; color: inherit; }
.tgrid__slot[data-book] { cursor: pointer; }
@media (hover: hover) { .tgrid__slot[data-book]:hover { background: rgba(255, 255, 255, .04); } }
button.tgrid__slot:active { background: rgba(255, 255, 255, .06); }
button.tgrid__slot:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: -2px; }
.tgrid__slot.is-closed { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 12px); }

/* a booking: its top is its start, its height its length; bookings that overlap share the column */
.tblock { position: absolute; z-index: 2; top: calc(var(--t) * 1%); height: calc(var(--h) * 1%); min-height: 22px; left: calc(var(--l) * 100% / var(--n) + 2px); width: calc(100% / var(--n) - 4px);
  display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 7px; border: 0; border-radius: 8px; background: #4A4A4A; color: #fff; font: inherit; font-size: 12px; line-height: 1.25; text-align: left; cursor: pointer; }
.tblock > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tblock b { font-size: 12.5px; font-weight: 700; }
.tblock__when { font-variant-numeric: tabular-nums; opacity: .9; }
.tblock__svc { opacity: .8; }
.tblock__conf { display: block; font-style: normal; margin-top: 2px; }
.tblock__conf .st { font-size: 11px; letter-spacing: .04em; padding: 1px 6px; background: rgba(0, 0, 0, .45); }
.tblock.is-s { justify-content: center; padding-block: 2px; }
.tblock.is-s .tblock__when, .tblock.is-s .tblock__svc, .tblock.is-s .tblock__conf, .tblock.is-m .tblock__svc, .tblock.is-m .tblock__conf { display: none; }
.tblock--tony { background: #2F5A8A; }
.tblock--awais { background: var(--tech-awais); color: var(--tech-awais-ink); }
.tblock--req { background: var(--accent-soft); color: var(--text); border: 2px dashed var(--accent-text); }
.tblock--in_shop { box-shadow: inset 0 0 0 2px #fff; }
.tblock--done { opacity: .5; }
.tblock:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; z-index: 4; }
@media (hover: hover) { .tblock:hover { filter: brightness(1.12); z-index: 3; } }
/* the phone Week: narrow days, so a block is at least 28px tall and its tap area 44px (a clear ::after, centred on it; the name
   clips itself, so the block needn't) */
.tgrid--wk .tblock { left: calc(var(--l) * 100% / var(--n) + 1px); width: calc(100% / var(--n) - 2px); min-height: 28px; padding: 2px 3px; border-radius: 5px; overflow: visible; }
.tgrid--wk .tblock::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.tgrid--wk .tblock b { font-size: 11px; }
.tgrid--day .tblock { padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.tgrid--day .tblock b { font-size: 14px; }
/* now: a line across today */
.tgrid__now { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--t) * 1%); height: 2px; margin-top: -1px; background: var(--danger); pointer-events: none; }
.tgrid__now::before { content: ""; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* phone: the grids sit in a panel like the agenda's cards */
.agenda .tgrid, .calday .tgrid { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }

/* ---------- Month ---------- */
.calmonth { display: grid; gap: 4px; }
.calmonth__dow, .calmonth__wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calmonth__dow span { padding: 2px 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.calmonth__day { position: relative; min-width: 0; min-height: 58px; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: 6px; padding: 8px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.calmonth__day b { font-size: 15px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.calmonth__dots em { font-style: normal; font-size: 11px; font-weight: 700; line-height: 6px; color: var(--text-2); }
.calmonth__day.is-out { opacity: .45; }
.calmonth__day.is-today b { color: var(--accent-text); }
.calmonth__day.is-selected { border-color: var(--accent-ui); background: var(--card); }
.calmonth__day:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 1px; }
@media (hover: hover) { .calmonth__day:hover { border-color: var(--line-2); } }
.calmonth__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #6B7580; }
.dot--tony { background: #4A7FBD; }
.dot--awais { background: var(--tech-awais); }
.dot--req { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent-text); }
/* desktop: the first few bookings by name in each day */
.calwrap--month { padding: 12px; }
.calmonth--detail .calmonth__day { min-height: 112px; justify-items: stretch; text-align: left; padding: 8px; gap: 6px; grid-template-rows: auto; }
.calmonth--detail .calmonth__day b { justify-self: start; font-size: 16px; }
.calmonth__list { display: grid; gap: 3px; min-width: 0; }
.calmonth__item { display: block; padding: 2px 6px; border-radius: 5px; background: #4A4A4A; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calmonth__item--tony { background: #2F5A8A; }
.calmonth__item--awais { background: var(--tech-awais); color: var(--tech-awais-ink); }
.calmonth__item--req { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.calmonth__more { font-size: 11.5px; color: var(--text-3); padding-left: 2px; }

/* ---------- desktop Day: the strip and the day's hours beside the side lists ---------- */
.calday { display: grid; gap: 12px; min-width: 0; align-content: start; }
.calday .agenda__body { display: grid; gap: 12px; }
.calday .agenda__section { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.calday .agenda__section h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.calday .agenda__count { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.calday .tgrid--day { --gutter: 64px; }

/* phone views: breathing room under the switcher */
@media (max-width: 720px) {
  .calseg button { min-height: 44px; font-size: 15px; }
  .agenda--week .tgrid, .agenda--day .tgrid { margin-top: 2px; }
}

/* ---------- a booking's time runs into another (the booking sheet, the new appointment sheet, Pick a time) ---------- */
.bkwarn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--warn); background: rgba(180, 83, 9, .12); color: var(--warn-text); font-size: 13.5px; line-height: 1.4; }
.bkwarn[hidden] { display: none; }
.bkwarn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.schedpick .bkwarn { margin-top: 10px; }

/* ---------- Job lengths (Website settings) ---------- */
.durs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 16px; }
.dur { display: grid; gap: 6px; align-content: start; min-width: 0; }
.dur label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sform .dur__avg.hint { margin-top: 0; }
.dur__avg { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; }
.dur__avg .linkbtn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; font-weight: 600; }
.dur__avg .linkbtn[hidden] { display: none; }
@media (max-width: 720px) {
  .durs { grid-template-columns: minmax(0, 1fr); }
  .dur select { min-height: 48px; font-size: 16px; }
  .dur__avg .linkbtn { min-height: 44px; }
}

/* ---------- Look sheet: the Calendar views switch ---------- */
/* no min-height: in the Look sheet's scrolling grid an item's min-height is all its row gets, so the padding makes the 56px */
.lk__switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; }
.lk__switch > span { display: grid; gap: 2px; min-width: 0; }
.lk__switch b { font-size: 15px; font-weight: 650; color: var(--text); }
.lk__switch small { font-size: 13px; line-height: 1.35; color: var(--text-3); }
.lk__switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 999px; border: 1px solid var(--line-3); background: var(--line-2); cursor: pointer; transition: background-color var(--dur-small, 180ms) ease, border-color var(--dur-small, 180ms) ease; }
.lk__switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform var(--dur-small, 180ms) var(--ease-out, ease); }
.lk__switch input:checked { background: var(--accent); border-color: var(--accent); }
.lk__switch input:checked::before { transform: translateX(20px); }
.lk__switch input:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
/* the wide Look sheet places its parts by area (admin.css): the switch takes a row of its own at the bottom */
@media (min-width: 721px) {
  .lk__body { grid-template-areas: "seg l2" "l1 wheel" "sw wheel" "row wheel" "err hint" "note range" "cv cv"; }
  .lk__switch { grid-area: cv; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk__switch input, .lk__switch input::before { transition: none; }
  .tblock:hover { filter: none; }
}

/* ---------- navy (the default look) ---------- */
body.theme-navy .tblock, body.theme-navy .calmonth__item, body.theme-navy .legend .l-either { background: #34495E; }
body.theme-navy .tblock--tony, body.theme-navy .calmonth__item--tony { background: #2F5A8A; }
body.theme-navy .tblock--awais, body.theme-navy .calmonth__item--awais { background: var(--tech-awais); }
body.theme-navy .tblock--req { background: var(--accent-soft); }
body.theme-navy .calmonth__item--req { background: var(--accent-soft); }
body.theme-navy .calseg { background: #0E1A25; border-color: #223445; }
body.theme-navy .calseg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 30%, #0F1B27); color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--accent-ui); }
body.theme-navy .agenda .tgrid, body.theme-navy .calday .tgrid, body.theme-navy .calneeds { background: #0F1B27; border-color: #223445; }
body.theme-navy .calmonth__day { background: #0F1B27; border-color: #223445; }
body.theme-navy .calmonth__day.is-selected { background: color-mix(in srgb, var(--accent) 22%, #0F1B27); border-color: var(--accent-ui); }
body.theme-navy .dot { background: #7E93A6; }
body.theme-navy .dot--tony { background: #4A8AD6; }
body.theme-navy .dot--awais { background: var(--tech-awais); }
body.theme-navy .dot--req { background: transparent; }
body.theme-navy .bkwarn { border-color: #705725; background: #241E12; color: #F5BD51; }
body.theme-navy .lk__switch { background: #101C28; border-color: #2A3C4F; }
body.theme-navy .lk__switch input:not(:checked) { background: #2A3C4F; border-color: #61788F; }
@media (min-width: 721px) {
  body.theme-navy .daystrip--weeks button { background: #0F1B27; border-color: #223445; }
  body.theme-navy .daystrip--weeks button.is-selected { background: color-mix(in srgb, var(--accent) 30%, #0F1B27); border-color: var(--accent-ui); color: var(--accent-text); }
  body.theme-navy .daystrip--weeks button.is-selected b { color: #FFFFFF; }
}