/* ============================================================
   DVMiQ — Shared Clinic (authenticated) Stylesheet

   Owns the skin every page under /static/clinic used to carry its own
   copy of: reset, theme tokens, layout, nav, cards, fields, buttons,
   tables, footer. Pages keep ONLY their page-specific rules.

   Palette values are unchanged from the per-page copies they replace —
   retheming the app is a separate piece of work and belongs here, in
   the :root block below, as a single edit.
   ============================================================ */

/* ---------- CSS RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-y: auto; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

/* ---------- THEME ---------- */
:root{
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --glass: rgba(255,255,255,0.75);
  --card: #ffffff;
  --text: #0f2433;
  --muted: #5b6b82;
  --brand: #64bff7;   /* primary blue */
  --accent: #64d8f5;  /* secondary blue */
  --border: rgba(100,191,247,0.28);
  --shadow: 0 10px 30px rgba(15,36,51,0.10);
  --radius: 16px;
  --r-xs: 4px;
  --bottom-nav-h: 62px;
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 90% -20%, rgba(100,191,247,0.15), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(100,216,245,0.15), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff 40%, #ffffff);
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.45;
}

/* ---------- LAYOUT ---------- */
.container{ width: min(1200px, 100% - 2rem); margin: 0 auto; }
.section{ padding: clamp(56px, 6vw, 96px) 0; }
.stack{ display:grid; gap:14px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.center{ text-align:center; }
.right{ text-align:right; }
.center-wrap{ display:flex; justify-content:center; }
.help{ color: var(--muted); font-size: .92rem; }

/* ---------- BRAND LOGO ---------- */
@font-face {
  font-family: 'Proxima Nova Semibold';
  src: url('/static/fonts/ProximaNovaSemibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.brand-logo { display: flex; flex-direction: column; align-items: center; width: fit-content; text-decoration: none; }
a:has(> .brand-logo) { text-decoration: none; }
.brand-logo-main {
  font-family: 'Proxima Nova Semibold', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: #6096F8;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
}
.brand-logo-sub {
  font-family: 'Proxima Nova Semibold', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: #B7D1FB;
  font-size: 0.288em;
  line-height: 1;
  margin-top: -1px;
  white-space: nowrap;
}
.logo{ height: 40px; object-fit: contain; }
.logo.brand-logo { font-size: 30px; }

/* ---------- NAV ---------- */
.nav{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(255,255,255,0.86)); border-bottom: 1px solid var(--border); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.nav-links{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.nav-links a{ color: var(--muted); text-decoration:none; font-weight:600; padding: 0 .5rem; border-radius: var(--r-xs); }
.nav-links a:hover{ color: var(--text); }
.nav-cta{ display:inline-flex; gap:10px; }

/* Current page. Colour alone is not the only cue — the underline carries it
   for anyone who cannot separate the two blues. */
.nav-links a.active{
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* The clinic-uploaded logo sits INSIDE the nav row. Bounded by height so a
   tall upload cannot stretch the header (it used to force ~100px). */
#clinicLogo{
  max-height: 34px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------- FIXED BOTTOM NAV (mobile only) ---------- */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: linear-gradient(to top, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  height: var(--bottom-nav-h);
  display: none;
}
.bottom-nav .container{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav .nav-links{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 1.05rem;
  padding: 0 0.75rem;
  justify-content: flex-start;
  width: 100%;
  max-width: 1200px;
}
.bottom-nav .nav-links::-webkit-scrollbar{ display:none; }
.bottom-nav .nav-links a{ white-space: nowrap; }

@media (max-width: 720px){
  header.nav .nav-links{ display:none !important; }
  header.nav .nav-cta{ display:none !important; }
  .bottom-nav{ display:block; }
  body{ padding-bottom: var(--bottom-nav-h); }
  .section{ padding: clamp(28px, 6vw, 48px) 0; }
  .container{ width: min(1200px, 100% - 1.5rem); }
}
@media (min-width: 721px){
  .bottom-nav{ display:none; }
  body{ padding-bottom: 0; }
}

/* ---------- CARDS & FIELDS ---------- */
.card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.field{ width:100%; max-width: 640px; padding:.8rem .9rem; font-size:1rem; border:2px solid #cdd7e1; border-radius:10px; background:#fff; color:#0b1722; display:block; }
.field:focus{ border-color:#64bff7; box-shadow:0 0 0 4px rgba(100,191,247,.18); }
textarea.field{ min-height: 140px; resize: vertical; }

/* ---------- BUTTONS ---------- */
.btn{ border:1px solid var(--border); background: var(--glass); color: var(--text); padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer; transition: background-color .3s, box-shadow .3s;
  /* .btn is used on <a> as often as on <button>; without these the anchors
     render underlined and baseline-misaligned next to real buttons. */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; line-height: 1.2; }
a.btn:hover, a.btn:focus{ text-decoration: none; }
.btn:hover{ background-color: rgba(168,168,168,.12); }
.btn--brand{
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#0b1722;
  box-shadow: 0 8px 20px rgba(102,209,255,.25);
  cursor:pointer;
  transition: background .3s, box-shadow .3s, transform .08s;
}
.btn--brand:hover{ background: rgba(2,173,247,0.38); background-image: none; color:#0b1722; box-shadow: 0 10px 24px rgba(102,209,255,.35); }
.btn--brand:active{ transform: translateY(1px); }
.btn--danger{ background:#f74c4c; color:#fff; border:none; }
.btn--danger:hover{ background:#e13b3b; }
.btn.is-disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Legacy custom tags mapped to styles (no markup change required) */
button2{ padding:10px 14px; border-radius:12px; font-weight:700; border: none; background:#f74c4c; color:#fff; }
button2:hover{ background:#e13b3b; }
button3{ background: transparent; border:none; color: var(--muted); padding:10px 14px; border-radius:12px; font-weight:700; }
button4{ background: linear-gradient(135deg, var(--brand), var(--accent)); border:none; color:#0b1722; padding:10px 14px; border-radius:12px; font-weight:700; }

/* ---------- FOCUS VISIBILITY ----------
   Replaces the old `.field:focus{ outline:none }` rule, which was the only
   focus styling in the app and removed the indicator without replacing it.
   Keyboard users get a ring on EVERY interactive element; mouse users are
   unaffected because this is :focus-visible, not :focus. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.nav-links a:focus-visible,
.bottom-nav .nav-links a:focus-visible{ outline-offset: 4px; }

/* Keyboard users must be able to reach content past the nav. */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 0;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}
.skip-link:focus{ left: 0; }

/* ---------- TABLES ---------- */
table{ width:100%; border-collapse: collapse; }
/* A table too wide for the viewport scrolls inside this wrapper; without it the
   card clips the right-hand columns and they cannot be reached at all. */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table{ min-width: 520px; }
th, td{ text-align:left; padding:10px; border-bottom:1px solid #eef2f6; }
th{ color: var(--muted); font-weight:700; background:#f7fbff; }

/* ---------- FOOTER ---------- */
.footer{ border-top: 1px solid var(--border); background:#ffffff; padding: 28px 0; color: var(--muted); font-size: 14px; margin-top:auto; }
.footer a{ color: var(--muted); text-decoration: none; }
.footer a:hover{ color: var(--text); }

/* ---------- LOADING ---------- */
.spinner{ display:inline-block; border:6px solid #f3f3f3; border-top:6px solid var(--brand); border-radius:50%; width:36px; height:36px; animation: spin 1s linear infinite; }
@keyframes spin{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }
.loading-state{ display:flex; align-items:center; justify-content:center; gap:12px; padding:28px 16px; color: var(--muted); }
.loading-state .spinner{ width:20px; height:20px; border-width:3px; }

/* ---------- EMPTY STATE ---------- */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 32px 20px;
  text-align:center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.5);
}
.empty-state-msg{ font-weight:600; color: var(--text); }
.empty-state-hint{ font-size:.92rem; }

/* ---------- TOASTS ---------- */
.toast-region{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.4;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(-6px);} to{ opacity:1; transform:none;} }
.toast.is-leaving{ opacity:0; transform: translateY(-6px); transition: opacity .16s, transform .16s; }
.toast-icon{ flex-shrink:0; font-weight:800; line-height:1.4; }
.toast-msg{ flex:1; }
.toast--success{ border-left: 4px solid #1d9e75; }
.toast--success .toast-icon{ color:#1d9e75; }
.toast--error{ border-left: 4px solid #c0392b; }
.toast--error .toast-icon{ color:#c0392b; }
.toast--info{ border-left: 4px solid var(--brand); }
.toast--info .toast-icon{ color: #2b86b8; }
.toast-action{
  flex-shrink:0;
  background:none;
  border:none;
  padding:0 2px;
  font-weight:800;
  color:#2b86b8;
  cursor:pointer;
  text-decoration:underline;
}
.toast-close{
  flex-shrink:0;
  background:none;
  border:none;
  padding:0 2px;
  font-size:1.1rem;
  line-height:1;
  color: var(--muted);
  cursor:pointer;
}
@media (max-width: 720px){
  .toast-region{ top: 8px; left: 8px; right: 8px; max-width: none; }
}

/* ---------- CONFIRM DIALOG ---------- */
.dialog-backdrop{
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15,36,51,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dialog{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 22px;
  width: min(440px, 100%);
  animation: dialog-in .16s ease-out;
}
@keyframes dialog-in{ from{ opacity:0; transform: scale(.97);} to{ opacity:1; transform:none;} }
.dialog-title{ font-weight:800; font-size:1.05rem; margin:0 0 8px; }
.dialog-msg{ color: var(--muted); margin:0 0 18px; line-height:1.5; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}