/* ============================================================
   MADVET DCR — design system (2026)
   Mobile-first, calm, professional. Light + dark. Class names are
   kept stable so templates need no changes.
   ============================================================ */
:root{
  /* brand — MADVET royal blue (from the logo) with black + red-cross accent */
  --brand:#2733ab; --brand-2:#1c2698; --brand-ink:#141a63;
  --brand-grad:linear-gradient(135deg,#2f3cc4 0%,#1c2698 100%);
  /* premium header mirrors the logo: near-black → royal blue */
  --header-grad:linear-gradient(125deg,#15161d 0%,#1f2aa0 100%);
  --red:#e01f1f;  /* the medical-cross red, used sparingly */
  /* surfaces */
  --bg:#eef0f6; --bg-2:#e6e9f3; --card:#ffffff; --card-2:#f7f8fc;
  --ink:#141726; --ink-2:#434a63; --muted:#727a93; --line:#e5e8f0;
  /* accents */
  --ok:#1c2698; --warn:#b26a00; --err:#e01f1f; --info:#2563eb;
  --amber:#f5a623;
  /* shape + depth */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,40,32,.05), 0 1px 3px rgba(16,40,32,.06);
  --sh-2:0 4px 12px rgba(16,40,32,.08), 0 2px 4px rgba(16,40,32,.05);
  --sh-3:0 12px 32px rgba(16,40,32,.14), 0 4px 10px rgba(16,40,32,.08);
  --sh-brand:0 8px 22px rgba(28,38,152,.30);
  --tap:rgba(39,51,171,.10);
  --safe-b:env(safe-area-inset-bottom);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0e17; --bg-2:#090b12; --card:#161a29; --card-2:#121524;
    --ink:#e9ecf6; --ink-2:#bcc3da; --muted:#8a92ac; --line:#252a3d;
    --brand:#5866e6; --brand-2:#3a48d0;
    --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 4px 14px rgba(0,0,0,.4);
    --sh-3:0 16px 40px rgba(0,0,0,.55); --tap:rgba(88,102,230,.18);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 600px at 100% -10%, rgba(18,160,116,.06), transparent 60%);
}
a{color:var(--brand-2); text-decoration:none}
::selection{background:var(--tap)}
button,input,select,textarea{font-family:inherit}
/* Remove the ~300ms double-tap-zoom wait so a single tap focuses a field or
   fires a button immediately (fixes needing to tap inputs twice on iOS). */
a,button,input,select,textarea,label,.tag-btn,.tabbar a,.qtile{touch-action:manipulation}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:14px 16px calc(14px); padding-top:calc(14px + env(safe-area-inset-top));
  background:var(--header-grad); color:#fff;
  box-shadow:var(--sh-2); -webkit-backdrop-filter:saturate(1.4);
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800;
  font-size:17px; letter-spacing:-.02em}
