/* =====================================================================
   VETCARE CONSOLE — Design System
   Palette:  Pine (dark, structural) / Teal (primary action) /
             Sand (page ground) / Amber (attention) / Coral (urgent)
   Type:     Fraunces (display, restrained) + IBM Plex Sans (UI/body)
             + IBM Plex Mono (data — weights, doses, stock, dates)
   Signature: "Vital Trace" — a stitched pulse line used in the
             header lockup and as a section divider.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380..600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --pine-900:#16332C;
  --pine-800:#1E4038;
  --pine-700:#28504A;
  --teal-600:#2F6F62;
  --teal-500:#3D8879;
  --teal-050:#EAF2EF;
  --sand-050:#FAF7F1;
  --sand-100:#F2EDE3;
  --ink-900:#1E2521;
  --ink-600:#445049;
  --ink-500:#5C6B64;
  --ink-300:#93A39B;
  --amber-500:#D98E3F;
  --amber-050:#FBF0E1;
  --coral-500:#C1573F;
  --coral-050:#FBEAE6;
  --line:#DCE3DE;
  --line-strong:#C3CEC7;
  --white:#FFFFFF;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(22,51,44,.05), 0 6px 20px rgba(22,51,44,.06);
  --shadow-pop:0 12px 32px rgba(22,51,44,.18);

  --font-display:'Fraunces', serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--sand-050);
  line-height: 1.5;
  font-size: 15px;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--pine-900);margin:0 0 .3em;font-weight:560;letter-spacing:-.01em;}
h1{font-size:clamp(1.7rem,2.4vw,2.4rem);}
h2{font-size:1.5rem;}
h3{font-size:1.1rem;}
p{margin:0 0 1em;color:var(--ink-600);}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2px solid var(--teal-600);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ---------- Layout shells ----------
   Fixed shell: sidebar and header never move; only .content scrolls.
   .sidebar has its own overflow-y so a tall nav list scrolls internally
   instead of pushing "Log out" past the bottom of the viewport. */
.app-shell{display:flex;height:100vh;overflow:hidden;}
.sidebar{
  width:248px;flex-shrink:0;background:var(--pine-900);color:#DCEAE5;
  display:flex;flex-direction:column;padding:22px 16px;
  height:100vh;overflow-y:auto;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.topbar{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-shrink:0;
}
.content{padding:28px;max-width:1240px;width:100%;margin:0 auto;flex:1;overflow-y:auto;}
.app-footer{
  flex-shrink:0;padding:12px 28px;border-top:1px solid var(--line);background:var(--white);
  font-size:.76rem;color:var(--ink-500);text-align:center;
}
.sidebar-toggle{display:none;}
.sidebar-backdrop{display:none;}
@media (min-width:1200px){
  .content{
    max-width:none;
    margin:0;
  }
}
@media (max-width:900px){
  .sidebar{
    position:fixed;left:-260px;top:0;bottom:0;height:auto;z-index:60;
    transition:left .22s ease;box-shadow:var(--shadow-pop);
  }
  .sidebar.open{left:0;}
  .sidebar-toggle{
    display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:#fff;color:var(--pine-900);flex-shrink:0;
  }
  .sidebar-toggle svg{width:20px;height:20px;}
  .sidebar-backdrop.open{
    display:block;position:fixed;inset:0;background:rgba(22,51,44,.45);z-index:50;
  }
  body.sidebar-open{overflow:hidden;}
  .content{padding:16px;}
  .topbar{padding:12px 16px;}
}

/* ---------- Vital trace (signature) ---------- */
.vital-trace{display:block;width:100%;height:22px;}
.vital-trace path{
  fill:none;stroke:var(--teal-500);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:trace 2.6s ease-out forwards;
}
@keyframes trace{to{stroke-dashoffset:0;}}
.divider-trace{margin:28px 0;opacity:.55;}

/* ---------- Brand lockup ---------- */
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-size:1.15rem;font-weight:560;}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--teal-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand .mark svg{width:18px;height:18px;}

/* ---------- Nav (sidebar) ---------- */
.nav-group{margin-top:22px;}
.nav-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#7FA79B;padding:0 10px;margin-bottom:6px;}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);
  color:#CFE3DC;font-size:.9rem;margin-bottom:2px;
}
.nav-link svg{width:17px;height:17px;flex-shrink:0;opacity:.85;}
.nav-link:hover{background:var(--pine-800);color:#fff;}
.nav-link.active{background:var(--teal-600);color:#fff;font-weight:500;}
.sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--pine-700);}

/* ---------- Owner layout ----------
   The owner header/footer are shared components.  They stay fixed while the
   page-specific <main> between them is the only changing part of a page.
   Reserve their space on the body (rather than on a page's .content) so a
   page-level content rule cannot accidentally place content under the header. */
