@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
  }

  .animate-shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  }

  .card {
    @apply rounded bg-white shadow-sm ring-1 ring-gray-200/60;
  }

  .public-booking-accent .card {
    @apply rounded-2xl ring-1 ring-gray-900/5;
  }

  .card-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-gray-200/70;
  }

  .page-header {
    @apply flex flex-col justify-center gap-3 py-2 sm:min-h-12 sm:flex-row sm:items-center sm:justify-between;
  }

  body {
    --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 9.75L12 4l9 5.75v9.5a1.75 1.75 0 01-1.75 1.75h-14.5A1.75 1.75 0 013 19.25v-9.5z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 21v-6h6v6'/%3E%3C/svg%3E");
  }

  .page-header:not(.page-header-with-icon) > div:first-child {
    @apply grid items-center gap-x-3;
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .page-header:not(.page-header-with-icon) > div:first-child::before,
  .page-header:not(.page-header-with-icon) > h1::before {
    content: "";
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(90 68 122 / 0.2), 0 4px 6px -4px rgb(90 68 122 / 0.2);
    background-color: #5a447a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-image: var(--page-header-icon);
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-header:not(.page-header-with-icon) > div:first-child > div,
  .page-header:not(.page-header-with-icon) > div:first-child > h1,
  .page-header:not(.page-header-with-icon) > div:first-child > p {
    grid-column: 2;
  }

  .page-header:not(.page-header-with-icon) > div:first-child > h1 {
    grid-row: 1;
  }

  .page-header:not(.page-header-with-icon) > div:first-child > p {
    grid-row: 2;
    margin-top: 0.125rem;
  }

  .page-header:not(.page-header-with-icon) > h1 {
    @apply flex items-center gap-3;
  }

  .card-body {
    @apply p-6;
  }

  .recibo-new .card-body {
    @apply p-4;
  }

  .recibo-new .page-header {
    @apply flex-row items-center justify-between;
  }

  .recibo-new .card-body > div.-mx-6 {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .recibo-new .card-body > div.-mt-6 {
    margin-top: -1rem;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded px-4 py-2 text-sm font-semibold transition cursor-pointer disabled:cursor-not-allowed disabled:opacity-60;
  }

  .btn-primary {
    @apply bg-[#5a447a] text-white shadow-sm hover:bg-[#4a3863] focus:outline-none focus:ring-2 focus:ring-[#5a447a]/40;
  }

  .btn-secondary {
    @apply bg-white text-gray-700 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400/40;
  }

  /* Public pages refined styles */
  .public-booking-accent .btn {
    @apply rounded-xl px-4 py-2.5 transition-all duration-200;
  }

  .public-booking-accent .btn-primary {
    @apply hover:shadow-md active:scale-[0.98];
  }

  .public-booking-accent .btn-secondary {
    @apply hover:ring-gray-300 active:scale-[0.98];
  }

  input.peer:checked + label.booking-time-slot {
    @apply bg-[#5a447a] text-white ring-0;
  }

  .btn-success {
    @apply bg-green-600 text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40;
  }

  .btn-danger {
    @apply bg-red-600 text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500/40;
  }

  .btn-ghost {
    @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100;
  }

  .btn-table {
    @apply inline-flex items-center rounded bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-800 hover:bg-gray-200;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-header-cta {
    @apply min-h-11 sm:min-h-10;
  }

  .btn-icon {
    @apply inline-flex h-8 w-8 items-center justify-center rounded p-0;
  }

  .btn-icon-dark {
    @apply inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/30 bg-black/45 p-0 text-white hover:bg-black/60;
  }

  .booking-settings-accent .btn-primary {
    @apply bg-[#5a447a] hover:bg-[#4a3863] focus:ring-[#5a447a]/40;
  }

  .booking-settings-accent .input {
    @apply focus:border-[#5a447a]/60 focus:ring-[#5a447a]/20;
  }

  .booking-settings-accent .select {
    @apply focus:border-[#5a447a]/60 focus:ring-[#5a447a]/20;
  }

  .booking-settings-accent .textarea {
    @apply focus:border-[#5a447a]/60 focus:ring-[#5a447a]/20;
  }

  .public-booking-accent .btn-primary {
    @apply bg-[#6f5a8f] hover:bg-[#5a447a] focus:ring-[#6f5a8f]/40;
  }

  .public-booking-accent .input {
    @apply focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .public-booking-accent .select {
    @apply focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .public-booking-accent .textarea {
    @apply focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .public-booking-accent input.peer:checked + label.booking-time-slot {
    @apply bg-[#6f5a8f] text-white ring-0;
  }

  .alert {
    @apply flex items-start gap-3 rounded-xl p-4;
  }

  .alert-error {
    @apply bg-red-100 text-red-900;
  }

  .badge {
    @apply inline-flex items-center rounded px-2.5 py-0.5 text-xs font-semibold;
  }

  .badge-success {
    @apply bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200;
  }

  .badge-muted {
    @apply bg-gray-100 text-gray-600 ring-1 ring-gray-200;
  }

  .badge-warning {
    @apply bg-amber-50 text-amber-700 ring-1 ring-amber-200;
  }

  .badge-info {
    @apply bg-violet-50 text-violet-700 ring-1 ring-violet-200;
  }

  .table {
    @apply min-w-full divide-y divide-gray-200/70 text-sm;
  }

  .table-th {
    @apply px-5 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500;
  }

  .table-th-right {
    @apply px-5 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500;
  }

  .table-td {
    @apply px-5 py-4 whitespace-nowrap text-sm text-gray-900;
  }

  .table-td-muted {
    @apply text-gray-600;
  }

  .table-row {
    @apply transition-colors hover:bg-gray-50/80;
  }

  .list-header {
    @apply bg-gray-50/80 text-xs font-semibold uppercase tracking-wider text-gray-600;
  }

  .list-header-cell {
    @apply px-5 py-2 md:py-3 text-left;
  }

  .list-row {
    @apply border-b border-gray-200/70 transition-colors hover:bg-gray-50/80;
  }

  .list-cell {
    @apply px-5 py-2 md:py-3 text-sm text-gray-900;
  }

  .list-label {
    @apply md:hidden font-semibold text-gray-500 uppercase text-[11px];
  }

  .input {
    @apply mt-1 block w-full rounded border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-[#5a447a]/60 focus:ring-2 focus:ring-[#5a447a]/20;
  }

  .public-booking-accent .input {
    @apply rounded-xl border-gray-300 px-3.5 py-2.5 ring-1 ring-gray-900/5 transition-all focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .time-wheel-picker {
    @apply absolute left-0 right-0 z-30 mt-1 rounded-lg border border-gray-200 bg-white p-2 shadow-xl;
  }

  .time-wheel-columns {
    @apply grid grid-cols-2 gap-2;
  }

  .time-wheel-column {
    @apply relative;
  }

  .time-wheel-list {
    @apply max-h-48 overflow-y-auto overscroll-contain rounded-md bg-gray-50/80 p-1;
    scroll-snap-type: y mandatory;
  }

  .time-wheel-center {
    @apply absolute left-1 right-1 rounded-md border border-[#5a447a]/35 bg-[#5a447a];
    top: 50%;
    height: 2.25rem;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }

  .time-wheel-option {
    @apply relative z-20 block w-full rounded-md px-3 py-2 text-center text-sm font-medium text-gray-700 transition-colors;
    scroll-snap-align: center;
  }

  .time-wheel-option.is-selected {
    @apply bg-transparent;
    color: #fff;
  }

  .select {
    @apply mt-1 block w-full rounded border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-[#5a447a]/60 focus:ring-2 focus:ring-[#5a447a]/20;
  }

  .public-booking-accent .select {
    @apply rounded-xl border-gray-300 px-3.5 py-2.5 ring-1 ring-gray-900/5 transition-all focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .textarea {
    @apply mt-1 block w-full rounded border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-[#5a447a]/60 focus:ring-2 focus:ring-[#5a447a]/20;
  }

  .public-booking-accent .textarea {
    @apply rounded-xl border-gray-300 px-3.5 py-2.5 ring-1 ring-gray-900/5 transition-all focus:border-[#6f5a8f]/60 focus:ring-[#6f5a8f]/20;
  }

  .label {
    @apply block text-sm font-medium text-gray-700;
  }

  .public-booking-accent .label {
    @apply font-semibold text-gray-900;
  }

  .public-booking-accent .btn {
    @apply rounded-xl shadow-sm;
  }

  .public-booking-accent .btn-primary {
    @apply bg-[#6f5a8f] hover:bg-[#5a447a] hover:shadow-md focus:ring-[#6f5a8f]/40 active:scale-[0.98];
  }

  .public-booking-accent input.peer:checked + label.booking-time-slot {
    @apply bg-[#6f5a8f];
  }

  .helper-text {
    @apply mt-1 text-xs text-gray-500;
  }

  .section-title {
    @apply text-base sm:text-lg font-semibold text-gray-900;
  }

  .form-section {
    @apply space-y-4 rounded border border-gray-200/70 bg-white p-4 sm:p-6 shadow-sm;
  }

  .recibo-form {
    @apply space-y-6;
  }

  .booking-time-cell {
    @apply h-6 sm:h-4 px-2 sm:px-1.5 flex items-center text-xs sm:text-[10px] font-medium text-gray-500 border-b border-gray-200/70;
  }

  .booking-time-minor {
    @apply text-[10px] sm:text-[9px] font-normal text-gray-400;
  }

  .booking-slot {
    @apply relative h-6 sm:h-4 w-full border-b border-r border-gray-200/70 bg-white focus:outline-none focus:ring-2 focus:ring-violet-300/60 transition-colors overflow-visible;
  }

  .booking-slot.is-selected {
    /* @apply bg-violet-500 hover:bg-violet-500; */
  }

  .booking-slot.is-booked {
    @apply bg-[#5a447a] hover:bg-[#5a447a] cursor-not-allowed;
    box-shadow:
      inset 2px 0 0 rgba(237, 233, 254, 0.95),
      inset -2px 0 0 rgba(237, 233, 254, 0.95);
  }

  .booking-slot.is-booked.booking-slot-customer {
    @apply bg-[#3f5f4a] hover:bg-[#3f5f4a];
    box-shadow:
      inset 2px 0 0 rgba(216, 228, 220, 0.95),
      inset -2px 0 0 rgba(216, 228, 220, 0.95);
  }

  .booking-slot.is-booked.booking-slot-pending {
    @apply bg-amber-500 hover:bg-amber-500;
    box-shadow:
      inset 2px 0 0 rgba(254, 243, 199, 0.95),
      inset -2px 0 0 rgba(254, 243, 199, 0.95);
  }

  .booking-slot.is-booked.booking-slot-overlap {
    @apply p-0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: transparent;
    box-shadow:
      inset 1px 0 0 rgba(237, 233, 254, 0.95),
      inset -1px 0 0 rgba(237, 233, 254, 0.95);
  }

  .booking-slot-overlap-segment {
    @apply h-full min-w-0 flex-1;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 2px;
    background-color: #5a447a;
    --booking-overlap-border: rgba(237, 233, 254, 0.95);
    box-shadow:
      inset 1px 0 0 var(--booking-overlap-border),
      inset -1px 0 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-gap {
    @apply h-full min-w-0 flex-1 pointer-events-none;
  }

  .booking-slot-overlap-segment:first-child {
    box-shadow:
      inset -1px 0 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-segment:last-child {
    box-shadow:
      inset 1px 0 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-segment.booking-slot-overlap-start {
    @apply rounded-t-sm;
    box-shadow:
      inset 1px 0 0 var(--booking-overlap-border),
      inset -1px 0 0 var(--booking-overlap-border),
      inset 0 2px 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-segment.booking-slot-overlap-end {
    @apply rounded-b-sm;
    box-shadow:
      inset 1px 0 0 var(--booking-overlap-border),
      inset -1px 0 0 var(--booking-overlap-border),
      inset 0 -2px 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-segment.booking-slot-overlap-start.booking-slot-overlap-end {
    box-shadow:
      inset 1px 0 0 var(--booking-overlap-border),
      inset -1px 0 0 var(--booking-overlap-border),
      inset 0 2px 0 var(--booking-overlap-border),
      inset 0 -2px 0 var(--booking-overlap-border);
  }

  .booking-slot-overlap-segment.booking-slot-overlap-customer {
    background-color: #3f5f4a;
  }

  .booking-slot-overlap-segment.booking-slot-overlap-pending {
    background-color: #f59e0b;
  }

  .booking-slot-overlap-segment.booking-slot-overlap-team {
    background-color: var(--booking-team-solid, #5a447a);
  }

  .booking-slot-overlap-label {
    @apply block max-w-full truncate text-[9px] leading-none font-semibold text-white;
  }

  .booking-slot.is-booked.booking-slot-team {
    background-color: var(--booking-team-solid, #5a447a);
    box-shadow:
      inset 2px 0 0 rgba(255, 255, 255, 0.88),
      inset -2px 0 0 rgba(255, 255, 255, 0.88);
  }

  .booking-slot.is-booked.booking-slot-start {
    @apply rounded-t-sm;
    box-shadow:
      inset 2px 0 0 rgba(237, 233, 254, 0.95),
      inset -2px 0 0 rgba(237, 233, 254, 0.95),
      inset 0 2px 0 rgba(237, 233, 254, 0.95);
  }

  .booking-slot.is-booked.booking-slot-customer.booking-slot-start {
    box-shadow:
      inset 2px 0 0 rgba(216, 228, 220, 0.95),
      inset -2px 0 0 rgba(216, 228, 220, 0.95),
      inset 0 2px 0 rgba(216, 228, 220, 0.95);
  }

  .booking-slot.is-booked.booking-slot-pending.booking-slot-start {
    box-shadow:
      inset 2px 0 0 rgba(254, 243, 199, 0.95),
      inset -2px 0 0 rgba(254, 243, 199, 0.95),
      inset 0 2px 0 rgba(254, 243, 199, 0.95);
  }

  .booking-slot.is-booked.booking-slot-end {
    @apply rounded-b-sm;
    box-shadow:
      inset 2px 0 0 rgba(237, 233, 254, 0.95),
      inset -2px 0 0 rgba(237, 233, 254, 0.95),
      inset 0 -2px 0 rgba(237, 233, 254, 0.95);
  }

  .booking-slot.is-booked.booking-slot-customer.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(216, 228, 220, 0.95),
      inset -2px 0 0 rgba(216, 228, 220, 0.95),
      inset 0 -2px 0 rgba(216, 228, 220, 0.95);
  }

  .booking-slot.is-booked.booking-slot-pending.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(254, 243, 199, 0.95),
      inset -2px 0 0 rgba(254, 243, 199, 0.95),
      inset 0 -2px 0 rgba(254, 243, 199, 0.95);
  }

  .booking-slot.is-booked.booking-slot-start.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(237, 233, 254, 0.95),
      inset -2px 0 0 rgba(237, 233, 254, 0.95),
      inset 0 2px 0 rgba(237, 233, 254, 0.95),
      inset 0 -2px 0 rgba(237, 233, 254, 0.95);
  }

  .booking-slot.is-booked.booking-slot-customer.booking-slot-start.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(216, 228, 220, 0.95),
      inset -2px 0 0 rgba(216, 228, 220, 0.95),
      inset 0 2px 0 rgba(216, 228, 220, 0.95),
      inset 0 -2px 0 rgba(216, 228, 220, 0.95);
  }

  .booking-slot.is-booked.booking-slot-pending.booking-slot-start.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(254, 243, 199, 0.95),
      inset -2px 0 0 rgba(254, 243, 199, 0.95),
      inset 0 2px 0 rgba(254, 243, 199, 0.95),
      inset 0 -2px 0 rgba(254, 243, 199, 0.95);
  }

  .booking-slot.is-booked.booking-slot-team.booking-slot-start {
    box-shadow:
      inset 2px 0 0 rgba(255, 255, 255, 0.88),
      inset -2px 0 0 rgba(255, 255, 255, 0.88),
      inset 0 2px 0 rgba(255, 255, 255, 0.88);
  }

  .booking-slot.is-booked.booking-slot-team.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(255, 255, 255, 0.88),
      inset -2px 0 0 rgba(255, 255, 255, 0.88),
      inset 0 -2px 0 rgba(255, 255, 255, 0.88);
  }

  .booking-slot.is-booked.booking-slot-team.booking-slot-start.booking-slot-end {
    box-shadow:
      inset 2px 0 0 rgba(255, 255, 255, 0.88),
      inset -2px 0 0 rgba(255, 255, 255, 0.88),
      inset 0 2px 0 rgba(255, 255, 255, 0.88),
      inset 0 -2px 0 rgba(255, 255, 255, 0.88);
  }

  .booking-slot-label {
    @apply absolute left-0 top-0 z-10 flex h-full items-center rounded-sm bg-violet-900/90 ring-1 ring-violet-100/80 px-1.5 sm:px-1 text-[11px] sm:text-[9px] font-semibold text-white shadow truncate pointer-events-none;
    width: max-content;
    max-width: calc(100% - 2px);
    box-sizing: border-box;
  }

  .booking-slot-label.booking-slot-label-customer {
    @apply bg-[#3f5f4a]/90 ring-[#d8e4dc]/80;
  }

  .booking-slot-label.booking-slot-label-pending {
    @apply bg-amber-700/90 ring-amber-100/80;
  }

  .booking-slot-label.booking-slot-label-team {
    background-color: var(--booking-team-solid, #5a447a);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  }

  .booking-team-swatch {
    background-color: var(--booking-team-solid, #5a447a);
  }

  .booking-team-badge {
    background-color: var(--booking-team-solid, #5a447a);
  }

  .booking-team-card {
    border-color: var(--booking-team-solid, #5a447a);
    background-color: var(--booking-team-tint, rgba(90, 68, 122, 0.08));
  }

  .booking-color-blue {
    --booking-team-solid: #2563eb;
    --booking-team-tint: rgba(37, 99, 235, 0.16);
  }

  .booking-color-emerald {
    --booking-team-solid: #059669;
    --booking-team-tint: rgba(5, 150, 105, 0.16);
  }

  .booking-color-amber {
    --booking-team-solid: #d97706;
    --booking-team-tint: rgba(217, 119, 6, 0.16);
  }

  .booking-color-rose {
    --booking-team-solid: #e11d48;
    --booking-team-tint: rgba(225, 29, 72, 0.16);
  }

  .booking-color-violet {
    --booking-team-solid: #7c3aed;
    --booking-team-tint: rgba(124, 58, 237, 0.16);
  }

  .booking-color-cyan {
    --booking-team-solid: #0891b2;
    --booking-team-tint: rgba(8, 145, 178, 0.16);
  }

  .booking-color-orange {
    --booking-team-solid: #ea580c;
    --booking-team-tint: rgba(234, 88, 12, 0.16);
  }

  .booking-color-pink {
    --booking-team-solid: #db2777;
    --booking-team-tint: rgba(219, 39, 119, 0.16);
  }

  .booking-month-day {
    @apply relative flex h-11 w-11 sm:h-10 sm:w-10 flex-col items-center justify-center rounded border border-gray-200 bg-white text-xs font-semibold text-gray-700 hover:bg-violet-50;
  }

  .booking-month-day.is-selected {
    @apply border-violet-500 bg-violet-50 text-violet-700;
  }

  .booking-month-day.is-today {
    @apply ring-2 ring-violet-400;
  }

  .booking-month-count {
    @apply mt-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-[#5a447a] px-1 text-[10px] font-semibold text-white;
  }

  .booking-day-button {
    @apply flex h-10 w-10 sm:h-7 sm:w-7 items-center justify-center rounded text-sm sm:text-[11px] font-semibold text-gray-600 hover:bg-violet-50;
  }

  .booking-day-button.is-selected {
    @apply bg-[#5a447a] text-white hover:bg-[#5a447a];
  }

  .booking-selection-button {
    @apply absolute z-20 rounded-full bg-[#5a447a] px-3 py-1 text-center text-xs font-semibold text-white shadow-lg;
    width: 150px;
  }

  .booking-selection-menu {
    @apply absolute z-20;
    width: 150px;
  }

  .booking-menu-button {
    @apply rounded-full bg-[#5a447a] px-4 py-2 sm:px-3 sm:py-1 text-center text-sm sm:text-xs font-semibold text-white shadow-lg;
    width: 170px;
  }

  @media (min-width: 800px) {
    .booking-menu-button {
      width: 150px;
    }
  }

  .booking-grid-scroll,
  .booking-month-view {
    overflow-y: visible;
    position: relative;
    --booking-swipe-offset: 0px;
    --booking-swipe-progress: 0;
  }

  .booking-grid-scroll .booking-grid,
  .booking-month-view > * {
    transform: translate3d(var(--booking-swipe-offset), 0, 0);
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .booking-grid-scroll.booking-swipe-dragging .booking-grid,
  .booking-month-view.booking-swipe-dragging > * {
    transition-duration: 0ms;
    will-change: transform;
  }

  .booking-grid-scroll.booking-swipe-ready .booking-grid,
  .booking-month-view.booking-swipe-ready > * {
    transition-duration: 0ms;
    will-change: transform;
  }

  .booking-grid-scroll.booking-swipe-commit .booking-grid,
  .booking-month-view.booking-swipe-commit > * {
    transition-duration: 120ms;
  }

  .booking-grid-scroll::before,
  .booking-month-view::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    opacity: 0;
    pointer-events: none;
    transform: scaleX(var(--booking-swipe-progress));
    transform-origin: left center;
    background: rgba(90, 68, 122, 0.35);
    transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, height 120ms ease;
    z-index: 5;
  }

  .booking-grid-scroll.booking-swipe-right::before,
  .booking-month-view.booking-swipe-right::before {
    transform-origin: right center;
  }

  .booking-grid-scroll::after,
  .booking-month-view::after {
    content: attr(data-swipe-hint);
    position: absolute;
    top: 0.35rem;
    z-index: 6;
    pointer-events: none;
    font-size: 0.7rem;
    font-weight: 600;
    color: #5a447a;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(90, 68, 122, 0.25);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .booking-grid-scroll.booking-swipe-left::after,
  .booking-month-view.booking-swipe-left::after {
    right: 0.55rem;
  }

  .booking-grid-scroll.booking-swipe-right::after,
  .booking-month-view.booking-swipe-right::after {
    left: 0.55rem;
  }

  .booking-grid-scroll.booking-swipe-dragging::after,
  .booking-month-view.booking-swipe-dragging::after,
  .booking-grid-scroll.booking-swipe-ready::after,
  .booking-month-view.booking-swipe-ready::after,
  .booking-grid-scroll.booking-swipe-commit::after,
  .booking-month-view.booking-swipe-commit::after {
    opacity: var(--booking-swipe-progress);
    transform: translateY(0);
  }

  .booking-grid-scroll.booking-swipe-dragging::before,
  .booking-month-view.booking-swipe-dragging::before,
  .booking-grid-scroll.booking-swipe-ready::before,
  .booking-month-view.booking-swipe-ready::before,
  .booking-grid-scroll.booking-swipe-commit::before,
  .booking-month-view.booking-swipe-commit::before {
    opacity: 0.7;
  }

  .booking-grid-scroll.booking-swipe-ready::before,
  .booking-month-view.booking-swipe-ready::before {
    height: 3px;
    opacity: 1;
    background: rgba(90, 68, 122, 0.95);
  }

  .booking-grid-scroll.booking-swipe-ready::after,
  .booking-month-view.booking-swipe-ready::after {
    opacity: 1;
    color: #fff;
    background: rgba(90, 68, 122, 0.98);
    border-color: rgba(90, 68, 122, 0.98);
    box-shadow: 0 6px 18px rgba(90, 68, 122, 0.26);
  }

  .booking-modal {
    @apply fixed inset-0 z-50 items-stretch justify-center bg-black/40 sm:items-center;
    height: 100dvh;
  }

  .booking-modal-overlay {
    @apply absolute inset-0;
  }

  .booking-modal-panel {
    @apply relative z-10 w-full overflow-y-auto overscroll-contain bg-white p-6 shadow-lg sm:mx-4 sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:max-w-2xl;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  html.booking-modal-lock,
  body.booking-modal-lock {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.pwa-edge-guard-active,
  body.pwa-edge-guard-active {
    overscroll-behavior-x: none;
  }

  body.booking-modal-lock {
    position: fixed;
    width: 100%;
  }

  .booking-modal-panel .form-section {
    @apply space-y-4;
  }

  .booking-calendar.is-day-view .booking-header-grid {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .booking-calendar.is-day-view .booking-slots-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-calendar.is-day-view .booking-grid {
    min-width: 100%;
  }

  .booking-calendar.is-month-view .booking-grid-scroll {
    display: none;
  }

  .booking-calendar.is-month-view .booking-month-view {
    display: block;
  }

  .booking-calendar.is-month-view .booking-mobile-weekdays {
    display: none;
  }

  .booking-mobile-new-booking {
    display: none;
  }

  .booking-mobile-refresh-button {
    display: none;
  }

  .booking-today-button-active {
    @apply bg-white text-[#5a447a] shadow-sm;
    box-shadow: inset 0 0 0 1px rgba(90, 68, 122, 0.35);
  }

  .booking-calendar.is-day-view .booking-mobile-new-booking {
    display: inline-flex;
  }

  .booking-calendar.is-day-view .booking-mobile-refresh-button,
  .booking-calendar.is-month-view .booking-mobile-refresh-button {
    display: inline-flex;
  }

  @media (max-width: 799px) {
    .booking-mobile-body {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      padding-top: 0.5rem;
      padding-bottom: 6rem;
    }

    .booking-mobile-top {
      margin-bottom: 0.75rem;
      padding-top: 0.25rem;
    }

    .booking-mobile-top-row {
      @apply flex items-center justify-between gap-2;
    }

    .booking-mobile-top-actions {
      @apply flex items-center gap-2;
    }

    .booking-mobile-month-button {
      @apply btn btn-secondary h-9 px-3.5 text-sm;
    }

    .booking-mobile-new-booking {
      @apply h-9 px-3.5 text-sm;
    }

    .booking-mobile-refresh-button {
      @apply h-9 px-3.5 text-sm;
    }

    .booking-mobile-weekdays {
      @apply mt-3 relative overflow-hidden;
      --booking-week-swipe-ratio: 0;
      --booking-week-swipe-progress: 0;
      touch-action: pan-y;
    }

    .booking-mobile-weekdays-track,
    .booking-mobile-weekdays-preview {
      @apply grid grid-cols-7 gap-1.5;
      transform: translate3d(calc(var(--booking-week-swipe-ratio) * 100%), 0, 0);
      transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease;
      will-change: transform;
    }

    .booking-mobile-weekdays-preview {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
    }

    .booking-mobile-weekdays.booking-week-swipe-left .booking-mobile-weekdays-preview {
      transform: translate3d(calc((var(--booking-week-swipe-ratio) + 1) * 100%), 0, 0);
    }

    .booking-mobile-weekdays.booking-week-swipe-right .booking-mobile-weekdays-preview {
      transform: translate3d(calc((var(--booking-week-swipe-ratio) - 1) * 100%), 0, 0);
    }

    .booking-mobile-weekdays.booking-week-swipe-dragging .booking-mobile-weekdays-track,
    .booking-mobile-weekdays.booking-week-swipe-dragging .booking-mobile-weekdays-preview,
    .booking-mobile-weekdays.booking-week-swipe-ready .booking-mobile-weekdays-track,
    .booking-mobile-weekdays.booking-week-swipe-ready .booking-mobile-weekdays-preview {
      transition-duration: 0ms;
    }

    .booking-mobile-weekdays.booking-week-swipe-commit .booking-mobile-weekdays-track,
    .booking-mobile-weekdays.booking-week-swipe-commit .booking-mobile-weekdays-preview {
      transition-duration: 230ms;
    }

    .booking-mobile-weekdays.booking-week-swipe-no-transition .booking-mobile-weekdays-track,
    .booking-mobile-weekdays.booking-week-swipe-no-transition .booking-mobile-weekdays-preview {
      transition-duration: 0ms !important;
    }

    .booking-mobile-weekdays.booking-week-swipe-dragging .booking-mobile-weekdays-preview,
    .booking-mobile-weekdays.booking-week-swipe-ready .booking-mobile-weekdays-preview,
    .booking-mobile-weekdays.booking-week-swipe-commit .booking-mobile-weekdays-preview {
      opacity: calc(var(--booking-week-swipe-progress) * 0.92);
    }

    .booking-mobile-weekdays.booking-week-swipe-ready .booking-mobile-day-preview {
      box-shadow: 0 8px 18px rgba(90, 68, 122, 0.16);
      border-color: rgba(90, 68, 122, 0.38);
    }

    .booking-mobile-day {
      @apply w-full rounded border border-gray-200 bg-white px-1 py-1 text-gray-700 shadow-sm;
      height: 3.25rem;
    }

    .booking-mobile-day.booking-day-button {
      @apply flex-col items-center justify-center;
    }

    .booking-mobile-day.booking-day-button.is-selected {
      @apply border-[#5a447a] bg-[#5a447a] text-white;
    }

    .booking-mobile-day.is-today:not(.is-selected) {
      @apply border-violet-200 bg-violet-50/70 text-violet-700;
    }

    .booking-mobile-day-weekday {
      @apply block text-[10px] font-semibold uppercase tracking-wide text-gray-500 leading-none;
    }

    .booking-mobile-day.is-today:not(.is-selected) .booking-mobile-day-weekday {
      @apply text-violet-500;
    }

    .booking-mobile-day.booking-day-button.is-selected .booking-mobile-day-weekday {
      color: rgba(255, 255, 255, 0.8);
    }

    .booking-mobile-day-number {
      @apply block mt-0.5 text-sm font-semibold leading-none;
    }

    .booking-mobile-day-count {
      @apply pointer-events-none mb-0.5 inline-flex h-3 min-w-[1.15rem] items-center justify-center rounded-sm px-1 text-[9px] font-semibold leading-none;
      background: rgba(90, 68, 122, 0.12);
      color: #5a447a;
    }

    .booking-mobile-day-count.is-empty {
      background: transparent;
      color: rgba(107, 114, 128, 0.78);
      font-weight: 700;
    }

    .booking-mobile-day.booking-day-button.is-selected .booking-mobile-day-count.is-empty,
    .booking-mobile-day.is-today:not(.is-selected) .booking-mobile-day-count.is-empty {
      background: transparent;
      color: rgba(107, 114, 128, 0.78);
    }

    .booking-mobile-day.booking-day-button.is-selected .booking-mobile-day-count {
      background: rgba(255, 255, 255, 0.26);
      color: #fff;
    }

    .booking-mobile-day.is-today:not(.is-selected) .booking-mobile-day-count {
      background: rgba(139, 92, 246, 0.16);
      color: #6d28d9;
    }

    .booking-calendar.is-day-view .booking-header-grid {
      display: none;
    }

    .booking-calendar.is-day-view .booking-time-cell {
      @apply h-4 text-[10px];
    }

    .booking-calendar.is-day-view .booking-time-minor {
      @apply text-[8px];
    }

    .booking-calendar.is-day-view .booking-slot {
      @apply h-4;
    }

    .booking-calendar .booking-grid-scroll {
      overflow-x: hidden;
    }

    .booking-calendar .booking-grid {
      min-width: 100%;
    }

    .booking-mobile-today-button {
      @apply px-5 py-2.5 text-sm font-semibold;
      position: fixed;
      left: 1.625rem;
      bottom: env(safe-area-inset-bottom);
      margin-bottom: 1.375rem;
      z-index: 30;
    }

    .booking-mobile-today-button-source {
      opacity: 0;
      pointer-events: none;
    }

    .booking-mobile-today-button-portal {
      @apply px-5 py-2.5 text-sm font-semibold;
      position: fixed;
      left: 1.625rem;
      bottom: env(safe-area-inset-bottom);
      margin-bottom: 1.375rem;
      z-index: 35;
    }
  }

  .grecaptcha-badge {
    visibility: hidden;
  }
}

body.controller-products {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4'/%3E%3C/svg%3E");
}

body.controller-clients {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 7a4 4 0 11-8 0 4 4 0 018 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 21a7 7 0 0114 0'/%3E%3C/svg%3E");
}

body.controller-bookings {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

body.controller-supplier_sales {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
}

body.controller-saft {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 11v6m0 0l-3-3m3 3l3-3M8 3h5.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V19a2 2 0 01-2 2H8a2 2 0 01-2-2V5a2 2 0 012-2z'/%3E%3C/svg%3E");
}

body.controller-recibos {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
}

body.controller-analytics {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 3v18h18'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 14l3-3 3 2 4-5'/%3E%3C/svg%3E");
}

body.controller-orders {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 4h2l2.2 10.5a1 1 0 001 .8h8.6a1 1 0 001-.8L21 7H7'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E");
}

body.controller-booking_settings,
body.controller-working_intervals,
body.controller-booking_time_offs {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.325 4.317a1.724 1.724 0 013.35 0 1.724 1.724 0 002.573 1.066 1.724 1.724 0 012.37 2.37 1.724 1.724 0 001.065 2.572 1.724 1.724 0 010 3.35 1.724 1.724 0 00-1.066 2.573 1.724 1.724 0 01-2.37 2.37 1.724 1.724 0 00-2.572 1.065 1.724 1.724 0 01-3.35 0 1.724 1.724 0 00-2.573-1.066 1.724 1.724 0 01-2.37-2.37 1.724 1.724 0 00-1.065-2.572 1.724 1.724 0 010-3.35 1.724 1.724 0 001.066-2.573 1.724 1.724 0 012.37-2.37 1.724 1.724 0 002.572-1.065z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3C/svg%3E");
}

body.controller-admin-users {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 3l7 4v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V7l7-4z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.5 12.5l1.8 1.8 3.2-3.2'/%3E%3C/svg%3E");
}

body.controller-admin-teams,
body.controller-teams {
  --page-header-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}