/* Shared viewport and accessibility safeguards; theme colors remain local. */
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
  min-width: 0;
  scroll-margin-block: 5rem;
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
:where(.overflow-x-auto) {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
:where(dialog) {
  max-width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shared readable type scale; rem units respect browser preferences. */
:root {
  --text-small: .875rem;
  --text-body: 1rem;
  --text-card-title: 1.25rem;
  --text-section-title: 1.5rem;
  --text-page-title: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
}
html { font-size: 100%; }
body { font-size: var(--text-body); line-height: 1.5; }
:is([class~="text-[9px]"], [class~="text-[10px]"],
    [class~="text-[11px]"], [class~="text-[12px]"],
    [class~="text-[12.5px]"], [class~="text-[13px]"]) {
  font-size: var(--text-small) !important;
  line-height: 1.5;
}
button, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 2.75rem; }
button { white-space: normal; overflow-wrap: break-word; }
textarea { line-height: 1.5; }
:where(h1, h2, h3, h4, p, label, dt, dd) { overflow-wrap: break-word; }
:where(.flex, .grid) > :where(div, section, article, fieldset) { min-width: 0; }
/* Supporting text stays distinct from body copy while remaining readable. */
body .text-xs, body .text-sm {
  font-size: var(--text-small) !important;
  line-height: 1.5;
}
small { font-size: var(--text-small); line-height: 1.5; }
/* Counter badges need enough room when their text grows or counts gain digits. */
body :is(.text-xs, .text-sm).h-4 {
  height: auto;
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding-inline: .2rem;
}
/* Body utilities retain the standard reading size. */
body :is(.text-base, [class~="text-[15px]"], [class~="text-[17px]"], [class~="text-[1.05rem]"]) {
  font-size: var(--text-body) !important;
  line-height: 1.5;
}
/* Portal shells account for the decorative 6px bar, avoiding a second body scrollbar. */
body.salon-portal:has(> .flex.h-screen) { height: 100dvh; min-height: 0; overflow: hidden; }
body.salon-portal > .flex.h-screen { height: calc(100dvh - .375rem); }
body.salon-portal main, body.salon-portal main > section.flex-1 { min-height: 0; min-width: 0; }
/* Keep one scrolling surface in dialogs rather than a second scroll inside terms/slots. */
body.salon-portal [id="rescheduleSlots"] { max-height: none; overflow-y: visible; }
body.salon-portal .booking-detail-finances dt { font-weight: 700; }
.portal-notification-panel { max-width: calc(100vw - 2rem); }
.portal-notification-panel > .overflow-y-auto { min-height: 0; overscroll-behavior: contain; }
.portal-notification-message { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.portal-notification-unread { background: rgba(0,112,115,.07); box-shadow: inset 3px 0 #006D6F; }
.portal-notification-read-all { padding: 10px; color: #006D6F; }
.portal-notification-read-all:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .portal-notification-panel { position: fixed !important; top: 4.5rem; right: 1rem; width: calc(100vw - 2rem); max-height: 70dvh; }
  .portal-notification-panel > .overflow-y-auto { max-height: 48dvh; }
}

/* Notification panels keep their header/footer outside one contained scrolling list. */
.customer-notification-panel, .portal-notification-panel { max-height: min(32rem, calc(100dvh - 7rem)) !important; overscroll-behavior: contain; overflow: hidden; }
.portal-notification-panel { display: flex; flex-direction: column; }
.portal-notification-panel > :first-child, .portal-notification-panel > :last-child:not(.overflow-y-auto) { flex-shrink: 0; }
.portal-notification-panel > .overflow-y-auto, .customer-notification-panel .notification-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.notification-state-badge { display: inline-block; margin-top: 7px; padding: 2px 8px; border: 1px solid #cbbf9f; border-radius: 999px; color: #68541e; background: #f7efd9; font-size: 11px; font-weight: 600; line-height: 1.5; }
.portal-notification-service { margin-top: 8px; font-size: 13px; font-weight: 600; }
.portal-notification-meta { margin-top: 2px; font-size: 12px; line-height: 1.5; }
.portal-notification-panel > .p-3 { padding: 10px 12px; }
.portal-notification-read-all { padding: 6px 10px; }

/* Phones: iOS Safari zooms the page when a focused field is under 16px. */
@media (max-width: 767.98px) {
  /* :root raises specificity above the themes' ".text-xs { font-size:.875rem !important }". */
  :root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) { font-size: 16px !important; }
}

/* Phones: lists start higher and tables stay readable (all portals). */
@media (max-width: 767.98px) {
  /* Stat-card rows: two per row with tighter padding; an odd last card spans the row. */
  [data-stat-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
  [data-stat-grid] > * { padding: .875rem !important; }
  [data-stat-grid] > :last-child:nth-child(odd) { grid-column: span 2; }

  /* A table inside a scroll box keeps readable columns and swipes sideways,
     instead of squeezing every word onto its own line. */
  .overflow-x-auto > table, [data-wide-table] { min-width: 40rem; }
  /* Six or more columns need more room per column. */
  .overflow-x-auto > table:has(th:nth-child(6)), [data-wide-table]:has(th:nth-child(6)) { min-width: 56rem; }
  .overflow-x-auto > table th, [data-wide-table] th { white-space: nowrap; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}