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

@layer base {
  html { @apply text-navy-900 antialiased; }
  body { font-feature-settings: "cv11", "ss01"; }
  :focus-visible { @apply outline-none ring-2 ring-brand-500 ring-offset-1; }
  [x-cloak], [hidden] { display: none !important; }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md border px-3 h-8 text-sm font-medium
           transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1
           disabled:cursor-not-allowed disabled:opacity-60;
  }
  .btn svg { @apply h-4 w-4 shrink-0; }
  .btn-primary { @apply btn border-navy-900 bg-navy-900 text-white hover:bg-navy-800 hover:border-navy-800; }
  .btn-secondary { @apply btn border-gray-300 bg-white text-navy-800 hover:bg-gray-50; }
  .btn-ghost { @apply btn border-transparent bg-transparent text-navy-600 hover:bg-gray-100 hover:text-navy-900; }
  .btn-danger { @apply btn border-red-600 bg-red-600 text-white hover:bg-red-700 hover:border-red-700; }
  .btn-sm { @apply h-7 px-2 text-xs; }
  .page-header .btn, .page-header .btn-primary, .page-header .btn-secondary { @apply h-11 gap-2.5 px-4 text-[15px]; }
  .page-header .btn svg, .page-header .btn-primary svg, .page-header .btn-secondary svg { @apply h-5 w-5; }
  .btn-icon { @apply btn border-transparent bg-transparent h-8 w-8 px-0 text-gray-500 hover:bg-gray-100 hover:text-navy-900; }
  form[aria-busy="true"] [type="submit"] { @apply cursor-wait opacity-70; }

  /* Links */
  .link { @apply font-medium text-brand-700 hover:text-brand-800 hover:underline underline-offset-2; }

  /* Forms */
  .form-label { @apply mb-1 block text-xs font-medium text-navy-700; }
  .form-input,
  .form-select,
  .form-textarea {
    @apply block w-full rounded-md border-gray-300 bg-white px-2.5 py-1.5 text-sm text-navy-900 shadow-none
           placeholder:text-gray-400 focus:border-brand-500 focus:ring-1 focus:ring-brand-500
           disabled:bg-gray-50 disabled:text-gray-500;
  }
  .form-select { @apply pr-8; }
  .form-checkbox { @apply h-4 w-4 rounded border-gray-300 text-navy-900 focus:ring-brand-500; }
  .form-hint { @apply mt-1 text-xs text-gray-500; }
  .form-error { @apply mt-1 text-xs text-red-600; }
  .field-with-errors .form-input,
  .field-with-errors .form-select,
  .form-input[aria-invalid="true"],
  .form-select[aria-invalid="true"] { @apply border-red-400 focus:border-red-500 focus:ring-red-500; }

  /* Surfaces */
  .panel { @apply rounded-lg border border-gray-200 bg-white; }
  .panel > .overflow-x-auto:last-child, .panel > .data-table:last-child { @apply rounded-b-lg; }
  .panel-header { @apply flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-2.5; }
  .panel-title { @apply text-sm font-semibold text-navy-900; }

  /* Page header */
  .page-header { @apply mb-6 flex flex-wrap items-start justify-between gap-4; }
  .page-title { @apply text-2xl font-bold tracking-tight text-navy-950 sm:text-[32px] sm:leading-tight; }
  .page-description { @apply mt-1 text-base text-navy-500 sm:text-lg; }

  /* Tables */
  .data-table { @apply w-full text-[15px]; }
  .data-table thead th {
    @apply border-b border-gray-200 bg-gray-50/70 px-3 py-3 text-xs sm:px-5 font-medium uppercase tracking-wide text-navy-600 whitespace-nowrap;
  }
  :where(.data-table th) { text-align: left; }
  .data-table tbody td { @apply border-b border-gray-100 px-3 py-3 align-middle text-navy-800 sm:px-5; }
  .data-table tbody tr:last-child td { @apply border-b-0; }
  .data-table tbody tr { @apply transition-colors hover:bg-gray-50/80; }

  /* Badges */
  .badge { @apply inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] font-medium leading-none ring-1 ring-inset whitespace-nowrap; }
  .badge-dot { @apply h-2 w-2 shrink-0 rounded-full bg-current; }
  .badge-success { @apply badge bg-green-50 text-green-700 ring-green-600/10; }
  .badge-warning { @apply badge bg-amber-50 text-amber-700 ring-amber-600/10; }
  .badge-danger { @apply badge bg-red-50 text-red-700 ring-red-600/10; }
  .badge-info { @apply badge bg-brand-50 text-brand-700 ring-brand-600/20; }
  .badge-neutral { @apply badge bg-gray-50 text-gray-600 ring-gray-500/20; }

  /* Dropdowns */
  .dropdown-menu {
    @apply absolute right-0 z-40 mt-1 min-w-[10rem] origin-top-right rounded-md border border-gray-200 bg-white py-1 shadow-md focus:outline-none;
  }
  .dropdown-item {
    @apply flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-navy-800 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none;
  }
  .dropdown-item svg { @apply h-4 w-4 text-gray-400; }
  .dropdown-item-danger { @apply dropdown-item text-red-600 hover:bg-red-50 focus:bg-red-50; }
  .dropdown-item-danger svg { @apply text-red-500; }
  .dropdown-divider { @apply my-1 border-t border-gray-100; }

  /* Sidebar */
  .nav-section { @apply px-3 pb-2 pt-6 text-xs font-medium uppercase tracking-wider text-navy-500; }
  .nav-item {
    @apply relative flex items-center gap-3 rounded-lg px-3 py-2 text-[15px] text-navy-700 transition-colors hover:bg-gray-100 hover:text-navy-950;
  }
  .nav-item svg { @apply h-5 w-5 shrink-0 text-navy-400; }
  .nav-item-active { @apply bg-brand-50 font-medium text-navy-950; }
  .nav-item-active svg { @apply text-brand-600; }
  .nav-item-active::before { @apply absolute -left-3 top-1 bottom-1 w-[3px] rounded-r bg-navy-900 content-['']; }

  /* Filters bar */
  .filters { @apply flex flex-wrap items-center gap-2 border-b border-gray-200 px-3 py-2; }
  .filters .form-input, .filters .form-select { @apply h-8 py-1 text-sm; }
  .filters .form-select { @apply w-auto; }

  /* Collapsed sidebar (desktop only): icons with tooltips */
  .app-sidebar, .app-main { @apply transition-[width,padding] duration-200; }
  @screen lg {
    .sidebar-collapsed .app-sidebar { @apply w-16; }
    .sidebar-collapsed .app-main { @apply pl-16; }
    .sidebar-collapsed .sidebar-label { @apply sr-only; }
    .sidebar-collapsed .sidebar-header { @apply h-auto flex-col justify-center gap-2 px-0 py-4; }
    .sidebar-collapsed .app-sidebar nav { @apply px-2; }
    .sidebar-collapsed .nav-section { @apply mx-1 mb-1 mt-3 h-px overflow-hidden bg-gray-200 p-0 text-[0px]; }
    .sidebar-collapsed .nav-item { @apply justify-center px-0; }
    .sidebar-collapsed .nav-item::before { @apply -left-2; }
    .sidebar-collapsed .sidebar-header svg { @apply h-7 w-7; }
    .sidebar-collapsed .nav-item-extra { @apply hidden; }
    .sidebar-collapsed .user-menu-button { @apply justify-center px-0; }
    .sidebar-collapsed .user-menu .dropdown-menu { @apply right-auto w-60; }
    .sidebar-collapsed .collapse-icon { @apply rotate-180; }
  }

  /* Auth pages: woven blue backdrop */
  .auth-backdrop {
    background-color: #16325c;
    background-image:
      repeating-linear-gradient(45deg, rgba(125, 180, 255, 0.10) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(-45deg, rgba(125, 180, 255, 0.10) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, rgba(10, 22, 44, 0.15), rgba(10, 22, 44, 0.45));
  }
}

