/* ============================================================================
   Editorial Override — Theme CSS Layer (Specificity-Zero via :where())
   ============================================================================
   Ri-stila l'HTML Tailwind esistente per dargli il look Editorial.
   NON richiede modifiche HTML. Caricato condizionalmente dal Theme Engine
   quando il tema attivo ha css_override = "editorial-override.css".

   Tutti i selettori usano :where() → specificità 0,0,0.
   Tailwind (specificità 0,1,0) vince SEMPRE sulle proprietà che gestisce.
   Questo CSS aggiunge SOLO proprietà che Tailwind non imposta:
   font-family, box-shadow, letter-spacing, text-transform, border-radius.

   Rimuovere questo file = tornare al look Tailwind base (nessun breakage).
   ============================================================================ */

/* ------------------------------------------
   PAGE HEADERS — h1 diventa serif
   Specificità normale (.page-body h1 = 0,1,1) per vincere su font-bold di Tailwind.
   Questo è l'UNICO selettore senza :where() — il font-weight 400 è essenziale
   per Instrument Serif. Senza editorial-override.css, font-bold resta attivo.
   ------------------------------------------ */
.page-body h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
:where(.page-body h1 + p),
:where(.page-body h1 ~ p:first-of-type) {
  font-size: 12.5px;
}

/* ------------------------------------------
   BUTTONS — effetto 3D inset
   ------------------------------------------ */
:where(.page-body a.bg-accent),
:where(.page-body button.bg-accent) {
  border-radius: 12px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 18px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -3px 0 rgba(0,0,0,0.2),
    0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}
:where(.page-body a.bg-accent:hover),
:where(.page-body button.bg-accent:hover) {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -3px 0 rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.18);
}

/* ------------------------------------------
   CARDS — bg-card elements get Editorial radius
   ------------------------------------------ */
:where(.page-body .bg-card),
:where(.page-body [class*="bg-card"]) {
  border-radius: var(--r, 14px);
}

/* ------------------------------------------
   TABLE HEADERS — uppercase editorial
   ------------------------------------------ */
