/* ==========================================================================
   TSAS practice management app — app.tsas.com.au

   Mobile-first: Rob records time and ticks things off on a phone, so the
   phone layout is the plain one and the desktop layout is the media query.

   The :root block is copied from site/styles.css rather than imported — the
   app is a separate document on a separate subdomain, and one stylesheet
   reaching across to the other would be a deploy-order trap. If the brand
   palette changes, change it in both.
   ========================================================================== */

:root{
  /* ---- Brand navy (sampled from Logo.png background #01203E) ---- */
  --navy-900:#061D33;
  --navy-800:#092A4A;
  --navy-700:#0E3A63;
  --navy-600:#17507F;

  /* ---- Brand cyan (sampled from the logo arrow) ---- */
  --cyan-300:#7FDEF9;
  --cyan-400:#35C6F4;
  --cyan-500:#1BA7D6;
  --cyan-600:#0E7FA8;   /* darkest cyan that still passes AA on white */

  /* ---- Neutrals ---- */
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --surface-2:#EDF2F7;
  --ink:#16222F;
  --ink-soft:#54657A;
  --line:#DFE6ED;

  /* ---- Layout ---- */
  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(6,29,51,.05), 0 2px 8px rgba(6,29,51,.05);
  --shadow-md:0 6px 24px rgba(6,29,51,.10);

  /* ---- App chrome ---- */
  --header-h:58px;
  --nav-h:62px;
  --wrap:1040px;

  /* ---- Status colours ---- */
  --ok:#0F7B4F;
  --ok-bg:#E3F5EC;
  --warn:#8A5A00;
  --warn-bg:#FDF2DC;
  --stop:#A32218;
  --stop-bg:#FBE9E7;
  --idle:#4A5B6E;
  --idle-bg:#E8EDF3;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* The app hides whole screens with the `hidden` attribute, and several of them
   are also given an explicit `display` below (the gate and the boot splash are
   grids, the nav is a grid). A class rule beats the user-agent [hidden] rule,
   so without this they stay on screen stacked on top of each other. */
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;line-height:1.2;margin:0;letter-spacing:-.01em;}
h1{font-size:1.5rem;font-weight:700;}
h2{font-size:1.18rem;font-weight:700;}
h3{font-size:1rem;font-weight:600;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:var(--cyan-600);}
.muted{color:var(--ink-soft);font-size:.92rem;}
.right{text-align:right;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;}

/* ---- Focus: always visible, never a mystery ---------------------------- */
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:2px;}

/* ==========================================================================
   Boot splash
   ========================================================================== */
.boot{
  position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:var(--navy-900);
}
.boot img{opacity:.9;}
.boot-text{color:var(--cyan-300);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;}

/* ==========================================================================
   Gate (sign in, two-factor, enrolment)
   ========================================================================== */
.gate{
  min-height:100vh;min-height:100dvh;
  background:linear-gradient(170deg,var(--navy-900),var(--navy-700));
  display:grid;place-items:center;padding:24px 16px;
}
.gate-card{
  width:100%;max-width:404px;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:28px 24px 24px;
}
/* The logo assets were keyed to transparency against the navy from Logo.png,
   so they are made for a dark surface. On the white card they wash out —
   hence the navy panel rather than a different crop of the logo. */
.gate-logo{
  display:block;width:100%;max-width:224px;height:auto;margin:0 auto 20px;
  background:var(--navy-900);border-radius:var(--radius-sm);
  padding:14px 18px;
}
.pane h1{margin-bottom:6px;}
.pane .muted{margin-bottom:18px;}
.gate-foot{margin-top:18px;font-size:.85rem;line-height:1.5;}

.qr-wrap{
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px;margin-bottom:14px;
}
.qr-wrap svg,.qr-wrap img{width:100%;max-width:216px;height:auto;}
.enrol-manual{margin-bottom:16px;}
.enrol-manual summary{cursor:pointer;color:var(--cyan-600);font-size:.9rem;}
.secret{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;
  word-break:break-all;background:var(--surface-2);padding:10px 12px;
  border-radius:var(--radius-sm);margin-top:8px;user-select:all;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{display:block;margin-bottom:14px;}
.field > span{
  display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);
  margin-bottom:5px;letter-spacing:.01em;
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 12px;
  /* 16px minimum, or iOS Safari zooms the whole page on focus */
  font-size:16px;
}
.field textarea{min-height:84px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan-500);outline:3px solid rgba(27,167,214,.22);outline-offset:0;
}
.field input[readonly]{background:var(--surface-2);color:var(--ink-soft);}
.field-hint{font-size:.8rem;color:var(--ink-soft);margin-top:5px;}
.code-input{
  letter-spacing:.42em;text-align:center;font-size:1.4rem !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;font-size:.95rem;}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;}
