/* ─── Veterinary Clinic — Custom Theme ──────────────────────────────────────── */

:root {
  --vc-green:       #1e7e34;
  --vc-green-light: #28a745;
  --vc-green-pale:  #d4edda;
  --vc-teal:        #17a2b8;
  --vc-bg:          #f4f9f6;
}

html { height: 100%; }
body {
  background: var(--vc-bg);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ─── Links, tabs & form controls (green theme, not Bootstrap's default blue) ── */
a {
  color: var(--vc-green);
}
a:hover,
a:focus {
  color: var(--vc-green-light);
}

/* Inactive nav-tabs/nav-pills links (e.g. doctor/cabinet.php tabs) — Bootstrap
   defaults these to link-blue; the active state is already dark-on-white via
   Bootstrap's own more specific .nav-tabs .nav-link.active rule, untouched here. */
.nav-link {
  color: var(--vc-green);
}
.nav-link:hover,
.nav-link:focus {
  color: var(--vc-green-light);
}

/* Bootstrap renders checked checkboxes/radios via appearance:none + an SVG
   background-image tied to --bs-primary (blue) — accent-color alone can't
   reach those, so override the Bootstrap variables/state directly too. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--vc-green);
}
.form-check-input:checked {
  background-color: var(--vc-green);
  border-color: var(--vc-green);
}
.form-check-input:focus {
  border-color: var(--vc-green-light);
  box-shadow: 0 0 0 .25rem rgba(30, 126, 52, .25);
}

/* ─── Navbar ─────────────────────────────────────────────────────────────────── */
.vc-navbar {
  background: linear-gradient(135deg, var(--vc-green) 0%, #155724 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* The global `a`/`.nav-link` green-text rules above are meant for the white
   page body, not this already-green bar — on a green background they read as
   near-invisible dark-on-dark. Keep navbar text white/light, matching
   Bootstrap's own .navbar-dark default that those rules had overridden. */
.vc-navbar .nav-link,
.vc-navbar .navbar-brand {
  color: #fff;
}
/* :not(.btn) — a plain nav-link should dim slightly on hover, but a few nav
   items (e.g. the "Регистрация" outline button) are ALSO .btn-outline-light,
   whose own hover state swaps to a white background with dark text; without
   this exclusion the rule above out-specifies Bootstrap's button hover color
   and leaves white text on that white background. */
.vc-navbar .nav-link:not(.btn):hover,
.vc-navbar .nav-link:not(.btn):focus,
.vc-navbar .navbar-brand:hover,
.vc-navbar .navbar-brand:focus {
  color: rgba(255, 255, 255, .85);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.vc-footer {
  background: #e8f5e9;
  border-top: 1px solid #c3e6cb;
  margin-top: auto;
}

/* ─── Cookie consent banner ──────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  background: #212529;
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
}
.cookie-banner a { color: #8ee6a8; }

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }

.card-header {
  background: var(--vc-green);
  color: #fff;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--vc-green-light);
  border-color: var(--vc-green-light);
}
.btn-primary:hover {
  background-color: var(--vc-green);
  border-color: var(--vc-green);
}
.btn-outline-primary {
  color: var(--vc-green);
  border-color: var(--vc-green);
}
.btn-outline-primary:hover {
  background-color: var(--vc-green);
  border-color: var(--vc-green);
}

/* ─── Doctor cards on listing ────────────────────────────────────────────────── */
.doctor-card { cursor: pointer; transition: box-shadow .15s, background-color .15s; }
.doctor-card .badge-spec {
  background: var(--vc-green-pale);
  color: var(--vc-green);
  font-size: .75rem;
  padding: .3em .7em;
  border-radius: 20px;
}
.doctor-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* ─── Selected doctor / pet card (wizard) ────────────────────────────────────── */
.doctor-card.border-success,
[data-pet-card].border-success {
  background: var(--vc-green-pale);
  border-color: var(--vc-green) !important;
  box-shadow: 0 0 0 2px var(--vc-green);
}

/* ─── Booking mode cards (step 0) ─────────────────────────────────────────────── */
.mode-card { transition: box-shadow .2s, transform .15s, border-color .15s; }
.mode-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  transform: translateY(-2px);
  border-color: var(--vc-green);
}

/* ─── Booking wizard ─────────────────────────────────────────────────────────── */
.wizard-step { display: none; }
.wizard-step.active { display: block; }

.step-indicator .step {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 20px;
  font-size: .85rem;
  color: #6c757d;
}
.step-indicator .step.done  { color: var(--vc-green); }
.step-indicator .step.active { color: var(--vc-green); font-weight: 700; }

.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  border: 2px solid currentColor;
  flex-shrink: 0;
}

/* ─── Time slots grid ────────────────────────────────────────────────────────── */
.slot-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot-btn {
  min-width: 70px;
  font-size: .9rem;
  border-radius: 8px;
  border: 2px solid var(--vc-green-light);
  background: #fff;
  color: var(--vc-green);
  padding: .35rem .6rem;
  cursor: pointer;
  transition: all .15s;
}
.slot-btn:hover  { background: var(--vc-green-light); color: #fff; }
.slot-btn.selected { background: var(--vc-green); color: #fff; border-color: var(--vc-green); }
.slot-btn.taken  { border-color: #dee2e6; color: #adb5bd; cursor: not-allowed; background: #f8f9fa; }

/* ─── Calendar ───────────────────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  /* min-width:0 overrides the grid item's default auto min-width, which
     otherwise floors each column at its widest un-wrapped content (e.g. a
     long doctor name in .duty-bar) regardless of that content's own
     overflow:hidden — without this, columns come out uneven and the grid
     can overflow its container. */
  min-width: 0;
  text-align: center;
  padding: .45rem .2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  border: 2px solid transparent;
  transition: all .15s;
}
.cal-day:hover        { border-color: var(--vc-green-light); }
.cal-day.working      { background: var(--vc-green-pale); position: relative; }
.cal-day.working-night { background: linear-gradient(135deg, var(--vc-green-pale) 60%, rgba(30,41,59,.12) 100%); }
.cal-day-moon         { position: absolute; top: 1px; right: 2px; font-size: .6rem; }
.cal-day.selected     { background: var(--vc-green); color: #fff; }
.cal-day.weekend      { background: #eef1f4; }
.cal-day.today        { border-color: var(--vc-green-light); font-weight: 700; box-shadow: inset 0 3px 0 var(--vc-green-light); }
.cal-day.past         { color: #ccc; cursor: default; pointer-events: none; }
.cal-day.empty        { pointer-events: none; }

/* Weekday header row: MUST share the exact same grid-template-columns/gap as
   .cal-grid below it, or the two rows drift apart column-by-column (flexbox's
   equal-width distribution doesn't match grid's gap-aware track sizing) —
   by Sunday the drift was enough to misalign labels and clip the last column. */
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: .25rem;
}
.cal-header-day { text-align: center; font-size: .75rem; font-weight: 700; color: #6c757d; padding: .2rem; }
.cal-header-day.weekend { color: var(--vc-teal); }

/* ─── Duty-planning calendar (admin & doctor) ───────────────────────────────── */
.duty-cal-grid { min-height: 480px; align-items: start; }
.duty-cal-grid .cal-day.empty { background: transparent; }
.duty-cal-day {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-height: 96px;
  padding: .3rem;
  vertical-align: top;
  cursor: pointer;
}
.duty-cal-day.readonly { cursor: default; }
.duty-cal-daynum { font-size: .8rem; font-weight: 600; color: #555; }
.duty-cal-day.weekend { background: #eef1f4; }
.duty-cal-day.today { box-shadow: inset 0 3px 0 var(--vc-green); }
.duty-cal-day.today .duty-cal-daynum { color: var(--vc-green); }
.duty-cal-day.vacation { background: #f8d7da; }

/* ─── Weekly-schedule calendar (admin/schedules.php) ────────────────────────── */
.duty-cal-day.sched-work   { background: var(--vc-green-pale); }
.duty-cal-day.sched-custom { background: #fff3cd; }
.sched-cal-hours { font-size: .72rem; color: #495057; margin-top: .2rem; }
.sched-cal-reason { font-size: .68rem; color: #6c757d; font-style: italic; }
.sched-legend-swatch { width: .9rem; height: .9rem; border-radius: 4px; border: 1px solid #dee2e6; vertical-align: -2px; }
.sched-legend-swatch.sched-work   { background: var(--vc-green-pale); }
.sched-legend-swatch.sched-custom { background: #fff3cd; }
.sched-legend-swatch.vacation     { background: #f8d7da; }

/* Full-width bars, stacked, height proportional to clinic capacity — a
   single doctor at capacity=1 fills the whole cell; fewer doctors than
   capacity leaves visible blank headroom below their bar(s). */
.duty-bars {
  height: 56px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: .25rem;
  overflow: hidden;
}
.duty-bar {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 3px;
  padding: 0 .3rem;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.duty-bar--night { box-shadow: inset 0 0 0 2px #1e293b; }
.duty-bar-moon { margin-left: .25rem; font-size: .7rem; flex: none; }

/* Old small circular chips — still used by the read-only doctor/my_duties.php calendar. */
.duty-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .25rem; }
.duty-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-size: .65rem; font-weight: 700;
}
.duty-chip--night { box-shadow: 0 0 0 2px #1e293b; }
.duty-chip-moon {
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: .55rem;
  line-height: 1;
  background: #fff;
  border-radius: 50%;
  padding: 0 1px;
}
.duty-chip-more {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; color: #6c757d; padding: 0 .3rem;
}

/* ─── Duty-planning paintbrush ───────────────────────────────────────────────── */
.doctor-swatch.active {
  background: var(--vc-green-pale);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vc-green);
}
#dutyCalGrid.paint-mode .duty-cal-day { cursor: crosshair; }
#dutyCalGrid.paint-mode .duty-cal-day:hover { border-color: var(--vc-green); }
.duty-cal-day { user-select: none; }
.duty-cap-warn { display: none; color: #b45309; font-size: .75rem; margin-left: .25rem; }
.duty-cal-day.over-capacity { background: #fff8ec; }
.duty-cal-day.over-capacity .duty-cap-warn { display: inline; }

/* ─── Live queue (unexpected walk-ins, see assets/live_queue.js) ─────────────── */
.live-queue-strip {
  border: 1px solid #f5c26b;
  background: #fff8ec;
  border-radius: 8px;
}
.live-queue-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .5rem .25rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.live-queue-item:last-child { border-bottom: none; }

/* ─── Rich-text legal document rendering (register/footer/admin previews) ─────── */
.legal-doc-preview p, .legal-doc-preview ul, .legal-doc-preview ol { margin-bottom: .75rem; }
.legal-doc-preview p:last-child { margin-bottom: 0; }
.legal-doc-preview blockquote { border-left: 3px solid var(--vc-green-light); padding-left: .75rem; color: #555; }

/* ─── Client shop item cards ─────────────────────────────────────────────────── */
/* Title and description get a fixed line-clamped height regardless of actual
   text length, so the price/availability lines below them land at the same
   vertical offset on every card in a row instead of "jumping" around. */
.shop-item-title {
  min-height: 2.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-item-desc {
  min-height: 2.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-item-price, .shop-item-badge { min-height: 1.5rem; }

/* ─── Appointment status badges ──────────────────────────────────────────────── */
.badge-active    { background: var(--vc-green-pale); color: var(--vc-green); }
.badge-cancelled { background: #f8d7da; color: #721c24; }
.badge-completed { background: #d1ecf1; color: #0c5460; }

/* ─── Patient avatar circle ──────────────────────────────────────────────────── */
.pet-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--vc-green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.pet-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  background: var(--vc-green-pale);
  flex-shrink: 0;
}
.avatar-clickable { cursor: pointer; transition: box-shadow .15s; }
.avatar-clickable:hover { box-shadow: 0 0 0 3px var(--vc-green-light); }

/* Marks a deceased pet wherever its name appears — see includes/avatars.php's
   deceasedRibbonHtml() / assets/pet_info_modal.js's JS twin. */
.deceased-ribbon { display: inline-flex; vertical-align: middle; margin-left: .35rem; cursor: help; }

/* ─── Tables ─────────────────────────────────────────────────────────────────── */
.table th { background: #f0f7f0; color: var(--vc-green); font-weight: 600; }
.table-hover tbody tr:hover { background: #f0faf0; }

/* ─── Auth forms ─────────────────────────────────────────────────────────────── */
.auth-card {
  max-width: 420px;
  margin: 3rem auto;
}

/* ─── Admin sidebar ──────────────────────────────────────────────────────────── */
.admin-sidebar .nav-link {
  color: #333;
  border-radius: 8px;
  margin-bottom: 2px;
  padding: .55rem 1rem;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background: var(--vc-green-pale);
  color: var(--vc-green);
}
.admin-sidebar .nav-link i { margin-right: .5rem; }

/* ─── Search / filter sidebar ───────────────────────────────────────────────── */
.search-sidebar {
  position: sticky;
  top: 1rem;
}

/* ── Doctor cards (search page) ─────────────────────────────────────────────── */
.doctor-card2 {
  transition: box-shadow .2s, transform .15s;
}
.doctor-card2:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  transform: translateY(-2px);
}

/* ── Schedule chips inside doctor card ──────────────────────────────────────── */
.sched-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-height: 1.8rem;
}
.sched-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .2em .55em;
  border-radius: 20px;
  background: #f0faf0;
  color: var(--vc-green);
  border: 1px solid #c3e6cb;
  white-space: nowrap;
}
.sched-chip--hl {
  background: var(--vc-green);
  color: #fff;
  border-color: var(--vc-green);
}
.sched-time {
  font-weight: 400;
  opacity: .85;
}

/* ── Day-of-week quick buttons ──────────────────────────────────────────────── */
.dow-btn {
  padding: .2rem .5rem;
  font-size: .78rem;
  min-width: 2.1rem;
}
.dow-btn.btn-success { color: #fff; }

/* ─── Doctor availability grid (Outlook-style) ───────────────────────────────── */
/* NOTE: row heights below (52px / 1248px) must match HOUR_PX in assets/search.js */
.sched-wrap {
  overflow: hidden;
}
.sched-scroll {
  overflow: auto;
  max-height: 70vh;
  min-height: 420px;
}
.sched-grid {
  display: grid;
  position: relative;
}

.sched-corner {
  position: sticky;
  top: 0; left: 0; z-index: 3;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
}

.sched-doc-header {
  position: sticky;
  top: 0; z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #f1f3f5;
  padding: .6rem .7rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sched-doc-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sched-doc-avatar--icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--vc-green-pale);
  color: var(--vc-green);
  font-size: 1rem;
}
.sched-doc-info { flex: 1 1 auto; min-width: 0; }
.sched-doc-name {
  font-weight: 600; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-doc-spec {
  font-size: .72rem; color: #6c757d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-book-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--vc-green-pale);
  color: var(--vc-green);
  text-decoration: none;
  font-size: .85rem;
  transition: background .15s, color .15s;
}
.sched-book-btn:hover { background: var(--vc-green); color: #fff; }

.sched-axis-body {
  position: sticky;
  left: 0; z-index: 1;
  background: #fff;
  border-right: 1px solid #e9ecef;
  height: 1248px; /* 24 * 52px */
}
.sched-hour-label {
  position: absolute;
  left: 0; right: 4px;
  transform: translateY(-50%);
  font-size: .68rem;
  color: #adb5bd;
  text-align: right;
  padding-right: 6px;
}
.sched-now-dot {
  position: absolute;
  right: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e03131;
  transform: translateY(-50%);
}

.sched-doc-body {
  position: relative;
  height: 1248px; /* 24 * 52px */
  background-image: repeating-linear-gradient(to bottom, #eef0f2 0, #eef0f2 1px, transparent 1px, transparent 52px);
  border-right: 1px solid #f1f3f5;
  cursor: pointer;
}

.sched-block {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 4px;
  overflow: hidden;
}
.sched-block--off {
  background: rgba(0, 0, 0, .045);
  pointer-events: none;
}
.sched-block--night {
  background: rgba(30, 41, 59, .08);
  pointer-events: none;
  z-index: 0;
}
.sched-night-icon {
  position: absolute;
  top: 2px; right: 3px;
  font-size: .8rem;
  opacity: .7;
}
.sched-block--fullday {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f8f9fa;
  color: #adb5bd;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
}
.sched-block--busy {
  background: var(--vc-green-light);
  color: #fff;
  padding: 2px 5px;
  font-size: .68rem;
  line-height: 1.15;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
/* Pending bookings (admin only) — dashed border + accent stripe shows who
   booked it; both look identical to .sched-block--busy again once confirmed. */
.sched-block--pending-client,
.sched-block--pending-admin {
  background: repeating-linear-gradient(
    135deg, var(--vc-green-light) 0 8px, #2fae55 8px 16px
  );
  box-shadow: inset 3px 0 0 #17a2b8, inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.sched-block--pending-admin {
  box-shadow: inset 3px 0 0 #6c757d, inset 0 0 0 1px rgba(0, 0, 0, .08);
}
/* Pending bookings on the doctor's own calendar — same striped cue, no
   client/admin distinction (the doctor just needs to notice it's unconfirmed). */
.sched-block--pending {
  background: repeating-linear-gradient(
    135deg, var(--vc-green-light) 0 8px, #2fae55 8px 16px
  );
  box-shadow: inset 3px 0 0 #17a2b8, inset 0 0 0 1px rgba(0, 0, 0, .08);
}
/* Client physically checked in and waiting — a blinking dot draws the eye
   without needing a whole different block color (the appointment is still
   fundamentally "busy", just with one extra fact worth noticing at a glance). */
.sched-block--attended {
  box-shadow: inset 3px 0 0 var(--vc-teal), inset 0 0 0 1px rgba(0, 0, 0, .08);
}
@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
.led-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0dcaf0;
  box-shadow: 0 0 3px #0dcaf0;
  margin-right: 3px;
  vertical-align: middle;
  animation: led-blink 1.2s ease-in-out infinite;
}
.led-dot--inline {
  width: 7px;
  height: 7px;
  margin-right: 4px;
}
.sched-block--break {
  background: #f5c26b;
  color: #6b4a10;
  padding: 2px 5px;
  font-size: .68rem;
  line-height: 1.15;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.sched-busy-line1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-busy-line2 { opacity: .9; }

.sched-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #e03131;
  z-index: 1;
}

.sched-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem;
}

.sched-legend { display: flex; gap: .9rem; flex-wrap: wrap; }
.sched-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: #6c757d; }
.sched-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.sched-swatch--free  { background: #fff; border: 1px solid #dee2e6; }
.sched-swatch--busy  { background: var(--vc-green-light); }
.sched-swatch--break { background: #f5c26b; }
.sched-swatch--off   { background: rgba(0, 0, 0, .08); }
.sched-swatch--night { background: rgba(30, 41, 59, .18); }
.sched-swatch--pending {
  background: repeating-linear-gradient(135deg, var(--vc-green-light) 0 4px, #2fae55 4px 8px);
}

@media (max-width: 991px) {
  .sched-legend { display: none; }
}

/* ─── Slot click context menu ─────────────────────────────────────────────────── */
.sched-ctx-menu {
  position: fixed;
  z-index: 1060;
  min-width: 200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  padding: .4rem;
  font-size: .85rem;
}
.sched-ctx-header {
  padding: .4rem .6rem .5rem;
  border-bottom: 1px solid #f1f3f5;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.sched-ctx-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: .5rem .6rem;
  border-radius: 6px;
  color: #212529;
  cursor: pointer;
}
.sched-ctx-item:hover { background: var(--vc-green-pale); color: var(--vc-green); }
.sched-ctx-item--danger { color: #c0392b; }
.sched-ctx-item--danger:hover { background: #f8d7da; color: #842029; }

/* ─── Drag-and-drop sortable lists (SortableJS) ──────────────────────────────── */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .35; background: var(--vc-green-pale); }
.sortable-chosen td { background: #f0faf0; }

/* ─── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .slot-btn { min-width: 60px; font-size: .8rem; }
  .cal-day  { padding: .3rem .1rem; font-size: .8rem; }
}
@media (max-width: 991px) {
  .search-sidebar { position: static; }
}

/* ─── Internal chat ──────────────────────────────────────────────────────────── */
/* flex-wrap: nowrap overrides Bootstrap .row's default `wrap` — with `wrap`,
   a flex line is allowed to grow past the container's explicit height to fit
   content (these two columns never need to stack), which silently defeats
   the height/min-height chain below and was why long threads grew the whole
   page instead of scrolling inside .chat-messages. */
.chat-shell { height: 70vh; min-height: 420px; flex-wrap: nowrap; }
.chat-conv-list-wrap { overflow-y: auto; }
.chat-conv-list .list-group-item { cursor: pointer; border-left: 0; border-right: 0; }
.chat-conv-list .list-group-item.active { background: var(--vc-green-pale); color: #212529; border-color: #dee2e6; }
.chat-conv-list .conv-preview { color: #6c757d; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-wrap { min-width: 0; min-height: 0; }
/* min-height:0 overrides the flex-item default of min-height:auto, which
   otherwise lets this grow to fit all messages instead of scrolling inside
   its own box — the parent (.chat-shell) already has a fixed height. */
.chat-messages { overflow-y: auto; min-height: 0; }
.chat-msg { max-width: 75%; margin-bottom: .5rem; padding: .4rem .7rem; border-radius: .8rem; word-wrap: break-word; }
.chat-msg.mine { margin-left: auto; background: var(--vc-green); color: #fff; border-bottom-right-radius: .2rem; }
.chat-msg.theirs { margin-right: auto; background: #eef1f3; border-bottom-left-radius: .2rem; }
.chat-msg .chat-msg-meta { font-size: .7rem; opacity: .7; margin-top: .15rem; }
.chat-msg-read-icon { font-size: .8rem; margin-left: .3rem; opacity: .75; }
.chat-msg.mine[data-read="1"] .chat-msg-read-icon { opacity: 1; color: #cdeccb; }
.chat-badge { font-size: .65rem; }
.chat-online-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #adb5bd; flex-shrink: 0; }
.chat-online-dot.online { background: var(--vc-green-light); }
.chat-msg-delete { cursor: pointer; opacity: .55; margin-left: .4rem; }
.chat-msg-delete:hover { opacity: 1; }
.chat-msg.deleted { font-style: italic; opacity: .6; }
.chat-read-status { font-size: .7rem; color: #6c757d; text-align: right; margin-top: -.2rem; margin-bottom: .5rem; }
.chat-attach-img { max-width: 220px; max-height: 220px; border-radius: .4rem; display: block; }
.chat-attach-file { color: inherit; text-decoration: none; background: rgba(0,0,0,.04); border-radius: .4rem; padding: .3rem .5rem; }
.chat-msg.mine .chat-attach-file { background: rgba(255,255,255,.15); color: #fff; }
#chatSearchResults { background: #fff; border: 1px solid #dee2e6; border-radius: .4rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* ─── Event notifications ────────────────────────────────────────────────────── */
.notif-unread { background: var(--vc-green-pale); border-left: 3px solid var(--vc-green); }
.notif-toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; max-width: 320px; }
.notif-toast {
  background: #fff; border: 1px solid #dee2e6; border-left: 3px solid var(--vc-green);
  border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: .6rem .8rem;
  cursor: pointer; animation: notif-toast-in .2s ease-out;
}
.notif-toast:hover { box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.notif-toast-title { font-weight: 600; font-size: .9rem; }
.notif-toast-body { font-size: .8rem; color: #6c757d; margin-top: .15rem; }
@keyframes notif-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }