/* ==========================================================================
   KimBow Elite Cleaning — admin theme. Light (navy + gold on ivory) is the
   default; dark (plain slate) is applied by the OS preference or by an
   explicit data-theme on <html> (set from the cookie).
   ========================================================================== */

:root{
  /* KimBow navy + gold. Gold is for decoration (bars, icons, rules) — the
     text-safe variant is --gold-deep. Navy is the action colour. */
  --gold:#c9a24e;  --gold-deep:#8a6b2e;  --gold-soft:#f6eac8;
  --brand:#c9a24e;
  --brand-deep:#081b33;
  --brand-gradient:linear-gradient(150deg,#0f2b52,#081b33);

  --bg:#f7f4ec;      --surface:#ffffff;   --surface-2:#f4efe3;
  --border:#e3dccb;  --border-2:#ede7d6;
  --text:#1b2432;    --text-2:#525c70;    --text-3:#6f778b;

  --accent:#0f2b52;  --accent-soft:#dde5f1; --accent-text:#0f2b52;
  --accent-ink:#ffffff;

  --green:#1f6b4a;   --green-soft:#dcefe4;
  --red:#a82420;     --red-soft:#fbdcd9;   --red-ink:#ffffff;
  --amber:#8a5300;   --amber-soft:#fbeac4;
  --slate:#3f4c5f;   --slate-soft:#e1e6ee;
  --blue:#1f4d80;    --blue-soft:#dbe7f4;
  --purple:#6d3fc0;   --purple-soft:#ebe0fb; --purple-ink:#ffffff;
  --info:#2563eb;     --info-soft:#dbe7fa;    --info-ink:#ffffff;
  --warning:#b45309;  --warning-soft:#fdecd1; --warning-ink:#ffffff;
  --danger:#dc2626;   --danger-soft:#fbdada;  --danger-ink:#ffffff;

  --shadow:0 1px 2px rgba(8,27,51,.06), 0 1px 3px rgba(8,27,51,.05);
  --shadow-lg:0 12px 32px -8px rgba(8,27,51,.25);
  --radius:10px;

  --chrome-bg:#ffffff;
  --chrome-border:#e3dccb;
  --chrome-text:#525c70;
  --chrome-text-strong:#081b33;
  --chrome-hover:#f7f4ec;
  --chrome-heading:#8a6b2e;
  --chrome-active-bg:#e8edf5;
  --chrome-active-text:#0f2b52;
  --sidebar-w:264px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Plain slate. Gold stays as the single accent. */
    --gold:#e0b65c;  --gold-deep:#ecc977;  --gold-soft:#3a3320;
    --brand:#e0b65c;
    --brand-deep:#081b33;
    --brand-gradient:linear-gradient(150deg,#334155,#0f172a);

    --bg:#0f172a;      --surface:#1e293b;   --surface-2:#273449;
    --border:#334155;  --border-2:#2b3a50;
    --text:#e2e8f0;    --text-2:#a6b3c6;    --text-3:#8393a8;

    --accent:#e0b65c;  --accent-soft:#3a3320; --accent-text:#ecc977;
    --accent-ink:#1a1405;

    --green:#6fc79e;   --green-soft:#17352a;
    --red:#f79a92;     --red-soft:#3a1c18;   --red-ink:#2a1512;
    --amber:#f0c485;   --amber-soft:#3a2d1b;
    --slate:#a6b3c6;   --slate-soft:#273449;
    --blue:#8ab5e4;    --blue-soft:#1c2836;
    --purple:#b79bf0;  --purple-soft:#2a2140; --purple-ink:#2e1065;
    --info:#60a5fa;    --info-soft:#132038;    --info-ink:#0b1a33;
    --warning:#fbbf24; --warning-soft:#332707; --warning-ink:#2b1400;
    --danger:#f87171;  --danger-soft:#391512;  --danger-ink:#450a0a;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6);

    --chrome-bg:#0b1220;
    --chrome-border:#223047;
    --chrome-text:#cbd5e1;
    --chrome-text-strong:#f1f5f9;
    --chrome-hover:#172033;
    --chrome-heading:#8393a8;
    --chrome-active-bg:#1e293b;
    --chrome-active-text:#ecc977;
    --sidebar-w:264px;
  }
}

:root[data-theme="dark"]{
  /* Plain slate. Gold stays as the single accent. */
  --gold:#e0b65c;  --gold-deep:#ecc977;  --gold-soft:#3a3320;
  --brand:#e0b65c;
  --brand-deep:#081b33;
  --brand-gradient:linear-gradient(150deg,#334155,#0f172a);

  --bg:#0f172a;      --surface:#1e293b;   --surface-2:#273449;
  --border:#334155;  --border-2:#2b3a50;
  --text:#e2e8f0;    --text-2:#a6b3c6;    --text-3:#8393a8;

  --accent:#e0b65c;  --accent-soft:#3a3320; --accent-text:#ecc977;
  --accent-ink:#1a1405;

  --green:#6fc79e;   --green-soft:#17352a;
  --red:#f79a92;     --red-soft:#3a1c18;   --red-ink:#2a1512;
  --amber:#f0c485;   --amber-soft:#3a2d1b;
  --slate:#a6b3c6;   --slate-soft:#273449;
  --blue:#8ab5e4;    --blue-soft:#1c2836;
  --purple:#b79bf0;  --purple-soft:#2a2140; --purple-ink:#2e1065;
  --info:#60a5fa;    --info-soft:#132038;    --info-ink:#0b1a33;
  --warning:#fbbf24; --warning-soft:#332707; --warning-ink:#2b1400;
  --danger:#f87171;  --danger-soft:#391512;  --danger-ink:#450a0a;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6);

  --chrome-bg:#0b1220;
  --chrome-border:#223047;
  --chrome-text:#cbd5e1;
  --chrome-text-strong:#f1f5f9;
  --chrome-hover:#172033;
  --chrome-heading:#8393a8;
  --chrome-active-bg:#1e293b;
  --chrome-active-text:#ecc977;
  --sidebar-w:264px;
}

/* --------------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.icon-sprite{position:absolute}
.icon{width:20px;height:20px;flex:none;stroke-width:1.75}
.icon-sm{width:16px;height:16px;flex:none;stroke-width:1.9}
.icon-xs{width:13px;height:13px;flex:none;stroke-width:2}
.spacer{flex:1}
.right{text-align:right}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.layout{display:flex;min-height:100vh}

/* ----------------------------------------------------------- sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex:none; display:flex; flex-direction:column;
  background:var(--chrome-bg); border-right:1px solid var(--chrome-border);
  position:sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center;
  height:60px; padding:0 18px; border-bottom:1px solid var(--chrome-border);
}
/* Sidebar: the lockup on its own, height-driven so the aspect ratio is exact.
   740x117 at 34px tall is 215px wide, inside the 228px the sidebar allows. */
.brand-logo{height:34px;width:auto;max-width:100%;object-fit:contain}
/* Login screen has room for the full lockup including the tagline. */
.auth-brand .brand-logo{height:auto;width:100%;max-width:280px}

/* Theme pairs. The supplied artwork has white ink that vanishes on light
   backgrounds, so each theme gets the variant built for it.

   These carry type+class specificity (0,1,1) to match .brand-logo, and come
   after it, so the display toggle always wins. An earlier version used
   `.brand-mark img{display:block}` which out-specified `.logo-dark{display:none}`
   and rendered BOTH variants side by side. */
img.logo-dark{display:none}
img.logo-light{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) img.logo-dark{display:block}
  :root:not([data-theme="light"]) img.logo-light{display:none}
}
:root[data-theme="dark"] img.logo-dark{display:block}
:root[data-theme="dark"] img.logo-light{display:none}
:root[data-theme="light"] img.logo-dark{display:none}
:root[data-theme="light"] img.logo-light{display:block}

.nav{flex:1;overflow-y:auto;padding:14px 10px}
.nav-heading{
  padding:14px 10px 6px; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--chrome-heading);
}
.nav-heading:first-child{padding-top:2px}

.nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:8px; color:var(--chrome-text);
  font-size:14px; font-weight:500; text-align:left;
  transition:background-color .12s ease, color .12s ease;
}
.nav-item:hover{background:var(--chrome-hover);color:var(--chrome-text-strong)}
.nav-item.is-current{background:var(--chrome-active-bg);color:var(--chrome-active-text);font-weight:600}
.nav-item .chev{margin-left:auto;transition:transform .2s ease;color:var(--chrome-heading)}
.submenu-group[open] > .nav-item .chev{transform:rotate(90deg)}
.nav-badge{
  margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px;
  background:var(--red); color:var(--red-ink); font-size:11px; font-weight:600; text-align:center;
}

/* <summary> is the clickable menu row; hide the native disclosure triangle */
.submenu-group > summary{cursor:pointer;list-style:none}
.submenu-group > summary::-webkit-details-marker{display:none}
.submenu-group > summary::marker{content:""}

.submenu{list-style:none;margin:2px 0;padding:0 0 0 19px;animation:submenu-in .18s ease}
.submenu li{border-left:1px solid var(--chrome-border);padding-left:11px}
@keyframes submenu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .submenu{animation:none}
  .nav-item .chev{transition:none}
}
.submenu a{
  display:block;padding:7px 10px;border-radius:7px;
  color:var(--chrome-text);font-size:13.5px;
  transition:background-color .12s ease,color .12s ease;
}
.submenu a:hover{background:var(--chrome-hover);color:var(--chrome-text-strong)}
.submenu a.is-current{color:var(--chrome-active-text);font-weight:600;background:var(--chrome-active-bg)}

