/* ── 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: 60;
  --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); }
}
.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;
  }
}

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

@layer components {
  /* ── 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 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;
  }
}

/* ── 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;
}