/* КЛГ АСУ ТК — Global styles + Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #f0f4f8;
  color: #333;
}

/* Dark mode */
.dark body, html.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}
.dark .card {
  @apply bg-slate-800 border-slate-700;
}
.dark .input-field {
  @apply bg-slate-700 border-slate-600 text-white placeholder:text-slate-400;
}
.dark .table-header {
  @apply text-slate-400;
}
.dark .main-content {
  @apply bg-slate-900;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip to main */
.skip-to-main:not(:focus) { @apply sr-only; }
.skip-to-main:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  padding: 12px 24px; background: #1e3a5f; color: white;
  border-radius: 4px; font-weight: bold;
}

/* Custom utility classes */
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-100;
  }
  .btn-primary {
    @apply px-5 py-2.5 bg-primary-500 text-white rounded font-medium
           hover:bg-primary-600 transition-colors cursor-pointer border-none;
  }
  .btn-secondary {
    @apply px-5 py-2.5 bg-white text-primary-500 rounded font-medium
           border border-primary-500 hover:bg-primary-50 transition-colors cursor-pointer;
  }
  .btn-danger {
    @apply px-4 py-2 bg-red-500 text-white rounded text-sm
           hover:bg-red-600 transition-colors cursor-pointer border-none;
  }
  .btn-sm {
    @apply px-3 py-1.5 rounded text-sm cursor-pointer border-none;
  }
  .badge {
    @apply px-2.5 py-1 rounded-full text-xs font-bold;
  }
  .input-field {
    @apply w-full px-4 py-2.5 border border-gray-300 rounded text-sm
           focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-400;
  }
  .page-container {
    @apply flex min-h-screen;
  }
  .main-content {
    @apply ml-0 lg:ml-[280px] flex-1 p-4 lg:p-8;
  }
  .page-title {
    @apply text-2xl font-bold text-gray-800 mb-2;
  }
  .page-subtitle {
    @apply text-sm text-gray-500 mb-4;
  }
  .table-header {
    @apply px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider;
  }
  .table-cell {
    @apply px-4 py-3 text-sm;
  }
  .filter-btn {
    @apply px-3.5 py-1.5 rounded text-sm cursor-pointer transition-colors;
  }
  .filter-btn-active {
    @apply bg-primary-500 text-white border-primary-500;
  }
  .filter-btn-inactive {
    @apply bg-transparent text-primary-500 border border-gray-300 hover:border-primary-300;
  }
  .status-badge {
    @apply px-2.5 py-1 rounded-full text-xs font-bold text-white;
  }
  .nav-pagination {
    @apply flex justify-center mt-4 gap-2;
  }
  .nav-btn {
    @apply px-4 py-2 border border-gray-300 rounded cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  }
}