/* Fachowiec24 R25.14-A
 * Responsive, touch-safe presentation for the shared booking workspace.
 * The rules are intentionally scoped to stable booking roots/test ids and do
 * not alter application state, visibility decisions, APIs or React ownership.
 */

[data-f24-r2514-surface] *,
[data-f24-r2514-surface] *::before,
[data-f24-r2514-surface] *::after {
  box-sizing: border-box;
}

[data-f24-r2514-surface] {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

[data-f24-r2514-surface] img,
[data-f24-r2514-surface] video,
[data-f24-r2514-surface] canvas,
[data-f24-r2514-surface] svg {
  max-width: 100%;
}

[data-f24-r2514-surface] input,
[data-f24-r2514-surface] select,
[data-f24-r2514-surface] textarea,
[data-f24-r2514-surface] button,
[data-f24-r2514-surface] a {
  min-width: 0;
}

[data-f24-r2514-surface] input,
[data-f24-r2514-surface] select,
[data-f24-r2514-surface] textarea {
  max-width: 100%;
  font-size: 16px;
}

[data-f24-r2514-surface] :where(button, a, input, select, textarea):focus-visible,
#f24-r2514-runtime-alert:focus-visible {
  outline: 3px solid rgba(79, 70, 229, .32);
  outline-offset: 2px;
}

/* Public catalogue */
[data-testid="booking-catalog-route"] > div,
[data-testid="booking-catalog-page"],
[data-testid="booking-catalog-list"],
[data-testid="booking-catalog-list"] > li,
[data-testid^="booking-catalog-card-"] > div,
[data-testid^="booking-catalog-card-"] > div > div {
  min-width: 0;
  max-width: 100%;
}

[data-testid="booking-catalog-quick-categories"] > div {
  align-items: stretch;
}

[data-testid="booking-catalog-quick-categories"] label,
[data-testid="booking-catalog-availability-filters"] label,
[data-testid="booking-catalog-availability-filters"] button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

[data-testid^="booking-catalog-card-"] p,
[data-testid^="booking-catalog-card-"] h2,
[data-testid^="booking-catalog-card-"] li {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Provider/client workspace: keep long forms, cards and calendars contained. */
#provider-dashboard-root[data-f24-r2514-surface],
#client-dashboard-root[data-f24-r2514-surface] {
  width: 100%;
  overflow-x: clip;
}

[data-testid="provider-booking-panel"],
[data-testid="provider-appointments-panel"],
[data-testid="client-appointments-panel"],
[data-testid="provider-sidebar-nav"],
[data-testid="client-sidebar-nav"],
[data-testid="services-card"],
[data-testid="schedule-card"],
[data-testid="profile-card"],
[data-testid="location-card"],
[data-testid="staff-card"] {
  min-width: 0;
  max-width: 100%;
}

[data-testid="provider-booking-panel"] :where(form, fieldset, section, article, header, footer, div),
[data-testid="client-appointments-panel"] :where(section, article, header, footer, div) {
  min-width: 0;
}

[data-testid="provider-booking-panel"] :where(table, [role="grid"]),
[data-testid="client-appointments-panel"] :where(table, [role="grid"]) {
  max-width: 100%;
}

#f24-r2513c-tools {
  max-width: calc(100vw - 24px);
}