@layer components {
  /* Legal documents at /legal/*: long-form prose, read once and skimmed often */
  .legal-prose { @apply text-[15px] leading-relaxed text-navy-700; }
  .legal-prose h1 { @apply text-2xl font-bold tracking-tight text-navy-900 sm:text-3xl; }
  .legal-prose h1 + p { @apply mt-3 text-gray-500; }
  .legal-prose h2 { @apply mt-10 scroll-mt-8 border-t border-gray-100 pt-8 text-lg font-bold text-navy-900; }
  .legal-prose h3 { @apply mt-6 text-base font-semibold text-navy-900; }
  .legal-prose p { @apply mt-4; }
  .legal-prose ul, .legal-prose ol { @apply mt-4 space-y-2 pl-5; }
  .legal-prose ul { @apply list-disc; }
  .legal-prose ol { @apply list-decimal; }
  .legal-prose li::marker { @apply text-gray-400; }
  .legal-prose a { @apply font-medium text-brand-700 underline underline-offset-2 hover:text-brand-800; }
  .legal-prose strong { @apply font-semibold text-navy-900; }
  .legal-prose table { @apply mt-5 w-full border-collapse text-sm; }
  .legal-prose thead th { @apply border-b border-gray-300 pb-2 pr-4 text-left align-bottom font-semibold text-navy-900; }
  .legal-prose tbody td { @apply border-b border-gray-100 py-2.5 pr-4 align-top; }
  .legal-prose .table-scroll { @apply mt-5 overflow-x-auto; }
  .legal-prose .table-scroll table { @apply mt-0 min-w-[36rem]; }
  .legal-prose .callout { @apply mt-5 rounded-xl border border-gray-200 bg-gray-50 px-5 py-4 text-sm; }
  .legal-prose .callout p:first-child { @apply mt-0; }
  .legal-prose .legend { @apply mt-5 rounded-xl border-l-4 border-brand-500 bg-brand-50 px-5 py-4 text-sm text-navy-800; }
  .legal-prose .legend p:first-child { @apply mt-0; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */