/*
 * Repeater back office: the "dashboard v2" look.
 *
 * Shared by every signed-in screen on repeater.com.au (the owner desk at
 * /admin and the customer portal), so both read as one product. It is a port
 * of the Aphileon admin's design (aphelion public/admin/index.html and
 * admin-app/src/index.css, from the dashbord2.css template): a white sidebar
 * pinned to the left edge with icons and section groups, a pill header,
 * white 20px cards on a warm off-white page, near-black active pills and
 * buttons, Notion-blue highlights (the Notion palette) and Plus Jakarta
 * Sans. Light by default; dark comes from
 * [data-theme="dark"] on <html>, which a small inline script sets before
 * first paint from the stored choice (key "repeater-dash-theme") or the OS.
 *
 * The public marketing site does NOT load this file; it keeps site.css.
 * Markup vocabulary is the .adm-* classes the server-rendered admin already
 * uses, plus the .dash* shell. Everything reads the tokens below, so a
 * colour changes in one place for both themes.
 */

/* ---------------- Font (self-hosted, no third-party CDN) ---------------- */

/* Plus Jakarta Sans, latin-ext */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }

/* Plus Jakarta Sans, latin */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin.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; }

/* ---------------- Tokens ---------------- */

:root {
  color-scheme: light;
  /* Notion palette: white cards on Notion's warm off-white, its warm
     near-black for ink, its warm greys and Notion blue as the one accent. */
  --bg: #f6f5f4; --surface: #ffffff; --surface-raised: #f9f8f7; --field: #fbfaf9;
  --text: #31302e; --text-muted: #615d59; --text-faint: #6f6b66;
  --border: #e9e8e6; --border-strong: #dcdad6; --border-pill: #e3e2df;
  --card-border: rgba(49, 48, 46, 0.05); --rule: #f1f0ee;
  /* Ink is the active/primary colour (near-black pills and buttons); accent is
     Notion blue for attention, money owed and bars. */
  --ink: #31302e; --on-ink: #ffffff; --ink-hover: #45433f;
  --accent: #0068c7; --accent-soft: rgba(0, 117, 222, 0.10); --ring: 0 0 0 3px rgba(0, 117, 222, 0.18);
  --grad-coral: linear-gradient(135deg, #0075de 0%, #2a8cf0 100%);
  --grad-peach: linear-gradient(135deg, #e6f1fc 0%, #f1f0ee 100%);
  --success: #2f7a52; --success-soft: #edf3ec;
  --danger: #c4403b; --danger-soft: #fdebec;
  --caution: #94600f; --caution-soft: #fbf3db;
  --link: #0068c7; --chip-bg: #f1f0ee; --hover: #f3f2f0;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --control-h: 36px;
  --shadow-card: 0 1px 3px rgba(15, 15, 15, .04), 0 0 0 1px rgba(15, 15, 15, .025);
  --shadow-soft: 0 2px 6px rgba(15, 15, 15, .12);
  --shadow-pop: 0 24px 60px rgba(15, 15, 15, .10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Notion's dark set: #191919 page, #202020 cards, #2383e2 blue. */
  --bg: #191919; --surface: #202020; --surface-raised: #2a2a2a; --field: #252525;
  --text: #e9e8e6; --text-muted: #c3c1bd; --text-faint: #9b9a97;
  --border: #2f2f2f; --border-strong: #3a3a3a; --border-pill: #373737;
  --card-border: rgba(255, 255, 255, 0.04); --rule: #2a2a2a;
  --ink: #e9e8e6; --on-ink: #191919; --ink-hover: #ffffff;
  --accent: #5aa9f0; --accent-soft: rgba(35, 131, 226, 0.18); --ring: 0 0 0 3px rgba(90, 169, 240, 0.28);
  --grad-coral: linear-gradient(135deg, #2383e2 0%, #4a9eef 100%);
  --grad-peach: linear-gradient(135deg, #1c2d3e 0%, #252525 100%);
  --success: #4dab9a; --success-soft: #1e2e2a;
  --danger: #ff7369; --danger-soft: #36201f;
  --caution: #e3b341; --caution-soft: #33301c;
  --link: #5aa9f0; --chip-bg: #2a2a2a; --hover: #2a2a2a;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, .035);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, .5);
}

/* ---------------- Base ---------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border-strong) transparent; }
body.adm {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 13.5px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word; -webkit-tap-highlight-color: transparent;
}
html, body.adm { overflow-x: hidden; overflow-x: clip; }
[hidden] { display: none !important; }
.adm h1, .adm h2, .adm h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.adm h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.adm h2 { font-size: 15px; margin: 28px 0 12px; }
.adm :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.adm a { color: var(--link); text-underline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.adm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Shell ----------------
   Mobile first: brand row, a swipeable pill strip of sections, the bar, then
   the page. At >=1024px the sidebar is a full-height white panel pinned to
   the left edge and the bar sticks to the top. */

.dash {
  --gut: clamp(12px, 2.2vw, 28px);
  --nav-w: 244px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "side" "bar" "main";
  padding: 10px var(--gut) 48px; min-height: 100vh;
}
.dash-side { grid-area: side; min-width: 0; }
.dash-side__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--text); }
.adm a.dash-brand { color: var(--text); }
.dash-brand__title { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.dash-brand__sub { display: block; font-size: 11px; color: var(--text-faint); font-weight: 500; }
.dash-logo {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.dash-logo svg { width: 18px; height: 18px; }
.dash-side__foot { display: none; }

.dash-nav {
  display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px 6px;
  background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav__group { flex: 0 0 auto; align-self: center; width: 1px; height: 18px; margin: 0 4px; background: var(--border); font-size: 0; color: transparent; overflow: hidden; }
.adm a.dash-tab, .dash-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 14px;
  border-radius: 20px; color: var(--text-faint); text-decoration: none;
  font-weight: 600; font-size: 12.5px; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.dash-tab svg { flex: none; width: 16px; height: 16px; }
.adm a.dash-tab:hover { color: var(--text); background: var(--hover); }
.adm a.dash-tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-soft); }

.dash-bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 14px; flex-wrap: wrap; }
.dash-bar__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-bar__crumb { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.dash-bar__tools { display: flex; align-items: center; gap: 8px; }
.dash-who { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 4px; background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); font-size: 12px; font-weight: 700; }
.dash-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-peach); color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.dash-circle, .dash-theme {
  position: relative; flex: none; height: 38px; display: grid; place-items: center;
  background: var(--surface); color: var(--text); border: 1px solid transparent; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card); cursor: pointer; font: inherit;
}
.dash-circle { width: 38px; transition: transform .2s ease; }
.dash-circle:hover { transform: scale(1.05); }
.dash-circle svg, .dash-theme svg { width: 16px; height: 16px; }
.dash-theme { display: flex; gap: 4px; padding: 3px 5px; }
.dash-theme__icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-faint); transition: background .2s ease, color .2s ease; }
:root:not([data-theme="dark"]) .dash-theme__icon--sun,
:root[data-theme="dark"] .dash-theme__icon--moon { background: var(--ink); color: var(--on-ink); }
.dash-main { grid-area: main; min-width: 0; }

