/* ═══════════════════════════════════════════════════════════
   components.css — Buttons, Cards, Forms, Tables, Badges …
   ═══════════════════════════════════════════════════════════ */

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.2rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border:2px solid transparent;cursor:pointer;
  transition:all var(--dur) var(--ease);white-space:nowrap
}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:.35rem .85rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.75rem;font-size:1rem}
.btn-xl{padding:1rem 2.25rem;font-size:1.05rem}

.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-dk);border-color:var(--teal-dk);transform:translateY(-1px);box-shadow:0 4px 14px rgba(31,122,110,.32)}
.btn-secondary{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn-secondary:hover{background:var(--amber-lt);border-color:var(--amber-lt);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff}
.btn-ghost{background:transparent;color:var(--ink-md);border-color:var(--cream-dk)}
.btn-ghost:hover{background:var(--cream-md);border-color:var(--cream-dk)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{filter:brightness(.88);transform:translateY(-1px)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}

/* ── CARDS ───────────────────────────────────────────────── */
.card{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--cream-dk);box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow var(--dur)}
.card-hover:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.card-body{padding:1.5rem}
.card-header{padding:1.1rem 1.5rem;border-bottom:1px solid var(--cream-dk);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.card-footer{padding:1rem 1.5rem;border-top:1px solid var(--cream-dk);background:var(--cream)}
.card-title{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--teal-dk)}
.card-sub{font-size:.82rem;color:var(--ink-lt);margin-top:.15rem}

/* stat card */
.stat-card{background:var(--white);border-radius:var(--r-lg);padding:1.4rem;border:1px solid var(--cream-dk);display:flex;align-items:flex-start;gap:1rem}
.stat-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.si-teal  {background:var(--teal-ghost)}
.si-amber {background:var(--amber-ghost)}
.si-green {background:rgba(30,132,73,.1)}
.si-red   {background:rgba(192,57,43,.1)}
.si-blue  {background:rgba(26,82,118,.1)}
.si-purple{background:rgba(142,68,173,.1)}
.stat-val{font-family:var(--ff-display);font-size:1.9rem;font-weight:700;line-height:1;color:var(--ink)}
.stat-label{font-size:.8rem;color:var(--ink-lt);margin-top:.2rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}

/* ── FORMS ───────────────────────────────────────────────── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.84rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;letter-spacing:.01em}
.form-control{
  width:100%;padding:.7rem 1rem;
  border:1.5px solid var(--cream-dk);border-radius:var(--r-md);
  background:var(--white);color:var(--ink);font-size:.95rem;
  outline:none;transition:border-color var(--dur),box-shadow var(--dur)
}
.form-control:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,122,110,.12)}
.form-control.is-error{border-color:var(--danger)}
.form-control::placeholder{color:var(--ink-lt)}
textarea.form-control{resize:vertical;min-height:90px}
select.form-control{appearance:none;cursor:pointer}
.form-hint{font-size:.78rem;color:var(--ink-lt);margin-top:.3rem}
.form-err{font-size:.78rem;color:var(--danger);margin-top:.3rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}

/* ── BADGES ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge-pending    {background:rgba(212,130,10,.14); color:var(--warning)}
.badge-confirmed  {background:rgba(26,82,118,.12);  color:var(--info)}
.badge-in_progress{background:rgba(31,122,110,.13); color:var(--teal)}
.badge-completed  {background:rgba(30,132,73,.13);  color:var(--success)}
.badge-cancelled  {background:rgba(192,57,43,.12);  color:var(--danger)}
.badge-admin      {background:var(--teal-dk);color:#fff}
.badge-owner      {background:var(--amber);color:#fff}
.badge-active     {background:rgba(30,132,73,.13);  color:var(--success)}
.badge-inactive   {background:rgba(192,57,43,.12);  color:var(--danger)}

/* type badges */
.badge-vaccination{background:rgba(26,82,118,.12);  color:var(--info)}
.badge-checkup    {background:rgba(30,132,73,.13);  color:var(--success)}
.badge-medication {background:rgba(142,68,173,.12); color:#8E44AD}
.badge-surgery    {background:rgba(192,57,43,.12);  color:var(--danger)}
.badge-allergy    {background:rgba(212,130,10,.14); color:var(--warning)}
.badge-other      {background:rgba(31,122,110,.13); color:var(--teal)}

/* ── TABLES ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--cream-dk)}
table{width:100%;border-collapse:collapse;background:var(--white);font-size:.88rem}
thead{background:var(--cream-md);border-bottom:1px solid var(--cream-dk)}
th{padding:.85rem 1.1rem;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-lt);white-space:nowrap}
td{padding:.9rem 1.1rem;border-bottom:1px solid var(--cream-md);color:var(--ink);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur)}
tbody tr:hover{background:var(--cream)}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(30,26,22,.55);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .18s var(--ease)}
.modal-box{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .22s var(--ease)}
.modal-x{position:absolute;top:1rem;right:1rem;width:30px;height:30px;border-radius:50%;background:var(--cream-md);color:var(--ink-lt);font-size:1rem;display:flex;align-items:center;justify-content:center;z-index:1;transition:background var(--dur)}
.modal-x:hover{background:var(--cream-dk);color:var(--ink)}
#modalContent{padding:1.75rem}
.modal-title{font-family:var(--ff-display);font-size:1.45rem;font-weight:700;color:var(--teal-dk);margin-bottom:1.4rem}

/* ── TOAST ───────────────────────────────────────────────── */
#toastStack{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:2000}
.toast{display:flex;align-items:center;gap:.75rem;background:var(--ink);color:var(--cream);padding:.8rem 1.2rem;border-radius:var(--r-lg);box-shadow:var(--sh-xl);max-width:360px;animation:slideUp .3s var(--ease);font-size:.88rem;border-left:4px solid var(--teal)}
.toast.success{border-left-color:var(--success)}
.toast.error  {border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
.toast-icon{font-size:1rem;flex-shrink:0}

/* ── TABS ────────────────────────────────────────────────── */
.tabs{display:flex;gap:3px;background:var(--cream-md);padding:4px;border-radius:var(--r-pill);width:fit-content;flex-wrap:wrap}
.tab-btn{padding:.4rem 1.1rem;border-radius:var(--r-pill);font-size:.85rem;font-weight:500;color:var(--ink-lt);cursor:pointer;transition:all var(--dur);background:none;border:none}
.tab-btn.active{background:var(--white);color:var(--teal);font-weight:700;box-shadow:var(--sh-sm)}

/* ── SPINNER / LOADING ───────────────────────────────────── */
.spinner{width:34px;height:34px;border:3px solid var(--cream-dk);border-top-color:var(--teal);border-radius:50%;animation:spin .75s linear infinite}
.spinner-sm{width:18px;height:18px;border-width:2px}
.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4rem 2rem;color:var(--ink-lt);font-size:.9rem}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty{text-align:center;padding:4rem 2rem;color:var(--ink-lt)}
.empty-icon{font-size:4rem;margin-bottom:1rem}
.empty h3{font-family:var(--ff-display);font-size:1.35rem;color:var(--ink);margin-bottom:.5rem}
.empty p{max-width:360px;margin:0 auto 1.5rem;font-size:.9rem}

/* ── SECTION HEADING ─────────────────────────────────────── */
.sec-head{text-align:center;margin-bottom:3rem}
.sec-eye{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin-bottom:.5rem}
.sec-head h2{font-family:var(--ff-display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;color:var(--ink);line-height:1.2}
.sec-head p{color:var(--ink-lt);margin-top:.5rem;max-width:480px;margin-left:auto;margin-right:auto}

/* ── SIDEBAR DASHBOARD ───────────────────────────────────── */
.dash-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--nav-h))}
.sidebar{background:var(--white);border-right:1px solid var(--cream-dk);padding:1.5rem 0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto}
.sidebar-section{margin-bottom:.5rem}
.sidebar-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-lt);padding:.5rem 1.25rem;margin-top:.5rem}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;color:var(--ink);font-size:.88rem;font-weight:500;border-left:3px solid transparent;cursor:pointer;transition:all var(--dur)}
.sidebar-link:hover{background:var(--cream);color:var(--teal)}
.sidebar-link.active{background:var(--teal-ghost);color:var(--teal);border-left-color:var(--teal);font-weight:600}
.sidebar-icon{width:18px;text-align:center;font-size:1rem}
.dash-content{padding:2rem;overflow-y:auto}
.dash-title{font-family:var(--ff-display);font-size:1.65rem;font-weight:700;color:var(--ink)}
.dash-sub{font-size:.88rem;color:var(--ink-lt);margin-top:.2rem;margin-bottom:1.75rem}

/* ── STAR RATING ─────────────────────────────────────────── */
.stars-row{display:flex;gap:4px;cursor:pointer}
.star-icon{font-size:1.6rem;color:var(--cream-dk);transition:color var(--dur),transform var(--dur)}
.star-icon.lit{color:#F0A500}
.star-icon:hover{transform:scale(1.2)}

/* ── FILTER CHIPS ────────────────────────────────────────── */
.chip-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{padding:.4rem 1rem;border:1.5px solid var(--cream-dk);border-radius:var(--r-pill);font-size:.82rem;font-weight:500;color:var(--ink-lt);cursor:pointer;background:var(--white);transition:all var(--dur)}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.active{background:var(--teal);border-color:var(--teal);color:#fff}

/* ── NOTIFICATION ITEMS ──────────────────────────────────── */
.notif-item{display:flex;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--cream-md);cursor:pointer;transition:background var(--dur)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--cream)}
.notif-item.unread{background:rgba(31,122,110,.04)}
.notif-orb{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.orb-appointment{background:rgba(26,82,118,.1)}
.orb-vaccine    {background:rgba(192,57,43,.1)}
.orb-pickup     {background:rgba(142,68,173,.1)}
.orb-system     {background:var(--teal-ghost)}
.orb-promo      {background:var(--amber-ghost)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:6px;flex-shrink:0}

/* ── TIME SLOTS ──────────────────────────────────────────── */
.slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.75rem}
.slot{padding:.55rem;border-radius:var(--r-md);border:1.5px solid var(--cream-dk);text-align:center;font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--dur);background:var(--white)}
.slot:hover:not(.slot-taken){border-color:var(--teal);color:var(--teal)}
.slot.slot-active{background:var(--teal);color:#fff;border-color:var(--teal)}
.slot.slot-taken{background:var(--cream-md);color:var(--ink-lt);cursor:not-allowed;text-decoration:line-through}
@media(max-width:500px){.slots-grid{grid-template-columns:repeat(3,1fr)}}

/* ── CALENDAR ────────────────────────────────────────────── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{text-align:center;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-lt);padding:.5rem 0}
.cal-cell{min-height:84px;border-radius:var(--r-md);border:1px solid var(--cream-md);padding:6px;background:var(--white);cursor:pointer;transition:all var(--dur);overflow:hidden}
.cal-cell:hover{border-color:var(--teal);box-shadow:var(--sh-sm)}
.cal-cell.other-mo{background:var(--cream);opacity:.55}
.cal-cell.today{border-color:var(--teal);background:rgba(31,122,110,.04)}
.cal-cell.has-events{border-color:var(--amber-lt)}
.cal-num{font-size:.8rem;font-weight:600;color:var(--ink-lt);margin-bottom:3px}
.cal-cell.today .cal-num{color:var(--teal);font-weight:800}
.cal-evt{font-size:.65rem;border-radius:3px;padding:1px 4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.evt-pending    {background:var(--warning)}
.evt-confirmed  {background:var(--info)}
.evt-in_progress{background:var(--teal)}
.evt-completed  {background:var(--success)}
@media(max-width:600px){.cal-cell{min-height:52px}.cal-evt{display:none}}

/* ── BAR CHART ───────────────────────────────────────────── */
.bar-chart{display:flex;flex-direction:column;gap:.75rem}
.bar-row{display:flex;align-items:center;gap:.85rem}
.bar-label{min-width:120px;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:10px;background:var(--cream-md);border-radius:var(--r-pill);overflow:hidden}
.bar-fill{height:100%;background:var(--teal);border-radius:var(--r-pill);transition:width 1s var(--ease)}
.bar-val{min-width:40px;text-align:right;font-size:.82rem;font-weight:600;color:var(--ink-lt)}

/* ── BOOKING STEP WIZARD ─────────────────────────────────── */
.step-bar{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2.5rem}
.step-item{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.step-num{width:36px;height:36px;border-radius:50%;border:2px solid var(--cream-dk);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--ink-lt);transition:all var(--dur)}
.step-item.active .step-num{background:var(--teal);border-color:var(--teal);color:#fff}
.step-item.done   .step-num{background:var(--success);border-color:var(--success);color:#fff}
.step-lbl{font-size:.72rem;font-weight:600;color:var(--ink-lt)}
.step-item.active .step-lbl,.step-item.done .step-lbl{color:var(--teal)}
.step-line{flex:1;height:2px;background:var(--cream-dk);min-width:28px;max-width:70px}
@media(max-width:500px){.step-lbl{display:none}.step-line{min-width:14px}}

/* ── SERVICE SELECT ROW ──────────────────────────────────── */
.svc-row{display:flex;align-items:center;gap:1rem;padding:1rem;border:1.5px solid var(--cream-dk);border-radius:var(--r-lg);cursor:pointer;transition:all var(--dur);background:var(--white)}
.svc-row:hover{border-color:var(--teal);box-shadow:var(--sh-sm)}
.svc-row.picked{border-color:var(--teal);background:rgba(31,122,110,.05)}

/* ── CAT CARDS ───────────────────────────────────────────── */
.cat-card{background:var(--white);border-radius:var(--r-xl);border:1px solid var(--cream-dk);overflow:hidden;transition:all var(--dur)}
.cat-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.cat-card.picked{border:2px solid var(--teal);box-shadow:0 0 0 3px rgba(31,122,110,.15)}
.cat-img-band{background:linear-gradient(135deg,var(--teal-dk),var(--teal-lt));padding:1.5rem;display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.cat-body{padding:1rem}
.cat-name{font-family:var(--ff-display);font-size:1.1rem;font-weight:700}
.cat-breed{font-size:.82rem;color:var(--ink-lt)}
.cat-meta{display:flex;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--cream-md);gap:.5rem}
.cat-meta-item{flex:1;text-align:center}
.cat-meta-val{font-weight:700;font-size:.9rem}
.cat-meta-key{font-size:.7rem;color:var(--ink-lt);text-transform:uppercase;letter-spacing:.04em}
.cat-actions{padding:.85rem 1rem;border-top:1px solid var(--cream-md);display:flex;gap:.5rem}

/* ── BOOKING CARD ────────────────────────────────────────── */
.bk-card{display:flex;gap:1rem;padding:1.1rem;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--cream-dk);transition:box-shadow var(--dur)}
.bk-card:hover{box-shadow:var(--sh-md)}
.bk-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream-md);border-radius:var(--r-md);padding:.75rem;min-width:62px;text-align:center}
.bk-day{font-size:1.4rem;font-weight:800;color:var(--teal);line-height:1}
.bk-mon{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-lt)}
.bk-yr {font-size:.65rem;color:var(--ink-lt)}
.bk-info{flex:1}
.bk-svc{font-weight:600;font-size:.97rem}
.bk-meta{font-size:.83rem;color:var(--ink-lt);margin-top:.15rem}
.bk-actions{display:flex;flex-direction:column;gap:.35rem;justify-content:center;flex-shrink:0}

/* ── CUSTOMER CARD ───────────────────────────────────────── */
.cust-card{background:var(--white);border-radius:var(--r-xl);border:1px solid var(--cream-dk);padding:1.4rem;transition:all var(--dur)}
.cust-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.cust-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-lt));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0}
.cust-stats{display:flex;gap:.5rem;margin-top:.85rem}
.cust-stat{flex:1;text-align:center;background:var(--cream);border-radius:var(--r-md);padding:.5rem}
.cust-stat-val{font-weight:700;color:var(--teal);font-size:.97rem}
.cust-stat-key{font-size:.68rem;color:var(--ink-lt);text-transform:uppercase;letter-spacing:.04em}

/* ── MEDICAL RECORD ──────────────────────────────────────── */
.med-row{display:flex;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--cream-md);align-items:flex-start}
.med-row:last-child{border-bottom:none}