/* ===========================================================================
   THE LOOK — one look for the website, the panels and the phone app.

   WHY. The panels, the website and the phone app read as one product, and
   that product is a clinic: pale mint-grey ground, deep green-black ink, a
   teal for anything you can press. Red is kept for meaning: if "Open the
   diary" and "Delete client" are the same red, the colour that should mean
   "careful" means nothing.

     TEAL IS FOR DOING.      Buttons, links, the page you are on, focus.
     RED IS FOR THE BRAND    The logo keeps it; and a destructive action, an
         AND FOR DANGER.     error, a missed booking are red — nothing else.
     INK, NOT BLACK.         Text is the app's green-black, so a page and the
                             app read as the same hand.

   THE PALETTE (the app's own, src/theme.ts in the app):
     ink        #12211f   text
     body       #31423f   secondary text that still has to be read
     muted      #6b7f7b   hints, captions
     ground     #eef3f2   the page — a shade deeper than the app's #f4f7f6
                          so a white card stands off it without a shadow
     line       #dfe8e6   borders;  line-strong #c7d6d3 for inputs
     teal       #0d9488   action;   teal-deep #0f766e hover / current;
                          teal-tint #e6f5f3 a selected row or link
     red        #c1121f   brand and danger; red-tint #fdeceb
     amber      #b45309 on #fdf3e1   needs attention, not wrong

   TYPE. Barlow for everything you read and press; Barlow Condensed for the
   things you look up — page titles, card titles and the big numbers on a
   dashboard, set like the readout on a treadmill or a metabolic cart.
   Figures are tabular wherever they sit in a column. Self-hosted
   (assets/fonts/, SIL Open Font License): no request leaves the site.

   HOW IT WORKS. Loaded after style.css and the feature sheets, before
   rules.css and utilities.css (src/Kernel/Web/Styles.php), so the invariants
   still win. It changes colours, type and surfaces — never a layout — and it
   does it mostly by re-pointing the variables style.css already uses: the
   names --red, --red-deep, … mean "the action colour", and the few places
   where red really means danger say so below.
   =========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  --ink:          #12211f;
  --ink-body:     #31423f;
  --ink-muted:    #6b7f7b;
  --ground:       #eef3f2;
  --line:         #dfe8e6;
  --line-strong:  #c7d6d3;

  --teal:         #0d9488;
  --teal-deep:    #0f766e;
  --teal-soft:    #2ec4b6;
  --teal-tint:    #e6f5f3;

  --danger:       #c1121f;
  --danger-deep:  #9f0f1a;
  --danger-tint:  #fdeceb;
  --danger-line:  #f5c2bf;

  --attention:      #b45309;
  --attention-tint: #fdf3e1;
  --attention-line: #f1d39c;

  /* The names style.css and the feature sheets already use, re-pointed.
     "--red" has meant "the colour you press" for years; it still does. */
  --red:        var(--teal);
  --red-soft:   var(--teal-soft);
  --red-deep:   var(--teal-deep);
  --red-tint:   var(--teal-tint);
  --bg:         var(--ground);
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       var(--ink);
  --text-soft:  #5d706c;
  --border:     var(--line);
  --shadow-sm:  0 1px 2px rgba(18,33,31,.05);
  --shadow-md:  0 10px 28px -12px rgba(18,33,31,.22);
  --shadow-lg:  0 24px 56px -20px rgba(18,33,31,.32);
  --radius:     14px;
  --radius-sm:  10px;

  --font-body:    'Barlow', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', 'Segoe UI', Arial, sans-serif;

  --focus-ring: 0 0 0 3px rgba(13,148,136,.28);
}

/* ---- The page ---------------------------------------------------------------- */
body { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--ground); }
::selection { background: rgba(13,148,136,.18); }
a { color: var(--teal-deep); }
a:hover { color: var(--teal); }

/* Titles you look up: condensed, tight, ink. The one bold move. */
.page-title,
.section-title,
.login-card h1 {
  font-family: var(--font-display);
  letter-spacing: .005em;
  color: var(--ink);
}
.page-title   { font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin-bottom: 18px; }
.section-title { font-size: 1.32rem; font-weight: 700; line-height: 1.15; }
.page-title .muted, .page-title .pill { font-family: var(--font-body); }
h1, h2, h3 { color: var(--ink); }

/* ---- Header ------------------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
/* a hairline of the action colour along the very top: the one place the
   frame itself carries colour */
.site-header::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 55%, var(--teal-soft));
}
.brand-logo { box-shadow: none; border-radius: 8px; }
.brand:hover .brand-logo { box-shadow: none; transform: none; }

.nav-link {
  font-weight: 600; font-size: .95rem; color: var(--ink-body);
  border-radius: 8px; padding: 8px 12px;
}
.nav-link:hover { background: var(--teal-tint); color: var(--teal-deep); }
.nav-link.active {
  background: transparent; color: var(--teal-deep);
  box-shadow: inset 0 -2px 0 var(--teal);
  border-radius: 8px 8px 2px 2px;
}

.icon-btn { color: var(--ink-body); }
.icon-btn:hover { background: var(--teal-tint); color: var(--teal-deep); }
.bell-btn { border-color: var(--line); }
.user-btn { border-color: var(--line); }
.user-btn:hover { border-color: var(--teal); box-shadow: none; }
.user-avatar-ph { background: var(--ink); color: #fff; }
.drop-menu { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
.drop-item:hover, .drop-item-btn:hover { background: var(--teal-tint); color: var(--teal-deep); }
.drawer-link:hover, .drawer-link.active { background: var(--teal-tint); color: var(--teal-deep); }
.nav-burger:hover { background: var(--teal-tint); color: var(--teal-deep); }

/* The drawer waits off the left edge and casts its shadow only when open —
   otherwise the shadow is a grey haze down the side of every page. */
.drawer { box-shadow: none; }
.drawer.open { box-shadow: var(--shadow-lg); }

/* Danger keeps its own colour everywhere it is named as danger. */
.drop-item-danger, .drop-item-btn.drop-item-danger, .drawer-link.drop-item-danger { color: var(--danger); }
.drop-item-danger:hover, .drop-item-btn.drop-item-danger:hover, .drawer-link.drop-item-danger:hover { background: var(--danger-tint); color: var(--danger-deep); }

/* ---- The open tab's pages ------------------------------------------------------
   A tab with more than one page shows them in a row under the header: the
   second level of the menu, quieter than the first. Same width as the page,
   so the links sit over the content they open. Wraps rather than scrolls
   sideways — a hidden page is a page nobody finds (see .main-nav). */
.section-nav {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.section-nav-inner {
  max-width: var(--container, 1100px); margin: 0 auto;
  padding: 0 var(--container-pad, 20px);
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 var(--space-1, 4px);
}
.section-nav-title { display: none; }
.section-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px 9px; min-height: var(--touch-min, 44px); box-sizing: border-box;
  font-size: var(--text-md, .92rem); font-weight: 600; color: var(--ink-body);
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap;
}
.section-link:hover { color: var(--teal-deep); text-decoration: none; background: var(--teal-tint); }
.section-link.active { color: var(--teal-deep); border-bottom-color: var(--teal); }
.section-link:focus-visible, .nav-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* What is waiting behind a tab or a page: a small count, not a sentence. */
.nav-count {
  display: inline-block; min-width: 1.35em; padding: 1px 6px; margin-left: 2px;
  border-radius: 999px; background: var(--teal-tint); color: var(--teal-deep);
  font-size: var(--text-2xs, .72rem); font-weight: 700; line-height: 1.5; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-link.active .nav-count, .section-link.active .nav-count { background: var(--teal); color: #fff; }

/* The drawer: each tab with its pages beneath it. */
.drawer-group { margin: 6px 0 4px; }
.drawer-group-label {
  padding: 8px 14px 4px; font-size: var(--text-xs, .78rem); font-weight: 700;
  color: var(--ink-muted); letter-spacing: .01em;
}
.drawer-link.drawer-sublink { padding: 11px 14px 11px 24px; font-weight: 500; }
.drawer-group.open .drawer-group-label { color: var(--teal-deep); }

/* On a phone the tabs live in the drawer, so the row names the tab it belongs to. */
@media (max-width: 900px) {
  .section-nav-title {
    display: inline-flex; align-items: center; padding-right: 8px; margin-right: 4px;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-md, .92rem);
    color: var(--ink); border-right: 1px solid var(--line);
  }
  .section-nav-inner { padding: 0 12px; }
  .section-link { padding: 10px 9px 9px; }
}

/* ---- Cards ---------------------------------------------------------------------- */
.card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons --------------------------------------------------------------------- */
.btn { font-weight: 600; letter-spacing: .005em; border-radius: 10px; }
.btn:hover { transform: none; }
.btn-primary {
  background: var(--teal); color: #fff; border-color: var(--teal);
  box-shadow: 0 1px 0 rgba(18,33,31,.12);
}
.btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; box-shadow: 0 1px 0 rgba(18,33,31,.12); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); }
.btn-danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Forms ------------------------------------------------------------------------ */
.field label { color: var(--ink-body); font-weight: 600; font-size: .85rem; }
.field input, .field select, .field textarea,
.toolbar input, .toolbar select, .cal-filters select {
  border-color: var(--line-strong);
  border-radius: 10px;
}
.phone-input .phone-cc, .phone-input .phone-local { border-color: var(--line-strong); border-radius: 10px; }
.field input:focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus,
.phone-input .phone-cc:focus, .phone-input .phone-local:focus {
  outline: none; border-color: var(--teal); box-shadow: var(--focus-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }
/* Controls that sit in a table row or a sentence, outside a .field: the same
   border and corner as the rest, at their own size. */
.site-main select:not([multiple]):not(.field *):not(.toolbar *),
.site-main input:is([type="text"], [type="number"], [type="date"], [type="time"], [type="search"], [type="tel"], [type="email"]):not(.field *):not(.toolbar *) {
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  color: var(--ink); font-family: inherit; padding: 5px 8px;
}
.site-main input[type="file"] { font-family: inherit; }
.hint { color: var(--ink-muted); }

/* ---- Tables ------------------------------------------------------------------------ */
table.data { font-variant-numeric: tabular-nums; }
table.data th {
  text-transform: none; letter-spacing: 0;
  font-size: .82rem; font-weight: 600; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-strong);
}
table.data td { border-bottom-color: var(--line); }
table.data tr:hover td { background: #f6faf9; }

/* ---- Tabs -------------------------------------------------------------------------- */
.tab { color: var(--ink-body); }
.tab:hover { color: var(--teal-deep); }
.tab.active { color: var(--teal-deep); border-bottom-color: var(--teal); }
.tabs.tab-groups .tab { text-transform: none; letter-spacing: 0; font-size: .92rem; }
.client-tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.client-tabs a:hover { color: var(--teal-deep); border-color: var(--teal); }
.pagination .current { background: var(--ink); border-color: var(--ink); }

/* ---- Messages and states -------------------------------------------------------------- */
.alert { border-radius: 10px; }
.alert-error { background: var(--danger-tint); color: var(--danger-deep); border: 1px solid var(--danger-line); }
.alert-warn  { background: var(--attention-tint); color: #7c3a07; border-color: var(--attention-line); }
.alert-info  { background: var(--teal-tint); color: #115e56; border-color: #bfe3dd; }
.pill-bad, .pill-danger { background: var(--danger-tint); color: var(--danger-deep); border-color: var(--danger-line); }
.pill-warn { background: var(--attention-tint); color: #7c3a07; border-color: var(--attention-line); }
.pill-info { background: var(--teal-tint); color: #115e56; border-color: #bfe3dd; }

/* label / value lists: labels in sentence case, quiet */
.kv div span { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink-muted); }

/* ---- The panel kit's figures (Kernel\Ui\Kit::stats) ------------------------------------ */
.ui-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-stat {
  display: block; flex: 1 1 150px; min-width: 150px; max-width: 240px; padding: 12px 16px 12px;
  background: #f6faf9; border: 1px solid var(--line); border-radius: 12px;
  color: inherit; text-decoration: none;
}
a.ui-stat:hover { border-color: var(--teal); background: var(--teal-tint); text-decoration: none; color: inherit; }
.ui-stat.is-warn { background: var(--attention-tint); border-color: var(--attention-line); }
.ui-stat-label { font-size: .82rem; font-weight: 600; color: var(--ink-muted); }
.ui-stat-value {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink); margin: 2px 0 1px;
}
.ui-stat-sub { font-size: .8rem; color: var(--ink-muted); }

/* ---- The admin panel's frame (admin.css keeps its layout; the colours are these) ---- */
body.adm-page {
  --adm-canvas: var(--ground);
  --adm-ink:    var(--ink);
  --adm-soft:   #5d706c;
  --adm-line:   var(--line);
  --adm-hover:  #e7f0ee;
  --adm-accent: var(--teal);
}
.adm .stats-grid .stat .text-xl {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Footer ---------------------------------------------------------------------- */
.site-footer { background: var(--ink); border-top: 0; color: #a9bbb7; }
.footer-brand { color: #fff; }
.footer-logo { background: #fff; padding: 4px 6px; border-radius: 8px; }
.footer-label { color: #d9e6e3; text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; }
.footer-col a, .footer-links a { color: #a9bbb7; }
.footer-col a:hover, .footer-links a:hover { color: #fff; }
.footer-contact strong { color: #fff; }
.site-footer a { color: #cfe0dc; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255,255,255,.08); color: #7f938f; }

/* ---- Sign-in and the other single-card pages ----------------------------------------- */
.login-wrap {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(13,148,136,.14), transparent 60%),
    radial-gradient(700px 520px at -10% 110%, rgba(46,196,182,.10), transparent 60%),
    var(--ground);
}
.login-card { border-color: var(--line); border-radius: 18px; }
.login-card::before { background: linear-gradient(90deg, var(--teal-deep), var(--teal), var(--teal-soft)); }
.login-logo .ph { background: var(--ink); }

/* ---- Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}