/* ── Kozenet Pro Design System ── */
:root {
  /* Spacing tokens */
  --kz-space-xs: 0.25rem;   /* 4px  */
  --kz-space-sm: 0.5rem;    /* 8px  */
  --kz-space-md: 0.75rem;   /* 12px */
  --kz-space-lg: 1rem;      /* 16px */
  --kz-space-xl: 1.5rem;    /* 24px */

  /* Column sizing */
  --kanban-col-width: min(82vw, 17rem);
  --kanban-sidebar-width: 13rem;

  /* Radius tokens */
  --kz-radius-sm: 0.375rem;  /* 6px  */
  --kz-radius-md: 0.5rem;    /* 8px  */
  --kz-radius-lg: 0.75rem;   /* 12px */
  --kz-radius-xl: 1rem;      /* 16px */

  /* Z-index layers */
  --kz-z-sidebar: 50;
  --kz-z-toolbar: 30;
  --kz-z-modal: 100;
  --kz-z-fab: 40;
  --kz-z-dropdown: 20;

  /* Brand accent */
  --kz-accent: 147 51 234;  /* purple-600 */
  --kz-accent-light: 168 85 247; /* purple-500 */
}

@media (min-width: 1024px) {
  :root {
    --kanban-col-width: 18rem;
  }
}

@media (min-width: 1536px) {
  :root {
    --kanban-col-width: 19rem;
  }
}

/* Blob animation for booking background */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes focus-timer-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(168 85 247 / 0); }
  50% { box-shadow: 0 0 0 8px rgb(168 85 247 / 0.12); }
}
.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}

@media (prefers-reduced-motion: reduce) {
  .site-header-aurora .animate-blob {
    animation: none;
  }

  [data-focus-timer] .focus-timer-glow {
    animation: none !important;
    transition: none !important;
  }
}

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

