/* =====================================================================
   V2.8.5 — WEEK BOOKING + BRAND / COLOR CLEANUP
   Small UI/UX follow-up over V2.8.4.
   Scope: mobile Week booking action, Day action removal, vaccine reminder
   layout, global green -> cool blue/slate normalization, brand/header scale.
   No Firebase schema, booking engine, clinical rules or server changes.
   ===================================================================== */

:root{
  /* Green-free semantic palette for the internal Clinic OS. */
  --ht-accent:#6B80D2;
  --ht-success:#5E75C9;
  --ht-success-tint:#EEF2FB;
  --os-success:var(--ht-success);
  --os-success-tint:var(--ht-success-tint);
  --sage:#E8EEFB;
  --sage-strong:#B8C6EA;
  --mk-sage:#E8EEFB;
  --mk-sage-strong:#B8C6EA;
  --mp-sage:#EEF2FB;
}
html.dark{
  --ht-accent:#A3B3F0;
  --ht-success:#9CAEEF;
  --ht-success-tint:#202A43;
  --os-success:var(--ht-success);
  --os-success-tint:var(--ht-success-tint);
  --sage:#202A43;
  --sage-strong:#44598E;
  --mk-sage:#202A43;
  --mk-sage-strong:#44598E;
  --mp-sage:#202A43;
}

/* ------------------------------------------------------------------
   DAY VIEW — slot tapping is already the primary creation flow.
   Hide the redundant V2.8.4 injected button and restore the clean meta row.
   ------------------------------------------------------------------ */
.v284-day-new-appointment{display:none!important}
.calendar-day-meta.v284-has-create{grid-template-columns:1fr!important}

/* ------------------------------------------------------------------
   MOBILE WEEK VIEW — creation belongs here because agenda rows are read-only.
   ------------------------------------------------------------------ */
.v285-week-actionbar{display:none}
@media(max-width:820px){
  #main[data-active-view="calendar"] .v285-week-actionbar{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    margin:8px 0 8px!important;
  }
  #main[data-active-view="calendar"] .v285-week-new-appointment{
    appearance:none!important;
    min-height:40px!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border:1px solid color-mix(in srgb,var(--os-primary) 32%,var(--os-border))!important;
    border-radius:7px!important;
    background:var(--os-primary)!important;
    color:#fff!important;
    font:inherit!important;
    font-size:11px!important;
    line-height:16px!important;
    font-weight:650!important;
    box-shadow:none!important;
  }
  #main[data-active-view="calendar"] .v285-week-new-appointment:hover{
    filter:brightness(.98)!important;
  }
}

/* ------------------------------------------------------------------
   UPCOMING VACCINES — compact card/row; no narrow word-by-word column.
   ------------------------------------------------------------------ */