.sidebar-foot{padding:10px;border-top:1px solid var(--chrome-border)}
.user-card{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px;border-radius:9px;transition:background-color .12s ease;
}
.user-card{color:var(--chrome-text)}
.user-card:hover{background:var(--chrome-hover)}
.user-card.is-static{cursor:default}
.user-card.is-static:hover{background:none}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--chrome-active-bg);color:var(--chrome-active-text);font-size:12px;font-weight:600;
}
.avatar-sm{width:26px;height:26px;font-size:10.5px}
/* the avatar also appears in content tables, where the surface is light */
.content .avatar{background:var(--accent-soft);color:var(--accent-text)}
.user-meta{min-width:0;text-align:left}
.user-name,.user-role{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-name{font-size:13px;font-weight:600;color:var(--chrome-text-strong)}
.user-role{font-size:11.5px;color:var(--chrome-heading)}
.user-card .icon-sm{margin-left:auto;color:var(--chrome-heading)}
.user-row{display:flex;align-items:center;gap:4px}
.user-row .user-card{min-width:0}
.user-card.is-current{background:var(--chrome-active-bg)}
.user-card.is-current .user-name{color:var(--chrome-active-text)}
.user-signout{flex:none;color:var(--chrome-heading)}
.user-signout:hover{background:var(--chrome-hover);color:var(--chrome-text-strong)}

/* ------------------------------------------------------------- topbar ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  height:60px;padding:0 20px;
  background:color-mix(in srgb, var(--chrome-bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--chrome-border);
}
.icon-btn{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:var(--chrome-text);transition:background-color .12s ease,color .12s ease;
}
.icon-btn:hover{background:var(--chrome-hover);color:var(--chrome-text-strong)}
.icon-btn.has-dot{position:relative}
.icon-btn.has-dot::after{
  content:"";position:absolute;top:7px;right:8px;width:6px;height:6px;
  border-radius:50%;background:var(--red);border:2px solid var(--chrome-bg);
}
.sidebar-toggle{display:none}

.search{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:340px;height:36px;padding:0 11px;
  border:1px solid var(--chrome-border);border-radius:9px;background:var(--chrome-hover);
  color:var(--chrome-heading);transition:border-color .12s ease,box-shadow .12s ease;
}
.search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--chrome-text-strong);font:inherit}
.search input::placeholder{color:var(--chrome-heading)}
.kbd{
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:3px 5px;border:1px solid var(--chrome-border);border-radius:5px;
  background:var(--chrome-bg);color:var(--chrome-heading);
}

/* theme toggle shows whichever icon represents the *next* mode */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:none}
:root[data-theme="light"] .theme-toggle .ico-moon{display:block}

/* ------------------------------------------- in-page navigation feedback ---- */
/* Thin bar under the topbar that fills while a fragment is being fetched. */
.nav-progress{
  height:2px;width:0;background:var(--accent);
  transition:width .25s ease, opacity .3s ease;opacity:0;
}
.nav-progress.is-active{width:100%;opacity:1;transition:width 1.1s cubic-bezier(.15,.7,.3,1)}

/* The heading receives focus after a swap; no visible ring for that. */
.content h1:focus{outline:none}

/* Screen-reader-only live region announcing each navigation. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  .nav-progress{transition:opacity .1s linear}
}

/* ------------------------------------------------------------- banner ---- */
.banner{
  display:flex;align-items:flex-start;gap:10px;
  margin:16px 20px 0;padding:11px 14px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);font-size:13px;line-height:1.5;color:var(--text-2);
}
/* .banner's own `display:flex` ties in specificity with the browser's
   built-in `[hidden]{display:none}`, and author CSS wins ties over that
   default — so a hidden banner (support_chat.php's inline error boxes, for
   instance) would otherwise still render as an empty flex box. */
.banner[hidden]{display:none}
/* Inside the content column the padding is already there, so a banner needs no
   side margin — with one it sits inset while the cards below run flush. It
   does need space beneath it, which the layout-level banners get from
   .content's own padding. */
.content .banner{margin:0 0 16px}
.card-body > .banner:last-child{margin-bottom:0}

.banner .icon-sm{flex:none;margin-top:2px}
.banner code{
  font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:1px 4px;border-radius:4px;background:var(--surface-2);color:var(--text);
}
.banner-warn{border-color:var(--amber);background:var(--amber-soft);color:var(--text)}
.banner-warn .icon-sm{color:var(--amber)}
.banner-error{border-color:var(--red);background:var(--red-soft);color:var(--text)}
.banner-error .icon-sm{color:var(--red)}
.banner-ok{border-color:var(--green);background:var(--green-soft);color:var(--text)}
.banner-ok .icon-sm{color:var(--green)}

/* ------------------------------------------------------------ content ---- */
.content{padding:24px 20px 40px;max-width:1360px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);margin-bottom:5px}
.crumbs .current{color:var(--text-2)}
h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em}
.page-sub{margin:4px 0 0;font-size:13.5px;color:var(--text-2)}

.btn{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);
  font-size:13.5px;font-weight:550;box-shadow:var(--shadow);
  transition:background-color .12s ease,border-color .12s ease;
}
.btn:hover{background:var(--surface-2)}
.btn-sm{height:32px;padding:0 11px;font-size:13px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn-info{background:var(--info);border-color:var(--info);color:var(--info-ink)}
.btn-info:hover{background:color-mix(in srgb,var(--info) 88%,#000)}
.btn-warning{background:var(--warning);border-color:var(--warning);color:var(--warning-ink)}
.btn-warning:hover{background:color-mix(in srgb,var(--warning) 88%,#000)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 88%,#000)}
.btn-purple{background:var(--purple);border-color:var(--purple);color:var(--purple-ink)}
.btn-purple:hover{background:color-mix(in srgb,var(--purple) 88%,#000)}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border-2)}
.card-title{font-size:14.5px;font-weight:600}
.card-body{padding:18px}

.grid-stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));margin-bottom:16px}
.grid-main{display:grid;gap:16px;grid-template-columns:1.62fr 1fr;align-items:start}
.stack-top{margin-top:16px}

.stat{padding:16px 18px}
.stat-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.stat-ico{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center}
.stat-ico .icon{width:17px;height:17px}
.stat-label{font-size:12.5px;font-weight:550;color:var(--text-2)}
.stat-value{font-size:25px;font-weight:650;letter-spacing:-.025em;line-height:1.1}
.stat-foot{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;color:var(--text-3)}
.trend{display:inline-flex;align-items:center;gap:3px;font-weight:600}
.trend .icon-xs{stroke-width:2.2}
.trend.up{color:var(--green)}
.trend.down{color:var(--red)}

.tone-brand{background:var(--accent-soft);color:var(--accent-text)}
.tone-slate{background:var(--slate-soft);color:var(--slate)}
.tone-amber{background:var(--amber-soft);color:var(--amber)}
.tone-red{background:var(--red-soft);color:var(--red)}
.tone-blue{background:var(--info-soft);color:var(--info)}
.tone-purple{background:var(--purple-soft);color:var(--purple)}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:8px;height:210px;padding-top:6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.bar-track{flex:1;width:100%;display:flex;align-items:flex-end}
.bar{
  width:100%;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent));
  transition:filter .15s ease;
}
.bar-col:hover .bar{filter:brightness(1.12)}
.bar-x{font-size:11px;color:var(--text-3)}
.legend{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.legend .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* activity feed */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--border-2)}
.feed li:first-child{padding-top:0}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed-txt{font-size:13.5px;line-height:1.45}
.feed-txt b{font-weight:600}
.feed-time{font-size:12px;color:var(--text-3);margin-top:2px}

/* table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;padding:10px 18px;font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-2);border-bottom:1px solid var(--border-2);white-space:nowrap;
}
td{padding:12px 18px;border-bottom:1px solid var(--border-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.cell-account{display:flex;align-items:center;gap:10px}
.muted{color:var(--text-2)}
.strong{font-weight:600}
.mono{font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* One colour per state, so a glance down the column is enough:
     info  neutral — it arrived, nothing has happened to it
     wait  amber   — waiting on something
     busy  blue    — in progress right now
     ok    green   — finished
     fail  red     — finished badly */
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.wait{background:var(--warning-soft);color:var(--warning)}
.pill.fail{background:var(--danger-soft);color:var(--danger)}
.pill.info{background:var(--slate-soft);color:var(--slate)}
.pill.busy{background:var(--info-soft);color:var(--info)}

/* ---------------------------------------------------------- tooltip ------ */
/* position:fixed and parented to <body>, so .table-wrap's overflow cannot
   clip it. Placement is computed in admin.js. */
.tooltip{
  position:fixed;z-index:80;max-width:min(340px,calc(100vw - 24px));
  padding:7px 10px;border-radius:8px;
  background:var(--text);color:var(--bg);
  font:500 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;pointer-events:none;
  box-shadow:var(--shadow-lg);
  animation:tip-in .11s ease-out;
}
/* A small arrow, flipped when the tooltip sits below its trigger. */
.tooltip::after{
  content:"";position:absolute;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--text);
  top:100%;
}
.tooltip.is-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--text)}

