@import "tailwindcss";

/* Preline UI */
@source "../../../node_modules/preline/dist/*.js";
@import "../../../node_modules/preline/variants.css";

/* Tailwind CSS plugins */
@plugin "@tailwindcss/forms";

/*
  Tokens semàntics de la plantilla CRM de Preline (background, card, navbar-*,
  dropdown-*, primary…), com a Terrer, amb un tema neutre: l'OPFH no té encara
  colors corporatius.
*/
@theme {
  /* Tipografia (com la plantilla Preline) */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Escala primary: el blau de Tailwind (tema neutre, sense marca) */
  --color-primary-50: var(--color-blue-50);
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-primary-800: var(--color-blue-800);
  --color-primary-900: var(--color-blue-900);
  --color-primary-950: var(--color-blue-950);

  /* Superfícies i text (tema clar) */
  --color-background: #ffffff;
  --color-background-1: var(--color-neutral-50);
  --color-background-2: var(--color-neutral-100);
  --color-plain: #ffffff;
  --color-foreground: var(--color-neutral-800);
  --color-foreground-inverse: #ffffff;

  /* Targetes */
  --color-card: #ffffff;
  --color-card-line: var(--color-neutral-200);
  --color-card-divider: var(--color-neutral-200);
  --color-card-header: var(--color-neutral-200);
  --color-card-footer: var(--color-neutral-200);
  --color-card-inverse: var(--color-primary-950);

  /* Vores / línies */
  --color-border: var(--color-neutral-200);
  --color-line: var(--color-neutral-200);
  --color-line-inverse: #ffffff;

  /* Estats "muted" (fons suaus, text secundari) */
  --color-muted: var(--color-neutral-100);
  --color-muted-hover: var(--color-neutral-100);
  --color-muted-focus: var(--color-neutral-100);
  --color-muted-active: var(--color-neutral-200);
  --color-muted-foreground: var(--color-neutral-500);
  --color-muted-foreground-1: var(--color-neutral-500);
  --color-muted-foreground-2: var(--color-neutral-600);

  /* Barra de navegació superior (fons fosc neutre) */
  --color-navbar-inverse: var(--color-neutral-900);
  --color-navbar-divider: rgba(255, 255, 255, 0.12);
  --color-navbar-nav-foreground: rgba(255, 255, 255, 0.85);
  --color-navbar-nav-hover: rgba(255, 255, 255, 0.1);
  --color-navbar-nav-focus: rgba(255, 255, 255, 0.1);
  --color-navbar-nav-active: rgba(255, 255, 255, 0.16);
  --color-navbar-nav-list-divider: rgba(255, 255, 255, 0.12);

  /* Desplegables */
  --color-dropdown: #ffffff;
  --color-dropdown-line: var(--color-neutral-200);
  --color-dropdown-divider: var(--color-neutral-200);
  --color-dropdown-header: var(--color-neutral-200);
  --color-dropdown-footer: var(--color-neutral-200);
  --color-dropdown-inverse: var(--color-primary-950);
  --color-dropdown-item-foreground: var(--color-neutral-800);
  --color-dropdown-item-hover: var(--color-neutral-100);
  --color-dropdown-item-focus: var(--color-neutral-100);
  --color-dropdown-item-active: var(--color-neutral-100);

  /* Primary */
  --color-primary: var(--color-primary-600);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-focus: var(--color-primary-700);
  --color-primary-active: var(--color-primary-800);
  --color-primary-checked: var(--color-primary-600);
  --color-primary-foreground: #ffffff;
  --color-primary-line: var(--color-primary-200);

  /* Secondary */
  --color-secondary: var(--color-neutral-700);
  --color-secondary-hover: var(--color-neutral-800);
  --color-secondary-focus: var(--color-neutral-800);
  --color-secondary-active: var(--color-neutral-900);
  --color-secondary-foreground: #ffffff;
  --color-secondary-line: var(--color-neutral-200);
}

/* Paginació de pagy (series_nav) */
.pagination .pagy { @apply flex flex-wrap gap-1; }
.pagination .pagy a { @apply rounded-lg px-3 py-1.5 text-foreground hover:bg-muted-hover; }
.pagination .pagy a[aria-current="page"] { @apply bg-primary text-primary-foreground; }
.pagination .pagy a[aria-disabled="true"]:not([aria-current]) { @apply text-muted-foreground-1 opacity-60; }