/* ontime-ui.css — new-ui-ux (the design files in /new-ui-ux) held across every page.
   Loaded LAST on every page (site, panels, the booking page), after the page's own CSS.
   uiux.css carries the spec's components and theme.css its tokens; this file keeps every
   screen, old and new, to the spec's rules:
     · blue (--br) is calm, trust and «active»; saffron (--ac) only for the one main action;
       navy (--ink) is text and structure;
     · flat colour on controls (no gradients); cards 14px, controls 10px, pills round;
     · a stat is a label, a big number and a status pill — no coloured edges;
     · the super-admin console (.mn) is minimal: no glass, no cards, thin lines. */

/* ------------------------------------------------------------- stat cards */
.card.stat .grow { display: none; }
.card.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.card.stat > b { font-size: 26px; line-height: 1.3; margin: 0; }
.card.stat > span:last-child:empty { display: none; }
.card.stat:is(.k-ok, .k-ac, .k-wn, .k-bd, .k-br, .sw, .er) > span:last-child:not(:empty) {
  margin-top: 2px; padding: 1px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.card.stat.k-ok > span:last-child { background: var(--okb); color: var(--ok); }
.card.stat:is(.k-ac, .k-wn, .sw) > span:last-child { background: var(--wnb); color: var(--wn); }
.card.stat:is(.k-bd, .er) > span:last-child { background: var(--bdb); color: var(--bd); }
.card.stat.k-br > span:last-child { background: var(--bs); color: var(--br); }
/* a coloured kind with no note still shows its state: a dot before the label */
.card.stat:is(.k-ok, .k-ac, .k-wn, .k-bd, .k-br) > span:nth-child(2)::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; vertical-align: 1px; background: var(--br); }
.card.stat.k-ok > span:nth-child(2)::before { background: var(--ok); }
.card.stat:is(.k-ac, .k-wn) > span:nth-child(2)::before { background: var(--ac); }
.card.stat.k-bd > span:nth-child(2)::before { background: var(--bd); }

/* ------------------------------------------------------------- controls: flat colour */
html[data-skin="nobat"] :is(.btn.p, .fbtn.p, .btn-primary) { background-image: none; background-color: var(--br); border-color: var(--br); }
html[data-skin="nobat"] .hero { background: #14408F; }
html[data-skin="nobat"][data-theme="dark"] .hero { background: #163C80; }
/* the one main action of a screen (new-ui-ux: saffron) */
.btn.cta, .btn.a { background: var(--ac); border-color: var(--ac); color: #1B1204; font-weight: 800; }
.btn.cta:hover, .btn.a:hover { background: color-mix(in srgb, var(--ac) 90%, #000); }
.btn.a.in { width: auto; padding: 9px 18px; font-size: 14px; }
:focus-visible { outline: 2px solid var(--br); outline-offset: 2px; }

/* ------------------------------------------------------------- super-admin console (.mn) */
.mn .main .card { background: transparent; border: 0; border-top: 1px solid var(--ln); border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px 0 0; }
.mn .main .g:has(> .card.stat) { gap: 0; border-block: 1px solid var(--ln); }
.mn .main .card.stat { border: 0; border-inline-start: 1px solid var(--ln); padding: 14px 18px; }
.mn .main .card.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.mn .main .card.stat > b { font-weight: 500; font-size: 28px; }
.mn .kp + .kp { border-top: 0; }
.mn .kp > div > span:last-child { display: block; }
.ov { display: grid; gap: 28px; }
.ov-rows .rw { border-radius: 8px; }
.ov-rows .rw b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-side { padding-inline-start: 8px; }
.ov-side h3 { margin: 0; }
.ov-mods { margin: 18px 0; }
.ov-log, .ov-need { margin-top: 14px; }
.ov-need b { font-weight: 700; }
@media (max-width: 860px) { .ov-side { padding: 16px 0 0; border-top: 1px solid var(--ln); } }

/* ------------------------------------------------------------- support (new-ui-ux 4) */
.tk-head h2 { margin: 0; }
.tk-q { width: min(320px, 100%); box-sizing: border-box; }
.tk-fs .fs { cursor: pointer; }
.tk-split { align-items: start; }
.tk-list { padding: 4px 16px !important; }
.tk-list .tc { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 0; border: 0;
  border-bottom: 1px solid var(--ln); background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.tk-list .tc:last-child { border-bottom: 0; }
.tk-list .tc:hover b, .tk-list .tc.on b { color: var(--br); }
.tk-list .tc.on { box-shadow: inset -3px 0 0 var(--br); padding-inline-start: 10px; }
.tk-list .tc .pill { flex: none; }
.tk-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tk-th-h h3 { margin: 0; overflow-wrap: anywhere; }
.tk-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.tk-msgs .msg time { display: block; margin-top: 4px; font-size: 11px; color: var(--mu); }
.tk-pane textarea { width: 100%; box-sizing: border-box; }
.tk-more summary { cursor: pointer; }
.tk-more .ux-grid { margin-top: 8px; }
@media (max-width: 999px) { .tk-split { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- customer home (new-ui-ux 2) */
.cx-hero { display: grid; gap: 6px; }
.cx-hero h2 { font-size: 24px; margin: 6px 0 0; color: #fff; }
.cx-hero p { opacity: .85; margin: 0; }
.cx-hero .pill { background: rgba(255, 255, 255, .16); color: #fff; }
.cx-hero .acts { margin-top: 12px; }
.cx-stats .stat .btn { margin-top: 8px; }
.cx-past .bk .btn { flex: none; }

/* ------------------------------------------------------------- business dashboard (new-ui-ux 3) */
.dx-top .pb { margin-top: 6px; }
.dx-top .row b { font-weight: 700; }