@keyframes tip-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tooltip{animation:none} }

/* ---------------------------------------------------------- modal -------- */
/* Native <dialog>, so the backdrop, focus trap and Escape key come free. */
.modal{
  width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--border);
  border-radius:14px;background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-lg);
}
.modal::backdrop{background:rgba(8,14,11,.55)}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border-2);
}
.modal-title{font-size:15px;font-weight:600}
.modal-body{padding:18px;max-height:min(70vh,560px);overflow-y:auto}
.modal-foot{
  display:flex;gap:8px;justify-content:flex-end;
  padding:14px 18px;border-top:1px solid var(--border-2);background:var(--surface-2);
  border-radius:0 0 13px 13px;
}
/* Two fields on one line, so the dialog stays inside one screen. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){ .field-row{grid-template-columns:1fr} }

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;gap:6px}
.empty .stat-ico{width:44px;height:44px;border-radius:12px;margin-bottom:8px}
.empty .stat-ico .icon{width:22px;height:22px}
.empty h2{margin:0;font-size:16px;font-weight:600}
.empty p{margin:0;font-size:13.5px;color:var(--text-2);max-width:38ch}

/* -------------------------------------------------------- login screen ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:380px}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px}
.auth-head{text-align:center;margin-bottom:20px}
.auth-head h1{font-size:19px}
.auth-head p{margin:5px 0 0;font-size:13.5px;color:var(--text-2)}
.field{display:block;margin-bottom:14px}
.field-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.input{
  width:100%;height:38px;padding:0 11px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface-2);color:var(--text);font:inherit;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* A native file input's button + filename text don't vertically center
   themselves inside a fixed-height box the way text inputs do, and the
   browser's own "Choose File" button looks like a stock OS control next to
   ours — center it and restyle the button to match .btn-sm. */
input[type="file"].input{
  display:flex;align-items:center;
  padding:0 6px;color:var(--text-2);font-size:13px;
}
input[type="file"].input::file-selector-button{
  height:26px;margin-right:9px;padding:0 11px;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);
  font:550 13px inherit;cursor:pointer;
  transition:background-color .12s ease;
}
input[type="file"].input::file-selector-button:hover{background:var(--surface-2)}
.btn-block{width:100%;justify-content:center;height:38px}
/* .copyable / .copy-btn: see includes/helpers.php's copyable() and the
   click handler in admin.js. Two ways this gets used:
     - copyable()'s own markup: .copy-btn is a DIRECT child of .copyable,
       floating over the top-right corner of the .codeblock it generates —
       the rules below scope to that exact parent-child shape.
     - A page building its own layout (Payload Converter, Middleware
       Upload, Order Creation Tester): .copy-btn sits nested inside a
       header row instead, normally combined with .btn (e.g.
       class="btn btn-sm copy-btn") for sizing — the child selector below
       does not match that nesting, so those are unaffected. */