:where(.page-body table th) {
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 10px;
  font-weight: 600;
  padding: 8px 14px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* ------------------------------------------
   TABLE CELLS — consistent padding
   ------------------------------------------ */
:where(.page-body table td) {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  vertical-align: middle;
}
:where(.page-body table tbody tr):hover td {
  background: rgba(0,0,0,0.02);
}

/* ------------------------------------------
   FILTER BUTTONS — enhance without breaking Tailwind bg
   ------------------------------------------ */
:where(.page-body .filter-btn) {
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

/* ------------------------------------------
   INPUTS — editorial radius
   ------------------------------------------ */
:where(.page-body input[type="text"]),
:where(.page-body input[type="search"]),
:where(.page-body input[type="email"]),
:where(.page-body input[type="number"]),
:where(.page-body textarea),
:where(.page-body select) {
  border-radius: 12px;
  font-family: inherit;
}

/* ------------------------------------------
   STATUS DOTS — hover scale
   ------------------------------------------ */
:where(.page-body [class*="rounded-full"][class*="w-2"]) {
  transition: transform 0.12s;
}
:where(.page-body button[class*="rounded-full"][class*="w-2"]):hover,
:where(.page-body [class*="status-dot"]):hover {
  transform: scale(1.3);
}

/* ------------------------------------------
   LINKS inside tables — editorial action style
   ------------------------------------------ */
:where(.page-body table a) {
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
:where(.page-body table a:hover) {
  text-decoration: underline;
}

/* ------------------------------------------
   BADGE / PILLS — tighter editorial style
   ------------------------------------------ */
:where(.page-body .rounded-full[class*="text-xs"][class*="font-medium"]),
:where(.page-body button[class*="rounded"][class*="text-xs"][class*="font-medium"]) {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 5px;
}

/* ------------------------------------------
   H2 SECTION HEADERS — compact uppercase editorial
   ------------------------------------------ */
:where(.page-body h2.text-sm) {
  letter-spacing: 0.6px;
}
:where(.page-body h2[class*="font-semibold"][class*="uppercase"]) {
  letter-spacing: 0.8px;
  font-size: 10.5px;
}

/* ------------------------------------------
   KPI CARDS — big number serif, icon box shadow
   ------------------------------------------ */
:where(.page-body .bg-card p[class*="text-xl"]),
:where(.page-body .bg-card p[class*="text-2xl"]) {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.5px;
}
:where(.page-body .bg-card .rounded-lg[class*="w-8"][class*="h-8"]) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ------------------------------------------
   TABS — border-bottom style (Alpine.js pattern)
   ------------------------------------------ */
:where(.page-body button[class*="border-b-2"]),
:where(.page-body a[class*="border-b-2"]) {
  font-size: 12.5px;
  transition: border-color 0.15s, color 0.15s;
}

/* ------------------------------------------
   MODALS & DIALOGS — editorial border-radius + shadow
   ------------------------------------------ */
:where(.page-body .fixed.inset-0 > div[class*="bg-card"]),
:where(.page-body .fixed.inset-0 > div > div[class*="bg-card"]),
:where(.page-body [x-show][class*="bg-card"][class*="rounded"]) {
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.14),
    0 4px 16px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.04);
}
/* Modal close button */
:where(.page-body .fixed.inset-0 button[class*="text-t4"]) {
  border-radius: 8px;
  transition: background 0.12s;
}

/* ------------------------------------------
   PROGRESS BARS — smoother, rounded caps
   ------------------------------------------ */
:where(.page-body [class*="rounded-full"][class*="h-1"]),
:where(.page-body [class*="rounded-full"][class*="h-2"]) {
  border-radius: 999px;
  overflow: hidden;
}
:where(.page-body [class*="rounded-full"][class*="h-1"] > div),
:where(.page-body [class*="rounded-full"][class*="h-2"] > div) {
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ------------------------------------------
   NAVIGATION CARDS — landing "vigile" pages
   (Products index, Projects index, CRM index, ecc.)
   ------------------------------------------ */
:where(.page-body a.card),
:where(.page-body a[class*="hover:shadow"]) {
  border-radius: var(--r, 14px);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
:where(.page-body a.card:hover),
:where(.page-body a[class*="hover:shadow"]:hover) {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
/* Card titles in nav cards */
:where(.page-body .card h3),
:where(.page-body .card-body h3) {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
/* Card descriptions */
:where(.page-body .card-body p[class*="text-sm"]) {
  font-size: 12.5px;
}
/* Card record count */
:where(.page-body .card-body p[class*="text-t3"]:last-child),
:where(.page-body .card-body p[class*="text-t4"]:last-child) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ------------------------------------------
   LEGACY .card COMPONENTS — editorial treatment
   (classi da vecchio DS ancora in uso in CRM/home)
   ------------------------------------------ */
:where(.page-body .card) {
  border-radius: var(--r, 14px);
}
:where(.page-body .card-body) {
  font-family: inherit;
}

/* ------------------------------------------
   ALERT / NOTIFICATION BOXES — soft editorial
   ------------------------------------------ */
:where(.page-body [class*="bg-ok-soft"][class*="border"][class*="rounded"]),
:where(.page-body [class*="bg-warn-soft"][class*="border"][class*="rounded"]),
:where(.page-body [class*="bg-danger-soft"][class*="border"][class*="rounded"]),
:where(.page-body [class*="bg-info-soft"][class*="border"][class*="rounded"]) {
  border-radius: 12px;
}

/* ------------------------------------------
   DROPDOWN / POPOVER MENUS
   ------------------------------------------ */
:where(.page-body .absolute[class*="bg-card"][class*="border"][class*="rounded"]),
:where(.page-body .absolute[class*="bg-card"][class*="shadow"]) {
  border-radius: 12px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.1),
    0 2px 6px rgba(0,0,0,0.06),
    0 0 0 1px rgba(0,0,0,0.04);
}

/* ------------------------------------------
   SIDEBAR NAV ITEMS — editorial text sizing
   ------------------------------------------ */
:where(.page-body nav a[class*="text-sm"]) {
  font-size: 12.5px;
}

/* ------------------------------------------
   FORM SECTIONS — grouped inputs
   ------------------------------------------ */
:where(.page-body form label),
:where(.page-body .block.text-xs[class*="text-t"]) {
  letter-spacing: 0.2px;
}

/* ------------------------------------------
   RESPONSIVE — mobile adjustments
   ------------------------------------------ */
@media (max-width: 768px) {
  :where(.page-body h1) {
    font-size: 22px;
  }
  :where(.page-body table th) {
    padding: 6px 10px;
  }
  :where(.page-body table td) {
    padding: 8px 10px;
    font-size: 12px;
  }
  :where(.page-body .bg-card p[class*="text-xl"]),
  :where(.page-body .bg-card p[class*="text-2xl"]) {
    font-size: 20px;
  }
}