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

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-slate-50 text-slate-900 font-sans;
    @apply dark:bg-slate-900 dark:text-slate-100;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 dark:bg-slate-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400 dark:bg-slate-500;
  }
}

@layer components {
  .booking-block {
    @apply absolute inset-y-1 rounded-md text-white text-xs font-medium
           flex items-center px-2 overflow-hidden cursor-grab
           select-none transition-all duration-100 hover:brightness-110;
  }

  .cal-cell {
    @apply relative border-r border-b border-slate-200 dark:border-slate-700
           min-w-[52px] h-14;
  }

  .cal-cell.today {
    @apply bg-brand-50 dark:bg-brand-900/20;
  }

  .cal-cell.weekend {
    @apply bg-slate-100/60 dark:bg-slate-800/60;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
           text-slate-600 dark:text-slate-400
           hover:bg-slate-100 dark:hover:bg-slate-800
           hover:text-slate-900 dark:hover:text-slate-100
           transition-all duration-150;
  }

  .sidebar-link.active {
    @apply bg-brand-50 dark:bg-brand-900/30
           text-brand-700 dark:text-brand-300;
  }

  .card {
    @apply bg-white dark:bg-slate-800
           border border-slate-200 dark:border-slate-700
           rounded-xl shadow-card;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
           bg-brand-600 hover:bg-brand-700
           text-white text-sm font-medium
           transition-colors duration-150
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg
           bg-red-600 hover:bg-red-700
           text-white text-sm font-medium
           transition-colors duration-150
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

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

  .btn-ghost {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-lg
           text-slate-600 dark:text-slate-400
           text-sm font-medium
           hover:bg-slate-100 dark:hover:bg-slate-800
           transition-colors duration-150;
  }

  .input {
    @apply w-full px-3 py-2 rounded-lg text-sm
           bg-white dark:bg-slate-800
           border border-slate-300 dark:border-slate-600
           text-slate-900 dark:text-slate-100
           placeholder-slate-400 dark:placeholder-slate-500
           focus:outline-none focus:ring-2 focus:ring-brand-500/40
           focus:border-brand-500 dark:focus:border-brand-400
           transition-colors duration-150;
  }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }
}