.copyable{position:relative}
.copyable .codeblock{padding-right:92px}
.copyable > .copy-btn{
  position:absolute;top:8px;right:8px;z-index:1;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border:1px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text-2);
  font:600 11.5px/1 inherit;cursor:pointer;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
.copyable > .copy-btn:hover{background:var(--surface-2);color:var(--text)}
.copy-btn .icon-sm{width:14px;height:14px}
.copy-btn.is-done{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.codeblock{
  margin:0 0 14px;padding:12px 14px;overflow-x:auto;
  border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface-2);
}
.codeblock code{
  display:block;white-space:pre;padding:0;background:none;
  font:500 12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);
}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:12px;color:var(--text-3)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-foot{margin-top:18px;text-align:center;font-size:12.5px;color:var(--text-3)}

/* ---------------------------------------------------------- responsive ---- */
.overlay{
  position:fixed;inset:0;z-index:30;background:rgba(10,12,16,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.overlay.is-open{opacity:1;pointer-events:auto}

@media (max-width:1080px){ .grid-main{grid-template-columns:1fr} }
@media (max-width:900px){
  .sidebar-toggle{display:grid}
  .sidebar{
    position:fixed;z-index:40;left:0;top:0;
    transform:translateX(-100%);transition:transform .24s ease;box-shadow:var(--shadow-lg);
  }
  .sidebar.is-open{transform:none}
  .search{max-width:none}
  .kbd{display:none}
}



/* ---------------------------------------------------- KimBow additions ---- */
.brand-logo{height:44px}
.auth-brand .brand-logo{height:auto}

.tone-brand{background:var(--gold-soft);color:var(--gold-deep)}
.bar{background:var(--gold)}
.nav-item.is-current{box-shadow:inset 3px 0 0 var(--gold)}

/* Sidebar entries for pages that don't exist yet. */
.nav-item.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.nav-soon{
  margin-left:auto;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;
  letter-spacing:.02em;background:var(--gold-soft);color:var(--gold-deep);
}
.sample-note{font-size:12px;color:var(--text-3)}
.sched-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.quick-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.quick{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--border);
  border-radius:var(--radius);color:var(--text-2);font-weight:550;opacity:.75;
}

/* ------------------------------------------------- dashboard (v2) ---- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.btn.is-disabled{opacity:.55;cursor:not-allowed}
.btn.is-disabled:hover{background:inherit}
.btn-primary.is-disabled:hover{background:var(--accent)}
.kpi{padding:16px 20px}
.kpi.is-featured{border-color:var(--accent)}
.kpi-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.kpi-value{font-size:28px;font-weight:650;letter-spacing:-.02em;margin-top:6px}
.panel-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.panel .card-title{display:inline-flex;align-items:center;gap:8px}
.soft-link{font-size:13px;color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;opacity:.7;cursor:default}
.panel-empty{margin:0;color:var(--text-2)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-2)}
.rows li:first-child{padding-top:0}
.rows li:last-child{border-bottom:0;padding-bottom:0}
.row-main{display:flex;flex-direction:column;min-width:0;flex:1}
.row-title{font-weight:550;font-size:13.5px}
.row-title b{font-weight:650}
.row-sub{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-right{flex:none;font-size:13px;font-weight:600;text-align:right}
.row-right.muted{font-weight:400;color:var(--text-3);font-size:12.5px}
.row-right.is-late{color:var(--red)}
@media (max-width:900px){.panel-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------ schedule page ---- */
.cal-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav,.cal-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cal-range{margin:0 0 0 6px;font-size:16px;font-weight:600}
.cal-btn{border:1px solid var(--border);background:var(--surface)}
.icon.flip,.icon-sm.flip{transform:scaleX(-1)}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-2)}
.seg button{border:0;background:none;color:var(--text-3);font:inherit;font-weight:550;padding:5px 12px;border-radius:8px;cursor:pointer}
.seg button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.cal-status{width:auto;min-width:150px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-2);font-size:13px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{width:38px;height:22px;border-radius:999px;background:var(--border);position:relative;transition:background .15s}
.switch-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(16px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent);outline-offset:2px}

