/* =====================================================================
   V2.8.4 — GLOBAL THEME INTEGRITY + CALENDAR UX FINALIZATION
   Final visual/interaction normalization layer over V2.8.3.
   No Firebase schema, clinical logic, booking logic, or data-model changes.
   ===================================================================== */

:root{
  --v284-icon-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
  --v284-icon-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A8.5 8.5 0 1 1 11.2 3 6.7 6.7 0 0 0 21 12.8z'/%3E%3C/svg%3E");
  --v284-icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   THEME TOGGLE — no decorative emoji; one line-icon family
   ------------------------------------------------------------------ */
#uiThemeToggle{font-size:0!important;color:var(--os-secondary)!important}
#uiThemeToggle::before{content:"";display:block;width:18px;height:18px;background:currentColor;mask:var(--v284-icon-moon) center/contain no-repeat;-webkit-mask:var(--v284-icon-moon) center/contain no-repeat}
html.dark #uiThemeToggle::before{mask-image:var(--v284-icon-sun);-webkit-mask-image:var(--v284-icon-sun)}

/* ------------------------------------------------------------------
   HOME SECONDARY MODULES — remove final decorative residue
   ------------------------------------------------------------------ */
.control-center-namedays-head h2::after{content:none!important;display:none!important}
.control-center-nameday-main strong,.control-center-birthday-main strong,.control-center-vaccine-row strong{color:var(--os-text)!important}
.control-center-nameday-main small,.control-center-birthday-main small,.control-center-vaccine-row small{color:var(--os-muted)!important}
.control-center-nameday-actions .nameday-wish{width:auto!important;min-width:0!important;padding:7px 10px!important;border-radius:6px!important;background:var(--os-primary-tint)!important;border:1px solid color-mix(in srgb,var(--os-primary) 24%,var(--os-border))!important;color:var(--os-primary)!important;font-size:10px!important;line-height:14px!important;font-weight:600!important;box-shadow:none!important}
.control-center-nameday-actions .nameday-wish:hover{background:color-mix(in srgb,var(--os-primary) 14%,var(--os-surface))!important}

/* ------------------------------------------------------------------
   CALENDAR — global light/dark integrity
   ------------------------------------------------------------------ */
#main[data-active-view="calendar"] .calendar-premium-hero,
#main[data-active-view="calendar"] .calendar-day-head,
#main[data-active-view="calendar"] .calendar-timeline,
#main[data-active-view="calendar"] .calendar-week-grid,
#main[data-active-view="calendar"] .calendar-month-grid{color:var(--os-text)!important}

/* Week/agenda appointment labels must remain readable in dark mode */
html.dark #main[data-active-view="calendar"] .week-event,
html.dark #main[data-active-view="calendar"] .calendar-week-grid.v283-mobile-agenda .week-event,
html.dark #main[data-active-view="calendar"] .appointment-card{
  border-color:var(--os-border)!important;color:var(--os-text)!important
}
html.dark #main[data-active-view="calendar"] .week-event.status-done,
html.dark #main[data-active-view="calendar"] .calendar-week-grid.v283-mobile-agenda .week-event.status-done{background:color-mix(in srgb,var(--os-success) 15%,var(--os-surface))!important}
html.dark #main[data-active-view="calendar"] .week-event:not(.status-done),
html.dark #main[data-active-view="calendar"] .calendar-week-grid.v283-mobile-agenda .week-event:not(.status-done){background:var(--os-surface)!important}
html.dark #main[data-active-view="calendar"] .week-event span,
html.dark #main[data-active-view="calendar"] .calendar-week-grid.v283-mobile-agenda .week-event span,
html.dark #main[data-active-view="calendar"] .appointment-card strong,
html.dark #main[data-active-view="calendar"] .appointment-card .appointment-reason{color:var(--os-text)!important}
html.dark #main[data-active-view="calendar"] .week-event b,
html.dark #main[data-active-view="calendar"] .appointment-card .appointment-status{color:var(--os-primary)!important}