@layer components {
  .kanban-modal-layer {
    z-index: var(--kz-z-modal);
  }

  .focus-timer-ring {
    background: conic-gradient(
      rgb(var(--kz-accent-light)) var(--focus-progress, 0deg),
      rgb(226 232 240) 0deg
    );
  }

  .dark .focus-timer-ring {
    background: conic-gradient(
      rgb(var(--kz-accent-light)) var(--focus-progress, 0deg),
      rgb(30 41 59) 0deg
    );
  }

  [data-focus-timer][data-running="true"] .focus-timer-glow {
    animation: focus-timer-breathe 2.4s ease-in-out infinite;
  }

  [data-focus-timer][data-complete="true"] .focus-timer-ring {
    box-shadow: 0 0 0 4px rgb(16 185 129 / 0.18), 0 0 32px rgb(16 185 129 / 0.18);
  }

  /* ── Public Site Brand Tokens ── */
  .site-brand-primary-bg {
    background-color: var(--site-primary);
  }

  .site-brand-primary-bg:hover {
    filter: brightness(0.92);
  }

  .site-brand-primary-text {
    color: var(--site-primary);
  }

  .site-brand-primary-text-hover:hover {
    color: var(--site-primary);
  }

  .site-brand-primary-soft-bg {
    background-color: var(--site-primary-soft);
  }

  .site-brand-primary-border {
    border-color: var(--site-primary);
  }

  .site-brand-primary-border-hover:hover {
    border-color: var(--site-primary);
  }

  .site-brand-secondary-text {
    color: var(--site-secondary);
  }

  .site-brand-secondary-soft-bg {
    background-color: var(--site-secondary-soft);
  }

  .site-brand-secondary-border-hover:hover {
    border-color: var(--site-secondary);
  }

  .site-brand-accent-bg {
    background-color: var(--site-accent);
  }

  .site-brand-accent-bg:hover {
    filter: brightness(0.92);
  }

  .site-brand-accent-text {
    color: var(--site-accent);
  }

  .site-brand-accent-text-hover:hover {
    color: var(--site-accent);
  }

  .site-brand-accent-soft-bg {
    background-color: var(--site-accent-soft);
  }

  .site-brand-accent-border-hover:hover {
    border-color: var(--site-accent);
  }

  .site-brand-focus:focus-visible {
    outline: 3px solid var(--site-primary);
    outline-offset: 3px;
  }

  .site-brand-page-background {
    background: linear-gradient(135deg, var(--site-primary-soft), transparent 52%, var(--site-secondary-soft));
  }

  .site-brand-gradient {
    background: linear-gradient(135deg, var(--site-primary), var(--site-secondary), var(--site-accent));
  }

  /* ── Shared Sidebar ── */
  .sidebar-container {
    @apply h-full relative;
  }

  .sidebar-backdrop {
    @apply fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-40
           hidden lg:hidden;
  }

  .sidebar-panel {
    @apply fixed inset-y-0 left-0 z-50 w-64 flex flex-col
           bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl
           border-r border-slate-200/50 dark:border-slate-700/50
           transform -translate-x-full lg:translate-x-0
           transition-transform duration-300 ease-in-out
           h-[100dvh] overflow-hidden;

    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sidebar-header {
    @apply flex-none border-b border-slate-200/50
           dark:border-slate-700/50 p-4;
  }

  .sidebar-nav {
    @apply flex-1 overflow-y-auto overscroll-contain py-4 space-y-6 px-4
           scrollbar-thin scrollbar-track-transparent
           scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-600;
  }
}

@layer components {
  /* ── Kanban Drag & Drop ── */
  .kanban-list {
    @apply transition-all duration-200;
  }

  .kanban-list.sortable-chosen {
    @apply transform scale-[1.02] rotate-1 shadow-2xl ring-2 ring-blue-500/50 z-50;
  }

  .kanban-list.sortable-ghost {
    @apply opacity-40 border-2 border-dashed border-blue-500/50 bg-blue-500/5;
  }

  .task-dragging {
    @apply opacity-60 shadow-2xl border-2 border-purple-500 transform scale-105 rotate-1;
  }

  .task-ghost {
    @apply opacity-20 border-2 border-dashed border-purple-500/40;
  }

  .task-drag-preview {
    @apply transform scale-105 shadow-2xl border-2 border-purple-500
           ring-2 ring-purple-500/50 ring-offset-1 ring-offset-slate-900;
  }

  .drop-zone-active {
    @apply bg-purple-500/5 border-2 border-dashed border-purple-500/30 rounded-lg;
  }

  .drag-handle {
    @apply cursor-grab hover:cursor-grabbing;
  }

  .is-dragging-over {
    @apply bg-purple-500/5 rounded-lg
           border-2 border-dashed border-purple-500/30;
  }

  .kanban-dragging .task-card:not(.is-being-dragged) {
    @apply transition-transform duration-200;
  }

  .task-card.is-being-dragged {
    @apply opacity-90 shadow-2xl ring-2 ring-purple-500/50 rotate-1 scale-[1.02] z-50;
  }

  body.kanban-dragging {
    cursor: grabbing;
  }

  /* ── Kanban Layout System ── */
  .kanban-main-content {
    margin-left: 0;
    padding-left: 0;
    transition: padding-left 0.3s ease;
  }

  @media (min-width: 1024px) {
    .kanban-main-content {
      padding-left: var(--kanban-sidebar-width, 13rem);
    }
  }

  /* ── Kanban Sidebar ── */
  .kanban-sidebar-panel {
    @apply fixed inset-y-0 left-0 z-50 flex flex-col
           bg-white/95 dark:bg-slate-950/95 backdrop-blur-xl
           border-r border-slate-200 dark:border-slate-800/80
           w-[var(--kanban-sidebar-width,13rem)]
           h-[100dvh] overflow-hidden;
    touch-action: pan-y;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-controller="board-sidebar"][data-collapsed="true"] .kanban-sidebar-panel {
    width: 3.5rem;
  }

  [data-controller="board-sidebar"][data-collapsed="true"] .kanban-sidebar-collapse-icon {
    @apply rotate-180;
  }

  .kanban-sidebar-link {
    @apply flex items-center gap-3 px-2 py-1.5 rounded-lg text-sm
           text-slate-600 dark:text-slate-400
           hover:text-slate-900 dark:hover:text-slate-200
           hover:bg-slate-100 dark:hover:bg-slate-800/60
           transition-all duration-150 border-l-2 border-transparent;
  }

  .kanban-sidebar-link:hover {
    @apply border-l-2 border-purple-500/50;
  }

  .kanban-sidebar-link-primary {
    @apply bg-purple-50 dark:bg-purple-600/15
           text-purple-700 dark:text-purple-300
           hover:bg-purple-100 dark:hover:bg-purple-600/25
           hover:text-purple-800 dark:hover:text-purple-200
           border-l-2 border-purple-500/40;
  }

  .kanban-sidebar-link-active {
    @apply bg-slate-100 dark:bg-slate-800
           text-slate-900 dark:text-white
           border-l-2 border-purple-500;
  }

  .kanban-sidebar-transition {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── Kanban Board Header / Toolbar ── */
  .kanban-board-header {
    @apply flex-none border-b
           border-slate-200 dark:border-slate-800/80
           bg-white/90 dark:bg-slate-950/90
           backdrop-blur-md;
  }

  .kanban-search-input {
    @apply border rounded-lg text-sm
           bg-slate-50 dark:bg-slate-900/60
           border-slate-200 dark:border-slate-800
           text-slate-900 dark:text-slate-200
           placeholder-slate-400 dark:placeholder-slate-500
           focus:outline-none focus:ring-1 focus:ring-purple-500/50
           focus:border-purple-500/50 transition-colors;
  }

  .kanban-view-tab {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium
           text-slate-500 dark:text-slate-400
           hover:text-slate-700 dark:hover:text-slate-200
           hover:bg-slate-200 dark:hover:bg-slate-800
           transition-colors;
  }

  .kanban-view-tab-active {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium
           text-purple-700 dark:text-purple-300
           bg-purple-50 dark:bg-purple-500/15
           border border-purple-300 dark:border-purple-500/30;
  }

  .kanban-icon-btn {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg
           text-slate-500 dark:text-slate-400
           hover:text-slate-700 dark:hover:text-slate-200
           hover:bg-slate-100 dark:hover:bg-slate-800
           transition-colors;
  }

  .kanban-btn-primary {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium
           text-white bg-purple-600 hover:bg-purple-500 transition-colors;
  }

  /* ── Kanban Tags ── */
  .kanban-tag {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
           bg-[color-mix(in_srgb,var(--tag-color,#6366f1)_20%,transparent)]
           text-[color-mix(in_srgb,var(--tag-color,#6366f1)_90%,white)];
  }

  /* ── Kanban List Dots ── */
  .kanban-list-dot[data-list-type="todo"],
  .kanban-list-dot[data-list-type="default"] {
    @apply bg-blue-400;
  }

  .kanban-list-dot[data-list-type="in_progress"] {
    @apply bg-amber-400;
  }

  .kanban-list-dot[data-list-type="done"] {
    @apply bg-emerald-400;
  }

  .kanban-list-dot[data-list-type="blocked"] {
    @apply bg-red-400;
  }

  .my-tasks-grid .task-card {
    cursor: default;
  }

  /* ── Kanban Board Scroll ── */
  .kanban-board-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .kanban-scroll-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* ── Kanban Mobile Navigation ── */
  .kanban-mobile-nav {
    @apply fixed bottom-0 inset-x-0 z-40 flex items-center justify-around
           h-14 px-2
           bg-white/95 dark:bg-slate-950/95 backdrop-blur-xl
           border-t border-slate-200 dark:border-slate-800/80;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .kanban-mobile-nav-item {
    @apply flex flex-col items-center gap-0.5 px-3 py-1 text-[10px]
           text-slate-500 dark:text-slate-500
           hover:text-slate-700 dark:hover:text-slate-300
           transition-colors min-w-[44px] min-h-[44px]
           items-center justify-center;
  }

  .kanban-mobile-nav-item-active {
    @apply text-purple-600 dark:text-purple-400;
  }

  .kanban-fab {
    @apply fixed z-50
           w-14 h-14 rounded-full bg-purple-600 text-white shadow-lg shadow-purple-900/40
           flex items-center justify-center hover:bg-purple-500 active:scale-95 transition-all;
    bottom: calc(3.5rem + 0.75rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── Kanban Wizard Steps ── */
  .kanban-step-active {
    @apply bg-purple-600 text-white;
  }

  .kanban-step-done {
    @apply bg-purple-600/30 text-purple-300;
  }

  /* ── Activity Indicator ── */
  .kanban-activity-dot {
    @apply w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0;
    animation: activity-pulse 2s ease-in-out infinite;
  }

  @keyframes activity-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ── Kanban Filter Panel (dark mode) ── */
  .kanban-filter-section {
    @apply bg-slate-900/60 border border-slate-800 rounded-xl p-4;
  }

  .kanban-filter-section-title {
    @apply flex items-center gap-2 text-sm font-medium text-slate-200 mb-3;
  }

  .kanban-filter-checkbox-label {
    @apply flex items-center gap-3 px-2 py-2 rounded-lg
           hover:bg-slate-800/60 transition-colors cursor-pointer text-sm text-slate-300;
  }

  .kanban-filter-checkbox {
    @apply w-4 h-4 rounded border-slate-600 text-purple-600
           focus:ring-purple-500/50 focus:ring-offset-0 bg-slate-800;
  }

  .kanban-filter-radio {
    @apply w-4 h-4 border-slate-600 text-purple-600
           focus:ring-purple-500/50 focus:ring-offset-0 bg-slate-800;
  }
}

/* ── Shared Button System ── */
@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
           rounded-lg transition-colors duration-200
           bg-indigo-600 text-white hover:bg-indigo-700
           focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
           dark:bg-indigo-500 dark:hover:bg-indigo-600
           dark:focus:ring-offset-slate-900;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
           rounded-lg border transition-colors duration-200
           bg-white text-slate-700 hover:bg-slate-50
           border-slate-200 focus:ring-2 focus:ring-offset-2
           focus:ring-slate-500
           dark:bg-slate-700 dark:text-slate-200
           dark:hover:bg-slate-600 dark:border-slate-600
           dark:focus:ring-offset-slate-900;
  }

  .btn-outline-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
           rounded-lg border transition-colors duration-200
           bg-white text-red-600 hover:bg-red-50
           border-red-200 hover:border-red-300
           focus:ring-2 focus:ring-offset-2 focus:ring-red-500
           dark:bg-transparent dark:text-red-400
           dark:hover:bg-red-900/50 dark:border-red-700
           dark:hover:border-red-600
           dark:focus:ring-offset-slate-900;
  }

  .btn-outline-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
           rounded-lg border transition-colors duration-200
           bg-white text-indigo-600 hover:bg-indigo-50
           border-indigo-200 hover:border-indigo-300
           focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
           dark:bg-transparent dark:text-indigo-400
           dark:hover:bg-indigo-900/50 dark:border-indigo-700
           dark:hover:border-indigo-600
           dark:focus:ring-offset-slate-900;
  }

  .form-label {
    @apply block text-sm font-medium text-slate-700 dark:text-slate-200;
  }

  .form-input {
    @apply mt-1 block w-full rounded-md border-slate-300 shadow-sm
           focus:border-primary-500 focus:ring-primary-500
           dark:bg-slate-800 dark:border-slate-600
           dark:text-slate-200 sm:text-sm;
  }

  .form-select {
    @apply mt-1 block w-full rounded-md border-slate-300 shadow-sm
           focus:border-primary-500 focus:ring-primary-500
           dark:bg-slate-800 dark:border-slate-600
           dark:text-slate-200 sm:text-sm;
  }
}

/* ── Site Workspace Surface ── */
@layer components {
  .site-workspace-page {
    @apply min-h-full bg-slate-50 text-slate-900 dark:bg-[#0e1015] dark:text-slate-100;
  }

  .site-workspace-container {
    @apply w-full px-4 py-6 sm:px-6 lg:px-8;
  }

  .site-workspace-container-flush {
    @apply w-full py-6;
  }

  .site-workspace-container-narrow {
    @apply mx-auto max-w-5xl;
  }

  .site-workspace-panel {
    @apply rounded-xl border border-slate-200 bg-white shadow-sm
           dark:border-slate-800 dark:bg-slate-900/40;
  }

  .site-workspace-panel-header {
    @apply border-b border-slate-100 p-5 dark:border-slate-800;
  }

  .site-workspace-page-header {
    @apply mb-6 flex flex-col gap-4 border-b border-slate-200 pb-5
           sm:flex-row sm:items-center sm:justify-between
           dark:border-slate-800;
  }

  .site-workspace-eyebrow {
    @apply text-xs font-semibold uppercase tracking-[0.12em]
           text-slate-500 dark:text-slate-400;
  }

  .site-workspace-card {
    @apply rounded-xl border border-slate-200 bg-white shadow-sm
           dark:border-slate-800 dark:bg-slate-900/40;
  }

  .site-workspace-table-wrap {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm
           dark:border-slate-800 dark:bg-slate-900/40;
  }

  .site-workspace-table {
    @apply min-w-full divide-y divide-slate-200 dark:divide-slate-800;
  }

  .site-workspace-table thead {
    @apply bg-slate-50 dark:bg-slate-900/70;
  }

  .site-workspace-table th {
    @apply px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide
           text-slate-500 dark:text-slate-400;
  }

  .site-workspace-table td {
    @apply px-5 py-4 text-sm text-slate-700 dark:text-slate-300;
  }

  .site-workspace-table tbody {
    @apply divide-y divide-slate-100 dark:divide-slate-800;
  }

  .site-workspace-table tbody tr {
    @apply transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50;
  }

  .site-workspace-section-title {
    @apply text-base font-semibold text-slate-900 dark:text-slate-100;
  }

  .site-workspace-muted {
    @apply text-sm text-slate-500 dark:text-slate-400;
  }

  .site-workspace-form-label {
    @apply mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300;
  }

  .site-workspace-form-input {
    @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm
           text-slate-900 shadow-none focus:border-purple-500 focus:ring-purple-500
           dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100;
  }

  .site-workspace-sidebar-link {
    @apply flex items-center gap-2 rounded-md border-l-2 border-transparent px-2.5 py-2
           text-sm text-slate-600 transition-colors
           hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900
           dark:text-slate-400 dark:hover:border-slate-600 dark:hover:bg-slate-900 dark:hover:text-slate-100;
  }

  .site-workspace-sidebar-link-active {
    @apply border-purple-500 bg-purple-50 font-medium text-purple-700
           dark:border-purple-400 dark:bg-purple-500/10 dark:text-purple-200;
  }

  .site-workspace-page .backdrop-blur-sm {
    backdrop-filter: none;
  }

  .site-workspace-page [class~="bg-white/50"] {
    background-color: rgb(255 255 255);
  }

  .dark .site-workspace-page [class~="dark:bg-slate-800/50"] {
    background-color: rgb(15 23 42 / 0.4);
  }

  .site-workspace-page form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .site-workspace-page form select,
  .site-workspace-page form textarea {
    @apply rounded-lg border-slate-300 bg-white text-sm text-slate-900 shadow-none
           focus:border-purple-500 focus:ring-purple-500
           dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100;
  }
}

/* ── Toast Notifications ── */
.toast {
  @apply max-w-sm w-full bg-white dark:bg-slate-800 shadow-lg rounded-lg pointer-events-auto
         ring-1 ring-black ring-opacity-5;

  &--success {
    @apply bg-green-50 dark:bg-green-900/50;
  }

  &--error {
    @apply bg-red-50 dark:bg-red-900/50;
  }

  &--info {
    @apply bg-blue-50 dark:bg-blue-900/50;
  }
}

/* ── Service Provider Cards ── */
.service-provider-card {
  @apply relative bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm;
  @apply rounded-xl border border-slate-200/50 dark:border-slate-700/50;
  @apply hover:shadow-lg transition-all duration-200;
}

.service-provider-accent {
  @apply absolute -left-0.5 top-0 h-full w-1.5 rounded-l-xl;
  @apply opacity-50 group-hover:opacity-100 transition-opacity;
}

/* ── Appointment Card ── */
.appointment-card {
  --appointment-color: #4F46E5;
  border-left-color: var(--appointment-color);
  border-left-width: 4px;
}

.appointment-card.appointment-hover {
  border-color: var(--appointment-color);
}

.appointment-card-handle {
  background-color: var(--appointment-color);
}

/* ── Password Strength Bar ── */
.strength-bar {
  width: var(--strength-width, 0%);
}

.strength-bar.strength-weak {
  width: 25%;
}

.strength-bar.strength-fair {
  width: 50%;
}

.strength-bar.strength-good {
  width: 75%;
}

.strength-bar.strength-strong {
  width: 100%;
}

/* ── Celebrations ── */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes celebration-glow {
  0% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.6);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
}

.list-completed {
  @apply ring-2 ring-green-500/50 bg-green-50/50 dark:bg-green-900/20;
}

.list-completed .list-header {
  @apply bg-green-100/80 dark:bg-green-900/30;
}

/* ── Scrollbar Utilities ── */
@layer components {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .swipeable-cards-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1.5rem;
    scroll-padding-right: 1.5rem;
  }

  .swipeable-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  @media (min-width: 640px) {
    .swipeable-cards-container {
      scroll-padding-left: 2rem;
      scroll-padding-right: 2rem;
    }
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}

/* ── Custom Scrollbar ── */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(148 163 184), rgb(100 116 139));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(100 116 139), rgb(71 85 105));
  background-clip: content-box;
}

.dark .custom-scrollbar {
  scrollbar-color: rgb(71 85 105) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(71 85 105), rgb(51 65 85));
  background-clip: content-box;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(51 65 85), rgb(30 41 59));
  background-clip: content-box;
}

/* ── Google Maps Overrides ── */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw-c {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.gm-style .gm-style-iw-d {
  overflow: visible !important;
  max-height: none !important;
}

.gm-style .gm-style-iw-t::after {
  display: none !important;
}

.gm-ui-hover-effect {
  background-color: white !important;
  border-radius: 50% !important;
  top: 4px !important;
  right: 4px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* ── Thin Scrollbar for Filters ── */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #e2e8f0;
  border-radius: 20px;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #475569;
}
.scrollbar-thin:hover::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
}

/* ── Kanban Task Column Scrollbar ── */
.kanban-task-column {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) transparent;
}

.kanban-task-column::-webkit-scrollbar {
  width: 3px;
}

.kanban-task-column::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-task-column::-webkit-scrollbar-thumb {
  background-color: rgb(51 65 85);
  border-radius: 20px;
}

.kanban-task-column:hover::-webkit-scrollbar-thumb {
  background-color: rgb(71 85 105);
}

/* ── Trix Editor Dark Mode ── */
.dark trix-editor {
  background-color: transparent;
  border-color: rgb(51 65 85);
  color: rgb(203 213 225);
  min-height: 6em;
}

.dark trix-toolbar .trix-button-row {
  overflow-x: auto;
}

.dark trix-toolbar .trix-button-group {
  border-color: rgb(71 85 105);
}

.dark trix-toolbar .trix-button {
  color: rgb(148 163 184);
  border-bottom-color: rgb(51 65 85);
}

.dark trix-toolbar .trix-button:not(:first-child) {
  border-left-color: rgb(51 65 85);
}

.dark trix-toolbar .trix-button.trix-active {
  background: rgb(88 28 135 / 0.4);
  color: rgb(216 180 254);
}

.dark trix-toolbar .trix-button--icon::before {
  filter: invert(0.7);
}

.dark trix-toolbar .trix-button--icon.trix-active::before {
  filter: invert(0.85) sepia(0.3) hue-rotate(220deg);
}

.dark trix-toolbar .trix-dialog {
  background: rgb(30 41 59);
  border-top-color: rgb(71 85 105);
  box-shadow: 0 0.3em 1em rgb(0 0 0 / 0.5);
}

.dark trix-toolbar .trix-input--dialog {
  background-color: rgb(15 23 42);
  border-color: rgb(71 85 105);
  color: rgb(203 213 225);
}

.dark .trix-content pre {
  background-color: rgb(15 23 42);
  color: rgb(203 213 225);
}

.dark .trix-content blockquote {
  border-left-color: rgb(71 85 105);
}

/* Ensure Trix editor inside modal doesn't create unwanted scrollbars */
.trix-editor-container trix-editor {
  border: none;
  padding: 0;
  outline: none;
  min-height: 100px;
}

.trix-editor-container trix-toolbar {
  border-radius: 6px;
  overflow: hidden;
}

.dark .trix-editor-container trix-toolbar {
  background: rgb(15 23 42 / 0.5);
  border-radius: 6px;
}

/* Add to your existing stylesheet */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.5);
  }
}

