/* ---------- tokens ---------- */
:root{
  --bg:#F7F3EA;
  --surface:#FFFFFF;
  --surface-2:#EFEAE0;
  --ink:#1E2B22;
  --ink-soft:#5B6B60;
  --accent:#2F4A3B;
  --accent-strong:#1F3329;
  --accent-soft:#DCE6DA;
  --line:#E1DACB;
  --good:#2E7D4F;
  --good-soft:#E1F1E5;
  --warn:#B5651D;
  --warn-soft:#FBEBDC;
  --danger:#AE3327;
  --danger-soft:#FBE7E3;
  --shadow: 0 1px 2px rgba(30,43,34,.06), 0 6px 20px rgba(30,43,34,.06);
  --radius: 14px;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12180F;
    --surface:#1B2419;
    --surface-2:#212B1E;
    --ink:#ECEDE4;
    --ink-soft:#A6B0A0;
    --accent:#8FC3A3;
    --accent-strong:#B4DCC0;
    --accent-soft:#243228;
    --line:#31402F;
    --good:#7ED09B;
    --good-soft:#1E3327;
    --warn:#E3A15C;
    --warn-soft:#3A2B18;
    --danger:#E5877B;
    --danger-soft:#3B211E;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#12180F;
  --surface:#1B2419;
  --surface-2:#212B1E;
  --ink:#ECEDE4;
  --ink-soft:#A6B0A0;
  --accent:#8FC3A3;
  --accent-strong:#B4DCC0;
  --accent-soft:#243228;
  --line:#31402F;
  --good:#7ED09B;
  --good-soft:#1E3327;
  --warn:#E3A15C;
  --warn-soft:#3A2B18;
  --danger:#E5877B;
  --danger-soft:#3B211E;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100vh;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0 0 .3em;text-wrap:balance;color:var(--ink);}
h1{font-size:1.9rem;font-weight:600;}
h2{font-size:1.35rem;}
h3{font-size:1.05rem;}
p{margin:0 0 .8em;}
a{color:var(--accent);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:.95rem;}
::selection{background:var(--accent-soft);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- login ---------- */
.login-screen{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(600px 400px at 15% 10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.login-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:40px 36px;
  width:100%;max-width:380px;
  text-align:center;
}
.login-mark{width:72px;height:72px;border-radius:50%;margin-bottom:10px;box-shadow:0 2px 8px rgba(30,43,34,.12);}
.login-card h1{font-size:1.5rem;margin-bottom:.15em;}
.login-sub{color:var(--ink-soft);font-size:.78rem;margin-bottom:1.6em;white-space:nowrap;}
.login-card input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  text-align:center;letter-spacing:.08em;font-size:1.05rem;
  margin-bottom:14px;
}
.login-error{color:var(--danger);font-size:.85rem;min-height:1.2em;margin-bottom:8px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  border:1px solid var(--accent);background:var(--accent);color:var(--bg);
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:.9rem;
  cursor:pointer;transition:transform .08s ease, opacity .15s ease;
  width:auto;
}
.btn:hover{opacity:.92;}
.btn:active{transform:scale(.98);}
.btn.secondary{background:transparent;color:var(--accent);}
.btn.ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn.block{width:100%;}
.btn.small{padding:6px 12px;font-size:.8rem;border-radius:8px;}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.sidebar{
  background:var(--accent);color:var(--accent-soft);
  padding:26px 18px;display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;cursor:pointer;}
.brand .mark{width:34px;height:34px;border-radius:50%;flex-shrink:0;}
.brand .name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.15;}
.brand .name small{display:block;font-family:var(--font-body);font-weight:400;font-size:.7rem;opacity:.75;letter-spacing:.04em;text-transform:uppercase;}
.version-tag{display:none;font-size:.68rem;font-weight:400;opacity:.65;margin-left:6px;vertical-align:middle;}
nav.tabs{display:flex;flex-direction:column;gap:2px;flex:1;}
nav.tabs button{
  all:unset;cursor:pointer;position:relative;
  padding:10px 12px;border-radius:9px;font-size:.9rem;font-weight:600;
  color:var(--accent-soft);display:flex;align-items:center;gap:10px;
}
nav.tabs button .n{
  margin-left:auto;background:rgba(255,255,255,.14);color:#fff;
  font-family:var(--font-mono);font-size:.72rem;padding:1px 7px;border-radius:20px;
}
nav.tabs button:hover{background:rgba(255,255,255,.08);}
nav.tabs button.active{background:var(--bg);color:var(--accent-strong);}
nav.tabs button.active .n{background:var(--accent-soft);color:var(--accent-strong);}
.sidebar-foot{font-size:.75rem;opacity:.7;}
.sidebar-foot button{all:unset;cursor:pointer;color:var(--accent-soft);text-decoration:underline;}

.main{padding:30px 40px 80px;max-width:1180px;}
.topline{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.topline .actions{display:flex;gap:10px;}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--ink-soft);font-weight:700;margin-bottom:4px;}