.brand .mark{width:30px; height:30px; display:grid; place-items:center;
  background:#fff; border-radius:9px; box-shadow:0 2px 6px rgba(0,0,0,.2)}
.brand .mark img{width:24px; height:24px; object-fit:contain; display:block}
.brand span{font-weight:500; opacity:.9}
.topbar .who{margin-left:auto; font-size:12.5px; font-weight:600; opacity:.95;
  max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.net-dot{width:9px; height:9px; border-radius:50%; background:#9dffce;
  box-shadow:0 0 0 3px rgba(157,255,206,.25)}
.net-dot.off{background:#ffd24d; box-shadow:0 0 0 3px rgba(255,210,77,.25)}
.topbar .logout{color:#fff; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  padding:6px 11px; border-radius:999px; white-space:nowrap; transition:.15s}
.topbar .logout:active{transform:scale(.95); background:rgba(255,255,255,.28)}

/* ---- layout ---- */
.wrap{max-width:660px; margin:0 auto; padding:18px 16px calc(104px + var(--safe-b));
  animation:pageIn .35s cubic-bezier(.22,.61,.36,1)}
@keyframes pageIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
h1{font-size:24px; font-weight:800; letter-spacing:-.03em; margin:6px 0 16px}
h3{font-size:16px; font-weight:750; letter-spacing:-.02em; margin:0 0 10px}
.muted{color:var(--muted)} .small{font-size:13px}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; margin-bottom:14px; box-shadow:var(--sh-1);
  transition:box-shadow .2s, transform .2s}
.card h2,.card h3{margin:0 0 10px}

/* ---- stat tiles ---- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.stat{position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px 16px; overflow:hidden; box-shadow:var(--sh-1)}
.stat::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--brand-grad)}
.stat .n{font-size:32px; font-weight:850; letter-spacing:-.04em;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; line-height:1.05}
.stat .l{font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px}

/* ---- forms ---- */
label{display:block; font-size:12.5px; color:var(--ink-2); font-weight:700;
  margin:14px 0 6px; letter-spacing:-.01em}
input,select,textarea{
  width:100%; padding:13px 13px; font-size:16px; color:var(--ink);
  background:var(--card-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .15s, box-shadow .15s, background .15s; appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); background:var(--card);
  box-shadow:0 0 0 4px var(--tap);
}
textarea{min-height:76px; resize:vertical; line-height:1.5}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23728179' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
.row{display:flex; gap:12px} .row>*{flex:1; min-width:0}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 16px; font-size:16px; font-weight:750; letter-spacing:-.01em;
  color:#fff; background:var(--brand-grad); border:none; border-radius:var(--r);
  box-shadow:var(--sh-brand); cursor:pointer; transition:transform .12s, box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px) scale(.99); box-shadow:var(--sh-1)}
.btn.sec{background:var(--card); color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--sh-1)}
.btn.sec:active{background:var(--card-2)}
.btn.warnbtn{background:linear-gradient(135deg,#e08600,#b26a00); box-shadow:0 8px 22px rgba(178,106,0,.28)}
.btn.danger{background:linear-gradient(135deg,#e5533d,#c0392b); box-shadow:0 8px 22px rgba(192,57,43,.25)}
.btn.small{width:auto; padding:9px 13px; font-size:13.5px; font-weight:700; border-radius:11px; box-shadow:var(--sh-1)}
.btn.small:not(.sec):not(.danger){box-shadow:0 4px 12px rgba(11,122,91,.22)}

/* ---- flash toasts ---- */
.flash{position:relative; padding:13px 14px 13px 42px; border-radius:var(--r);
  margin-bottom:12px; font-size:14px; font-weight:600; box-shadow:var(--sh-1);
  animation:flashIn .3s cubic-bezier(.22,.61,.36,1)}
.flash::before{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px}
@keyframes flashIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.flash-ok{background:#e6f6ef; color:#0a5c44; border:1px solid #bbe6d5}
.flash-ok::before{content:"✓"}
.flash-error{background:#fdecea; color:#a5281b; border:1px solid #f6c9c2}
.flash-error::before{content:"!"}
.flash-warn{background:#fff5e4; color:#8a5200; border:1px solid #ffdfa6}
.flash-warn::before{content:"⚠"}
@media (prefers-color-scheme:dark){
  .flash-ok{background:#0f2a20; color:#7fe3ba; border-color:#1c4536}
  .flash-error{background:#2c1512; color:#ff9d8e; border-color:#4d221c}
  .flash-warn{background:#2a2010; color:#ffcd76; border-color:#4d3c17}
}

/* ---- lists ---- */
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
  margin-bottom:10px; box-shadow:var(--sh-1); transition:transform .12s, box-shadow .2s;
  animation:pageIn .3s both}
.list li:active{transform:scale(.995); box-shadow:var(--sh-2)}
.list li .main{flex:1; min-width:0}
.list li .main b{display:block; font-weight:700; letter-spacing:-.01em}
.list li .sub{font-size:13px; color:var(--muted); margin-top:1px}
.list a.main b{color:var(--ink)}

/* ---- day-grouped history ---- */
.day-group{margin-bottom:18px}
.day-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:2px 4px 8px; position:sticky; top:0; z-index:1}
.day-date{font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--brand-2)}
.day-meta{font-size:12px; color:var(--muted); font-weight:600; text-align:right}
.call-time{display:inline-block; font-variant-numeric:tabular-nums; font-weight:800;
  color:var(--brand-2); margin-right:7px}

/* ---- pills / chips / tags ---- */
.pill{display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:999px; background:var(--card-2); color:var(--muted);
  border:1px solid var(--line); letter-spacing:.01em}
.pill.due{background:#fff3e0; color:#8a5200; border-color:#ffdca0}
.chip{display:inline-block; font-size:12px; font-weight:600; background:var(--card-2);
  color:var(--ink-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; margin:4px 5px 0 0}
.tag-btn{display:inline-block; border:1.5px solid var(--line); background:var(--card);
  color:var(--ink-2); border-radius:999px; padding:8px 13px; font-size:13.5px; font-weight:600;
  margin:0 7px 7px 0; cursor:pointer; transition:.14s; -webkit-tap-highlight-color:transparent}
.tag-btn:active{transform:scale(.95)}
.tag-btn.on{background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(11,122,91,.28)}
.tagbox{max-height:240px; overflow:auto; border:1.5px solid var(--line); border-radius:var(--r);
  padding:12px; background:var(--card-2); margin-top:8px; -webkit-overflow-scrolling:touch}

/* ---- search dropdown ---- */
.searchbar{position:relative}
.dropdown{position:absolute; z-index:40; left:0; right:0; margin-top:6px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); max-height:280px; overflow:auto;
  box-shadow:var(--sh-3)}
.dropdown div{padding:13px 14px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14.5px}
.dropdown div:last-child{border-bottom:none}
.dropdown div:active,.dropdown div.active{background:var(--tap)}

/* ---- bottom nav ---- */
.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  padding:8px 8px calc(8px + var(--safe-b)); gap:4px;
  /* translateZ promotes the bar to its own layer so iOS Safari keeps it pinned
     to the bottom during momentum scrolling instead of letting it drift. */
  transform:translateZ(0); -webkit-transform:translateZ(0);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
  background:var(--card);
  background:color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(16,40,32,.06)}
.tabbar a{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:7px 2px 5px; font-size:19px; color:var(--muted); border-radius:13px;
  transition:.16s; -webkit-tap-highlight-color:transparent}
.tabbar a span{max-width:100%; font-size:10.5px; font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:340px){ .tabbar a span{font-size:9.5px} }
.tabbar a:active{transform:scale(.9)}
.tabbar a.active{color:var(--brand-2); background:var(--tap)}
.tabbar .fab{color:#fff; position:relative}
.tabbar .fab span{color:#fff; position:relative; z-index:1}
.tabbar .fab{font-size:22px}
.tabbar .fab::before{content:""; position:absolute; left:50%; top:4px; transform:translateX(-50%);
  width:46px; height:46px; background:var(--brand-grad); border-radius:16px; z-index:0;
  box-shadow:var(--sh-brand)}
.tabbar .fab, .tabbar .fab *{position:relative; z-index:1}
/* While a text field is focused (keyboard up), slide the nav off-screen so it
   never covers the field or the Save button underneath it. */
body.kb-open .tabbar{transform:translateY(120%); pointer-events:none}

/* ---- misc ---- */
.empty{text-align:center; color:var(--muted); padding:44px 16px; font-size:14.5px}
.empty h1{font-size:52px; margin:0 0 4px; opacity:.15; font-weight:850}
.center{text-align:center}
hr{border:none; border-top:1px solid var(--line); margin:16px 0}
#map{height:70vh; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); border:1px solid var(--line)}

/* login */
.auth-hero{text-align:center; margin:44px 0 26px}
.auth-hero .logo{width:120px; height:auto; margin:0 auto 6px; display:block}
.auth-hero .t{font-size:27px; font-weight:850; letter-spacing:-.03em; color:var(--brand-2)}
.auth-hero .s{color:var(--muted); font-size:13.5px; margin-top:2px; font-weight:600}
@media (prefers-color-scheme:dark){ .auth-hero .t{color:var(--ink)} }

/* ============================================================
   World-class polish: a11y, feedback, data-viz, micro-interactions
   ============================================================ */

/* Keyboard focus: a clear ring for everyone tabbing through the app. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.tag-btn:focus-visible,
.tabbar a:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--brand);
  border-radius:12px;
}

/* On real pointers (desktop), lift cards/rows on hover for a premium feel. */
@media (hover:hover){
  .card:hover{box-shadow:var(--sh-2)}
  .list li:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}
  .btn:hover{filter:brightness(1.04)}
  .btn.sec:hover{background:var(--card-2)}
  .tabbar a:hover{color:var(--brand-2)}
}

/* Respect users who ask for less motion — kill animations & transitions. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---- offline banner: honest, unmissable status ---- */
.offbar{
  position:sticky; top:0; z-index:29; display:none; gap:8px;
  align-items:center; justify-content:center; text-align:center;
  padding:9px 14px; font-size:13px; font-weight:700; color:#5a3d00;
  background:linear-gradient(180deg,#ffe6a8,#ffd979); border-bottom:1px solid #f0c24d;
}
body.is-offline .offbar{display:flex}
@media (prefers-color-scheme:dark){
  .offbar{color:#ffd98a; background:linear-gradient(180deg,#3a2c0e,#2c2109); border-color:#5a4415}
}

/* ---- dismissible flash toasts ---- */
.flash{padding-right:40px}
.flash .x{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; background:transparent; cursor:pointer;
  color:inherit; opacity:.55; font-size:17px; line-height:1; border-radius:8px}
.flash .x:hover{opacity:1; background:rgba(0,0,0,.06)}
.flash.hide{opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s}

/* ---- reports: segmented toggle, stat tiles, call times ---- */
.seg{display:flex; gap:4px; background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--r); padding:4px; margin:4px 0 12px}
.seg a{flex:1; text-align:center; padding:9px 10px; border-radius:calc(var(--r) - 4px);
  font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none}
.seg a.on{background:var(--card); color:var(--ink); box-shadow:var(--sh-1)}
.repstats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 12px}
.repstat{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 8px; text-align:center}
.repstat b{display:block; font-size:18px; color:var(--ink); letter-spacing:-.02em}
.repstat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.calltimes{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:3px}
.anrow{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line)}
.anrow:last-child{border-bottom:none}
.anrow span{color:var(--ink-2); font-size:14px}
.anrow b{color:var(--ink); text-align:right}
@media (max-width:480px){
  .repstats{grid-template-columns:repeat(2,1fr)}
  .repstat b{font-size:16px}
}

/* ---- customer revisit summary on the DCR form (theme-aware) ---- */
.cust-summary{background:var(--card-2); border:1px solid var(--line);
  border-left:3px solid var(--brand); color:var(--ink)}
.cust-summary b{color:var(--ink)}
.cust-summary .small{color:var(--ink-2)}

/* ---- skeleton shimmer (async loading) ---- */
.skeleton{position:relative; overflow:hidden; background:var(--card-2);
  border-radius:var(--r); min-height:64px; border:1px solid var(--line)}
.skeleton::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%); animation:shimmer 1.25s infinite}
@media (prefers-color-scheme:dark){
  .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---- progress ring (daily calls vs a soft target) ---- */
.ring-wrap{display:flex; align-items:center; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px;
  box-shadow:var(--sh-1); margin-bottom:14px}
.ring{--p:0; --size:66px; position:relative; width:var(--size); height:var(--size);
  border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%), var(--line) 0)}
.ring::before{content:""; position:absolute; width:calc(var(--size) - 13px);
  height:calc(var(--size) - 13px); border-radius:50%; background:var(--card)}
.ring b{position:relative; font-size:19px; font-weight:850; letter-spacing:-.03em;
  color:var(--ink)}
.ring-wrap .rt b{display:block; font-size:15px; font-weight:800; letter-spacing:-.02em}
.ring-wrap .rt .sub{color:var(--muted); font-size:13px; margin-top:2px}

/* ---- 7-day activity sparkline ---- */
.spark{display:flex; align-items:flex-end; gap:6px; height:88px; padding:6px 2px 0}
.spark .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0}
.spark .bar{width:100%; max-width:26px; border-radius:7px 7px 3px 3px;
  background:var(--brand-grad); min-height:4px; box-shadow:var(--sh-brand);
  transition:height .5s cubic-bezier(.22,.61,.36,1)}
.spark .col.today .bar{background:linear-gradient(180deg,#f5a623,#e08600);
  box-shadow:0 6px 16px rgba(224,134,0,.35)}
.spark .cap{font-size:10.5px; font-weight:700; color:var(--muted)}
.spark .val{font-size:11px; font-weight:800; color:var(--ink-2)}
.spark .col.today .cap{color:var(--warn)}

/* Section label above a group of cards. */
.eyebrow{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:18px 2px 10px}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---- inline delete (wrong-DCR removal) ---- */
.del-form{width:auto; margin:0; flex:none}
.btn.del{width:auto; padding:7px 11px; font-size:12.5px; font-weight:700;
  color:var(--err); background:transparent; border:1.5px solid var(--line);
  box-shadow:none; border-radius:10px}
.btn.del:hover{border-color:var(--err); background:rgba(224,31,31,.06)}

/* ============================================================
   Instant navigation — native-app feel (2026)
   Cross-document View Transitions animate every page change smoothly.
   The topbar/tabbar keep their own names so they stay put (no flicker)
   while the page content slides. Combined with link prefetch in app.js,
   taps feel instant. Chrome/Android (the field team's phones) get the
   full effect; other browsers just navigate normally — no regression.
   ============================================================ */
@view-transition{ navigation: auto; }

/* The chrome stays fixed; only the page content transitions. */
.topbar{ view-transition-name: topbar; }
.tabbar{ view-transition-name: tabbar; }
.offbar{ view-transition-name: offbar; }
.wrap{ view-transition-name: page; }

/* When VT is supported, the browser animates the snapshot — so drop the
   JS-driven page-in (it would double up). Fallback browsers keep pageIn. */
@supports (view-transition-name: none){
  .wrap{ animation: none; }
}

/* Page content: a quick, confident slide + fade — the signature of a fast app. */
::view-transition-old(page){
  animation: pageOut .18s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(page){
  animation: pageInVT .30s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pageOut{ to{ opacity:0; transform:translateY(-8px) } }
@keyframes pageInVT{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

/* Root cross-fade a touch faster than the default. */
::view-transition-old(root),::view-transition-new(root){ animation-duration:.22s; }

/* Honour reduced motion: no transition animations at all. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   REFINED 2026 — professional & subtle
   A calmer, more premium layer: one restrained indigo accent used
   sparingly, neutral surfaces, hairline borders, soft shadows, and
   clean line-icons. Overrides the louder earlier gradients/glows.
   Appended last so it wins; class names untouched.
   ════════════════════════════════════════════════════════════ */
:root{
  --brand:#3a4a8f; --brand-2:#2f3c78; --brand-ink:#26315f;
  --brand-grad:linear-gradient(180deg,#43538f,#36447c);
  --header-grad:var(--card);
  --bg:#f4f5f8; --bg-2:#eef0f4; --card:#ffffff; --card-2:#f6f7fa;
  --ink:#1b1e27; --ink-2:#565c6b; --muted:#8a90a0; --line:#e7e9ef;
  --ok:#2f3c78; --info:#3a4a8f;
  --sh-1:0 1px 2px rgba(20,26,45,.04), 0 1px 2px rgba(20,26,45,.05);
  --sh-2:0 4px 14px rgba(20,26,45,.06), 0 1px 3px rgba(20,26,45,.05);
  --sh-3:0 14px 34px rgba(20,26,45,.12), 0 4px 10px rgba(20,26,45,.06);
  --sh-brand:0 1px 2px rgba(20,26,45,.08);
  --tap:rgba(58,74,143,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1117; --bg-2:#0b0d12; --card:#171a22; --card-2:#12141b;
    --ink:#e9ebf2; --ink-2:#b7bdcc; --muted:#7f8698; --line:#252935;
    --brand:#7684e6; --brand-2:#9aa4ee;
    --header-grad:var(--card);
    --sh-brand:0 1px 2px rgba(0,0,0,.4);
    --tap:rgba(118,132,230,.14);
  }
}
body{ background-image:none; letter-spacing:-.005em; }
h1{ font-weight:750; letter-spacing:-.02em; }

/* ---- top bar: clean light surface, not a loud gradient ---- */
.topbar{
  background:var(--card); color:var(--ink);
  border-bottom:1px solid var(--line); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.topbar .brand,.topbar .brand span{ color:var(--ink); }
.topbar .brand{ font-weight:800; }
.topbar .brand span{ color:var(--muted); font-weight:600; }
.brand .mark{ background:var(--card); border:1px solid var(--line); box-shadow:none; }
.topbar .who{ color:var(--ink-2); font-weight:600; }
.topbar .logout{
  color:var(--ink-2); background:transparent; border:1px solid var(--line);
}
.topbar .logout:active{ background:var(--card-2); }
.net-dot{ background:#22b473; box-shadow:0 0 0 3px rgba(34,180,115,.16); }
.net-dot.off{ background:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,.18); }

/* ---- stat tiles: solid ink numbers, whisper-thin accent ---- */
.stat .n{
  -webkit-text-fill-color:var(--ink); background:none; color:var(--ink);
  font-weight:800; font-size:30px;
}
.stat::before{ width:3px; background:var(--brand); opacity:.55; }

/* ---- buttons: solid, confident, no glow ---- */
.btn{ box-shadow:var(--sh-1); font-weight:700; }
.btn:active{ box-shadow:none; }
.btn.small:not(.sec):not(.danger){ box-shadow:var(--sh-1); }
.btn.warnbtn{ background:linear-gradient(180deg,#c88214,#b06f0d); box-shadow:var(--sh-1); }
.btn.danger{ background:linear-gradient(180deg,#d1483a,#bb3a2d); box-shadow:var(--sh-1); }

/* ---- data-viz: muted, professional ---- */
.spark .bar{ background:var(--brand); box-shadow:none; }
.spark .col.today .bar{ background:linear-gradient(180deg,#e6a53c,#cf8f24); box-shadow:none; }
.tag-btn.on{ box-shadow:none; }

/* ---- bottom nav: clean line-icons ---- */
.tabbar{ box-shadow:0 -1px 0 var(--line); }
.tabbar a{ color:var(--muted); font-size:0; gap:3px; padding-top:8px; }
.tabbar a .ic{ width:22px; height:22px; }
.tabbar a span{ font-size:10.5px; }
.tabbar a.active{ color:var(--brand-2); background:transparent; }
.tabbar a.active span{ font-weight:750; }

/* center action button — properly contained, gently raised */
.tabbar .fab{ color:var(--muted); overflow:visible; }
.tabbar .fab::before{ content:none; }
.tabbar .fab .fab-i{
  display:grid; place-items:center; width:46px; height:46px; margin-top:-15px;
  margin-bottom:1px; border-radius:15px; background:var(--brand); color:#fff;
  box-shadow:0 5px 14px rgba(47,60,120,.30);
}
.tabbar .fab .fab-i .ic{ width:25px; height:25px; stroke-width:2; }
.tabbar .fab span:not(.fab-i){ color:var(--muted); font-size:10.5px; }
.tabbar .fab:active .fab-i{ transform:scale(.94); }

/* ---- dashboard quick-actions grid ---- */
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:2px 0 6px}
.qtile{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:16px 8px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  color:var(--ink); font-weight:700; font-size:12.5px; letter-spacing:-.01em;
  transition:transform .12s, box-shadow .2s}
.qtile .qi{font-size:22px; line-height:1}
.qtile:active{transform:scale(.97)}
@media (hover:hover){ .qtile:hover{box-shadow:var(--sh-2); transform:translateY(-1px)} }
@media (max-width:360px){ .qgrid{grid-template-columns:repeat(2,1fr)} }

/* ---- History timeline: clear hierarchy, scannable ---- */
.tl{ list-style:none; margin:0; padding:0; }
.tl-item{
  display:flex; gap:13px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:13px 14px;
  margin-bottom:8px; box-shadow:var(--sh-1);
}
.tl-time{
  flex:none; width:50px; text-align:right; padding-top:1px;
  font-variant-numeric:tabular-nums; font-weight:750; font-size:15px;
  color:var(--ink); line-height:1.1;
}
.tl-time span{
  display:block; margin-top:1px; font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.tl-body{ flex:1; min-width:0; }
.tl-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tl-top b{ font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink); }
.tl-purpose{
  font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--brand-2); background:color-mix(in srgb,var(--brand) 11%,transparent);
  border-radius:999px; padding:2px 8px;
}
.tl-prods{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4; }
.tl-metrics{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.tl-metrics .metric{
  display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:750;
  color:var(--ink); background:var(--card-2); border:1px solid var(--line);
  border-radius:9px; padding:3px 9px; font-variant-numeric:tabular-nums;
}
.tl-metrics .metric em{
  font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
}
.tl-metrics .metric.alt em{ color:var(--brand-2); }
.tl-note{
  font-size:13px; color:var(--ink-2); margin-top:8px; padding-left:11px;
  border-left:2px solid var(--line); line-height:1.45;
}
.tl-photo{ display:inline-block; margin-top:8px; }
.tl-photo img{ max-width:160px; max-height:160px; border-radius:10px; border:1px solid var(--line); display:block; }
.hist-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.tl-actions{ flex:none; display:flex; flex-direction:column; gap:6px; }
.tl-item .del-form{ flex:none; margin:0; }
.tl-item .btn.share{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  color:#128c3e; border:1.5px solid var(--line); background:transparent; border-radius:10px;
}
.tl-item .btn.share:hover{ border-color:#128c3e; background:rgba(18,140,62,.06); }
.tl-item .btn.del{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  color:var(--muted); border:1.5px solid var(--line); background:transparent; border-radius:10px;
}
.tl-item .btn.del:hover{ color:var(--err); border-color:var(--err); background:rgba(224,31,31,.05); }
.btn.del:active{transform:scale(.96)}