@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import "./pagy.tailwind.css";

@theme {
  /* Colors - ERP-Lite Professional */
  --color-primary: #00317b;
  --color-primary-container: #0747a6;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #a3bcff;

  --color-surface: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-on-surface: #191c1e;
  --color-on-surface-variant: #434652;

  --color-secondary: #515f74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d5e3fc;
  --color-on-secondary-container: #57657a;

  --color-tertiary: #003e29;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #00583b;
  --color-on-tertiary-container: #42d59a;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-outline: #737784;
  --color-outline-variant: #c3c6d4;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  
  /* Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}


@layer base {
  body {
    @apply bg-surface text-on-surface font-sans antialiased;
  }

  /* High Information Density Tables */
  table {
    @apply w-full border-collapse text-left text-sm;
  }
  
  th {
    @apply sticky top-0 bg-surface-container-high px-4 py-2 font-medium text-on-surface-variant uppercase tracking-wider text-[11px];
  }

  td {
    @apply border-b border-surface-container-high px-4 py-2;
  }

  tr:nth-child(even) {
    @apply bg-surface-container-low;
  }

  tr:hover {
    @apply bg-primary/5;
  }
}

@layer components {
  /* Floating Label Input Logic */
  .field-group {
    @apply relative mb-4;
  }

  .field-input {
    @apply block w-full rounded-md border border-outline-variant bg-surface px-3 pt-4 pb-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all placeholder-transparent;
  }

  .field-label {
    @apply absolute left-3 top-1 text-[11px] text-outline transition-all;
  }

  .field-input:placeholder-shown + .field-label {
    @apply top-3 text-sm text-outline-variant;
  }

  .field-input:focus + .field-label {
    @apply top-1 text-[11px] text-primary;
  }
  
}