/* === style.css === */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
.demo {
  text-align: center;
}
header {
  max-width: 1160px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.brand {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: 600;
}
.brand-mark {
  display: grid;
  place-items: center;
  font-weight: 300;
}
.brand small {
  display: block;
  font-weight: 400;
  color: var(--muted);
}
nav {
  display: flex;
  gap: 6px;
}
.nav {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 8px;
}
.nav.active {
  background: var(--light);
  color: var(--primary);
}
main {
  max-width: 1100px;
  min-height: 65vh;
  margin: 36px auto 60px;
  padding: 0 28px;
}
.eyebrow {
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}
h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  margin: 12px 0 16px;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 14px;
}
h3 {
  font-size: 15px;
  margin: 0 0 12px;
}
p {
  margin: 0 0 16px;
}
.muted {
  font-size: 14px;
}
.intro {
  max-width: 640px;
  margin-bottom: 26px;
}
.certificate {
  border: 1px solid #c9d2dd;
  padding: 21px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 26px 0;
}
.certificate p {
  font-size: 13px;
  color: var(--muted);
  max-width: 580px;
  margin: 4px 0 0;
}
.button,
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--primary);
  color: white;
  border-radius: 8px;
  padding: 12px 19px;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
}
.button.secondary,
button.secondary {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
}
.danger {
  color: var(--danger) !important;
  border-color: #dfc5bf !important;
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 24px;
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.step {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.choices {
  display: flex;
  gap: 10px;
  margin: 18px 0 24px;
}
.choice {
  flex: 1;
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  padding: 15px;
  color: var(--ink);
  font-size: 14px;
}
.choice small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.choice.selected {
  background: var(--light);
  border-color: var(--primary);
}
label {
  display: block;
  margin-bottom: 15px;
}
input,
select {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid #cbd1d8;
  border-radius: 7px;
  padding: 10px 12px;
  margin-top: 6px;
  color: var(--ink);
  min-height: 43px;
}
input[type='checkbox'] {
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0 7px 0 0;
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 16px 0 6px;
}
.slot {
  background: white;
  border: 1px solid var(--border);
  padding: 10px 5px;
  font-size: 14px;
  color: var(--ink);
}
.slot.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.slots-message {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 14px;
  padding: 14px 0;
}
.summary {
  padding: 16px;
  background: var(--light);
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}
.summary strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  margin-top: 5px;
}
.micro {
  font-size: 11px;
  color: var(--muted);
  margin: 15px 0 0;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.full {
  width: 100%;
}
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 23px 0;
}
.success {
  max-width: 650px;
  margin: 45px auto;
}
.check {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: var(--light);
  border-radius: 50%;
  font-size: 27px;
  color: var(--primary);
  margin-bottom: 20px;
}
.linkbox {
  word-break: break-all;
  font-size: 12px;
  background: var(--cream);
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
}
.badge {
  font-size: 11px;
  background: var(--light);
  color: var(--primary);
}
.badge.urgent {
  background: #f3e9d8;
  color: #8a642e;
}

.login {
  max-width: 440px;
  margin: 50px auto;
}
.details {
  margin-top: 22px;
}
.details summary {
  cursor: pointer;
  font-size: 14px;
}
.settings-row {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 90px 1fr 1fr auto;
  align-items: end;
  gap: 12px;
}
.settings-row label {
  margin: 0;
}
.settings-row .day {
  font-size: 14px;
  padding-bottom: 10px;
}
.audit {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: 10px 0;
  overflow-wrap: anywhere;
}
footer {
  max-width: 1100px;
  margin: auto;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

#notice {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  color: white;
  font-size: 14px;
  display: none;
  z-index: 10;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
  }
  .brand {
    font-size: 14px;
  }
  nav {
    width: 100%;
  }
  .nav {
    flex: 1;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .certificate {
    align-items: start;
    flex-direction: column;
  }
  .slots {
    grid-template-columns: repeat(3, 1fr);
  }

  .settings-row .day {
    grid-column: 1/-1;
  }

  footer {
    padding: 20px;
  }
  .row {
    gap: 10px;
  }
}
.booking-page .mobile-only,
.mobile-progress {
  display: none;
}
.date-navigation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: end;
  margin-bottom: 15px;
}
.date-navigation label {
  margin: 0;
  min-width: 0;
}
.date-navigation .day-arrow {
  padding: 0;
  min-height: 48px;
  font-size: 23px;
}
input,
select {
  min-width: 0;
  max-width: 100%;
}
.card,
.row > * {
  min-width: 0;
}