[data-dropdown-target="menu"] {
  z-index: 9999 !important;
}

/* ── Booking calendar ── */
.kz-calendar {
  --fc-border-color: rgb(226 232 240);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgb(248 250 252);
  --fc-today-bg-color: rgb(245 243 255);
  --fc-now-indicator-color: rgb(147 51 234);
  color: rgb(15 23 42);
}

.dark .kz-calendar {
  --fc-border-color: rgb(51 65 85 / 0.72);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgb(15 23 42 / 0.55);
  --fc-today-bg-color: rgb(88 28 135 / 0.16);
  color: rgb(226 232 240);
}

.kz-calendar .fc {
  font-family: inherit;
}

.kz-calendar .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.kz-calendar .fc-toolbar-title {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: rgb(15 23 42);
}

.dark .kz-calendar .fc-toolbar-title {
  color: rgb(248 250 252);
}

.kz-calendar .fc-toolbar-chunk:last-child {
  justify-self: end;
}

.kz-calendar .fc-button-group {
  gap: 0.25rem;
}

.kz-calendar .fc .fc-button-primary {
  border: 1px solid rgb(203 213 225);
  border-radius: 0.625rem;
  background: rgb(255 255 255);
  color: rgb(71 85 105);
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  padding: 0.55rem 0.7rem;
  text-transform: capitalize;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dark .kz-calendar .fc .fc-button-primary {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42 / 0.72);
  color: rgb(203 213 225);
}