.form-error{
  background:var(--stop-bg);color:var(--stop);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:.9rem;margin-bottom:14px;
}
.form-grid{display:grid;gap:0 16px;}
@media (min-width:620px){
  .form-grid.two{grid-template-columns:1fr 1fr;}
  .form-grid .span-2{grid-column:1 / -1;}
}
fieldset{border:0;padding:0;margin:0 0 6px;}
legend{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.95rem;
  padding:0;margin-bottom:10px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:11px 16px;min-height:44px;transition:background .15s,border-color .15s;
}
.btn:disabled{opacity:.55;cursor:default;}
.btn-accent{background:var(--cyan-500);color:#06202E;border-color:var(--cyan-500);}
.btn-accent:hover:not(:disabled){background:var(--cyan-400);}
.btn-primary{background:var(--navy-700);color:#fff;border-color:var(--navy-700);}
.btn-primary:hover:not(:disabled){background:var(--navy-600);}
.btn-ghost{background:var(--surface);color:var(--navy-700);border-color:var(--line);}
.btn-ghost:hover:not(:disabled){border-color:var(--navy-600);}
.btn-danger{background:var(--surface);color:var(--stop);border-color:#E7BDB8;}
.btn-danger:hover:not(:disabled){background:var(--stop-bg);}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px;min-height:36px;font-size:.88rem;}
.link-btn{
  display:block;width:100%;margin-top:14px;background:none;border:0;
  font:inherit;font-size:.9rem;color:var(--cyan-600);cursor:pointer;
  text-align:center;padding:8px;
}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}
.btn-row.end{justify-content:flex-end;}

/* ==========================================================================
   App chrome
   ========================================================================== */
.app-header{
  position:sticky;top:0;z-index:20;height:var(--header-h);
  background:var(--navy-900);color:#E8F1F8;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;padding-top:env(safe-area-inset-top);
  box-sizing:content-box;
}
.app-brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
.app-brand img{height:26px;width:auto;}
.app-wordmark{height:18px !important;}
.app-header-right{display:flex;align-items:center;gap:10px;}
.whoami{display:none;font-size:.85rem;color:#A8C4DA;}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--cyan-500);
  color:#06202E;display:grid;place-items:center;text-decoration:none;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
}

/* Bottom tab bar on a phone. */
.app-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.app-nav a{
  display:grid;justify-items:center;gap:2px;position:relative;
  padding:9px 2px 7px;text-decoration:none;color:var(--ink-soft);
  font-size:.68rem;font-weight:600;letter-spacing:.01em;min-height:var(--nav-h);
}
.app-nav .ico{font-size:1.18rem;line-height:1.1;}
.app-nav a[aria-current="page"]{color:var(--cyan-600);}
.app-nav .badge{
  position:absolute;top:5px;right:calc(50% - 20px);
  background:var(--cyan-500);color:#06202E;font-size:.62rem;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;
}

.view{
  padding:16px 14px calc(var(--nav-h) + 28px);
  max-width:var(--wrap);margin:0 auto;
}
.view:focus{outline:none;}

@media (min-width:900px){
  :root{--header-h:62px;}
  .whoami{display:inline;}
  .app-brand img{height:30px;}
  .app-wordmark{height:21px !important;}
  /* Sidebar instead of a tab bar once there is room for one. */
  .app-nav{
    position:fixed;top:var(--header-h);bottom:0;left:0;right:auto;width:212px;
    grid-auto-flow:row;grid-auto-columns:none;grid-auto-rows:min-content;
    border-top:0;border-right:1px solid var(--line);padding:14px 10px;gap:3px;
  }
  .app-nav a{
    grid-auto-flow:column;justify-items:start;grid-template-columns:24px 1fr;
    align-items:center;gap:10px;font-size:.95rem;min-height:44px;
    padding:9px 12px;border-radius:var(--radius-sm);
  }
  .app-nav a[aria-current="page"]{background:var(--surface-2);}
  .app-nav .badge{position:static;margin-left:auto;}
  .view{padding:26px 28px 60px 240px;max-width:none;}
  .view > *{max-width:var(--wrap);}
}

/* ==========================================================================
   Page furniture
   ========================================================================== */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.page-head h1{flex:1 1 auto;min-width:0;}
.page-head .page-sub{width:100%;}
.back-link{
  display:inline-block;font-size:.88rem;font-weight:600;text-decoration:none;
  margin-bottom:10px;
}
.back-link::before{content:"‹ ";}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px;margin-bottom:14px;
}
.card > h2{margin-bottom:12px;}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;flex-wrap:wrap;
}
.card-head h2{margin:0;}