/* ---------- layout helpers ---------- */
.grid{display:grid;gap:16px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,1fr);}.grid.cols-3{grid-template-columns:repeat(2,1fr);}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.card.tight{padding:16px 18px;}

.stat{padding:18px 20px;}
.stat .label{font-size:.78rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.stat .value{font-family:var(--font-display);font-size:1.9rem;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;}
.stat .value.mono{font-family:var(--font-mono);}
.stat.warn .value{color:var(--warn);}
.stat.danger .value{color:var(--danger);}
.stat.good .value{color:var(--good);}

/* ---------- lists ---------- */
.list{display:flex;flex-direction:column;gap:10px;}
.row-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:border-color .15s;
}
.row-card:hover{border-color:var(--accent);}
.row-card .avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;
  font-family:var(--font-display);font-size:1.05rem;overflow:hidden;
}
.row-card .avatar img{width:100%;height:100%;object-fit:cover;}
.row-card .main-info{flex:1;min-width:0;}
.row-card .title{font-weight:700;}
.row-card .sub{color:var(--ink-soft);font-size:.85rem;}
.row-card .side{text-align:right;font-size:.85rem;color:var(--ink-soft);}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;
}
.badge.good{background:var(--good-soft);color:var(--good);}
.badge.warn{background:var(--warn-soft);color:var(--warn);}
.badge.danger{background:var(--danger-soft);color:var(--danger);}
.badge.neutral{background:var(--surface-2);color:var(--ink-soft);}

/* ---------- forms ---------- */
.field{margin-bottom:14px;min-width:0;}
.field label{display:block;margin-bottom:5px;font-size:.78rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
.field input,.field select,.field textarea{
  display:block;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--bg);color:var(--ink);
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;
}
.field input[type="date"]{-webkit-appearance:none;appearance:none;}
.field input[type="checkbox"]{display:inline-block;width:auto;}
.field textarea{min-height:88px;resize:vertical;}
.field .hint{font-size:.75rem;color:var(--ink-soft);font-weight:400;text-transform:none;letter-spacing:0;}
form .grid{margin-bottom:4px;}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
table{width:100%;border-collapse:collapse;font-size:.87rem;}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);background:var(--surface-2);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
td.wrap{white-space:normal;max-width:280px;}

/* ---------- tabs (visit types etc) ---------- */
.pillbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.pillbar button{
  all:unset;cursor:pointer;padding:7px 14px;border-radius:20px;font-size:.83rem;font-weight:600;
  border:1px solid var(--line);color:var(--ink-soft);
}
.pillbar button.active{background:var(--accent);border-color:var(--accent);color:var(--bg);}

/* ---------- misc ---------- */
.empty{color:var(--ink-soft);text-align:center;padding:40px 20px;font-size:.9rem;}
.breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px;}
.breadcrumb a{cursor:pointer;text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.two-col{display:grid;grid-template-columns:1.1fr 1.6fr;gap:20px;align-items:start;}
@media (max-width:960px){
  .two-col{grid-template-columns:1fr;}
  /* Pet detail page: the name heading + visit list should read before the photo
     once the two columns stack, not after it. */
  .pet-detail-photo-col{order:2;}
  .pet-detail-main-col{order:1;}
}
.pet-photo{
  width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;background:var(--surface-2);
  border:1px solid var(--line);
}
.pet-photo-placeholder{
  width:100%;aspect-ratio:1;border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;border:1px solid var(--line);
}
.file-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;font-size:.82rem;margin:0 6px 6px 0;text-decoration:none;color:var(--ink);
}
.file-chip button{all:unset;cursor:pointer;color:var(--danger);font-weight:700;}
.modal-overlay{
  position:fixed;inset:0;background:rgba(18,24,15,.45);display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;z-index:70;
}
.modal{background:var(--surface);border-radius:var(--radius);padding:26px 28px;max-width:640px;width:100%;box-shadow:var(--shadow);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.modal-head button{all:unset;cursor:pointer;font-size:1.3rem;color:var(--ink-soft);line-height:1;padding:4px;}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:30px;font-size:.85rem;
  box-shadow:var(--shadow);z-index:80;
}
.mono{font-family:var(--font-mono);}
.muted{color:var(--ink-soft);}
.note-block{white-space:pre-wrap;background:var(--surface-2);border-radius:10px;padding:12px 14px;font-size:.9rem;}
.link-btn{all:unset;cursor:pointer;color:var(--accent);font-weight:600;font-size:.85rem;}
.link-btn:hover{text-decoration:underline;}