.owner-nav{background:var(--white);border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:fixed;inset:0 0 auto;z-index:20;}
body:has(.owner-nav){padding:76px 0 58px;}
body:has(.owner-nav) .app-footer{position:fixed;inset:auto 0 0;z-index:20;margin-top:0 !important;}
.owner-nav .links{display:flex;gap:22px;align-items:center;}
.owner-nav .links a{font-size:.9rem;color:var(--ink-600);padding:6px 2px;border-bottom:2px solid transparent;}
.owner-nav .links a.active,.owner-nav .links a:hover{color:var(--pine-900);border-color:var(--teal-600);}
.bottom-tabs{display:none;}
@media (max-width:760px){
  .owner-nav{flex-wrap:wrap;gap:10px;padding:12px 18px;}
  .owner-nav .links{
    display:flex;order:3;width:100%;gap:16px;overflow-x:auto;padding:8px 0 2px;
    scrollbar-width:none;
  }
  .owner-nav .links::-webkit-scrollbar{display:none;}
  .owner-nav .links a{flex:0 0 auto;white-space:nowrap;}
  .bottom-tabs{display:none;}
  body:has(.owner-nav){padding-top:122px;}
}

/* ---------- Notification bell + profile dropdowns (owner header) ---------- */
.notif-wrap,.profile-wrap{position:relative;display:inline-flex;}
.notif-dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--coral-500);border:1.5px solid #fff;
}
.avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;line-height:0;}
.notif-dropdown,.profile-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);right:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);z-index:40;
}
.notif-dropdown.open,.profile-dropdown.open{display:block;}
.notif-dropdown{width:320px;max-width:80vw;}
.notif-dropdown-head{padding:12px 16px;font-weight:600;font-size:.88rem;border-bottom:1px solid var(--line);}
.notif-dropdown-list{max-height:320px;overflow-y:auto;}
.notif-item{display:block;padding:10px 16px;border-bottom:1px solid var(--line);font-size:.83rem;color:var(--ink-900);}
.notif-item:last-child{border-bottom:none;}
.notif-item .notif-title{font-weight:600;display:block;margin-bottom:2px;}
.notif-item .notif-msg{color:var(--ink-500);font-size:.78rem;}
.notif-dropdown-footer{
  display:block;text-align:center;padding:10px;font-size:.83rem;font-weight:600;
  color:var(--teal-600);border-top:1px solid var(--line);
}
.profile-dropdown{width:200px;padding:6px;}
.profile-dropdown a{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-size:.86rem;color:var(--ink-900);}
.profile-dropdown a:hover{background:var(--teal-050);color:var(--teal-600);}
.profile-dropdown .divider{height:1px;background:var(--line);margin:6px 0;}

/* ---------- DataTable (search, filter, reset, pagination) ---------- */
.dt-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.dt-toolbar .dt-search{flex:1;min-width:180px;max-width:320px;}
.dt-toolbar .dt-filter{max-width:200px;}
.dt-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:10px;}

/* ---------- Generic modal ---------- */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(22,51,44,.5);z-index:100;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal-box{background:#fff;border-radius:var(--radius-md);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:var(--shadow-pop);}
.record-modal-summary{padding:16px 18px;border-radius:12px;background:var(--teal-050);border:1px solid #cfe4de;margin-bottom:16px;}
.record-modal-summary .small{margin:0 0 4px;letter-spacing:.06em;text-transform:uppercase;}
.record-modal-summary h3{margin:0;color:var(--ink);}
.record-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.record-detail{border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:#fff;}
.record-detail.wide{grid-column:1/-1;}
.record-detail span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
.record-detail strong{display:block;color:var(--ink);font-size:.92rem;word-break:break-word;}
@media(max-width:520px){.record-detail-grid{grid-template-columns:1fr;}.record-detail.wide{grid-column:auto;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.88rem;font-weight:600;transition:.15s;white-space:nowrap;}
.btn-primary{background:var(--teal-600);color:#fff;}
.btn-primary:hover{background:var(--pine-800);}
.btn-secondary{background:#fff;border-color:var(--line-strong);color:var(--ink-900);}
.btn-secondary:hover{border-color:var(--teal-600);color:var(--teal-600);}
.btn-ghost{background:transparent;color:var(--ink-600);}
.btn-ghost:hover{color:var(--pine-900);}
.btn-danger{background:var(--coral-050);color:var(--coral-500);border-color:#F0CFC6;}
.btn-danger:hover{background:var(--coral-500);color:#fff;}
.btn-sm{padding:6px 12px;font-size:.78rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.icon-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--teal-050);color:var(--teal-600);border:none;}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:22px;}
.card-flush{padding:0;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.card-head h3{margin:0;}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---------- Stat tiles ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;}
.stat .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-500);margin-bottom:8px;}
.stat .value{font-family:var(--font-mono);font-size:1.7rem;color:var(--pine-900);font-weight:600;}
.stat .delta{font-size:.76rem;color:var(--teal-600);margin-top:4px;}
.stat.warn .value{color:var(--amber-500);}
.stat.alert .value{color:var(--coral-500);}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-900);margin-bottom:6px;}
.field .hint{font-size:.75rem;color:var(--ink-500);margin-top:5px;}
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=date],input[type=file],input[type=url],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.9rem;color:var(--ink-900);background:#fff;
}
textarea{resize:vertical;min-height:90px;}
input:focus,select:focus,textarea:focus{border-color:var(--teal-600);}
.password-wrap{position:relative;}
.password-wrap input{padding-right:42px;}
.password-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:8px;cursor:pointer;color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.password-toggle:hover{color:var(--teal-600);}
.password-toggle svg{width:18px;height:18px;}
.form-row{display:flex;gap:14px;}
.form-row .field{flex:1;}
.otp-row{display:flex;gap:8px;}
.otp-row input{width:44px;height:48px;text-align:center;font-family:var(--font-mono);font-size:1.1rem;}
.upload-box{border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);padding:22px;text-align:center;color:var(--ink-500);font-size:.85rem;background:var(--sand-100);}
.upload-box svg{width:26px;height:26px;margin:0 auto 8px;color:var(--teal-600);}
.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:7px 13px;border:1px solid var(--line-strong);border-radius:20px;font-size:.82rem;color:var(--ink-600);}
.chip.active{background:var(--teal-050);border-color:var(--teal-600);color:var(--teal-600);font-weight:600;}
.chip.disabled{opacity:.5;cursor:not-allowed;}
.error-box {
    display: none;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #F0CFC6;
    background: var(--coral-050);
    color: var(--coral-500);
    font-size: .85rem;
}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.87rem;}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);padding:10px 14px;border-bottom:1px solid var(--line);}
td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-900);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-teal{background:var(--teal-050);color:var(--teal-600);}
.badge-amber{background:var(--amber-050);color:var(--amber-500);}
.badge-coral{background:var(--coral-050);color:var(--coral-500);}
.badge-ink{background:var(--sand-100);color:var(--ink-500);}