button,
.button {
  min-height: 44px;
}
@media (max-width: 760px) {
  .booking-page .mobile-only {
    display: block;
  }
  .mobile-progress {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 18px 0;
    font-size: 13px;
    scroll-margin-top: 16px;
  }
  .mobile-progress span {
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--muted);
    background: #e8ecf1;
  }
  .mobile-progress [aria-current='step'] {
    background: var(--light);
    color: var(--primary);
    font-weight: 600;
  }
  .booking-page[data-step='1'] .details-card,
  .booking-page[data-step='2'] .availability-card,
  .booking-page[data-step='2'] .intro,
  .booking-page[data-step='2'] .certificate {
    display: none;
  }
  .details-card #change-time {
    width: 100%;
    margin-bottom: 22px;
  }
  .details-card .row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .details-card label {
    font-size: 14px;
  }
  .details-card .micro {
    font-size: 13px;
  }
  .demo {
    font-size: 10px;
    letter-spacing: 0.025em;
    padding: 8px 16px;
  }

  main {
    padding: 0 16px;
  }
  .intro {
    margin-bottom: 18px;
  }
  h1 {
    font-size: 30px;
    line-height: 1.2;
  }
  .intro .muted {
    font-size: 15px;
  }

  .certificate {
    padding: 17px;
    margin: 20px 0;
    gap: 14px;
  }
  .certificate p {
    font-size: 14px;
  }
  .certificate .button {
    width: 100%;
  }
  .choice {
    padding: 14px 12px;
    min-width: 0;
  }
  input,
  select {
    font-size: 16px;
    min-height: 48px;
  }
  button,
  .button,
  .nav,
  .slot {
    min-height: 48px;
    font-size: 15px;
  }
  .booking-page button.primary,
  .booking-page button.secondary,
  .certificate .button {
    font-size: 15px;
  }
  .choice small {
    font-size: 13px;
  }
  .micro {
    font-size: 12px;
  }
  .slots {
    gap: 10px;
  }
  .date-navigation {
    gap: 8px;
  }
  .success {
    margin: 24px auto;
  }
  .success .actions,
  .details-card .actions {
    flex-direction: column;
  }
  .success .actions > *,
  .details-card .actions > * {
    width: 100%;
  }
  .linkbox {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .badge {
    display: inline-block;
    font-size: 12px;
    white-space: normal;
  }
  .settings-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .settings-row > div:last-child {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .settings-row > div:last-child label {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  label:has(input[type='checkbox']) {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  input[type='checkbox'] {
    width: 22px;
    height: 22px;
    min-height: 22px;
    flex-shrink: 0;
  }
  #notice {
    font-size: 15px;
    width: calc(100% - 32px);
  }
  footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 359px) {
  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choices {
    flex-direction: column;
  }
  .nav {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 14px;
  }
  .mobile-progress {
    gap: 8px;
    font-size: 12px;
  }
  .mobile-progress span {
    padding: 8px 10px;
  }
  .card {
    padding: 16px;
  }
  .row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.form-error {
  color: var(--danger);
  background: #faf0ed;
  border: 1px solid #dfc5bf;
  padding: 14px;
  margin-bottom: 18px;
  font-size: 15px;
}
.form-error[hidden] {
  display: none;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

[hidden] {
  display: none !important;
}
.privacy-check {
  display: block;
  line-height: 1.6;
  font-size: 13px;
}
.privacy-check input {
  width: 20px;
  min-height: 20px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.privacy-page p {
  white-space: normal;
  line-height: 1.7;
}

.professional-intro .button {
  margin-top: 14px;
}
.office-hours {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 28px;
  align-items: start;
}
.contact-card {
  min-width: 0;
  padding: 25px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
}
.contact-card-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.contact-card-heading > div {
  min-width: 0;
}
.contact-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--light);
  color: var(--primary);
}
.contact-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.contact-symbol .contact-icon {
  width: 23px;
  height: 23px;
}
.contact-number,
.contact-email {
  display: block;
  color: var(--ink);
  text-decoration: none;
  margin-top: 5px;
}
.contact-number {
  font-size: 25px;
  letter-spacing: 0.025em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.contact-email {
  font-size: clamp(18px, 2.3vw, 25px);
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.5;
}
.contact-mail-primary {
  padding: 30px;
}
.contact-mail-primary h2 {
  font-size: 27px;
  margin: 5px 0 0;
  font-weight: 500;
}
.contact-mail-primary .contact-card-heading {
  margin-bottom: 15px;
}
.contact-purpose {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 8px;
}
.contact-mail-primary .contact-actions {
  margin-top: 22px;
}
.contact-phone-secondary {
  padding: 23px;
}
.contact-phone-secondary .contact-card-heading {
  gap: 12px;
  margin-bottom: 10px;
}
.contact-phone-secondary .contact-symbol {
  width: 36px;
  height: 36px;
  background: #e6eaef;
}
.contact-phone-secondary .contact-number {
  font-size: 19px;
  color: var(--muted);
}
.contact-phone-secondary .contact-actions {
  margin-top: 20px;
}
.contact-phone-secondary .contact-actions .secondary {
  background: transparent;
}
.request-fields {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.request-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.request-demo {
  padding: 12px 15px;
  background: #f5eddc;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.request-receipt {
  padding: 22px;
  margin-top: 22px;
  background: var(--light);
  border: 1px solid #b4bfcd;
  border-radius: 12px;
  scroll-margin: 20px;
}
.request-receipt h2 {
  font-size: 23px;
  margin-top: 0;
}
.request-receipt p {
  line-height: 1.7;
}
.request-reference {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.request-fields:disabled {
  opacity: 0.65;
}
.today-request-alerts {
  margin: 24px 0;
}
.today-request-alerts summary {
  padding: 12px 0;
  cursor: pointer;
}
.today-request-alerts details + details {
  border-top: 1px solid var(--border);
}
.contact-number:hover,
.contact-email:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.location-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  margin-top: 28px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: white;
}
.location-details {
  padding: 32px;
}
.location-details > .contact-symbol {
  margin-bottom: 24px;
}
.location-details h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin: 10px 0 22px;
}
.location-details address {
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
}
.location-details address span {
  display: block;
  font-size: 15px;
  color: var(--muted);
  margin-top: 5px;
}
.location-room {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 22px 0;
  padding: 14px 16px;
  background: var(--light);
  color: var(--primary);
}
.location-room strong {
  font-weight: 600;
  font-size: 15px;
}
.location-room span {
  font-size: 15px;
}
.office-map {
  min-height: 390px;
  background: #eaeef3;
  border-left: 1px solid var(--border);
  position: relative;
}
.office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  border: 0;
}
.map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 28px;
  height: 100%;
  min-height: 390px;
  text-align: center;
  background: radial-gradient(ellipse at 20% 20%, #e0e5ec, transparent 65%), #eaeef3;
}
.map-placeholder > strong {
  font-size: 19px;
  font-weight: 500;
}
.map-placeholder > span:not(.map-pin) {
  font-size: 14px;
  color: var(--muted);
}
.map-pin {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 13px;
  background: white;
  border-radius: 50%;
  color: var(--primary);
}
.map-pin .contact-icon {
  width: 30px;
  height: 30px;
}
.map-placeholder button {
  margin-top: 19px;
  background: white;
}
.map-placeholder .micro {
  max-width: 270px;
  font-size: 12px;
  margin-top: 12px;
}
.clipboard-fallback {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.calendar-first .intro {
  max-width: 760px;
  margin: 0 auto 18px;
}
.calendar-first .intro h1 {
  font-size: 32px;
  margin-top: 8px;
  margin-bottom: 10px;
}
.calendar-first .layout {
  display: block;
  max-width: 760px;
  margin: auto;
}
.calendar-first .mobile-progress {
  display: flex;
  max-width: 760px;
  margin: 0 auto 18px;
  gap: 10px;
  font-size: 13px;
}
.calendar-first .mobile-progress span {
  padding: 8px 12px;
  border-radius: 8px;
  background: #e8ecf1;
  color: var(--muted);
}
.calendar-first .mobile-progress [aria-current='step'] {
  color: var(--primary);
  background: var(--light);
  font-weight: 600;
}
.calendar-first[data-step='1'] .details-card,
.calendar-first[data-step='2'] .availability-card,
.calendar-first[data-step='2'] .intro,
.calendar-first[data-step='2'] .certificate,
.calendar-first[data-step='2'] .recovery-shortcut {
  display: none;
}
.calendar-first .certificate,
.calendar-first .recovery-shortcut {
  max-width: 760px;
  margin: 24px auto 0;
}
.public-date-navigation {
  display: none;
}
.calendar-first .availability-card > .step {
  margin-bottom: 8px;
}
.calendar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
}
.calendar-heading h3 {
  margin: 0;
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 500;
}
.calendar-heading .calendar-arrow {
  padding: 0;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.calendar-weekdays {
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.calendar-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid transparent;
  background: #f1f3f6;
  color: var(--ink);
  font-weight: 500;
  padding: 6px 0;
}
.calendar-day i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.calendar-day.is-unavailable i {
  background: #b59763;
}
.calendar-day.is-closed {
  background: #eaedf0;
  color: #888d94;
}
.calendar-day.is-closed i {
  background: #a3a7ac;
}
.calendar-day.outside {
  background: transparent;
  color: #aeb2b7;
  opacity: 1;
  font-weight: 400;
}
.calendar-day.today {
  border-color: var(--primary);
}
.calendar-day.selected {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.calendar-day.selected i {
  background: white;
}
.calendar-day:hover:not(:disabled):not(.selected) {
  border-color: #9ca9ba;
}
.calendar-grid[aria-busy='true'] {
  opacity: 0.55;
}
.calendar-legend {
  justify-content: center;
  margin-top: 16px;
}
.calendar-legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calendar-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.calendar-legend i.unavailable {
  background: #b59763;
}
.calendar-legend i.closed {
  background: #a3a7ac;
}
.calendar-error {
  grid-column: 1/-1;
  font-size: 14px;
  color: var(--danger);
}
.day-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  margin: 22px 0;
  background: var(--light);
  border: 1px solid #d3dae2;
}
.day-status:empty {
  display: none;
}
.day-status strong {
  font-weight: 600;
  font-size: 15px;
  text-transform: capitalize;
}
.day-status span {
  font-size: 13px;
  color: var(--muted);
}
.day-status.closed {
  background: #f5f1e8;
  border-color: #e5dac8;
}
.day-status.closed strong {
  color: #79643d;
}
.people-question {
  margin: 20px 0 10px;
  font-size: 15px;
}
.calendar-first .choices {
  margin: 10px 0 18px;
}
.today-opening {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  border: 1px solid #dbdfe5;
}

.opening-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}
.today-opening.closed .opening-dot,
.today-opening.outside-hours .opening-dot {
  background: #aa8651;
}
.today-opening strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.today-opening p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.today-opening a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
}
@media (max-width: 760px) {
  .professional-intro {
    margin-top: 24px;
    margin-bottom: 28px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  .contact-mail-primary {
    padding: 24px;
  }
  .contact-phone-secondary {
    padding: 18px 23px;
  }
  .contact-mail-primary h2 {
    font-size: 25px;
  }
  .contact-card {
    padding: 21px;
  }
  .contact-card-heading {
    gap: 13px;
    margin-bottom: 18px;
  }
  .contact-email {
    font-size: 15px;
  }
  .contact-number {
    font-size: 24px;
  }
  .contact-actions > .primary {
    flex: 1;
  }
  .contact-actions .button,
  .contact-actions button {
    min-height: 48px;
  }
  .location-card {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .location-details {
    padding: 24px;
  }
  .location-details h2 {
    font-size: 28px;
  }
  .location-details > .button {
    width: 100%;
  }
  .office-map {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .office-map,
  .office-map iframe,
  .map-placeholder {
    min-height: 300px;
  }
  .office-map iframe {
    height: 320px;
  }
  .calendar-first .intro h1 {
    font-size: 28px;
  }
  .calendar-first .intro .muted {
    font-size: 14px;
  }
  .calendar-first .availability-card {
    padding: 18px 16px;
  }
  .calendar-first .availability-card h2 {
    font-size: 19px;
  }
  .calendar-first .mobile-progress {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .calendar-first .mobile-progress span {
    padding: 7px 10px;
  }
  .calendar-heading {
    margin: 14px 0;
  }
  .calendar-heading h3 {
    font-size: 18px;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 2px;
  }
  .calendar-day {
    border-radius: 8px;
  }

  .day-status {
    padding: 14px;
    margin: 18px 0;
  }
  .day-status strong {
    font-size: 14px;
  }
  .calendar-first .certificate {
    margin-top: 22px;
  }
  .calendar-first .certificate p {
    font-size: 13px;
  }
  .today-opening {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 17px;
    gap: 10px;
  }
  .opening-dot {
    margin-top: 7px;
  }
  .today-opening > div {
    flex: 1;
    min-width: 0;
  }
  .today-opening a {
    margin-left: 19px;
    min-height: 44px;
  }
}

.email-processing-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 15px 0 0;
  max-width: 360px;
}
.certificate-prices-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.certificate-prices-preview h2 {
  font-size: 18px;
  margin: 0 0 6px;
}
.certificate-prices-preview p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.certificate-prices-preview p span {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}
.certificate-prices-preview button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 48px;
}
.certificate-prices-dialog {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--ink);
  background: white;
  box-shadow: 0 24px 90px #131c2833;
}
.certificate-prices-dialog::backdrop {
  background: #131c2866;
}
body:has(.certificate-prices-dialog[open]) {
  overflow: hidden;
}
.prices-dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.prices-dialog-heading h2 {
  font-size: 25px;
  margin: 7px 0 0;
}
.prices-close {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}
.prices-draft {
  display: inline-block;
  font-size: 12px;
  color: var(--primary);
  background: var(--light);
  padding: 7px 11px;
  border-radius: 7px;
  margin: 22px 0 10px;
}
.prices-intro {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.certificate-prices-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
.certificate-prices-table th,
.certificate-prices-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.certificate-prices-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.certificate-prices-table tbody th {
  font-weight: 500;
}
.certificate-prices-table td {
  color: var(--muted);
  white-space: nowrap;
}
.certificate-prices-table th:first-child {
  padding-left: 0;
}
.certificate-prices-table th:last-child,
.certificate-prices-table td:last-child {
  text-align: right;
  padding-right: 0;
}
@media (max-width: 760px) {
  .certificate-prices-preview {
    align-items: flex-start;
    flex-direction: column;
    padding: 21px;
    gap: 14px;
  }
  .certificate-prices-dialog {
    padding: 21px;
  }
  .prices-dialog-heading h2 {
    font-size: 22px;
  }
  .certificate-prices-table {
    font-size: 13px;
  }
  .certificate-prices-table th,
  .certificate-prices-table td {
    padding: 13px 8px;
  }
  .certificate-prices-table tbody th {
    overflow-wrap: anywhere;
  }
}
header {
  flex-wrap: nowrap;
}
.brand {
  min-width: 0;
}
.brand > span:last-child {
  min-width: 0;
}
.staff-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--muted);
}
.staff-access:hover,
.staff-access.active {
  background: var(--light);
  color: var(--primary);
  border-color: #c7cfd9;
}
.staff-access svg {
  display: block;
}
@media (max-width: 760px) {
  header {
    gap: 12px;
  }
  .brand {
    gap: 10px;
  }
  .brand-mark {
    flex-shrink: 0;
  }
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.studio-copy {
  margin-top: 18px;
}
.studio-note {
  border-bottom: 1px solid var(--border);
}
.studio-note strong,
.studio-note small {
  display: block;
}
.studio-note small {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0;
}
.studio-note p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 14px;
  font-size: 14px;
}

.digest-schedule {
  font-size: 15px !important;
  line-height: 1.7;
}
.agenda-staff-note {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 10px 0 0;
  text-align: left;
  border: 1px solid #d8d3b7;
  color: var(--ink);
}
.agenda-staff-note small,
.agenda-staff-note strong {
  display: block;
}
.agenda-staff-note small {
  font-size: 11px;
  color: var(--muted);
}
textarea {
  display: block;
  width: 100%;
  resize: vertical;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  background: white;
  color: var(--ink);
}
@media (max-width: 760px) {
  .studio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .studio-grid .actions {
    flex-direction: column;
  }
  .studio-grid .card {
    min-width: 0;
  }
  .studio-note strong,
  .studio-note small,
  .audit {
    overflow-wrap: anywhere;
  }
}

/* === admin.css === */
main.admin-wide {
  max-width: 1380px;
}

.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 12px 0 18px;
}
.week-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.week-navigation strong {
  margin-left: 10px;
}
.view-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
}
.view-switch .secondary {
  border: 0;
  min-width: 90px;
}
button.chosen {
  background: white !important;
  color: var(--ink) !important;
}
.agenda-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.weekend-toggle {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
.weekend-toggle input {
  margin: 0;
  width: 18px;
  height: 18px;
  min-height: 18px;
}
.calendar-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  color: var(--muted);
  font-size: 12px;
}
.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calendar-legend span:before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: white;
}
.calendar-legend .legend-booked:before {
  background: #d0dbe9;
  border-color: #a1b1c6;
}
.calendar-legend .legend-reserved:before {
  background: #f2e3be;
  border-color: #dac69a;
}
.calendar-legend .legend-blocked:before {
  background: #d3d6d9;
  border-color: #bfc4cb;
}
.week-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.week-board.with-weekend {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.week-board.single-day {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: auto;
}
.day-column {
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}

.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 12px 10px 8px;
}
.day-title {
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 0;
  min-width: 0;
  min-height: 44px;
}
.day-title span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}
.day-title strong {
  font-size: 20px;
  font-weight: 500;
}
.select-day {
  display: grid;
  place-items: center;
  margin: 0;
  width: 36px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
}
.select-day input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--primary);
}
.day-stats {
  padding: 8px 12px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
}
.day-stats small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}
.day-slots {
  display: grid;
  gap: 7px;
  padding: 0 8px 12px;
}
.calendar-slot {
  border: 1px solid var(--border);
  padding: 6px 9px;
  background: white;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--ink);
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.calendar-slot .slot-time {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.calendar-slot > span:not(.slot-time) {
  font-size: 11px;
  color: var(--muted);
}
.calendar-slot strong {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.calendar-slot small {
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.calendar-slot.reserved {
  border-color: #e4cfaa;
}
.calendar-slot.reserved > span:not(.slot-time) {
  color: #8b672f;
}
.calendar-slot.blocked {
  background: repeating-linear-gradient(135deg, #ebedf0, #ebedf0 7px, #e2e6eb 7px, #e2e6eb 14px);
  color: #616973;
}
.calendar-slot.double {
  grid-row: span 2;
}
.calendar-slot:disabled {
  opacity: 0.45;
}
.day-closure {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 230px;
  padding: 24px 15px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.day-closure > span {
  font-size: 28px;
}
.day-closure strong {
  font-size: 15px;
  font-weight: 500;
}
.day-closure small {
  font-size: 12px;
}
.day-closure button {
  margin-top: 10px;
  font-size: 12px;
  padding: 9px;
}
.day-switch {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  margin-bottom: 10px;
}
.day-switch button {
  min-width: 58px;
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  background: #e8ecf2;
}
.day-switch span {
  font-size: 12px;
}
.day-switch strong {
  font-size: 18px;
  font-weight: 500;
}
.single-day .day-slots {
  grid-auto-rows: 64px;
  padding: 0 16px 16px;
  gap: 9px;
}
.single-day .calendar-slot {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.single-day .calendar-slot .slot-time {
  font-size: 16px;
  min-width: 70px;
}
.single-day .calendar-slot strong,
.single-day .calendar-slot > span:not(.slot-time) {
  font-size: 15px;
}
.single-day .calendar-slot.double {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.single-day .day-heading {
  padding: 14px 16px;
}
.single-day .day-title span {
  font-size: 13px;
}
.single-day .day-stats {
  padding: 8px 16px 16px;
  font-size: 14px;
}
.single-day .day-stats small {
  font-size: 12px;
}
.admin-dialog {
  width: min(580px, calc(100% - 32px));
  max-height: 90dvh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--white);
  color: var(--ink);
  padding: 24px;
  box-shadow: 0 12px 80px #19263640;
}
.admin-dialog.wide {
  width: min(900px, calc(100% - 32px));
}
.admin-dialog::backdrop {
  background: #15233655;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}
.dialog-head h2 {
  font-size: 23px;
  margin: 0;
  font-family: Georgia, serif;
}
.dialog-head button {
  width: 44px;
  padding: 8px;
  flex-shrink: 0;
}
.quick-context {
  padding: 14px 16px;
  border-radius: 9px;
  background: var(--light);
  font-size: 17px;
  margin-bottom: 16px;
}
.quick-context small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.quick-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 18px;
}
.quick-tabs button {
  flex: 1;
}
.dialog-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 18px;
}
.dialog-footer > button {
  flex: 1;
}

.admin-dialog input,
.admin-dialog select {
  font-size: 16px;
}
.admin-dialog .row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#second-person[hidden],
.quick-receipt[hidden] {
  display: none;
}
.quick-receipt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--light);
  padding: 14px;
  border-radius: 9px;
  margin-top: 14px;
  font-size: 13px;
}
.batch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}
.month-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.month-navigation strong {
  font-size: 15px;
  text-transform: capitalize;
}
.month-navigation button {
  width: 44px;
  padding: 8px;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 20px;
}
.month-weekday {
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  padding: 5px 0;
}
.month-day {
  border: 1px solid var(--border);
  background: #f6f8fa;
  border-radius: 7px;
  padding: 5px;
  color: var(--ink);
}
.month-day.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.month-day.today {
  box-shadow: inset 0 0 0 1px var(--primary);
}
.month-day:disabled {
  opacity: 0.25;
}
.selected-dates {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  max-height: 230px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.date-chip {
  border: 1px solid #b6c2d2;
  background: var(--light);
  border-radius: 7px;
  color: var(--primary);
  padding: 7px 10px;
}
.range-pick {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.conflict-item {
  font-size: 13px;
  color: var(--danger);
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid #ead6d0;
}
.block-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.block-group:first-child {
  padding-top: 0;
}
.block-group:last-child {
  border-bottom: 0;
}
.block-group h3 {
  font-size: 17px;
  margin-bottom: 5px;
}
.block-group p {
  margin-bottom: 10px;
}
.block-group button {
  flex-shrink: 0;
}
.group-dates {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}
.group-dates span {
  background: var(--light);
  padding: 4px 7px;
  border-radius: 5px;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .week-board,
  .week-board.with-weekend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .agenda-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .week-navigation {
    gap: 7px;
  }
  .week-navigation button {
    padding: 10px 13px;
  }
  .week-navigation strong {
    flex: 1;
    font-size: 16px;
    margin-left: 6px;
  }
  .view-switch button {
    flex: 1;
    min-height: 44px;
  }
  .agenda-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .agenda-actions button {
    padding: 10px;
    font-size: 14px;
  }
  #fast-new {
    grid-column: 1/-1;
  }
  .weekend-toggle {
    font-size: 12px;
    min-width: 0;
    justify-content: flex-end;
  }
  .calendar-legend {
    gap: 10px;
    font-size: 11px;
  }
  .week-board,
  .week-board.with-weekend {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .day-title span {
    font-size: 13px;
  }
  .day-title strong {
    font-size: 23px;
  }
  .day-stats small {
    font-size: 12px;
  }
  .day-slots {
    grid-auto-rows: 64px;
    padding: 0 14px 16px;
  }
  .calendar-slot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  .calendar-slot .slot-time {
    font-size: 16px;
    min-width: 65px;
  }
  .calendar-slot strong,
  .calendar-slot > span:not(.slot-time) {
    font-size: 15px;
  }
  .calendar-slot.double {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }
  .calendar-slot small {
    font-size: 13px;
  }
  .day-heading {
    padding: 12px 14px 8px;
  }
  .select-day {
    min-width: 44px;
    min-height: 48px;
  }
  .select-day input {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }
  .admin-dialog,
  .admin-dialog.wide {
    width: calc(100% - 16px);
    max-height: 94dvh;
    padding: 18px;
    border-radius: 14px;
  }
  .dialog-head h2 {
    font-size: 22px;
  }
  .dialog-head button {
    width: 48px;
    min-height: 48px;
  }
  .admin-dialog .row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .admin-dialog input,
  .admin-dialog select {
    min-height: 48px;
  }
  .admin-dialog label {
    font-size: 14px;
  }
  .dialog-footer {
    flex-direction: column;
  }
  .dialog-footer > button {
    width: 100%;
    flex: auto;
    min-height: 48px;
    font-size: 15px;
  }
  .quick-tabs button {
    font-size: 14px;
    padding: 10px;
  }
  .quick-context small {
    font-size: 13px;
  }
  .quick-receipt {
    flex-direction: column;
    align-items: stretch;
  }
  .batch-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .month-grid {
    gap: 4px;
  }
  .month-day {
    padding: 5px 0;
  }
  .selected-dates {
    max-height: 180px;
  }
  .date-chip {
    min-height: 44px;
    font-size: 13px;
  }
  .block-group {
    flex-direction: column;
    align-items: stretch;
  }
}
.admin-dialog .dialog-head {
  position: sticky;
  top: -24px;
  background: var(--white);
  z-index: 2;
  padding: 8px 0;
}
.admin-dialog .dialog-footer {
  position: sticky;
  bottom: -24px;
  background: var(--white);
  z-index: 1;
  padding-bottom: 12px;
}
@media (max-width: 760px) {
  .admin-dialog .dialog-head {
    top: -18px;
  }
  .admin-dialog .dialog-footer {
    bottom: -18px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
.cancel-preview {
  border: 1px solid #dfc5bf;
  background: #faf0ed;
  border-radius: 9px;
  padding: 16px;
  margin-top: 18px;
  font-size: 14px;
}
.cancel-preview[hidden] {
  display: none;
}
.cancel-preview p {
  margin-bottom: 12px;
}
.calendar-swipe-hint {
  display: none;
}
@media (max-width: 760px) {
  .calendar-swipe-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .week-board:not(.single-day) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 12px;
    padding-bottom: 14px;
    max-width: 100%;
  }
  .week-board:not(.single-day) > .day-column {
    flex: 0 0 clamp(240px, 82vw, 360px);
    scroll-snap-align: start;
  }
}

#manual-fields[hidden],
#slot-time-label[hidden] {
  display: none;
}
.calendar-slot.manual-visit {
  grid-row: span 2;
  min-height: 100px;
  border-left: 4px solid #607897;
}
.calendar-slot.manual-visit small:last-child {
  font-weight: 500;
}
.single-day .calendar-slot.manual-visit {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
@media (max-width: 760px) {
  .calendar-slot.manual-visit {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }
}

.work-summary,
.work-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.work-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 24px;
}
.work-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}
.work-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 14px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line, #d7dde5);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  color: inherit;
}
.work-item:hover {
  border-color: #284d7e;
  background: #f5f7fa;
}
.work-item small {
  display: block;
  margin: 6px 0;
}
.work-request {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.work-detail {
  margin-top: 24px;
}
.work-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.work-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.action-values {
  margin: 16px 0;
}
.action-values div {
  padding: 8px 0;
  border-bottom: 1px solid #e4e8ee;
}
.action-values dt {
  font-size: 0.8rem;
  color: #606872;
}
.action-values dd {
  margin: 3px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.work-detail details {
  margin: 16px 0;
}
.work-detail summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
}
.work-detail input[type='checkbox'] {
  width: auto;
}
.work-detail .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.work-status .badge {
  white-space: normal;
}
.work-item .badge {
  flex-shrink: 0;
}
.work-layout form button {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .work-layout,
  .work-two {
    grid-template-columns: 1fr;
  }
  .work-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .work-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-detail {
    padding: 18px;
  }
  .work-list-head {
    flex-wrap: wrap;
  }
}
.task-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
}
.task-row {
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.task-row .work-item {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.task-quick-actions {
  display: flex;
  justify-content: flex-end;
}

.task-row.is-complete {
  background: #f5f6f8;
}
.task-row.is-complete .work-item {
  background: transparent;
}
.task-state-completed {
  background: #e5ebf3;
  color: #243c5b;
}
.task-state-waiting {
  background: #fff1d7;
  color: #70552a;
}
.task-state-in_progress {
  background: #e9f0fb;
  color: #355878;
}
.task-state-cancelled {
  background: #f0efee;
  color: #62615d;
}
#task-detail input,
#task-detail textarea {
  max-width: 100%;
}
@media (max-width: 760px) {
  .task-quick-actions button {
    width: 100%;
  }
}
.closure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}
.closure-layout > aside {
  min-width: 0;
}
.closure-layout details > summary,
.closure-review details > summary {
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
}
.closure-option {
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.7;
}
.closure-review {
  margin-top: 24px;
  scroll-margin-top: 130px;
}
.closure-review .eyebrow {
  margin-bottom: 12px;
}
.closure-recipients {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}
.closure-recipient {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 0;
}
.closure-recipient-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  cursor: pointer;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.closure-recipient-check input {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
}
.closure-recipient-check .micro {
  display: block;
  line-height: 1.6;
  margin: 6px 0 0;
}
.closure-recipient ul {
  padding-left: 36px;
  font-size: 14px;
  line-height: 1.8;
}
.closure-recipient .work-pre {
  padding: 16px;
  background: var(--light);
  border-radius: 8px;
  line-height: 1.7;
}
.closure-history-item,
.closure-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.closure-history-item:first-child,
.closure-result:first-child {
  padding-top: 8px;
}
.closure-history-item small,
.closure-result small {
  color: var(--muted);
  line-height: 1.6;
}
.closure-history-item button {
  align-self: flex-start;
  margin-top: 8px;
}
.closure-awaiting {
  padding: 20px;
  background: var(--light);
  border-radius: 12px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .closure-layout {
    grid-template-columns: 1fr;
  }
  .closure-review {
    scroll-margin-top: 100px;
  }
  .closure-recipient {
    padding: 16px;
  }
}

/* === controls.css === */
input,
select,
textarea {
  font-size: 17px;
  min-height: 54px;
}
label {
  font-size: 14px;
}
button.primary,
button.secondary,
.button {
  min-height: 50px;
  font-size: 16px;
}
.large-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.large-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin-top: 6px;
  padding: 13px 16px;
  border: 1px solid #bcc4cf;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
}
.large-control > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.control-indicator {
  font-size: 25px;
  line-height: 1;
  color: var(--primary);
  flex-shrink: 0;
}
.large-control:hover:not(:disabled) {
  border-color: var(--primary);
}
.large-control[aria-invalid='true'] {
  border-color: var(--danger);
}
.control-dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  color: var(--ink);
  box-shadow: 0 24px 90px #131c2833;
  overflow: auto;
}
.control-dialog::backdrop {
  background: #131c2866;
}
.control-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.control-dialog-heading h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}
.control-close {
  flex-shrink: 0;
  width: 50px;
  padding: 0 !important;
  font-size: 20px !important;
}
.control-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
}
.control-options [role='option'] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font-size: 17px;
  line-height: 1.4;
}
.control-options [aria-selected='true'] {
  background: var(--light);
  border-color: var(--primary);
  font-weight: 600;
}
.control-options [role='option']:hover:not(:disabled) {
  background: #edf1f6;
  border-color: var(--primary);
}
.control-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 20px;
}
.control-month strong {
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}
.control-month button {
  min-width: 50px;
  padding: 0 !important;
  font-size: 24px !important;
}
.control-calendar-weekdays,
.control-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.control-calendar-weekdays {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 9px;
}
.control-calendar button {
  min-width: 0;
  min-height: 54px;
  font-size: 18px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ecf0f5;
  padding: 5px 0;
}
.control-calendar button[aria-current='date'] {
  border-color: var(--primary);
}
.control-calendar button[aria-pressed='true'] {
  background: var(--primary);
  color: white;
}
.control-calendar button:hover:not(:disabled) {
  border-color: var(--primary);
}
.control-calendar button:disabled {
  background: transparent;
  color: #969ca3;
  opacity: 0.6;
}
.control-calendar-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.control-time-value {
  font-size: 32px;
  text-align: center;
  letter-spacing: 0.08em;
  padding: 10px;
  margin-bottom: 16px;
  background: var(--light);
  border-radius: 12px;
  color: var(--primary);
}
.control-time-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 22px;
}
.control-time-grid button {
  min-width: 0;
  min-height: 48px;
  font-size: 17px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: white;
  color: var(--ink);
}
.control-time-grid button[aria-pressed='true'] {
  background: var(--primary);
  color: white;
}
.control-minute-grid {
  max-height: 250px;
  overflow: auto;
  padding: 3px;
}
.control-time-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  bottom: -20px;
  background: white;
  padding: 16px 0 6px;
}
.control-time-footer button {
  flex: 1;
}
.control-dialog h3 {
  font-size: 16px;
}
body:has(.control-dialog[open]) {
  overflow: hidden;
}
.calendar-heading .calendar-arrow {
  width: 52px;
  min-height: 52px;
  font-size: 24px;
}
.calendar-day {
  min-height: 60px;
  font-size: 18px;
}
.month-day {
  min-height: 52px;
  font-size: 17px;
}
.month-navigation button {
  min-width: 50px;
  font-size: 20px;
}
.admin-dialog label {
  font-size: 15px;
}
.admin-dialog input,
.admin-dialog select,
.admin-dialog textarea {
  font-size: 17px;
  min-height: 54px;
}
.admin-dialog .large-control {
  font-size: 17px;
}
.agenda-actions button,
.view-switch button {
  min-height: 50px;
  font-size: 15px;
}
.day-slots {
  grid-auto-rows: minmax(60px, auto);
}
.calendar-slot {
  min-height: 56px;
}
.calendar-slot .slot-time,
.calendar-slot strong {
  font-size: 14px;
}
.day-switch button {
  min-height: 60px;
}
.select-day input,
.weekend-toggle input {
  width: 24px;
  height: 24px;
  min-height: 24px;
}