@media (max-width:820px){
  .shell{grid-template-columns:1fr;align-content:start;}
  .sidebar{
    position:sticky;top:0;z-index:60;height:auto;
    flex-direction:column;align-items:stretch;padding:10px 14px 6px;gap:6px;
  }
  .brand{display:flex;align-items:center;justify-content:flex-start;}
  .brand .mark{display:none;}
  .brand .name{text-align:left;}
  .brand .name small{display:none;}
  .version-tag{display:inline;}
  nav.tabs{
    flex:none;flex-direction:row;justify-content:space-between;align-items:stretch;gap:2px;
  }
  nav.tabs button{
    flex-direction:column;gap:0;padding:9px 2px;border-radius:9px;
    min-width:0;min-height:44px;justify-content:center;flex:1 1 0;
  }
  nav.tabs .nav-label{display:none;}
  nav.tabs .nav-icon{font-size:1.35rem;line-height:1;}
  nav.tabs button .n{position:absolute;top:1px;right:3px;margin-left:0;padding:0 5px;font-size:.65rem;}
  .sidebar-foot{display:none;}
  .main{padding:20px 16px 40px;}
}
@media (max-width:600px){
  .modal-overlay{display:block;padding:0;}
  .modal{border-radius:0;max-width:none;width:100%;min-height:100vh;box-sizing:border-box;padding:20px 16px 26px;}
  .grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .grid.cols-3:has(.compare-tile){grid-template-columns:1fr;}
  .compare-val.prev{padding-left:14px;}

  /* row-card (schedule, reminders, clients, invoices, expenses…) was cramming the
     name/notes, the date, and any action buttons into one unbroken row — on a phone
     width there isn't room, so the text wrapped into a tall, narrow column and the
     date/buttons (still vertically centered on the whole row) ended up floating
     across it. Give each part its own line instead. */
  .row-card{flex-wrap:wrap;row-gap:8px;}
  .row-card .main-info{order:1;flex:1 1 0;min-width:0;}
  .row-card .side{order:2;flex:0 0 100%;text-align:left;padding-left:56px;box-sizing:border-box;}
  .row-card > div:last-child:not(.main-info):not(.avatar):not(.side){
    order:3;flex:0 0 100%;padding-left:56px;box-sizing:border-box;
    flex-direction:row !important;justify-content:flex-start;
  }
}

/* ---------- compare tiles ---------- */
.compare-tile{padding:18px 20px;}
.compare-tile .label{font-size:.78rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.compare-row{display:flex;align-items:baseline;gap:20px;margin-bottom:10px;}
.compare-val{display:flex;flex-direction:column;gap:2px;}
.compare-val .v{font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--ink);}
.compare-val .l{font-size:.75rem;color:var(--ink-soft);}
.compare-val.prev{padding-left:18px;border-left:1px solid var(--line);}
.compare-val.prev .v{font-size:1.25rem;color:var(--ink-soft);font-weight:500;}
@media (max-width:900px){.grid.cols-2{grid-template-columns:1fr;}}


/* ---------- mobile-only logout on dashboard ---------- */
.mobile-logout-row{display:none;}
@media (max-width:820px){
  .mobile-logout-row{display:block;text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
}

/* ---------- print ---------- */
.print-only{display:none;}
@media print{
  .no-print{display:none !important;}
  .print-only{display:block;}
  body{background:#fff;}
  /* A "printable-modal" (the invoice, or the vet-records export) is the only thing meant to
     print. Hide the whole app behind it (sidebar, dashboard, whatever list it opened from) so
     printing it doesn't also print the page it was opened from. */
  #app{display:none !important;}
  .printable-modal{position:static;background:none;padding:0;}
  .printable-modal .modal{box-shadow:none;border:none;max-width:none;min-height:100vh;display:flex;flex-direction:column;}
  /* Stretch the document's own bordered frame to fill the printed page, with any footer
     content (invoice payment details, etc.) pinned to the bottom rather than sitting just
     under the last line. */
  .invoice-frame{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
  .invoice-bottom{margin-top:0 !important;}
  .record-frame{flex:1;}
}