.control-center-vaccine-reminders .control-center-vaccine-list{
  min-width:0!important;
  gap:0!important;
}
.control-center-vaccine-reminders .control-center-vaccine-row{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:start!important;
  gap:9px 11px!important;
  min-width:0!important;
  margin:0 10px!important;
  padding:11px 0!important;
  border:0!important;
  border-bottom:1px solid var(--os-border)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.control-center-vaccine-reminders .control-center-vaccine-row:last-child{border-bottom:0!important}
.control-center-vaccine-reminders .control-center-vaccine-date{
  min-width:0!important;
  gap:2px!important;
}
.control-center-vaccine-reminders .control-center-vaccine-date strong{
  color:var(--os-text)!important;
  font-size:10px!important;
  line-height:14px!important;
  white-space:nowrap!important;
}
.control-center-vaccine-reminders .control-center-vaccine-date span{
  color:var(--os-muted)!important;
  font-size:8.5px!important;
  line-height:12px!important;
}
.control-center-vaccine-reminders .control-center-vaccine-main{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
.control-center-vaccine-reminders .control-center-vaccine-main strong{
  color:var(--os-text)!important;
  font-size:11px!important;
  line-height:15px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.control-center-vaccine-reminders .control-center-vaccine-main small,
.control-center-vaccine-reminders .control-center-vaccine-main em{
  display:block!important;
  max-width:100%!important;
  margin-top:2px!important;
  color:var(--os-muted)!important;
  font-size:8.8px!important;
  line-height:13px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.control-center-vaccine-reminders .control-center-vaccine-actions{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  align-items:center!important;
}
.control-center-vaccine-reminders .control-center-vaccine-actions .btn{
  min-width:0!important;
  min-height:34px!important;
  padding:7px 9px!important;
  border-radius:6px!important;
  font-size:9px!important;
  line-height:13px!important;
  white-space:normal!important;
}
.control-center-vaccine-reminders .control-center-vaccine-sms{
  background:var(--os-primary)!important;
  border-color:var(--os-primary)!important;
  color:#fff!important;
}
.control-center-vaccine-reminders .control-center-vaccine-complete{
  background:var(--os-primary-tint)!important;
  border-color:color-mix(in srgb,var(--os-primary) 24%,var(--os-border))!important;
  color:var(--os-primary)!important;
}

/* ------------------------------------------------------------------
   GLOBAL GREEN REMOVAL — internal application only.
   Success/completed remains semantic via icon + label, but uses blue/slate.
   ------------------------------------------------------------------ */
.appointment-card.status-done,
.week-event.status-done,
.month-event.status-done,
.today-agenda-row.status-done,
.today-flow-card.status-done,
.today-slot.booked.status-done,
.premium-home-appointment.is-now{
  background:var(--os-success-tint)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--os-success) 28%,var(--os-border))!important;
  color:var(--os-text)!important;
  box-shadow:none!important;
}
.appointment-card.status-done .appointment-accent{background:var(--os-success)!important}
.appointment-card.status-done .appointment-status,
.calendar-day-chips .done,
.task-check.checked,
.completion-chip,
.rem-badge.sent,
.push-state.ok,
.import-status.match,
.settings-status-ok{
  background:var(--os-success-tint)!important;
  border-color:color-mix(in srgb,var(--os-success) 28%,var(--os-border))!important;
  color:var(--os-success)!important;
}
.shopping-check-row.done span{
  background:var(--os-success-tint)!important;
  border-color:color-mix(in srgb,var(--os-success) 28%,var(--os-border))!important;
  color:var(--os-success)!important;
}
.summary-available .summary-icon,
.visitflow-done>span{color:var(--os-success)!important}
.vaccine-cell.filled button strong,
.vaccine-cell.filled .vaccine-state-label.done,
.vaccine-cell.filled button small{color:var(--os-success)!important}

/* Clinical V2 legacy hard-coded green success states */
.cv2-status.completed,
.cv2-save-state.saved,
.cv2-flow-ready{
  background:var(--os-success-tint)!important;
  color:var(--os-success)!important;
  border-color:color-mix(in srgb,var(--os-success) 28%,var(--os-border))!important;
}
.cv2-done-mark{background:var(--os-success)!important;color:#fff!important}
.cv2-done-card:not(.cancelled) h2{color:var(--os-text)!important}
.cv2-done-card:not(.cancelled) p{color:var(--os-secondary)!important}
.cv2-reason-stepper button.done b{
  background:var(--os-success-tint)!important;
  border-color:color-mix(in srgb,var(--os-success) 32%,var(--os-border))!important;
  color:var(--os-success)!important;
}

/* Remove remaining old sage tint from calendar/current-day legacy surfaces. */
.week-day.today,
.month-day.today,
.week-day.today .week-day-head,
.month-day.today .month-day-head{
  border-color:color-mix(in srgb,var(--os-primary) 30%,var(--os-border))!important;
}

/* ------------------------------------------------------------------
   BRAND / HEADER NORMALIZATION — same shield, calmer placement.
   ------------------------------------------------------------------ */
.clinic-brand.site-brand-lockup::before{display:none!important;content:none!important}
.site-brand-shield{
  filter:none!important;
  transform:none!important;
}
@media(min-width:1024px){
  .clinic-brand.site-brand-lockup{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
    margin:2px 0 8px!important;
    display:grid!important;
    place-items:center!important;
  }
  .site-brand-shield{
    width:30px!important;
    height:35px!important;
    flex:0 0 30px!important;
  }
}
@media(max-width:1023px){
  .clinic-header{
    min-height:56px!important;
    height:56px!important;
    padding:6px 10px!important;
  }
  .clinic-brand.site-brand-lockup{
    gap:7px!important;
    min-width:0!important;
  }
  .site-brand-shield{
    width:30px!important;
    height:35px!important;
    flex:0 0 30px!important;
  }
  .site-brand-copy{padding-left:0!important}
  .site-brand-name{
    font-size:13.5px!important;
    line-height:17px!important;
    letter-spacing:-.015em!important;
  }
  .site-brand-sub{
    margin-top:0!important;
    font-size:7px!important;
    line-height:9px!important;
    letter-spacing:.02em!important;
  }
  #main.container{min-height:calc(100dvh - 56px)!important}
}
@media(max-width:390px){
  .site-brand-shield{width:28px!important;height:33px!important;flex-basis:28px!important}
  .site-brand-name{font-size:13px!important}
  .site-brand-sub{font-size:6.6px!important}
}

/* Broad legacy semantic cleanup: replace old sage/green states wherever they
   still surface inside the authenticated Clinic OS. */
.mini-action.done,
.patient-rem-card.planned,
.bulk-tag.ok,
.vax-badge.planned,
.vax-plan-card.planned,
.premium-home-status.status-done,
.online-push-state.ok,
.vaccine-status-panel.ok,
.previsit-received-chip,
.premium-home-focus-badge.now,
.patient-directory-count,
.patient-new-btn,
.patient-alpha-divider td span,
.secretary-push.ok,
.secretary-call,
.secretary-filter-bar button.active{
  background:var(--os-success-tint)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--os-success) 28%,var(--os-border))!important;
  color:var(--os-success)!important;
  box-shadow:none!important;
}
.available-dot,
.today-slot.empty .today-slot-dot{background:var(--os-success)!important}
.patient-form-smartbar strong[data-level="good"],
.visitflow-live,
.visitflow-normal-exam button,
.visitflow-milestone-row button.active,
.who-growth-latest small,
.control-center-vaccine-date span,
.control-center-vaccine-main em,
.secretary-request-row.status-progress,
.secretary-push.ok{color:var(--os-success)!important}

.vaccine-cell.filled button,
.clinical-note,
.growth-chart-note,
.rem-preview,
.backup-note,
.restore-warning,
.security-note,
.backup-download-icon{
  background:var(--os-success-tint)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--os-success) 24%,var(--os-border))!important;
}
.vaccine-state-label.done,
.filled-dot{color:var(--os-success)!important;background:var(--os-success-tint)!important}

