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

@layer base {
  * {
    border-radius: 0 !important;
  }
}

@layer components {
  .sidebar-link {
    @apply flex items-center px-3 py-2 text-gray-400 rounded-none hover:bg-[#211b2b] hover:text-gray-100 transition-colors border-l-2 border-transparent;
  }
  .sidebar-link.active {
    @apply bg-[#2a2137] text-gray-100 border-l-2 border-purple-500;
  }
  .btn-primary {
    @apply bg-purple-600 hover:bg-purple-500 text-white font-medium py-2 px-4 rounded-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-danger {
    @apply bg-red-600 hover:bg-red-500 text-white font-medium py-2 px-4 rounded-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply bg-[#2a3038] hover:bg-[#343c46] text-gray-100 font-medium py-2 px-4 rounded-none border border-[#3a424d] transition-colors;
  }
  .btn-success {
    @apply bg-green-600 hover:bg-green-500 text-white font-medium py-2 px-4 rounded-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .card {
    @apply bg-[#171b21] rounded-none border border-[#2a3038] p-5;
  }
  .input-field {
    @apply w-full bg-[#11151a] border border-[#323943] rounded-none px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500;
    /* Native date/select popups otherwise render with the browser's light
       default palette, making the date input's calendar icon nearly
       invisible against this dark theme. */
    color-scheme: dark;
  }
  .input-field[type="date"] {
    @apply cursor-pointer;
  }
  .label {
    @apply block text-sm font-medium text-gray-400 mb-1;
  }
  .badge-success {
    @apply inline-flex items-center whitespace-nowrap px-2 py-0.5 rounded-none text-xs font-medium bg-green-950 text-green-300 border border-green-800/70;
  }
  .badge-danger {
    @apply inline-flex items-center whitespace-nowrap px-2 py-0.5 rounded-none text-xs font-medium bg-red-950 text-red-300 border border-red-800/70;
  }
  .badge-warning {
    @apply inline-flex items-center whitespace-nowrap px-2 py-0.5 rounded-none text-xs font-medium bg-yellow-950 text-yellow-300 border border-yellow-800/70;
  }
  .badge-info {
    @apply inline-flex items-center whitespace-nowrap px-2 py-0.5 rounded-none text-xs font-medium bg-purple-950 text-purple-300 border border-purple-800/70;
  }
  .table-header {
    @apply whitespace-nowrap px-4 py-3 text-left text-xs font-medium text-gray-500;
  }
  .table-cell {
    @apply whitespace-nowrap px-4 py-3 text-sm text-gray-200 align-middle;
  }
  .modal-overlay {
    @apply fixed inset-0 bg-black/75 flex items-center justify-center z-50;
  }
  .modal-content {
    @apply bg-[#171b21] rounded-none border border-[#2a3038] p-6 max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto;
  }
  /* Loading-state placeholder for pages that fetch their data after mount
     (see templates/settings.html) - shown in place of a section's real
     content until its API calls resolve, so the wait reads as "loading"
     instead of "the form reset to nothing". */
  .skeleton-block {
    @apply rounded-none;
    /* Base tone (#202833, distinct from the card's own #171b21 background)
       keeps the placeholder's shape visibly a rectangle at rest; only the
       lighter band sweeps across as the highlight. */
    background-color: #202833;
    background-image: linear-gradient(100deg, transparent 30%, #323c49 50%, transparent 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}