.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cal-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:260px;display:flex;flex-direction:column}
.cal-day.is-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:12px;font-weight:650;letter-spacing:.06em;color:var(--text-2)}
.cal-plus{width:24px;height:24px;font-size:16px;line-height:1}
.cal-day-body{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.cal-ev{border-radius:8px;padding:7px 9px;border-left:3px solid var(--gold);background:var(--gold-soft);color:var(--text)}
.cal-ev.clean{border-left-color:var(--blue);background:var(--blue-soft)}
.cal-ev-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cal-ev-time{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.cal-ev-name{font-size:13px;font-weight:600;margin-top:2px}
.cal-ev-sub{font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev-st{margin-top:5px}
.st-cancelled .cal-ev-name,.st-cancelled.cal-chip{text-decoration:line-through;opacity:.65}
.cal-dayview .cal-ev{margin-bottom:8px}

.cal-month{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cal-month-head,.cal-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-month-head span{padding:8px 10px;font-size:11.5px;font-weight:650;letter-spacing:.06em;color:var(--text-2);background:var(--surface-2)}
.cal-cell{min-height:104px;padding:6px;border-top:1px solid var(--border-2);border-left:1px solid var(--border-2);display:flex;flex-direction:column;gap:3px}
.cal-cell:nth-child(7n+1){border-left:0}
.cal-cell.is-other{background:var(--surface-2);opacity:.65}
.cal-cell.is-today .cal-num{background:var(--accent);color:var(--accent-ink)}
.cal-num{align-self:flex-start;border:0;background:none;color:var(--text-2);font:inherit;font-size:12px;font-weight:600;width:24px;height:24px;border-radius:50%;cursor:pointer}
.cal-chip{font-size:11px;padding:2px 6px;border-radius:5px;background:var(--gold-soft);border-left:2px solid var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip.clean{background:var(--blue-soft);border-left-color:var(--blue)}
.cal-more{border:0;background:none;color:var(--accent-text);font:inherit;font-size:11px;text-align:left;cursor:pointer;padding:0 2px}

@media (max-width:1100px){.cal-week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cal-week{grid-template-columns:1fr}.cal-cell{min-height:70px}.cal-chip{display:none}}

/* dialogs (shared) */
.modal-lg{width:min(640px,calc(100vw - 32px))}
.modal-lg .modal-body{max-height:min(74vh,720px)}
.modal-head{align-items:flex-start}
.modal-head > div{flex:1}
.modal-head .modal-title{font-size:19px}
.modal-sub{margin:4px 0 0;font-size:13px;color:var(--text-2)}
.modal-x{flex:none}
.field-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.field-top .field-label{margin:0}
.link-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--accent-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.link-btn:hover{text-decoration:underline}
.field-row3{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:0 12px}
.city-row{grid-template-columns:1.4fr .6fr .9fr}
@media (max-width:520px){.field-row3,.city-row{grid-template-columns:1fr}}
textarea.input{height:auto;padding:9px 11px;resize:vertical}
select.input:disabled{opacity:.6}
.slots-wrap{margin:-2px 0 16px}
.slots-label{font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;padding:6px 12px;border-radius:9px;cursor:pointer}
.slot:hover{background:var(--surface-2)}
.slot.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.form-error{margin:0;color:var(--red);font-size:13px;font-weight:550}
.form-error[hidden]{display:none}

/* sign-in */
.btn-google{background:#fff;color:#1f1f1f;border-color:#dadce0;gap:10px;font-weight:600}
.btn-google:hover{background:#f6f7f8}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-3);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border-2)}

/* ------------------------------------------------------ customers page ---- */
.cust-tools{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;margin:0}
.cust-search{flex:1 1 280px;max-width:420px}
.cust-select{width:auto;min-width:140px}
.cust-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;gap:8px;border-style:dashed}
.cust-empty h2{margin:6px 0 0;font-size:16px}
.cust-empty p{margin:0 0 8px;color:var(--text-2)}
.cust-count{font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border-2)}
td .row-main{min-width:0}

/* clickable table rows + customer history */
tr.is-clickable{cursor:pointer}
tr.is-clickable:hover td{background:var(--surface-2)}
tr.is-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.history{margin-top:22px;padding-top:16px;border-top:1px solid var(--border-2)}
.history-title{margin:0 0 10px;font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.history-list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto}
.history-list li{padding:8px 0;border-bottom:1px solid var(--border-2)}
.history-list li:last-child{border-bottom:0}
.history-what{font-size:13px;overflow-wrap:anywhere}
.history-what .was{color:var(--text-3);text-decoration:line-through}
.history-what .now{font-weight:600}
.history-meta,.history-empty{font-size:12px;color:var(--text-3);margin-top:2px}