.f24-r2513c-modal,
.f24-r2513c-message {
  max-width: min(760px, calc(100vw - 24px));
  max-height: min(88dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
}

#f24-r2514-runtime-alert {
  position: fixed;
  z-index: 2147483000;
  inset: auto 16px calc(16px + env(safe-area-inset-bottom, 0px)) auto;
  width: min(440px, calc(100vw - 32px));
  padding: 14px 48px 14px 16px;
  border: 1px solid #fecaca;
  border-radius: 14px;
  color: #991b1b;
  background: #fff7f7;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  font: 600 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#f24-r2514-runtime-alert button {
  position: absolute;
  inset: 8px 8px auto auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  color: currentColor;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 1023px) {
  [data-testid="booking-catalog-page"] {
    width: 100%;
  }

  [data-testid="booking-catalog-page"] > div:nth-of-type(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-testid="provider-booking-panel"] :where(form.grid, fieldset.grid, [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):not([class*="grid-cols-7"]),
  [data-testid="client-appointments-panel"] :where(form.grid, fieldset.grid, [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):not([class*="grid-cols-7"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  [data-testid="booking-catalog-route"] {
    min-height: auto;
    overflow-x: clip;
  }

  [data-testid="booking-catalog-route"] > div {
    width: 100%;
    gap: 10px;
  }

  [data-testid="booking-role-mobile-menu"] {
    top: calc(58px + env(safe-area-inset-top, 0px));
    margin: 8px 10px 0;
    max-width: calc(100vw - 20px);
  }

  [data-testid="booking-role-mobile-menu"] button,
  [data-testid="booking-role-mobile-menu"] a {
    min-height: 44px;
  }

  [data-testid="booking-catalog-page"] {
    padding: 18px 12px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  [data-testid="booking-catalog-page"] > :first-child {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }

  [data-testid="booking-catalog-page"] > :first-child > :last-child {
    align-self: flex-start;
    max-width: 100%;
  }

  [data-testid="booking-catalog-quick-categories"] > div {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: -12px;
    padding: 0 12px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  [data-testid="booking-catalog-quick-categories"] > div > * {
    flex: 0 0 auto;
    min-height: 44px;
    scroll-snap-align: start;
  }

  [data-testid="booking-catalog-page"] > div:nth-of-type(2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  [data-testid="booking-catalog-page"] > div:nth-of-type(2) > * {
    width: 100%;
    min-height: 44px;
  }

  [data-testid="booking-catalog-availability-filters"] {
    display: flex;
    flex-wrap: nowrap;
    margin-inline: -12px;
    padding: 0 12px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  [data-testid="booking-catalog-availability-filters"] > * {
    flex: 0 0 auto;
    min-height: 44px;
  }

  [data-testid^="booking-catalog-card-"] {
    padding: 14px;
  }

  [data-testid^="booking-catalog-card-"] > div {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  [data-testid^="booking-catalog-card-"] > div > img {
    width: 56px;
    height: 56px;
  }

  [data-testid^="booking-catalog-card-"] > div > :last-child {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  [data-testid^="booking-catalog-card-"] > div > :last-child > a,
  [data-testid^="booking-catalog-card-"] > div > :last-child > button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  #provider-dashboard-root[data-f24-r2514-surface],
  #client-dashboard-root[data-f24-r2514-surface] {
    padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  [data-testid="provider-booking-panel"],
  [data-testid="provider-appointments-panel"],
  [data-testid="client-appointments-panel"],
  [data-testid="services-card"],
  [data-testid="schedule-card"],
  [data-testid="profile-card"],
  [data-testid="location-card"],
  [data-testid="staff-card"] {
    width: 100%;
    padding-inline: 12px;
  }

  [data-testid="provider-booking-panel"] :where(form.grid, fieldset.grid, [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):not([class*="grid-cols-7"]),
  [data-testid="client-appointments-panel"] :where(form.grid, fieldset.grid, [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):not([class*="grid-cols-7"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-testid="provider-booking-panel"] :where(header, footer, [class*="justify-between"]),
  [data-testid="client-appointments-panel"] :where(header, footer, [class*="justify-between"]) {
    flex-wrap: wrap;
    gap: 10px;
  }

  [data-testid="provider-booking-panel"] :where(button, a),
  [data-testid="client-appointments-panel"] :where(button, a) {
    min-height: 44px;
  }

  [data-testid="provider-booking-panel"] :where(table, [role="grid"]),
  [data-testid="client-appointments-panel"] :where(table, [role="grid"]) {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  [data-testid="provider-booking-panel"] :where(th, td),
  [data-testid="client-appointments-panel"] :where(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [data-testid="provider-booking-panel"] :where(table, [role="grid"])::before,
  [data-testid="client-appointments-panel"] :where(table, [role="grid"])::before {
    content: none;
  }

  [data-testid="provider-booking-panel"] :where(.overflow-x-auto, [class*="overflow-x"]),
  [data-testid="client-appointments-panel"] :where(.overflow-x-auto, [class*="overflow-x"]) {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  #f24-r2513c-tools {
    inset: auto 10px calc(76px + env(safe-area-inset-bottom, 0px)) 10px;
    width: auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border-radius: 16px;
    scrollbar-width: none;
  }

  #f24-r2513c-tools::-webkit-scrollbar {
    display: none;
  }

  #f24-r2513c-tools > button {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  .f24-r2513c-backdrop {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  .f24-r2513c-modal,
  .f24-r2513c-message {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    border-radius: 18px;
  }

  .f24-r2513c-modal :where(form, article, header, footer) {
    min-width: 0;
    max-width: 100%;
  }

  .f24-r2513c-modal :where(input, select, textarea, button) {
    width: 100%;
    min-height: 44px;
  }

  #f24-r2514-runtime-alert {
    inset: auto 10px calc(88px + env(safe-area-inset-bottom, 0px)) 10px;
    width: auto;
  }
}

@media (max-width: 374px) {
  [data-testid="booking-catalog-page"] {
    padding-inline: 10px;
  }

  [data-testid^="booking-catalog-card-"] > div {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  [data-testid^="booking-catalog-card-"] > div > img {
    width: 48px;
    height: 48px;
  }

  [data-testid^="booking-catalog-card-"] > div > :last-child {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1440px) {
  [data-testid="booking-catalog-route"] > div {
    max-width: 1440px;
  }

  [data-testid="booking-catalog-page"] {
    max-width: 1180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-f24-r2514-surface] *,
  [data-f24-r2514-surface] *::before,
  [data-f24-r2514-surface] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}