.kz-calendar .fc .fc-button-primary:hover {
  border-color: rgb(196 181 253);
  background: rgb(245 243 255);
  color: rgb(109 40 217);
}

.dark .kz-calendar .fc .fc-button-primary:hover {
  border-color: rgb(126 34 206 / 0.7);
  background: rgb(88 28 135 / 0.22);
  color: rgb(216 180 254);
}

.kz-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
.kz-calendar .fc .fc-button-primary:not(:disabled):active {
  border-color: rgb(147 51 234);
  background: rgb(147 51 234);
  color: white;
}

.kz-calendar .fc-theme-standard .fc-scrollgrid {
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.875rem;
  background: rgb(255 255 255);
}

.dark .kz-calendar .fc-theme-standard .fc-scrollgrid {
  border-color: rgb(51 65 85 / 0.78);
  background: rgb(15 23 42 / 0.36);
}

.kz-calendar .fc-col-header-cell {
  border-bottom: 0;
  background: rgb(248 250 252);
}

.dark .kz-calendar .fc-col-header-cell {
  background: rgb(15 23 42 / 0.72);
}

.kz-calendar .fc-col-header-cell-cushion {
  padding: 0.75rem 0.35rem;
  color: rgb(100 116 139);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.dark .kz-calendar .fc-col-header-cell-cushion {
  color: rgb(148 163 184);
}

.kz-calendar .fc-daygrid-day-frame {
  min-height: 7.25rem;
  padding: 0.25rem;
  transition: background-color 150ms ease;
}

.kz-calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: rgb(248 250 252 / 0.85);
}

