@import "tailwindcss";

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

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

/* Tabulator (taules ordenables/cercables) */
@import "../../../node_modules/tabulator-tables/dist/css/tabulator.min.css";

/*
  Tema DOP Garrigues.
  Colors corporatius de la normativa gràfica:
    - Pantone 3425 C  →  #006647  (verd fosc, color principal)
    - Pantone 370 C   →  #376828  (verd oliva, color secundari)

  Aquí redefinim els tokens semàntics que fa servir la plantilla CRM de
  Preline Pro (background, foreground, card, muted, navbar-*, dropdown-*,
  primary, secondary) per a un tema clar amb la marca DOP. Així el markup de
  la plantilla (bg-background, text-foreground, bg-primary, …) funciona amb
  el Preline free i la build de Tailwind v4 del projecte.
*/
@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 — verd DOP, ancorada a 600 = #006647 */
  --color-primary-50: #eff7f3;
  --color-primary-100: #d7ece1;
  --color-primary-200: #b0d9c6;
  --color-primary-300: #7ebfa3;
  --color-primary-400: #49a07e;
  --color-primary-500: #1c8462;
  --color-primary-600: #006647;
  --color-primary-700: #00543c;
  --color-primary-800: #044332;
  --color-primary-900: #06372a;
  --color-primary-950: #032018;

  /* 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 verd fosc DOP) */
  --color-navbar-inverse: var(--color-primary-950);
  --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 (verd fosc DOP) */
  --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 (verd oliva DOP — Pantone 370 C) */
  --color-secondary: #376828;
  --color-secondary-hover: #2c521f;
  --color-secondary-focus: #2c521f;
  --color-secondary-active: #233f18;
  --color-secondary-foreground: #ffffff;
  --color-secondary-line: #cfe0c5;
}

/* Tabulator: ajusta la llibreria al tema DOP (tipografia + colors) */
.tabulator {
  border: none;
  background-color: var(--color-card);
  font-size: 0.875rem;
}

.tabulator .tabulator-header {
  border-bottom: 1px solid var(--color-line);
  background-color: var(--color-neutral-50);
  color: var(--color-muted-foreground-1);
  font-weight: 500;
}

.tabulator .tabulator-header .tabulator-col {
  background-color: transparent;
  border-right: none;
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--color-line);
}

.tabulator .tabulator-row.tabulator-row-even {
  background-color: var(--color-card);
}

.tabulator .tabulator-row:hover {
  background-color: var(--color-muted-hover);
}

/* Enllaços dins de cel·les (p. ex. el nom porta al detall) */
.tabulator .tabulator-cell a {
  color: var(--color-primary);
  font-weight: 500;
}

.tabulator .tabulator-cell a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.tabulator .tabulator-footer {
  border-top: 1px solid var(--color-line);
  background-color: var(--color-card);
  color: var(--color-muted-foreground-1);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.tabulator .tabulator-footer .tabulator-paginator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-muted-foreground-1);
}

.tabulator .tabulator-footer .tabulator-page-counter {
  margin-inline-end: 1rem;
}

.tabulator .tabulator-footer .tabulator-paginator label {
  margin-inline: 0.25rem;
}

/* Selector "Per pàgina" (no escapçat, amb prou espai per a la fletxa) */
.tabulator .tabulator-footer .tabulator-page-size {
  min-width: 4.5rem;
  height: 2rem;
  margin: 0 0.25rem;
  padding: 0.25rem 2rem 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-card);
  color: var(--color-foreground);
  line-height: 1.25rem;
}

/* Botons de paginació */
.tabulator .tabulator-footer .tabulator-page {
  height: 2rem;
  min-width: 2rem;
  margin: 0 0.1rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background-color: var(--color-card);
  color: var(--color-foreground);
  font-weight: 500;
}

.tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
  background-color: var(--color-muted-hover);
  color: var(--color-foreground);
}

.tabulator .tabulator-footer .tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.tabulator .tabulator-footer .tabulator-page:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}