/* Month view was the main remaining light island */
html.dark #main[data-active-view="calendar"] .month-day,
html.dark #main[data-active-view="calendar"] .month-day:nth-child(n){
  background:var(--os-surface)!important;background-image:none!important;border:1px solid var(--os-border)!important;color:var(--os-text)!important;box-shadow:none!important
}
html.dark #main[data-active-view="calendar"] .month-day:hover{background:var(--os-elevated)!important;border-color:color-mix(in srgb,var(--os-primary) 26%,var(--os-border))!important}
html.dark #main[data-active-view="calendar"] .month-day.today{background:var(--os-primary-tint)!important;border-color:color-mix(in srgb,var(--os-primary) 42%,var(--os-border))!important}
html.dark #main[data-active-view="calendar"] .month-day.outside{opacity:.48!important;background:color-mix(in srgb,var(--os-surface) 78%,var(--os-bg))!important}
html.dark #main[data-active-view="calendar"] .month-day-head{background:transparent!important;color:var(--os-text)!important}
html.dark #main[data-active-view="calendar"] .month-day.today .month-day-head{background:transparent!important;color:var(--os-primary)!important}
html.dark #main[data-active-view="calendar"] .month-day-count{background:var(--os-elevated)!important;color:var(--os-secondary)!important;border:1px solid var(--os-border)!important}
html.dark #main[data-active-view="calendar"] .month-weekday{color:var(--os-muted)!important}
html.dark #main[data-active-view="calendar"] .month-event,
html.dark #main[data-active-view="calendar"] .month-tomy,
html.dark #main[data-active-view="calendar"] .month-more,
html.dark #main[data-active-view="calendar"] .month-add{background:var(--os-elevated)!important;border-color:var(--os-border)!important;color:var(--os-text)!important;box-shadow:none!important}
html.dark #main[data-active-view="calendar"] .month-event span{color:var(--os-text)!important}
html.dark #main[data-active-view="calendar"] .month-event b{color:var(--os-primary)!important}
html.dark #main[data-active-view="calendar"] .month-event.status-done{background:color-mix(in srgb,var(--os-success) 12%,var(--os-surface))!important}
html.dark #main[data-active-view="calendar"] .month-event.status-cancelled,
html.dark #main[data-active-view="calendar"] .month-event.status-no-show,
html.dark #main[data-active-view="calendar"] .month-event.status-noshow{opacity:.62!important}

/* Direct creation from selected Day view */
.v284-day-new-appointment{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:36px!important;padding:0 12px!important;border:1px solid var(--os-primary)!important;border-radius:6px!important;background:var(--os-primary)!important;color:#fff!important;font-weight:600!important;font-size:11px!important;line-height:16px!important;font-family:inherit!important;white-space:nowrap!important;box-shadow:none!important}
.v284-day-new-appointment::before{content:"";width:15px;height:15px;background:currentColor;mask:var(--v284-icon-plus) center/contain no-repeat;-webkit-mask:var(--v284-icon-plus) center/contain no-repeat}
.v284-day-new-appointment:hover{filter:brightness(.97)}
.calendar-day-meta.v284-has-create{grid-template-columns:minmax(0,1fr) auto!important}
.calendar-day-meta.v284-has-create .v284-day-new-appointment{grid-column:2!important;grid-row:1 / span 2!important;align-self:center!important}


/* Kill the old decorative circles/gradients on Settings category tiles. */
#main[data-active-view="settings"] .settings-mobile-tile::after{display:none!important;content:none!important}
#main[data-active-view="settings"] .settings-mobile-tile:nth-child(n){background:var(--os-surface)!important;background-image:none!important}
#main[data-active-view="settings"] .settings-mobile-tile.active{background:var(--os-primary-tint)!important}

/* ------------------------------------------------------------------
   SETTINGS — global dark token enforcement, no white islands
   ------------------------------------------------------------------ */
html.dark #main[data-active-view="settings"] .settings-section-content,
html.dark #main[data-active-view="settings"] .settings-section-stack,
html.dark #main[data-active-view="settings"] .settings-section-grid{background:transparent!important;color:var(--os-text)!important}
html.dark #main[data-active-view="settings"] .settings-section-stack>.panel,
html.dark #main[data-active-view="settings"] .settings-item-card,
html.dark #main[data-active-view="settings"] .panel,
html.dark #main[data-active-view="settings"] article,
html.dark #main[data-active-view="settings"] details{
  background:var(--os-surface)!important;background-image:none!important;border-color:var(--os-border)!important;color:var(--os-text)!important;box-shadow:none!important
}
html.dark #main[data-active-view="settings"] h2,
html.dark #main[data-active-view="settings"] h3,
html.dark #main[data-active-view="settings"] h4,
html.dark #main[data-active-view="settings"] strong,
html.dark #main[data-active-view="settings"] label{color:var(--os-text)!important}
html.dark #main[data-active-view="settings"] p,
html.dark #main[data-active-view="settings"] small,
html.dark #main[data-active-view="settings"] .muted,
html.dark #main[data-active-view="settings"] .security-note{color:var(--os-muted)!important}
html.dark #main[data-active-view="settings"] input,
html.dark #main[data-active-view="settings"] select,
html.dark #main[data-active-view="settings"] textarea{background:var(--os-elevated)!important;color:var(--os-text)!important;border-color:var(--os-border)!important;box-shadow:none!important}
html.dark #main[data-active-view="settings"] input:focus,
html.dark #main[data-active-view="settings"] select:focus,
html.dark #main[data-active-view="settings"] textarea:focus{border-color:var(--os-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--os-primary) 18%,transparent)!important}
html.dark #main[data-active-view="settings"] .btn.secondary{background:var(--os-elevated)!important;color:var(--os-secondary)!important;border-color:var(--os-border)!important}
html.dark #main[data-active-view="settings"] .calendar-working-days{color:var(--os-secondary)!important}

