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

/* ===================== PBX THEME ===================== */

/* Base look */
@layer base {
  html { color-scheme: light; }
  body { @apply bg-slate-50 text-slate-800 antialiased; }
  h1,h2,h3 { @apply text-slate-800; }
}

/* Components */
@layer components {

  /* ----- Layout / spacing helpers ----- */
  .pbx-container { @apply max-w-7xl mx-auto px-4 sm:px-6; }
  .pbx-header-wrap { @apply h-16 flex items-center justify-between; }
  .pbx-main { @apply pt-2 lg:pt-3 pb-10; }
  .pbx-page-title { @apply text-lg sm:text-xl font-semibold mb-2 lg:mb-3; }
  .pbx-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5; }
  .pbx-section { @apply mt-5 lg:mt-6; }

  /* ----- Cards ----- */
  .pbx-card { @apply rounded-2xl bg-white shadow-sm border border-slate-200 p-4 lg:p-5; }
  .pbx-card .title { @apply flex items-center gap-3 text-sm font-semibold text-slate-600; }
  .pbx-card .subtitle { @apply text-xs text-slate-500; }

  /* ----- Progress bar ----- */
  .pbx-progress { @apply h-2 w-full rounded-full bg-slate-200 overflow-hidden; }
  .pbx-progress > .bar { @apply h-full bg-sky-600; }

  /* ----- Status badges ----- */
  .pbx-badge { @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium; }
  .pbx-badge--ok   { @apply bg-emerald-100 text-emerald-700; }
  .pbx-badge--warn { @apply bg-amber-100  text-amber-700; }
  .pbx-badge--err  { @apply bg-rose-100   text-rose-700; }

  /* ----- Buttons ----- */
  .header-btn  { @apply inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm hover:bg-slate-100 transition; }
  .primary-btn { @apply inline-flex items-center gap-2 rounded-xl bg-sky-600 px-3 py-2 text-sm text-white hover:bg-sky-700 transition; }

  /* ----- Tables ----- */
  .table { @apply min-w-full text-sm; }
  .table thead th { @apply px-5 py-3 font-semibold text-left text-slate-600 border-b border-slate-200; }
  .table tbody tr { @apply hover:bg-slate-50/60; }
  .table td { @apply px-5 py-3; }

  /* ----- Sidebar ----- */
  .pbx-sidebar {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
  }
  .pbx-sidebar a { color: #cbd5e1; }
  .pbx-sidebar a:hover { background-color: rgba(255,255,255,.08); }
  .pbx-sidebar .is-active { background-color: rgba(255,255,255,.10) !important; color: #ffffff !important; }

  /* ----- Consistent Dark Theme Forms ----- */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    background: #0d1b31 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 46px;
    padding: .7rem .9rem;
    box-shadow: none !important;
  }

  .form-control::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: rgba(255,255,255,.38) !important;
  }

  .form-control:focus,
  .form-select:focus,
  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(77,138,240,.55) !important;
    box-shadow: 0 0 0 .18rem rgba(77,138,240,.14) !important;
    outline: none !important;
  }

  .form-label,
  label {
    color: rgba(255,255,255,.72) !important;
    font-size: .79rem;
    font-weight: 600;
  }

  .form-check-input {
    background: #0d1b31 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .form-check-input:checked {
    background-color: rgba(77,138,240,.8) !important;
    border-color: rgba(77,138,240,.8) !important;
  }

  .form-check-label {
    color: rgba(255,255,255,.72) !important;
  }

  /* Override for specific contexts if needed */
  .bg-white .form-control,
  .bg-white .form-select,
  .bg-white input,
  .bg-white select {
    background: #0d1b31 !important;
    color: #fff !important;
  }
}