@media (min-width: 1024px) {
  .dash {
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "side bar" "side main";
    column-gap: 20px; padding: 0 var(--gut) 48px 0;
  }
  .dash-side { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; padding: 10px 0 10px 10px; }
  .dash-side__card {
    height: 100%; gap: 0; background: var(--surface); border: 1px solid var(--card-border);
    border-radius: 28px; box-shadow: var(--shadow-card); overflow: hidden;
  }
  .dash-side .dash-brand { padding: 16px 16px 12px; }
  .dash-side__foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--text-faint); }
  .dash-nav {
    flex: 1; flex-direction: column; align-items: stretch; gap: 1px; min-height: 0;
    padding: 2px 10px 14px; background: none; border-radius: 0; box-shadow: none;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  }
  .adm a.dash-tab, .dash-tab { justify-content: flex-start; width: 100%; padding: 6px 12px; border-radius: 14px; }
  .dash-nav__group { align-self: auto; width: auto; height: auto; margin: 12px 0 4px; padding: 0 12px; background: none; overflow: visible; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
  .dash-bar {
    position: sticky; top: 0; z-index: 30; min-height: 72px; margin: 0 0 8px; flex-wrap: nowrap;
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}

/* ---------------- Cards and KPI tiles ---------------- */

.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 4px; }
.adm-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column-reverse; gap: 6px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 18px 18px 16px; box-shadow: var(--shadow-card);
}
.adm-card b { display: block; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm a.adm-card { text-decoration: none; color: inherit; }
.adm a.adm-card:hover { box-shadow: var(--shadow-soft); }
.adm-card span { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
/* The first tile is the template's coral highlight card. */
.adm-cards > .adm-card:first-child { background: var(--grad-coral); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(0, 117, 222, .22); }
.adm-cards > .adm-card:first-child span { color: rgba(255, 255, 255, .86); }
/* Blocks stacked in the page keep the same rhythm. */
.dash-main > .adm-form, .dash-main > .adm-cards, .dash-main > .adm-tablewrap { margin-bottom: 16px; }
@media (max-width: 600px) { .adm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .adm-card { padding: 14px; } }
.adm-panel { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); }

/* ---------------- Forms ---------------- */

.adm-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px 14px; align-items: end;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-card);
}
.adm-field { display: grid; gap: 6px; font-size: 12px; min-width: 0; }
.adm-field > span { color: var(--text-muted); font-weight: 600; }
.adm-field input:not([type=checkbox]), .adm-field select, .adm-field textarea,
.adm input[type=date] {
  width: 100%; min-height: var(--control-h); padding: 7px 12px; font: 500 13px/1.4 var(--font-sans);
  color: var(--text); background: var(--field); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.adm input[type=date] { width: auto; }
.adm-field select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c919d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.adm-field select option { background: var(--surface); color: var(--text); }
.adm-field textarea { resize: vertical; line-height: 1.5; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus, .adm input[type=date]:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.adm input[type=checkbox] { accent-color: var(--ink); width: 18px; height: 18px; margin: 8px 0; }
.adm-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Buttons and links ---------------- */

.adm-btn, .adm a.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--control-h); padding: 6px 18px; border-radius: 16px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink); font: 700 12.5px/1.3 var(--font-sans);
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-soft);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.adm-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.adm-btn:active { transform: scale(0.98); }
.adm-btn--quiet, .adm a.adm-btn--quiet { background: var(--surface); color: var(--text); border-color: var(--border-pill); box-shadow: var(--shadow-card); }
.adm-btn--quiet:hover { background: var(--hover); border-color: var(--border-pill); }
.adm-table .adm-btn { min-height: 28px; padding: 3px 12px; font-size: 12px; border-radius: 14px; box-shadow: none; }
.adm a.adm-link, .adm-link {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 12px;
  border: 1px solid var(--border-pill); background: var(--surface); color: var(--text);
  font: 600 12px/1.3 var(--font-sans); text-decoration: none; cursor: pointer;
}
.adm a.adm-link:hover, .adm-link:hover { background: var(--hover); }
.adm-link--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.adm-link--danger:hover { background: var(--danger-soft); }
.adm-inline label { display: inline-flex; align-items: center; gap: 5px; }
.adm-inline input[type=checkbox] { margin: 0; width: 16px; height: 16px; }
.adm-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; vertical-align: middle; }