.date-chip {
  min-height: 48px;
  font-size: 15px;
}
.professional-intro .home-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.professional-intro .home-actions .button {
  margin: 0;
  min-height: 58px;
  font-size: 17px;
  padding: 16px 24px;
}
.professional-intro .home-actions .home-sickness {
  color: var(--primary);
}
.day-status.full {
  background: #fff7e8;
  border-color: #e3d1ab;
}
.day-status.full .urgent-request-button {
  align-self: flex-start;
  margin-top: 12px;
  background: white;
  border-color: #c9ad7c;
  color: #705421;
}
.urgent-request-dialog {
  width: min(640px, calc(100% - 24px));
}
.urgent-request-dialog h2 {
  font-size: 25px;
}
.urgent-request-dialog p {
  font-size: 15px;
}
.urgent-request-dialog .actions {
  margin-top: 18px;
}
.urgent-request-dialog form > button {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .control-dialog {
    padding: 16px;
  }
  .control-dialog-heading h2 {
    font-size: 20px;
  }
  .control-calendar button {
    min-height: 52px;
    font-size: 17px;
  }
  .control-month strong {
    font-size: 17px;
  }
  .control-options [role='option'] {
    min-height: 58px;
    font-size: 17px;
  }
  .calendar-heading .calendar-arrow {
    width: 50px;
    min-height: 50px;
  }
  .calendar-day {
    min-height: 56px;
    font-size: 17px;
  }
  .month-day {
    min-height: 50px;
    font-size: 16px;
  }
  .professional-intro .home-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .professional-intro .home-actions .button {
    width: 100%;
    min-height: 58px;
  }
  .day-status.full .urgent-request-button {
    width: 100%;
    font-size: 15px;
  }
  .control-time-footer {
    bottom: -16px;
  }
  .control-time-grid {
    gap: 4px;
  }
  .control-time-grid button {
    min-height: 46px;
  }
  .single-day .calendar-slot {
    min-height: 64px;
  }
}
@media (max-width: 359px) {
  .control-calendar,
  .control-calendar-weekdays {
    gap: 2px;
  }
  .control-calendar button {
    min-height: 48px;
  }
  .control-dialog {
    padding: 12px;
  }
  .control-month button {
    min-width: 44px;
  }
  .control-time-grid button {
    font-size: 15px;
  }
}
.today-heading,
.today-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.today-heading h2 {
  text-transform: capitalize;
  margin: 0 0 6px;
  font-size: 25px;
}
.today-heading p {
  margin: 0;
}

