/* =============================================================================
   CLINN Medici — custom.css
   Ponte tra UIkit (base layout/componenti) e il Design System CLINN.
   Ordine di caricamento: uikit.min.css → clinn-design-system.css → custom.css
   Qui allineiamo i componenti UIkit ai token CLINN e stiliamo ciò che è
   specifico del plugin (modale prenotazione, box slot, badge disponibilità).
   ============================================================================= */

/* ----- Base: font e colore testo coerenti col design system ----------------- */
.uk-container,
.uk-card,
.uk-modal,
.uk-navbar,
body.clinn-medico,
body.clinn-archivio {
  font-family: var(--font-sans);
  color: var(--ink-900);
}

/* Larghezza container allineata al mockup */
.clinn-archivio .uk-container,
.clinn-medico .uk-container {
  max-width: 1200px;
}

/* ----- Bottoni UIkit → look CLINN ------------------------------------------- */
.uk-button-primary {
  background-color: var(--teal-800);
  border-radius: var(--r-md);
  font-weight: 600;
  text-transform: none;
  transition: background-color .15s ease;
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background-color: var(--teal-900);
}
.uk-button-default {
  border-radius: var(--r-md);
  border-color: var(--ink-200);
  color: var(--ink-900);
  text-transform: none;
  background: var(--white);
}
.uk-button-default:hover {
  border-color: var(--teal-700);
  color: var(--teal-800);
}

/* ----- Form controls (filtri archivio) -------------------------------------- */
.uk-input,
.uk-select,
.uk-checkbox {
  border-radius: var(--r-sm);
}
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
  background-color: var(--teal-800);
  border-color: var(--teal-800);
}

/* ----- Modale prenotazione SimplyBook --------------------------------------- */
.clinn-booking-modal .uk-modal-dialog {
  width: 880px;
  max-width: calc(100vw - 32px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.clinn-booking-modal .uk-modal-header {
  background: var(--white);
  border-bottom: 1px solid var(--ink-100);
}
.clinn-booking-modal .uk-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}
.clinn-booking-body {
  min-height: 60vh;
  padding: 0;
}
.clinn-booking-body iframe {
  width: 100%;
  min-height: 60vh;
  border: 0;
  display: block;
}
.clinn-booking-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--ink-500);
  font-size: 14px;
}

/* ----- Box "prossime disponibilità" (scheda, sola lettura) ------------------ */
.clinn-availability {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clinn-availability .clinn-slot {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink-700);
}
.clinn-availability .clinn-slot.is-muted {
  color: var(--ink-400);
  border-style: dashed;
}

/* Badge "Disponibile da…" nelle card archivio */
.clinn-next-available {
  font-size: 13px;
  color: var(--sage-600);
  font-weight: 600;
}
.clinn-next-available[data-loading="1"] {
  color: var(--ink-400);
  font-weight: 400;
}

/* ----- Mega-menu: dropdown UIkit con aspetto CLINN (se usato) --------------- */
.clinn-archivio .uk-navbar-dropdown,
.clinn-medico .uk-navbar-dropdown {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 20px;
}

/* ----- Utility responsive --------------------------------------------------- */
@media (max-width: 959px) {
  .clinn-booking-modal .uk-modal-dialog {
    width: 100%;
  }
}