/* VetCare — derived from the prototype stylesheet.
   Palette, typography, spacing and component shapes preserved verbatim;
   responsive behaviour, states and a11y affordances extended. */

:root{
  --brand-dark:#173f3b;
  --brand:#28665e;
  --brand-mint:#8fe0c4;
  --brand-soft:#edf3f2;
  --brand-ink:#245b54;
  --bg:#f5f7fb;
  --ink:#172033;
  --muted:#748096;
  --line:#e5e9f0;
  --line-soft:#edf0f4;
  --field-line:#dfe4ec;
  --ok-bg:#e9f6f1;   --ok-fg:#1e765d;
  --warn-bg:#fff4dd; --warn-fg:#a76b00;
  --red-bg:#fdeaea;  --red-fg:#a83c3c;
  --sidebar-w:245px;
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--brand-dark);color:#fff;padding:22px 14px;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:60;transition:transform .22s ease}
.brand{font-size:22px;font-weight:800;padding:8px 12px 24px;color:#fff;display:block}
.brand:hover{text-decoration:none}
.brand span{color:var(--brand-mint)}
.nav{display:flex;flex-direction:column;gap:5px}
.nav a,.nav button{border:0;background:transparent;color:#d9eeea;text-align:left;padding:11px 12px;border-radius:10px;font-size:13px;cursor:pointer;display:block;width:100%;font-family:inherit;text-decoration:none}
.nav a:hover,.nav a.active,.nav button:hover,.nav button.active{background:var(--brand);color:#fff;text-decoration:none}
.nav .navgroup{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#7fa9a2;padding:14px 12px 4px}

.main{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));padding:25px 30px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.top h1{margin:0;font-size:25px}
.doctor{background:#fff;border:1px solid #e4e8ef;padding:9px 14px;border-radius:10px;font-size:13px}

/* user menu */
.usermenu{position:relative}
.usermenu>button{background:#fff;border:1px solid #e4e8ef;padding:9px 14px;border-radius:10px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink)}
.usermenu .dropdown{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;min-width:190px;box-shadow:0 12px 30px rgba(20,40,50,.13);overflow:hidden;z-index:50}
.usermenu.open .dropdown{display:block}
.usermenu .dropdown a,.usermenu .dropdown button{display:block;width:100%;text-align:left;padding:11px 14px;font-size:13px;background:#fff;border:0;cursor:pointer;font-family:inherit;color:var(--ink)}
.usermenu .dropdown a:hover,.usermenu .dropdown button:hover{background:var(--brand-soft);text-decoration:none}
.usermenu .dropdown .who{padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.usermenu .dropdown .who b{display:block;font-size:13px}
.usermenu .dropdown .who small{color:var(--muted)}

/* hamburger — mobile only */
.hamburger{display:none;border:1px solid #e4e8ef;background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;font-size:16px;line-height:1;color:var(--ink)}
.scrim{display:none;position:fixed;inset:0;background:rgba(15,30,35,.45);z-index:55}
.scrim.show{display:block}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:12px;color:var(--muted);margin:-10px 0 16px}
.crumb a{color:var(--muted)}
.crumb span{margin:0 6px;opacity:.6}

/* ---------- Cards / panels ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.card{padding:18px}
.card.linked{display:block;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.card.linked:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,63,59,.09);text-decoration:none}
.label{font-size:12px;color:#758096}
.num{font-size:27px;font-weight:800;margin-top:7px}
.num.sm{font-size:21px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}
.grid.even{grid-template-columns:1fr 1fr}
.panel{padding:20px}
.panel h3{margin:0 0 15px;font-size:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.panel-head h3{margin:0}
.section{margin-top:18px}
.muted{color:var(--muted);font-size:13px}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:11px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.table th{font-weight:600;color:#5c6779;white-space:nowrap}
.table tbody tr:hover{background:#fafbfd}
.table td.right,.table th.right{text-align:right}
.table .rowactions{display:flex;gap:6px;flex-wrap:wrap}
.table a.sort{color:#5c6779;white-space:nowrap}
.table a.sort .caret{opacity:.45;font-size:10px}
.table a.sort.on{color:var(--brand);font-weight:700}
.table a.sort.on .caret{opacity:1}

.badge{padding:5px 8px;border-radius:20px;font-size:11px;background:var(--ok-bg);color:var(--ok-fg);display:inline-block;white-space:nowrap}
.badge.warn{background:var(--warn-bg);color:var(--warn-fg)}
.badge.red{background:var(--red-bg);color:var(--red-fg)}
.badge.grey{background:#eef1f5;color:#5c6779}
.badge.blue{background:#e8f1fd;color:#2a5c9c}

/* empty state */
.empty{text-align:center;padding:38px 18px;color:var(--muted)}
.empty .ico{font-size:32px;display:block;margin-bottom:10px;opacity:.65}
.empty b{display:block;color:var(--ink);margin-bottom:5px;font-size:14px}

/* ---------- Buttons ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:17px;align-items:center}
.actions.tight{margin-bottom:0}
.btn{border:0;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;display:inline-block;text-align:center;line-height:1.3;transition:filter .15s ease,opacity .15s ease}
.btn:hover{filter:brightness(.95);text-decoration:none}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn.sm{padding:7px 10px;font-size:12px}
.primary{background:var(--brand);color:#fff}
.light{background:var(--brand-soft);color:var(--brand-ink)}
.danger{background:#faeaea;color:#9c3636}
.ghost{background:transparent;color:var(--brand-ink);border:1px solid var(--field-line)}
.btn.block{display:block;width:100%}

.search{padding:10px 13px;border:1px solid var(--field-line);border-radius:9px;width:280px;max-width:100%;font-family:inherit;font-size:13px;background:#fff;color:var(--ink)}

/* ---------- Forms ---------- */
.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.formgrid.two{grid-template-columns:repeat(2,1fr)}
.formgrid.one{grid-template-columns:1fr}
.field label{display:block;font-size:12px;color:#69748a;margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:10px;border:1px solid var(--field-line);border-radius:8px;background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(40,102,94,.12)}
.field textarea{min-height:80px;resize:vertical}
.field input[disabled],.field select[disabled],.field textarea[disabled],.field input[readonly]{background:#f4f6f9;color:#67707f;cursor:not-allowed}
.field .req{color:#b3453f}
.field .hint{font-size:11px;color:var(--muted);margin-top:5px}
.field .err{font-size:11px;color:#b3453f;margin-top:5px;display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d99a97;background:#fffafa}
.field.check{display:flex;align-items:center;gap:8px}
.field.check input{width:auto;padding:0}
.field.check label{margin:0}
.full{grid-column:1/-1}
fieldset{border:0;padding:0;margin:0}
.subhead{font-size:13px;font-weight:700;color:var(--brand-ink);margin:20px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}

/* file input + preview */
.filebox{border:1px dashed var(--field-line);border-radius:10px;padding:14px;background:#fbfcfe}
.filepreview{margin-top:10px;display:flex;align-items:center;gap:12px}
.filepreview img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ---------- Timeline ---------- */
.timeline{border-left:2px solid #dbe8e5;padding-left:17px}
.event{margin-bottom:16px;position:relative}
.event:before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.event b{display:block}
.event small{color:#7a8597}

/* ---------- Stepper ---------- */
.stepper{display:flex;gap:8px;margin:15px 0 22px;flex-wrap:wrap}
.step{padding:8px 12px;background:#eef3f3;border-radius:20px;font-size:12px;color:#67707f}
.step.done{background:#dff3eb;color:#1d765c}
.step.current{background:var(--brand);color:#fff}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(15,30,35,.45);align-items:center;justify-content:center;z-index:70;padding:16px}
.modal.show{display:flex}
.modalbox{background:#fff;border-radius:15px;width:min(780px,92vw);max-height:90vh;overflow:auto;padding:24px}
.modalbox.sm{width:min(480px,92vw)}
.close{float:right;border:0;background:#eef2f5;border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink)}
.modalbox h2{margin:0 0 18px;font-size:19px}

/* ---------- Alerts ---------- */
.alert{padding:12px 15px;border-radius:11px;font-size:13px;margin-bottom:16px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.alert.success{background:var(--ok-bg);color:var(--ok-fg);border-color:#c6e7da}
.alert.error{background:var(--red-bg);color:var(--red-fg);border-color:#f1cfcf}
.alert.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:#f0dcb4}
.alert.info{background:#e8f1fd;color:#2a5c9c;border-color:#cfe0f6}
.alert ul{margin:6px 0 0;padding-left:18px}
.alert .x{margin-left:auto;background:transparent;border:0;cursor:pointer;color:inherit;font-size:15px;opacity:.6;padding:0 2px}
.alert .x:hover{opacity:1}

/* toast */
.toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px;max-width:min(340px,92vw)}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:11px;padding:12px 15px;font-size:13px;box-shadow:0 10px 26px rgba(20,40,50,.14);animation:slidein .22s ease}
.toast.error{border-left-color:#b3453f}
.toast.warn{border-left-color:#a76b00}
@keyframes slidein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:5px;flex-wrap:wrap;list-style:none;padding:0;margin:18px 0 0;font-size:13px;align-items:center}
.pagination li a,.pagination li span{display:block;padding:7px 11px;border-radius:8px;border:1px solid var(--field-line);background:#fff;color:var(--ink)}
.pagination li a:hover{background:var(--brand-soft);text-decoration:none}
.pagination li.active span{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination li.disabled span{opacity:.45}
.pagemeta{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- Loading ---------- */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:7px}
.spinner.dark{border-color:rgba(40,102,94,.3);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}
.is-loading{position:relative;opacity:.6;pointer-events:none}

/* ---------- Auth ---------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(150deg,#173f3b 0%,#28665e 58%,#3d8378 100%)}
.authbox{background:#fff;border-radius:18px;width:min(430px,100%);padding:32px;box-shadow:0 24px 60px rgba(10,35,32,.28)}
.authbox .brand{color:var(--brand-dark);padding:0 0 6px;font-size:26px;text-align:center}
.authbox .brand span{color:var(--brand)}
.authbox .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 24px}
.authbox .field{margin-bottom:15px}
.authbox .foot{text-align:center;font-size:13px;margin-top:18px;color:var(--muted)}
.demo{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:15px;font-size:12px;color:var(--muted)}
.demo b{color:var(--ink)}
.demo code{background:var(--brand-soft);padding:2px 6px;border-radius:5px;color:var(--brand-ink);font-size:11px}

/* ---------- Print ---------- */
@media print{
  .sidebar,.top .usermenu,.hamburger,.actions,.nav,.scrim,.toasts,.pagination,.crumb{display:none!important}
  .main{margin:0;width:100%;padding:0}
  .panel,.card{border:0;box-shadow:none}
  body{background:#fff}
  .table th,.table td{border-bottom:1px solid #ccc}
  a[href]:after{content:""}
}

/* ---------- Responsive ---------- */
@media(max-width:1200px){
  .cards{grid-template-columns:repeat(4,1fr);gap:12px}
  .num{font-size:24px}
}
@media(max-width:1024px){
  .grid{grid-template-columns:1fr}
  .grid.even{grid-template-columns:1fr}
}
@media(max-width:900px){
  .sidebar{width:190px}
  .main{margin-left:190px;width:calc(100% - 190px);padding:20px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%);width:245px;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sidebar.open{transform:none}
  .main{margin-left:0;width:100%;padding:16px}
  .hamburger{display:inline-block}
  .top{margin-bottom:18px}
  .top h1{font-size:21px}
  .topleft{display:flex;align-items:center;gap:12px}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:14px}
  .num{font-size:20px}
  .label{font-size:11px}
  .formgrid,.formgrid.two{grid-template-columns:1fr}
  .panel{padding:15px}
  .search{width:100%}
  .actions .btn{flex:1 1 auto}
  .modalbox{padding:18px;border-radius:13px}
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
}
@media(max-width:380px){
  .cards{grid-template-columns:1fr}
  .main{padding:12px}
  .top h1{font-size:19px}
}