.today-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.today-section-heading button {
  font-size: 14px;
  flex-shrink: 0;
}
.today-empty {
  padding: 20px 0;
  color: var(--muted);
  margin: 0;
}
.today-appointment {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  color: var(--ink);
  text-align: left;
}
.today-appointment > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.today-appointment strong,
.today-appointment small {
  display: block;
}
.today-appointment small {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.today-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.today-time small {
  font-weight: 400;
}
.today-activity {
  border-bottom: 1px solid var(--border);
}
.today-activity-content {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  color: var(--ink);
}
.today-activity-content strong,
.today-activity-content span,
.today-activity-content small {
  display: block;
  overflow-wrap: anywhere;
}
.today-activity-content span {
  white-space: pre-wrap;
  font-size: 15px;
}
.today-activity-content small,
.today-note small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.today-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.today-note > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.today-note p {
  white-space: pre-wrap;
  margin: 6px 0;
}
.today-note button {
  flex-shrink: 0;
  font-size: 14px;
}
.today-list > :last-child,
.today-note:last-child {
  border-bottom: 0;
}
.today-appointment:hover,
.today-activity-content:hover {
  color: var(--primary);
}
@media (max-width: 760px) {
  .today-panels {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .today-heading h2 {
    font-size: 22px;
  }
  .today-heading button {
    font-size: 14px;
  }
  .today-note {
    flex-direction: column;
    gap: 12px;
  }
  .today-note button {
    width: 100%;
  }
  .today-section-heading {
    gap: 10px;
  }
  .today-section-heading h2 {
    font-size: 20px;
  }
  .today-section-heading button {
    padding: 10px 12px;
  }
}

/* === theme.css === */
/* Rifinitura grafica del sito e dell'area privata. Caricato dopo gli altri fogli di stile: mantiene classi e struttura esistenti. */
:root {
  --ink: #14233a;
  --muted: #5a6880;
  --primary: #1f4f8f;
  --primary-dark: #173d70;
  --light: #e9f0fa;
  --border: #e1e6ef;
  --cream: #f5f7fb;
  --white: #fff;
  --danger: #a13831;
  --sand: #f8f1e1;
  --sand-border: #e8d8b4;
  --sand-ink: #7a5c25;
  --serif: 'Iowan Old Style', 'Charter', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --shadow-sm: 0 1px 2px rgba(20, 35, 58, 0.05), 0 1px 3px rgba(20, 35, 58, 0.04);
  --shadow-md: 0 6px 24px -8px rgba(20, 35, 58, 0.16), 0 2px 6px rgba(20, 35, 58, 0.04);
  --ring: 0 0 0 3px rgba(31, 79, 143, 0.18);
  --radius-card: 18px;
  --radius-control: 10px;
}
body {
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: #cdd7e4;
}
h1,
.location-details h2,
.dialog-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
}
h1 {
  line-height: 1.12;
}
h2 {
  letter-spacing: -0.01em;
}
.eyebrow {
  letter-spacing: 0.14em;
  font-size: 11.5px;
}
.muted {
  color: var(--muted);
}

/* Banner demo e intestazione */
.demo {
  background: #eaeff7;
  color: #4f5f7a;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-bottom: 1px solid #dde4ef;
}
header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 32px;
  background: rgba(245, 247, 251, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 0 0 100vmax rgba(245, 247, 251, 0.86);
  clip-path: inset(0 -100vmax -1px);
}
.brand {
  font-size: 15.5px;
  letter-spacing: -0.005em;
}

.staff-access {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
main {
  margin-top: 40px;
}

/* Intestazione: marchio con stetoscopio, nome in serif e collegamenti principali */
header {
  gap: 24px;
}
.brand {
  gap: 14px;
}
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2b62ab, #1a427a);
  color: #fff;
  font-size: 0;
  box-shadow:
    0 1px 2px rgba(20, 33, 50, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.brand-mark svg {
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand small {
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.site-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.site-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.site-links a:hover {
  background: rgba(37, 70, 112, 0.08);
  color: var(--primary-dark);
}
.site-links .site-links-cta {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 33, 50, 0.18);
}
.site-links .site-links-cta:hover {
  background: var(--primary-dark);
  color: #fff;
}
.staff-access {
  margin-left: 4px;
}
body:has(main .staff-bar) .site-links {
  display: none;
}

/* Pulsanti */
.button,
button.primary,
button.secondary,
.button.secondary {
  border-radius: var(--radius-control);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.05s;
  font-weight: 500;
}
.button,
button.primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow:
    0 1px 2px rgba(20, 33, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.button:hover,
button.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.button.secondary,
button.secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.button.secondary:hover,
button.secondary:hover:not(:disabled) {
  background: #f3f5f7;
  border-color: #c4ccd7;
}
.button:active,
button.primary:active,
button.secondary:active {
  transform: translateY(1px);
}
button.chosen {
  box-shadow: var(--shadow-sm) !important;
}
.danger {
  background: var(--white);
}
:focus-visible {
  outline: 3px solid rgba(37, 70, 112, 0.35);
  outline-offset: 2px;
}

/* Campi */
label {
  color: #3f4853;
  font-weight: 500;
}
input,
select,
textarea,
.large-control {
  border: 1px solid #d5d9de;
  border-radius: var(--radius-control);
  background: var(--white);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #bbc2cc;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
input::placeholder,
textarea::placeholder {
  color: #99a0a8;
}
.large-control:hover:not(:disabled) {
  background: var(--white);
}

/* Schede */
.card,
.contact-card,
.location-card,
.certificate-prices-preview {
  border-color: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.card {
  padding: 28px 30px;
}
.summary,
.quick-context {
  border-radius: 12px;
}
.badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 500;
}
.form-error {
  border-radius: 12px;
}
#notice {
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: var(--shadow-md);
  background: #122032;
}

/* Home pubblica */
.professional-intro {
  margin: 20px 0 44px;
}
.professional-intro h1 {
  margin: 14px 0 14px;
}
.professional-intro .muted {
  font-size: 17px;
  max-width: 560px;
}
.professional-intro .home-actions .button {
  border-radius: 12px;
}
.professional-intro .home-actions .home-sickness {
  background: var(--white);
  border-color: #c7cfda;
  box-shadow: var(--shadow-sm);
}
.professional-intro .home-actions .home-sickness:hover {
  background: #f3f5f7;
}
.today-opening {
  border-radius: 14px;
  padding: 16px 20px;
  background: var(--white);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.today-opening.closed,
.today-opening.outside-hours {
  background: var(--sand);
  border-color: var(--sand-border);
}
.opening-dot {
  box-shadow: 0 0 0 4px rgba(37, 70, 112, 0.15);
}
.today-opening.closed .opening-dot,
.today-opening.outside-hours .opening-dot {
  box-shadow: 0 0 0 4px rgba(170, 134, 81, 0.18);
}
.contact-mail-primary {
  background: var(--white);
  border-color: #ced6e1;
  box-shadow: var(--shadow-md);
}
.contact-phone-secondary {
  background: rgba(255, 255, 255, 0.55);
}
.contact-symbol {
  border-radius: 12px;
}
.office-hours {
  padding: 11px 0;
}
.office-hours:last-of-type {
  border-bottom: 0;
}
.certificate {
  border-radius: var(--radius-card);
  background: #eef1f4;
  border-color: #d2d9e3;
}
.certificate-prices-preview {
  background: var(--white);
}
.location-card {
  border-radius: 22px;
}
.location-room {
  border-radius: 12px;
}
.map-pin {
  box-shadow: var(--shadow-md);
  border: 0;
}
footer {
  margin-top: 24px;
  padding: 28px;
  font-size: 12.5px;
}
footer a {
  text-decoration: none;
  color: var(--primary);
}
footer a:hover {
  text-decoration: underline;
}

/* Prenotazione */
.calendar-day {
  border-radius: 12px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.calendar-day.selected {
  box-shadow: 0 4px 12px -4px rgba(37, 70, 112, 0.5);
}
.choice {
  border-radius: 12px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.choice.selected {
  box-shadow: var(--ring);
}
.slot {
  border-radius: 10px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.slot:hover:not(:disabled):not(.selected) {
  border-color: var(--primary);
  background: #f3f5f7;
}
.mobile-progress span,
.calendar-first .mobile-progress span {
  border-radius: 999px;
}
.day-status {
  border-radius: 14px;
}

/* Finestre di dialogo */
.admin-dialog,
.control-dialog,
.certificate-prices-dialog {
  border-radius: 20px;
  border: 0;
  box-shadow: 0 24px 80px -12px rgba(19, 28, 40, 0.35);
}
.admin-dialog::backdrop,
.control-dialog::backdrop,
.certificate-prices-dialog::backdrop {
  background: rgba(19, 28, 40, 0.38);
  backdrop-filter: blur(3px);
}

/* ——— Area privata ——— */
main:has(.staff-bar) {
  max-width: 1180px;
}
main.admin-wide:has(.staff-bar) {
  max-width: 1380px;
}
.staff-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.staff-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.staff-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
}
.staff-nav-item:hover {
  background: #f1f3f5;
  color: var(--ink);
}
.staff-nav-item.is-active {
  background: var(--light);
  color: var(--primary-dark);
  font-weight: 600;
}
.staff-nav-item svg {
  flex-shrink: 0;
}
.staff-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}
.staff-role {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 12px;
  background: #eff1f4;
  border-radius: 999px;
}
.staff-logout {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 10px;
}
.staff-logout:hover {
  background: #f1f3f5;
  color: var(--danger);
}
.staff-page-head {
  margin: 0 0 26px;
}
.staff-page-head h1 {
  font-size: 38px;
  margin: 0 0 6px;
}
.staff-page-head p {
  margin: 0;
  font-size: 15px;
}
.link-button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 8px;
  min-height: 40px;
  border-radius: 8px;
}
.link-button:hover {
  background: var(--light);
}
.icon-button {
  width: 44px;
  padding: 0 !important;
  font-size: 20px !important;
}
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--light);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  vertical-align: 3px;
}
.empty-state,
.today-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed #d5d9de;
  border-radius: 14px;
  margin: 4px 0 0;
  font-size: 15px;
}

/* Oggi */
.today-heading {
  align-items: flex-end;
  margin-bottom: 24px;
}
.today-heading h1 {
  font-size: clamp(32px, 4.4vw, 44px);
  margin: 0 0 8px;
}
.today-heading h1::first-letter {
  text-transform: uppercase;
}
.today-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 70, 112, 0.15);
  flex-shrink: 0;
}
.today-status.is-closed .status-dot {
  background: #aa8651;
  box-shadow: 0 0 0 4px rgba(170, 134, 81, 0.18);
}
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.05s;
}
.quick-action span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--light);
  color: var(--primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.quick-action:hover {
  border-color: #b7c2d1;
  box-shadow: var(--shadow-md);
}
.quick-action:active {
  transform: translateY(1px);
}
#quick-booking span {
  background: var(--primary);
  color: var(--white);
}
.today-pin {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px 18px;
  margin: 0 0 10px;
  background: var(--sand);
  border: 1px solid var(--sand-border);
  border-radius: 14px;
}
.today-pin > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.today-pin strong {
  display: block;
  color: #4e3c18;
  font-weight: 600;
}
.today-pin p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  font-size: 15px;
  color: #5b4a26;
}
.today-pin small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--sand-ink);
}
.today-pin button.secondary {
  flex-shrink: 0;
  min-height: 40px;
  font-size: 14px;
  color: var(--sand-ink);
  border-color: var(--sand-border);
}
.today-panels {
  margin-top: 22px;
  gap: 20px;
}
.today-panels .card {
  padding: 22px 24px;
}
.today-section-heading {
  align-items: center;
  margin-bottom: 10px;
}
.today-section-heading h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.today-appointment {
  min-height: 64px;
  padding: 12px 10px;
  margin: 0 -10px;
  width: calc(100% + 20px);
  border-radius: 12px;
  border-bottom: 0;
  background: transparent;
  transition: background 0.15s;
}
.today-list > .today-appointment + .today-appointment {
  box-shadow: 0 -1px 0 var(--border);
}
.today-appointment:hover {
  background: #f4f5f7;
  color: var(--ink);
}
.today-time {
  font-size: 17px;
  min-width: 58px;
}
.today-activity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.today-activity-content {
  padding: 0;
  flex: 1;
  min-width: 0;
  background: transparent;
}
.today-activity-content span {
  margin-top: 2px;
  color: #3b434e;
}
.today-activity-content small {
  margin-top: 4px;
}
.today-activity > button.secondary {
  flex-shrink: 0;
  min-height: 40px;
  font-size: 14px;
}
.today-request-alerts {
  border-color: var(--sand-border);
  background: var(--sand);
}