.empty{
  text-align:center;color:var(--ink-soft);padding:30px 16px;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
}
.spinner{text-align:center;color:var(--ink-soft);padding:30px;font-size:.9rem;}

/* ---- Status pills ------------------------------------------------------- */
.pill{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.pill-active,.pill-converted{background:var(--ok-bg);color:var(--ok);}
.pill-prospect,.pill-new{background:var(--idle-bg);color:var(--idle);}
.pill-on_hold,.pill-contacted,.pill-quoted{background:var(--warn-bg);color:var(--warn);}
.pill-ended,.pill-archived{background:var(--stop-bg);color:var(--stop);}
.pill-admin{background:#E6E3F7;color:#4733A8;}
.pill-staff{background:var(--idle-bg);color:var(--idle);}
.pill-inactive{background:var(--stop-bg);color:var(--stop);}

/* ---- Toolbar (search + filters) ---------------------------------------- */
.toolbar{display:grid;gap:10px;margin-bottom:14px;}
.toolbar input[type="search"]{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
}
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.chip{
  font:inherit;font-size:.84rem;font-weight:600;white-space:nowrap;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;min-height:36px;
}
.chip[aria-pressed="true"]{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}

/* ---- Record list ------------------------------------------------------- */
.rec-list{display:grid;gap:10px;}
.rec{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px;
  text-decoration:none;color:inherit;
}
.rec:hover{border-color:var(--cyan-500);}
.rec-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.rec-title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.02rem;}
.rec-meta{color:var(--ink-soft);font-size:.86rem;margin-top:3px;}
.rec-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.tag{
  font-size:.74rem;font-weight:600;background:var(--surface-2);color:var(--ink-soft);
  border-radius:var(--radius-sm);padding:2px 8px;
}

/* ---- Definition rows --------------------------------------------------- */
.dl{display:grid;gap:0;}
.dl > div{
  display:grid;grid-template-columns:1fr;gap:1px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.dl > div:last-child{border-bottom:0;}
.dl dt{font-size:.78rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;}
.dl dd{margin:0;overflow-wrap:anywhere;}
.dl dd.pre{white-space:pre-wrap;}
@media (min-width:620px){
  .dl > div{grid-template-columns:200px 1fr;gap:12px;align-items:baseline;}
}

/* ---- Sub-record rows (contacts, systems, documents, staff) ------------- */
.sub{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.sub:last-of-type{border-bottom:0;}
.sub-body{flex:1 1 auto;min-width:0;}
.sub-name{font-weight:600;}
.sub-meta{font-size:.86rem;color:var(--ink-soft);overflow-wrap:anywhere;}
.sub-actions{display:flex;gap:6px;flex:none;}
.icon-btn{
  background:none;border:1px solid var(--line);border-radius:var(--radius-sm);
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-soft);font-size:.95rem;
}
.icon-btn:hover{border-color:var(--navy-600);color:var(--navy-700);}
.icon-btn.danger:hover{border-color:#E7BDB8;color:var(--stop);background:var(--stop-bg);}

/* ---- The "no credentials here" notice ---------------------------------- */
.notice{
  display:flex;gap:10px;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:.86rem;color:var(--ink-soft);margin-bottom:14px;
  line-height:1.45;
}
.notice strong{color:var(--ink);}

/* ---- Dashboard tiles --------------------------------------------------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,1fr);}}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px;text-decoration:none;color:inherit;
}
.tile:hover{border-color:var(--cyan-500);}
.tile-n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.8rem;line-height:1.1;}
.tile-l{font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-top:2px;}

/* ==========================================================================
   Toasts and modal
   ========================================================================== */
.toasts{
  position:fixed;left:12px;right:12px;z-index:60;
  bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
  display:grid;gap:8px;pointer-events:none;
}
@media (min-width:900px){.toasts{left:auto;right:20px;bottom:20px;width:340px;}}
.toast{
  background:var(--navy-800);color:#EAF4FB;border-radius:var(--radius-sm);
  padding:12px 14px;font-size:.9rem;box-shadow:var(--shadow-md);
  animation:toast-in .18s ease-out;
}
.toast.bad{background:#7E1C14;}
.toast.good{background:#0C6341;}
@keyframes toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.modal{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;
}
.modal::backdrop{background:rgba(6,29,51,.55);}
.modal-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:min(100% - 24px,540px);margin:auto;padding:20px;
  max-height:calc(100dvh - 40px);overflow-y:auto;
}
.modal-wide .modal-card{width:min(100% - 24px,760px);}
.modal-card h2{margin-bottom:14px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap;}
.modal-foot .btn{flex:1 1 auto;}
@media (min-width:620px){.modal-foot .btn{flex:0 0 auto;}}