/* AgencyBox — App CSS */
/* Tailwind directives (for local build) */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
  }

  [x-cloak] {
    display: none !important;
  }
}

@layer components {
  /* Form inputs */
  .input {
    @apply w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm
           focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
           transition-all placeholder-slate-400;
  }

  .input-error {
    @apply border-red-300 focus:ring-red-500/20 focus:border-red-500;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5
           font-semibold text-sm rounded-xl transition-all;
  }

  .btn-primary {
    @apply btn bg-accent text-white hover:bg-blue-700 active:bg-blue-800;
  }

  .btn-secondary {
    @apply btn bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 active:bg-slate-100;
  }

  .btn-danger {
    @apply btn bg-red-500 text-white hover:bg-red-600 active:bg-red-700;
  }

  .btn-ghost {
    @apply btn text-slate-600 hover:bg-slate-100 active:bg-slate-200;
  }

  /* Cards */
  .card {
    @apply bg-white border border-slate-200 rounded-xl;
  }

  .card-hover {
    @apply card hover:border-accent hover:shadow-md transition-all;
  }

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

  .badge-blue {
    @apply badge bg-blue-50 text-blue-700;
  }

  .badge-green {
    @apply badge bg-green-50 text-green-700;
  }

  .badge-red {
    @apply badge bg-red-50 text-red-600;
  }

  .badge-slate {
    @apply badge bg-slate-100 text-slate-600;
  }

  /* Table */
  .table-wrapper {
    @apply bg-white border border-slate-200 rounded-xl overflow-hidden;
  }

  .table-header-cell {
    @apply px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide;
  }

  .table-cell {
    @apply px-5 py-3.5 text-sm text-slate-700;
  }

  /* Page header */
  .page-header {
    @apply flex items-center justify-between mb-6;
  }

  .page-title {
    @apply text-xl font-bold text-slate-800 font-display;
  }

  /* Empty state */
  .empty-state {
    @apply bg-white border border-dashed border-slate-200 rounded-xl p-12 text-center;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Transitions */
.fade-enter {
  opacity: 0;
  transform: translateY(-4px);
}

.fade-enter-active {
  transition: opacity 0.15s, transform 0.15s;
}

/* Range input */
input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: none;
}

/* Color inputs */
input[type="color"] {
  cursor: pointer;
  border: 1px solid #e2e8f0;
  padding: 2px;
}

/* Lucide icons */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* Print styles */
@media print {
  .sidebar,
  header,
  nav,
  button,
  .no-print {
    display: none !important;
  }

  .ml-60 {
    margin-left: 0 !important;
  }

  main {
    padding-top: 0 !important;
  }
}