.dark .kz-calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: rgb(30 41 59 / 0.38);
}

.kz-calendar .fc-daygrid-day-number {
  display: inline-flex;
  min-width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  margin: 0.15rem;
  border-radius: 9999px;
  color: rgb(71 85 105);
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
}

.dark .kz-calendar .fc-daygrid-day-number {
  color: rgb(203 213 225);
}

.kz-calendar .fc-day-today .fc-daygrid-day-number {
  background: rgb(147 51 234);
  color: white;
}

.kz-calendar .fc-day-other .fc-daygrid-day-number {
  color: rgb(148 163 184 / 0.65);
}

.kz-calendar .fc-daygrid-event-harness {
  margin: 0.2rem 0.25rem 0;
}

.kz-calendar .fc-event.kz-calendar-event {
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: rgb(99 102 241 / 0.1);
  color: rgb(67 56 202);
  box-shadow: none;
  cursor: pointer;
  padding: 0;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.dark .kz-calendar .fc-event.kz-calendar-event {
  background: rgb(99 102 241 / 0.15);
  color: rgb(199 210 254);
}

.kz-calendar .fc-event.kz-calendar-event:hover {
  border-color: rgb(165 180 252);
  background: rgb(238 242 255);
  transform: translateY(-1px);
}

.dark .kz-calendar .fc-event.kz-calendar-event:hover {
  border-color: rgb(99 102 241 / 0.55);
  background: rgb(49 46 129 / 0.38);
}

.kz-calendar .fc-event.status-available {
  background: rgb(16 185 129 / 0.1);
  color: rgb(4 120 87);
}

.dark .kz-calendar .fc-event.status-available {
  background: rgb(16 185 129 / 0.14);
  color: rgb(110 231 183);
}

.kz-calendar .fc-event.status-unavailable {
  background: rgb(244 63 94 / 0.1);
  color: rgb(190 18 60);
}

.dark .kz-calendar .fc-event.status-unavailable {
  background: rgb(244 63 94 / 0.14);
  color: rgb(253 164 175);
}

.kz-calendar .fc-event.status-blocked {
  background: rgb(100 116 139 / 0.12);
  color: rgb(71 85 105);
}

.dark .kz-calendar .fc-event.status-blocked {
  background: rgb(100 116 139 / 0.2);
  color: rgb(203 213 225);
}

.kz-calendar-event-content {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
}

.kz-calendar-event-dot {
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  margin-top: 0.28rem;
  border-radius: 9999px;
  background: currentColor;
}

.kz-calendar-event-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.kz-calendar-event-title,
.kz-calendar-event-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kz-calendar-event-title {
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1rem;
}

.kz-calendar-event-time {
  color: currentColor;
  font-size: 0.64rem;
  line-height: 0.9rem;
  opacity: 0.7;
}

.kz-calendar .fc-daygrid-more-link {
  display: inline-flex;
  margin: 0.2rem 0.35rem;
  border-radius: 9999px;
  background: rgb(241 245 249);
  padding: 0.15rem 0.45rem;
  color: rgb(71 85 105);
  font-size: 0.67rem;
  font-weight: 700;
}

.dark .kz-calendar .fc-daygrid-more-link {
  background: rgb(30 41 59);
  color: rgb(203 213 225);
}

.kz-calendar .fc-popover {
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  background: white;
  box-shadow: 0 18px 45px rgb(15 23 42 / 0.18);
}

.dark .kz-calendar .fc-popover {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42);
}