/* Note */
.notes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: start;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 8px;
}
.card-head h2 {
  margin: 0 0 12px;
}
.compact-date {
  margin: 0;
  width: 210px;
}
.notes-layout .row {
  grid-template-columns: 1fr;
  gap: 0;
}
.studio-note {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}
.studio-note:last-child {
  border-bottom: 0;
}
.studio-note > div {
  min-width: 0;
}
.studio-note button {
  flex-shrink: 0;
  min-height: 40px;
  font-size: 14px;
}
.note-time {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--sand-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.completed {
  opacity: 0.55;
}

/* Attività */
.work-summary {
  margin: -12px 0 20px;
}
.work-summary p {
  margin: 0;
}
.work-summary label {
  margin: 0;
  width: 220px;
}

.work-layout > .card {
  position: sticky;
  top: 96px;
}
.work-layout > .card h3 {
  font-size: 18px;
  margin-bottom: 16px;
}
.task-filters {
  gap: 12px;
  margin-bottom: 14px;
}
.task-filters label {
  margin: 0;
}
.task-row {
  border-color: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}
.task-row:hover {
  border-color: #c4ccd7;
}
.task-row .work-item {
  padding: 16px 18px 10px;
}
.task-row .work-item:hover {
  background: transparent;
}
.work-item small {
  color: var(--muted);
  font-size: 13px;
}
.task-quick-actions {
  padding: 0 18px 14px;
}
.task-quick-actions button {
  min-height: 40px !important;
  font-size: 14px;
}
.work-list-head h3 {
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
  margin: 6px 0 12px;
}
.work-item .badge {
  background: #eceff2;
  color: #3f4853;
}
.work-item .task-state-completed {
  background: #e2e9f2;
  color: #203b5e;
}
.work-item .task-state-waiting {
  background: #fbf0d6;
  color: #70552a;
}
.work-item .task-state-in_progress {
  background: #e6eefa;
  color: #2f5476;
}
.work-detail {
  box-shadow: var(--shadow-md);
}

/* Agenda */
.agenda-toolbar {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.week-navigation strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.view-switch {
  background: #e5e9ee;
  border-radius: 12px;
}
.agenda-actions {
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.day-column {
  background: var(--white);
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.day-column.is-today {
  border-color: #99adc6;
  box-shadow:
    0 0 0 3px rgba(37, 70, 112, 0.1),
    var(--shadow-sm);
}
.day-heading {
  background: var(--white);
  border-bottom: 1px solid #eceef1;
}
.day-stats {
  padding-top: 10px;
}
.calendar-slot {
  border-radius: 10px;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.calendar-slot.free {
  background: transparent;
  border: 1px dashed #d9dde3;
  color: var(--muted);
}
.calendar-slot.free .slot-time {
  color: #707882;
  font-weight: 500;
}
.calendar-slot.free:hover {
  background: var(--light);
  border-style: solid;
  border-color: #9babbf;
}
.calendar-slot.occupied {
  background: #e7effb;
  border-color: #c6d7ef;
  border-left: 3px solid var(--primary);
}
.calendar-slot.occupied:hover {
  background: #dbe7f8;
}
.calendar-slot.reserved {
  background: #fcf6e8;
  border: 1px dashed #e2cfa4;
}
.calendar-legend .legend-free:before {
  border-style: dashed;
}
.agenda-staff-note {
  border-radius: 12px;
  background: var(--sand);
  border-color: var(--sand-border);
}

/* Finestra di dettaglio attività */
.task-dialog {
  width: min(560px, calc(100% - 32px));
}
.task-dialog .dialog-head {
  align-items: flex-start;
}
.task-dialog .dialog-head h2 {
  font-size: 26px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.task-meta .badge {
  background: #eef2f8;
  color: #3c4b63;
}
.task-meta .task-state-completed {
  background: #e3f1e7;
  color: #245a3f;
}
.task-meta .task-state-waiting {
  background: #fbf0d6;
  color: #70552a;
}
.task-meta .task-state-in_progress {
  background: var(--light);
  color: var(--primary-dark);
}
.task-request {
  padding: 16px 18px;
  margin: 0 0 14px;
  background: #f6f8fc;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.task-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.task-contact > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.task-contact strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.task-contact .actions {
  flex-shrink: 0;
  gap: 8px;
}
.task-contact .button,
.task-contact button {
  min-height: 42px;
  padding: 8px 14px;
  font-size: 14px;
}
.task-private {
  padding: 12px 16px;
  margin: 0 0 14px;
  background: var(--sand);
  border: 1px solid var(--sand-border);
  border-radius: 12px;
}
.task-private .task-label {
  color: var(--sand-ink);
}
.task-private p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-states {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: #eef2f8;
  border-radius: 12px;
}
.task-state-option {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
}
.task-state-option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.task-state-option.is-current {
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.task-dialog .dialog-footer > button {
  flex: 1;
}
.task-dialog .dialog-footer [data-edit] {
  flex: 0 0 auto;
}
.task-row .work-item {
  cursor: pointer;
}
@media (max-width: 760px) {
  .task-dialog .dialog-head h2 {
    font-size: 22px;
  }
  .task-contact {
    flex-direction: column;
    align-items: stretch;
  }
  .task-contact .actions > * {
    flex: 1;
  }
  .task-state-option {
    flex: 1 1 30%;
  }
}

/* Telefono: barra di navigazione fissa in basso */
@media (max-width: 760px) {
  header {
    padding: 12px 16px;
  }
  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .brand-mark svg {
    width: 20px;
    height: 20px;
  }
  .brand-name {
    font-size: 17px;
  }
  .site-links {
    display: none;
  }
  main {
    margin-top: 24px;
  }
  .card {
    padding: 20px;
  }
  .professional-intro h1 {
    font-size: 40px;
  }
  .professional-intro .muted {
    font-size: 16px;
  }
  main:has(.staff-bar) {
    padding-bottom: 96px;
  }
  .staff-bar {
    margin: -8px 0 20px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    justify-content: flex-end;
  }
  .staff-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(20, 33, 50, 0.06);
  }
  .staff-nav-item {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    font-size: 11.5px;
    border-radius: 12px;
  }
  .staff-nav-item svg {
    width: 22px;
    height: 22px;
  }
  .staff-nav-item.is-active {
    background: var(--light);
  }
  #notice {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .staff-page-head h1 {
    font-size: 30px;
  }
  .quick-actions {
    gap: 8px;
  }
  .quick-action {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    padding: 12px 6px;
    font-size: 14px;
    text-align: center;
  }
  .today-heading {
    align-items: flex-start;
  }
  .today-pin {
    flex-direction: column;
    gap: 10px;
  }
  .today-pin button.secondary {
    width: 100%;
  }
  .today-activity {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .today-activity > button.secondary {
    width: 100%;
  }
  .notes-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .compact-date {
    width: 100%;
    margin-bottom: 8px;
  }
  .studio-note {
    flex-direction: column;
    gap: 10px;
  }
  .studio-note button {
    width: 100%;
  }
  .work-summary {
    margin-top: -8px;
  }
  .work-summary label {
    width: 100%;
  }
  .work-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-layout > .card {
    position: static;
  }
  .task-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sito pubblico: hero compatto con apertura odierna e domande frequenti */
.professional-intro h1 {
  font-size: clamp(32px, 5vw, 52px);
  max-width: 16ch;
}
.professional-intro .today-opening {
  margin-top: 22px;
  max-width: 620px;
}
.professional-intro .today-opening a {
  display: none;
}
.faq-section {
  margin: 0 0 32px;
}
.faq-section h2 {
  margin: 0 0 12px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--primary);
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 12px;
}
.faq-item p {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--muted);
  line-height: 1.55;
}
.hero-hours {
  margin: -4px 0 18px;
  font-size: 15px;
  color: var(--ink);
}
/* Attività: elenco come contenuto principale, modulo nuova attività in finestra */
.work-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
.work-layout {
  grid-template-columns: minmax(0, 1fr);
}
.new-task-dialog {
  width: min(520px, calc(100% - 32px));
}

/* Note e note in evidenza: contenuto toccabile che apre la finestra di dettaglio */
.today-pin-content,
.studio-note-content {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  border-radius: 8px;
  box-shadow: none;
  min-height: 0;
}
.today-pin-content:focus-visible,
.studio-note-content:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.studio-note-content strong {
  display: block;
}
.studio-note-content p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.studio-note-content small {
  display: block;
  margin-top: 6px;
}
.note-dialog .task-request {
  margin-top: 0;
}
@media (max-width: 760px) {
  .work-toolbar .primary {
    width: 100%;
  }
  .new-task-dialog {
    width: calc(100% - 24px);
  }
  .studio-note .studio-note-content {
    width: 100%;
  }
}

/* Primo giorno libero nel calendario pubblico, sotto il pulsante urgente */
.next-free-day {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.next-free-day:empty {
  display: none;
}
.next-free-day span {
  font-size: 14px;
  color: var(--ink);
}
.next-free-day button {
  min-height: 44px;
}
@media (max-width: 760px) {
  .next-free-day {
    flex-direction: column;
    align-items: stretch;
  }
  .next-free-day button {
    width: 100%;
  }
}

/* Agenda staff: finestra "Primo posto libero" */
.first-free-result {
  margin: 14px 0;
}
.first-free-result .summary {
  margin-bottom: 12px;
}
.first-free-result .summary strong {
  display: block;
  font-size: 20px;
  color: var(--primary);
  text-transform: capitalize;
}
.first-free-result .dialog-footer {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  margin: 0;
}

/* Agenda compatta su desktop (settimana): righe a misura, slot liberi bassi e discreti */
@media (min-width: 761px) {
  .week-board:not(.single-day) .day-slots {
    grid-auto-rows: auto;
    gap: 5px;
  }
  .week-board:not(.single-day) .calendar-slot {
    min-height: 46px;
  }
  .week-board:not(.single-day) .calendar-slot.free,
  .week-board:not(.single-day) .calendar-slot.reserved {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 3px 9px;
    gap: 6px;
  }
  .week-board:not(.single-day) .calendar-slot.free .slot-time,
  .week-board:not(.single-day) .calendar-slot.reserved .slot-time {
    font-size: 12px;
  }
  .week-board:not(.single-day) .calendar-slot.free > span:not(.slot-time),
  .week-board:not(.single-day) .calendar-slot.reserved > span:not(.slot-time) {
    font-size: 0;
  }
  .week-board:not(.single-day) .calendar-slot.free > span:not(.slot-time) {
    color: var(--muted);
  }
  .week-board:not(.single-day) .calendar-slot.free > span:not(.slot-time)::after,
  .week-board:not(.single-day) .calendar-slot.reserved > span:not(.slot-time)::after {
    content: '+';
    font-size: 16px;
    line-height: 1;
  }
  .week-board:not(.single-day) .calendar-slot.double,
  .week-board:not(.single-day) .calendar-slot.manual-visit {
    min-height: 96px;
  }
}

/* Ricerca assistiti: suggerimenti (combobox) */
.ps-pop {
  position: fixed;
  z-index: 1000;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ps-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ps-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
}
.ps-list li[aria-selected='true'],
.ps-list li:hover {
  background: var(--light);
}
.ps-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ps-meta {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.ps-cf {
  grid-column: 1/-1;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
}
.ps-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--muted);
}

/* Ricerca assistiti: pulsante nella barra e finestra con scheda */
.staff-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
}
.staff-search:hover {
  background: #f1f3f5;
  color: var(--primary);
}
.patient-finder {
  min-height: min(420px, 80dvh);
}
.pf-detail {
  margin-top: 14px;
  display: grid;
  gap: 16px;
}
.pf-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.pf-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  overflow-wrap: anywhere;
}
.pf-data {
  display: grid;
  gap: 8px;
  margin: 0;
}
.pf-data div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.pf-data dt {
  font-size: 13px;
  color: var(--muted);
  min-width: 140px;
}
.pf-data dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.pf-detail h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}
.pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pf-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.pf-item:hover {
  border-color: #b7c2d1;
}
.pf-item small {
  color: var(--muted);
}
.pf-detail .dialog-footer {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  margin: 0;
}
@media (max-width: 760px) {
  .patient-finder {
    width: calc(100% - 24px);
  }
  .pf-data dt {
    min-width: 0;
    width: 100%;
  }
  .pf-detail .dialog-footer {
    flex-direction: column;
  }
  .pf-detail .dialog-footer > button {
    width: 100%;
  }
}

/* Richieste dal sito: voce nella barra, elenco, riquadro in Oggi e finestra di gestione */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.staff-nav-item {
  position: relative;
}
.request-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.request-list {
  display: grid;
  gap: 8px;
}
.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.request-row:hover {
  border-color: #b7c2d1;
}
.request-row-main,
.request-row-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.request-row-main strong {
  overflow-wrap: anywhere;
}
.request-row-side {
  align-items: flex-end;
  flex-shrink: 0;
}
.request-row small,
.today-request small {
  color: var(--muted);
  font-size: 13px;
}
.request-state-new {
  background: var(--primary) !important;
  color: #fff !important;
}
.request-state-accepted {
  background: #e3ecf8 !important;
  color: #1f4a8a !important;
}
.request-state-handled {
  background: #e3f1e7 !important;
  color: #245a3f !important;
}
.request-state-closed {
  background: #eceff2 !important;
  color: #3f4853 !important;
}
.today-request {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
}
.today-request small {
  grid-column: 1;
}
.today-request span {
  grid-row: 1/3;
  grid-column: 2;
}
.today-request:hover {
  background: #f4f5f7;
}
.request-dialog {
  width: min(600px, calc(100% - 32px));
}
.request-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 12px 0;
}
.request-contacts > div {
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.request-line {
  margin: 10px 0;
}
.request-appointment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--light);
  border-radius: 12px;
}
.request-log {
  margin: 14px 0;
}
.request-log-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.request-log-row small {
  width: 100%;
  color: var(--muted);
}
.request-protocol {
  margin: 14px 0;
  display: grid;
  gap: 8px;
}
.request-subtitle {
  margin: 0 0 8px;
  font-size: 18px;
}
.request-sim {
  padding: 8px 12px;
  background: var(--sand);
  border-radius: 10px;
}
.request-channels {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}
.request-channels legend {
  padding: 0;
  margin-bottom: 6px;
  font-weight: 600;
}
.request-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}
.request-channel input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
}
.request-channel span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.request-channel small {
  color: var(--muted);
  font-size: 13px;
}
.request-channel.is-off {
  background: #f4f5f7;
  cursor: not-allowed;
}
.request-channel.is-off strong {
  color: var(--muted);
}
.request-confirm {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--sand);
  border-radius: 12px;
}
.request-confirm p {
  margin: 0 0 6px;
}
.request-dialog .dialog-footer .link-button {
  flex: 0 0 auto;
}
.request-dialog textarea {
  width: 100%;
}
.staff-nav-item .nav-badge {
  margin-left: 2px;
}
@media (max-width: 760px) {
  .request-dialog {
    width: calc(100% - 24px);
  }
  .request-row {
    padding: 12px;
  }
  .staff-nav-item .nav-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    margin: 0;
  }
  /* Con sette voci (medico) la barra in basso riduce etichette e margini */
  .staff-nav.is-dense .staff-nav-item {
    font-size: 10.5px;
    padding: 6px 0;
    gap: 2px;
  }
  .staff-nav.is-dense .staff-nav-item svg {
    width: 20px;
    height: 20px;
  }
}

/* Sito pubblico: colleghi dell'AFT in una card richiudibile sotto il telefono */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.aft-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.55);
}
.aft-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
}
.aft-card summary::-webkit-details-marker {
  display: none;
}
.aft-card summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}
.aft-card[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.aft-card summary strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.aft-card summary small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.aft-card summary:focus-visible {
  border-radius: var(--radius-card);
}
.aft-body {
  padding: 0 18px 16px;
}
.aft-body > p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.aft-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.aft-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.aft-list li > div {
  min-width: 0;
}
.aft-list strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.aft-list small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.aft-list a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.aft-list a:hover {
  text-decoration: underline;
}
.aft-source {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
}