/* ------------------------------------------------------------------
   CLINIC MOVEMENT — data table readability and calmer rows
   ------------------------------------------------------------------ */
#main[data-active-view="clinic"] .monthly-day-list{gap:0!important;border:1px solid var(--os-border)!important;border-radius:8px!important;overflow:hidden!important;background:var(--os-surface)!important}
#main[data-active-view="clinic"] .monthly-day-row,
#main[data-active-view="clinic"] .monthly-day-row:nth-child(n){border:0!important;border-bottom:1px solid var(--os-border)!important;border-radius:0!important;background:transparent!important;padding:10px 11px!important;color:var(--os-secondary)!important}
#main[data-active-view="clinic"] .monthly-day-row:last-child{border-bottom:0!important}
#main[data-active-view="clinic"] .monthly-day-row:hover{background:var(--os-elevated)!important}
#main[data-active-view="clinic"] .monthly-day-row span{color:var(--os-secondary)!important}
#main[data-active-view="clinic"] .monthly-day-row strong{color:var(--os-text)!important;font-weight:600!important}
#main[data-active-view="clinic"] .monthly-day-row b{color:var(--os-text)!important;font-weight:700!important}
html.dark #main[data-active-view="clinic"] .monthly-day-list{background:var(--os-surface)!important;border-color:var(--os-border)!important}
html.dark #main[data-active-view="clinic"] .monthly-day-row strong{color:var(--os-text)!important}
html.dark #main[data-active-view="clinic"] .monthly-day-row span{color:var(--os-secondary)!important}
html.dark #main[data-active-view="clinic"] .monthly-day-row b{color:var(--os-text)!important}

/* ------------------------------------------------------------------
   MOBILE FINAL POLISH
   ------------------------------------------------------------------ */
@media(max-width:820px){
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
  #main.container{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
  .clinic-bottom-nav{bottom:max(8px,env(safe-area-inset-bottom))!important}
  .clinic-header{min-height:58px!important;padding-top:7px!important;padding-bottom:7px!important}
  .clinic-brand-logo{width:42px!important;height:42px!important}
  .clinic-brand-name{font-size:15px!important;line-height:18px!important}
  .clinic-brand-subtitle{font-size:8px!important;line-height:11px!important}

  .calendar-day-meta.v284-has-create{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .calendar-day-meta.v284-has-create .v284-day-new-appointment{grid-column:1!important;grid-row:auto!important;width:100%!important;min-height:40px!important}
  .v284-day-new-appointment{font-size:11px!important}

  .control-center-nameday-actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important}
  .control-center-nameday-actions .nameday-wish{padding:6px 9px!important;font-size:9.5px!important}
  .control-center-nameday-main strong{font-size:11px!important;line-height:15px!important;color:var(--os-text)!important}

  #main[data-active-view="clinic"] .monthly-day-row{grid-template-columns:82px minmax(0,1fr) auto!important;gap:8px!important}
}