.calendar-premium-hero .cal-icon-btn:hover,
.calendar-premium-hero .cal-today-btn:hover,
.calendar-premium-hero .calendar-mode-tabs button.active,
.week-empty:hover,
.empty-slot:hover,
#main[data-active-view="settings"] .settings-search-wrap:focus-within,
#main[data-active-view="settings"] .settings-mobile-tile:hover,
#main[data-active-view="clinic"] .clinic-month-toolbar .cal-icon-btn:hover,
#main[data-active-view="clinic"] .clinic-month-toolbar .cal-today-btn:hover{
  background:var(--os-primary-tint)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--os-primary) 28%,var(--os-border))!important;
  color:var(--os-primary)!important;
}
.calendar-slot.is-now,
.slot-time em,
#main[data-active-view="clinic"] .monthly-card::before,
#main[data-active-view="clinic"] .monthly-card:nth-child(1)::before{
  background:var(--os-primary)!important;
  color:#fff!important;
}

/* Clinical workspace: old mint/sage surfaces become blue/slate. */
.cv2-history-row.completed,
.cv2-vaccine-visit-card,
.cv2-vaccine-focus,
.cv2-parent-intake-badge,
.cv2-development-screening-reminder,
.cv2-summary-ready,
.cv2-acute-exam-chip.active,
.cv2-rail-tool.active,
.cv2-reason-stepper button.done{
  background:var(--os-success-tint)!important;
  background-image:none!important;
  border-color:color-mix(in srgb,var(--os-success) 26%,var(--os-border))!important;
  color:var(--os-text)!important;
}
.cv2-vaccine-focus strong,
.cv2-parent-intake-grid strong,
.cv2-med-confirmed-row>span,
.cv2-reason-stepper button.done,
.cv2-summary-ready{color:var(--os-success)!important}

/* Home vaccine count/state should follow the blue/slate semantic palette. */
.control-center-vaccine-count{
  background:var(--os-success-tint)!important;
  border:1px solid color-mix(in srgb,var(--os-success) 22%,var(--os-border))!important;
  color:var(--os-success)!important;
}