/* Filter chips (e.g. the Devices status row): a capsule of pills. */
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.adm a.adm-tab, .adm-tab {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 13px; border-radius: 15px;
  border: 1px solid var(--border-pill); background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.adm a.adm-tab:hover { background: var(--hover); }
.adm a.adm-tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: var(--shadow-soft); }

/* ---------------- Tables ---------------- */

.adm-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 4px 10px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th, .adm-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.adm-table th { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.adm-table td { font-variant-numeric: tabular-nums; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover > td { background: var(--hover); }

/* Status tags: soft fill, coloured text. */
.adm-tag { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 20px; padding: 0 9px; border-radius: 10px; background: var(--chip-bg); color: var(--text-muted); white-space: nowrap; }
.adm-tag--ok { background: var(--success-soft); color: var(--success); }
.adm-tag--hot { background: var(--accent-soft); color: var(--accent); }
.adm-tag--warn { background: var(--caution-soft); color: var(--caution); }
.adm-tag--bad { background: var(--danger-soft); color: var(--danger); }

/* ---------------- Feedback ---------------- */

.adm-empty { margin: 0; padding: 24px 16px; text-align: center; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.adm-note { color: var(--text-muted); font-size: 12.5px; }
/* Flash banners after a form post: "Saved." and the ?error= message. */
.adm-note--ok, .adm-note--error { display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; }
.adm-note--ok { background: var(--success-soft); color: var(--success); }
.adm-note--error { background: var(--danger-soft); color: var(--danger); }
.adm-table .adm-note { font-size: 12px; }

/* ---------------- Sign-in ---------------- */

.adm-login { max-width: 420px; margin: 0 auto; padding: 10vh 16px 40px; }
.adm-login__card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 28px; padding: 28px; box-shadow: var(--shadow-pop); }
.adm-login .dash-brand { justify-content: center; margin-bottom: 22px; }
.adm-login .adm-form { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; box-shadow: none; background: none; }
.adm-login .adm-btn { width: 100%; min-height: 42px; border-radius: 20px; }
.adm-login .adm-note { text-align: center; }
.adm-login__flash { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--chip-bg); text-align: center; }

/* ---------------- Toasts ----------------
   Drawn by the interactions kit (/assets/ux.css, .ux-toast*); toast.js keeps
   the panels' call shape. */

/* ---------------- Touch ---------------- */

@media (hover: none), (pointer: coarse) {
  .adm a.dash-tab, .adm-btn, .adm a.adm-tab { min-height: 44px; }
  .dash-circle, .dash-theme, .dash-who { height: 44px; }
  .dash-circle { width: 44px; }
  .adm-field input:not([type=checkbox]), .adm-field select, .adm-field textarea { font-size: 16px; }
}
@media (max-width: 600px) {
  .dash-who__name { display: none; }
  .dash-who { padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .adm *, .adm *::before, .adm *::after { transition: none !important; animation: none !important; }
}

/* ---------------- Interactions kit hooks ----------------
   /assets/ux.css carries the shared pieces (toasts, sheets, skeletons, view
   transitions, tabular numbers, balanced headings); these are this panel's
   own controls. Small table links get hit slop on touch screens (rows sit
   22px apart, so 7px each way never reaches the next one), and cards,
   buttons and fields get continuous corners where Chrome draws them. */
@media (pointer: coarse) {
  .adm-table .adm-link, .adm-table .adm-btn { position: relative; }
  .adm-table .adm-link::after, .adm-table .adm-btn::after { content: ""; position: absolute; inset: -7px -4px; }
}
@supports (corner-shape: squircle) {
  .adm-card, .adm-panel, .adm-form, .adm-tablewrap, .adm-login__card, .dash-side__card, .adm-empty,
  .adm-btn, .adm-link, .adm-field input:not([type=checkbox]), .adm-field select, .adm-field textarea,
  .adm-note--ok, .adm-note--error { corner-shape: superellipse(1.6); }
}