/* ---------- Timeline (case history) ---------- */
.timeline{position:relative;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line);}
.timeline-item{position:relative;padding-bottom:26px;}
.timeline-item::before{content:"";position:absolute;left:-26px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--teal-600);border:3px solid var(--teal-050);}
.timeline-item .date{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-500);margin-bottom:4px;}

/* ---------- Misc ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:6px;}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--teal-050);}
.pet-avatar{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--sand-100);}
.muted{color:var(--ink-500);}
.small{font-size:.78rem;}
.center{text-align:center;}
.spread{display:flex;align-items:center;justify-content:space-between;}
.stack{display:flex;flex-direction:column;gap:14px;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.tab{padding:10px 4px;margin-right:22px;font-size:.87rem;color:var(--ink-500);border-bottom:2px solid transparent;font-weight:500;}
.tab.active{color:var(--pine-900);border-color:var(--teal-600);}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-500);}
.empty-state svg{width:44px;height:44px;color:var(--ink-300);margin:0 auto 14px;}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:440px;width:100%;padding:26px;box-shadow:var(--shadow-pop);}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.auth-visual{background:var(--pine-900);color:#DCEAE5;padding:48px;display:flex;flex-direction:column;justify-content:space-between;}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:32px;}
.auth-box{width:100%;max-width:380px;}
@media (max-width:860px){.auth-shell{grid-template-columns:1fr;}.auth-visual{display:none;}}
.qr-frame{width:220px;height:auto;border:2px solid var(--pine-900);border-radius:var(--radius-md);margin:0 auto;padding:14px;background:#fff;}
.qr-frame img{display:block;width:100%;height:auto;}

/* ---------- Responsive safety net ----------
   Many pages set explicit grid-template-columns inline (e.g. "1.4fr 1fr"
   two-column layouts). Inline styles win over normal CSS specificity, so
   this uses !important to guarantee every .grid still collapses to a
   single column on phones no matter how its columns were declared. */
@media (max-width:700px){
  .grid{grid-template-columns:1fr !important;}
  .form-row{flex-direction:column;gap:0;}
  .spread{flex-wrap:wrap;gap:10px;}
  .card{padding:16px;}
  .content{padding:14px;}
  h1{font-size:1.4rem;}
  .btn{padding:10px 14px;}
  table{font-size:.82rem;}
  th,td{padding:9px 10px;}
  .stat .value{font-size:1.35rem;}
}
@media (max-width:480px){
  .auth-form-side{padding:20px;}
  .chip-select{gap:6px;}
  .chip{padding:6px 10px;font-size:.78rem;}
  .tabs{gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
  .tab{margin-right:14px;white-space:nowrap;}
}
/* Comfortable tap targets on touch devices, regardless of screen size */
@media (pointer:coarse){
  .btn{min-height:40px;}
  .nav-link{padding:11px 10px;}
  input,select,textarea{font-size:16px;} /* prevents iOS auto-zoom on focus */
}

/* ---------- Alert / Confirmation Modal ---------- */
.alert-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(22,51,44,.35);
  z-index:1000;
  padding:20px;
}

.alert-modal{
  width:min(420px,100%);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-pop);
}

.alert-modal h2{
  margin-bottom:8px;
}

.alert-modal .btn-danger{
  background:var(--coral-050);
  color:var(--coral-500);
  border-color:#F0CFC6;
}

.alert-modal .btn-danger:hover{
  background:var(--coral-500);
  color:var(--white);
}