@media (max-width: 639px) {
  .kz-calendar-shell {
    padding: 0.75rem;
  }

  .kz-calendar .fc-toolbar.fc-header-toolbar {
    grid-template-columns: auto 1fr auto;
    gap: 0.4rem;
  }

  .kz-calendar .fc-toolbar-title {
    font-size: 0.9rem;
    text-align: center;
  }

  .kz-calendar .fc .fc-button-primary {
    padding: 0.45rem 0.55rem;
  }

  .kz-calendar .fc-daygrid-day-frame {
    min-height: 4.8rem;
    padding: 0.1rem;
  }

  .kz-calendar .fc-col-header-cell-cushion {
    padding: 0.55rem 0.15rem;
    font-size: 0.58rem;
  }

  .kz-calendar .fc-daygrid-day-number {
    min-width: 1.45rem;
    height: 1.45rem;
    margin: 0.05rem;
    font-size: 0.67rem;
  }

  .kz-calendar .fc-daygrid-event-harness {
    margin-inline: 0.1rem;
  }

  .kz-calendar-event-content {
    gap: 0.25rem;
    padding: 0.28rem 0.3rem;
  }

  .kz-calendar-event-title {
    font-size: 0.62rem;
  }

  .kz-calendar-event-time {
    display: none;
  }
}