/* DUAT · estils de les pàgines de mòdul amb dades reals (KPIs + taules).
   Auto-carregat per Dash des de /assets. Usa les variables --pt-* del tema. */

/* Fila de KPIs */
.pt-kpi-row { display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 26px; }
.pt-kpi { flex:1 1 160px; background:var(--pt-surface); border:1px solid var(--pt-line);
  border-top:3px solid var(--pt-verd); border-radius:12px; padding:14px 16px; }
.pt-kpi-label { color:var(--pt-muted); font-size:.85rem; margin:0 0 4px; }
.pt-kpi-val { color:var(--pt-text); font-size:1.5rem; font-weight:600; line-height:1.1; }
.pt-kpi-sub { color:var(--pt-muted); font-size:.82rem; margin-top:3px; }
.pt-kpi.warn { border-top-color:var(--pt-warn); }
.pt-kpi.warn .pt-kpi-val { color:var(--pt-warn-dark); }
.pt-kpi.ok   { border-top-color:var(--pt-verd); }
.pt-kpi.gold { border-top-color:var(--pt-clay); }

/* Blocs de secció */
.pt-sec { background:var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:12px; padding:18px 20px; margin-bottom:22px; }
.pt-sec h3 { color:var(--pt-text); font-size:1.05rem; font-weight:600;
  margin:0 0 4px; }
.pt-sec-sub { color:var(--pt-muted); font-size:.875rem; margin:0 0 14px; line-height:1.5; }

/* Taules */
.pt-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.pt-table th { text-align:left; color:var(--pt-muted); font-weight:600;
  border-bottom:2px solid var(--pt-line); padding:9px 10px; white-space:nowrap; }
.pt-table td { border-bottom:1px solid var(--pt-line); padding:7px 10px;
  color:var(--pt-text); }
.pt-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.pt-table tr:hover td, .pt-table tbody tr:hover td { background:var(--pt-soft); }

/* Semàfor de risc (colors amb contrast >=3:1 sobre surface/soft/bg) */
.pt-dot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:6px; vertical-align:middle; }
.pt-dot.r { background:var(--pt-warn); } .pt-dot.a { background:var(--pt-ambre-fosc); }
.pt-dot.g { background:var(--pt-verd); }
.pt-dot.n { background:var(--pt-muted); }   /* neutre: sense font de seguiment */

/* Panell de casaments (formularis de vincle) */
.pt-cas-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.pt-cas-col { flex:1 1 260px; min-width:220px; }
.pt-cas-form .pt-btn { flex:0 0 auto; height:38px; }
.pt-cas-fb { margin-top:10px; }
.pt-cas-ok { display:inline-block; background:var(--pt-verd-pastel);
  color:var(--pt-verd-dark); border:1px solid var(--pt-verd); border-radius:8px;
  padding:8px 12px; font-weight:500; }
.pt-cas-err { display:inline-block; background:var(--pt-clay-pastel);
  color:var(--pt-warn-dark); border:1px solid var(--pt-warn); border-radius:8px;
  padding:8px 12px; font-weight:500; }
.pt-cas-mgmt-link { display:inline-block; margin:4px 0 8px; color:var(--pt-verd);
  font-weight:500; text-decoration:none; }
.pt-cas-mgmt-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* Nota de qualitat de dada / peu */
.pt-datanote { color:var(--pt-muted); font-size:.875rem; margin-top:6px;
  font-style:italic; line-height:1.5; }

/* Enllaç de retorn a l'inici (capçalera de tots els mòduls) */
.pt-back-link { display:inline-block; color:var(--pt-verd); text-decoration:none;
  font-size:.85rem; font-weight:500; margin-bottom:10px; }
.pt-back-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISSENY (línia MIDGARD) — profunditat, radius i jerarquia.
   Aquest fitxer es carrega DESPRÉS del _THEME_CSS injectat a app.py, així que
   a igual especificitat aquestes regles manen.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Ombres bi-capa idèntiques a les de MIDGARD (profunditat subtil) */
  --pt-shadow:     0 1px 2px rgba(38,36,32,0.04), 0 4px 16px rgba(38,36,32,0.06);
  --pt-shadow-hov: 0 2px 6px rgba(38,36,32,0.07), 0 12px 30px rgba(38,36,32,0.10);
  /* Dos nivells de radius (cards grans / elements inline), com MIDGARD */
  --pt-radius:    14px;
  --pt-radius-sm:  9px;
}

/* Profunditat: totes les superfícies-targeta floten sobre el fons */
.pt-kpi, .pt-sec, .pt-home-tile, .pt-home-card,
.pt-mod-card, .pt-form-card, .pt-login-card { box-shadow: var(--pt-shadow); }
.pt-home-tile:hover { box-shadow: var(--pt-shadow-hov); transform: translateY(-2px);
  border-left-color: var(--pt-verd-dark); }

/* Radius sistematitzat: 14px cards · 9px inline */
.pt-kpi, .pt-sec, .pt-home-card, .pt-login-card,
.pt-mod-card, .pt-form-card, .pt-home-tile { border-radius: var(--pt-radius); }
.pt-nav-link, .pt-legal, .pt-role-badge, .pt-mod-soon { border-radius: var(--pt-radius-sm); }

/* KPI: contrast tipogràfic label petit en caps / valor gran (patró MIDGARD) */
.pt-kpi-label { font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; margin:0 0 6px; }
.pt-kpi-val { font-size:1.75rem; letter-spacing:-.5px; line-height:1.05; }

/* Capçalera de mòdul: ancoratge amb línia + filet verd (com .page-header) */
.pt-mod-head { padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--pt-line); position:relative; }
.pt-mod-head::after { content:""; position:absolute; left:0; bottom:-1px;
  width:44px; height:3px; background:var(--pt-verd); border-radius:3px; }
.pt-mod-title { font-size:1.4rem; letter-spacing:-.2px; line-height:1.2; }
.pt-mod-glyph { font-size:2rem; }

/* Nom del déu a les targetes de la home: to fosc (AA) i pes contingut */
.pt-home-tile-deu { color:var(--pt-verd-dark); font-weight:600; }

/* Taules: capçalera diferenciada + zebra (llegibilitat horitzontal) */
.pt-table th { background:var(--pt-soft); color:var(--pt-text); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.5px; }
.pt-table tbody tr:nth-child(even) td { background:var(--pt-soft); }
.pt-table tr:hover td, .pt-table tbody tr:hover td { background:var(--pt-verd-pastel); }

/* Embolcall de taula: scroll horitzontal propi (el genera _modbase.table) */
.pt-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Enllaç de mapa (KHEPRI): target de toc que omple la cel·la */
.pt-map-link { display:block; padding:8px 0; min-height:40px; line-height:24px;
  color:var(--pt-verd); font-weight:500; text-decoration:none; white-space:nowrap; }
.pt-map-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* Header (topbar + NAV) enganxat: la navegació no es perd en scroll llarg */
.pt-header { position:sticky; top:0; z-index:100; background:var(--pt-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints MIDGARD: 992 tauleta · 768 mòbil · 480 petit
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tauleta (≤ 992px): graelles compactes ── */
@media (max-width: 992px) {
  .pt-kpi-row { gap:10px; }
  .pt-home-grid { grid-template-columns:repeat(2,1fr); }
  .pt-mod, .pt-home { max-width:100%; }
}

/* ── Mòbil (≤ 768px): topbar condensat + NAV amb scroll horitzontal ── */
@media (max-width: 768px) {
  .pt-topbar { padding:8px 14px; flex-wrap:wrap; gap:4px; }
  .pt-logo { height:24px; }
  .pt-hello-lead { display:none; }
  .pt-hello-name { font-size:.82rem; }
  .pt-role-badge { display:none; }
  .pt-logout { font-size:.82rem; }

  /* NAV: una sola fila amb scroll (el retall a la dreta indica que hi ha més);
     els títols de grup s'amaguen i un filet vertical separa els grups. */
  .pt-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:6px; padding:8px 14px; align-items:center; }
  .pt-nav::-webkit-scrollbar { display:none; }
  .pt-nav-group { flex-direction:row; flex-shrink:0; gap:4px; align-items:center; }
  .pt-nav-group-title { display:none; }
  .pt-nav-group-links { flex-wrap:nowrap; gap:4px; }
  .pt-nav-group + .pt-nav-group::before { content:""; display:block; width:1px;
    height:20px; background:var(--pt-line); flex-shrink:0; margin-right:2px; }
  /* Touch target ≥44px (caps de producció amb guants) */
  .pt-nav-link { padding:10px 14px; font-size:.82rem; white-space:nowrap;
    flex-shrink:0; min-height:44px; }

  .pt-main { padding:18px 14px; }
  .pt-mod-lead { margin-bottom:16px; }

  /* KPIs: 2 per fila en mòbil normal */
  .pt-kpi { flex:1 1 140px; padding:12px 14px; }
  .pt-kpi-val { font-size:1.3rem; }

  .pt-home-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
  .pt-home-tile { padding:12px 14px; }
  .pt-home-tile-glyph { font-size:1.4rem; }

  .pt-sec { padding:14px 14px; }
  /* Taules: llisquen dins la targeta; columnes mai impossiblement estretes */
  .pt-table { min-width:480px; font-size:.82rem; }
  .pt-table th, .pt-table td { padding:8px 8px; }

  /* Formularis: targets còmodes */
  .pt-form-card { max-width:100%; padding:16px 14px; }
  .pt-btn { min-height:44px; font-size:1rem; }
  .pt-back-link { padding:10px 0; min-height:44px; line-height:24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTS D'INTERACCIÓ I ESTAT (pàgina /entitat; reutilitzables)
   Cercador, resultats, cross-links de taula, taula clau-valor i estats
   "pendent de dades" (calm) vs "acció pendent" (ambre). Additiu — no trenca res.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cercador */
.pt-cerca-wrap { margin:20px 0 24px; }
.pt-cerca-cap { color:var(--pt-muted); font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; }
.pt-input { width:100%; max-width:520px; padding:9px 14px;
  border-radius:var(--pt-radius-sm); border:1.5px solid var(--pt-line);
  font-size:.95rem; font-family:inherit; background:var(--pt-surface);
  color:var(--pt-text); transition:border-color .15s ease, box-shadow .15s ease; }
.pt-input:focus, .pt-input:focus-visible { outline:none; border-color:var(--pt-verd);
  box-shadow:0 0 0 3px var(--pt-verd-pastel); }
.pt-input::placeholder { color:var(--pt-muted); }
.pt-cerca-hint { display:block; color:var(--pt-muted); font-size:.8rem; margin-top:6px; }
.pt-cerca-res { background:var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); box-shadow:var(--pt-shadow); overflow:hidden;
  margin-top:10px; max-width:640px; }
.pt-cerca-fila { display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--pt-line); min-height:44px; }
.pt-cerca-fila:last-child { border-bottom:none; }
.pt-cerca-fila:hover { background:var(--pt-verd-pastel); }
.pt-cerca-fila a { color:var(--pt-verd); text-decoration:none; font-weight:500; }
.pt-cerca-fila a:hover { text-decoration:underline; color:var(--pt-verd-dark); }
.pt-cerca-fila .pt-cerca-cap { text-transform:none; font-weight:400; letter-spacing:0; }

/* Breadcrumb de la fitxa */
.pt-breadcrumb { margin-bottom:12px; font-size:.85rem; }
.pt-breadcrumb .pt-crumb-sep { color:var(--pt-muted); margin:0 6px; }
.pt-breadcrumb .pt-crumb-cur { color:var(--pt-muted); }

/* Enllaços dins de taula → verd de marca (no el blau Bootstrap per defecte) */
.pt-table td a, .pt-table td a:visited { color:var(--pt-verd);
  text-decoration:none; font-weight:500; }
.pt-table td a:hover { color:var(--pt-verd-dark); text-decoration:underline; }

/* Taula clau-valor (registre de la fitxa): 1a col = etiqueta, 2a = valor */
.pt-table-kv .pt-table td:first-child { color:var(--pt-muted); font-weight:400;
  width:38%; white-space:nowrap; }
.pt-table-kv .pt-table td:nth-child(2) { color:var(--pt-text); font-weight:500; }

/* Estat "pendent de dades" (P4): to CALM (argila), no urgència */
.pt-mod-pendent { display:inline-block; background:var(--pt-clay-pastel);
  color:var(--pt-clay); font-size:.72rem; font-weight:600; padding:2px 9px;
  border-radius:var(--pt-radius-sm); margin-left:8px; vertical-align:middle; }
.pt-pendent-text { color:var(--pt-text); font-size:.9rem; line-height:1.55; margin:4px 0 0; }

/* Avís d'ACCIÓ de l'usuari (p.ex. màquina sense vincle) — ambre, diferenciat del P4 */
.pt-avis-card { background:#FBF3E4; border:1px solid var(--pt-ambre);
  border-left:4px solid var(--pt-ambre); border-radius:var(--pt-radius);
  padding:16px 18px; margin-top:16px; box-shadow:var(--pt-shadow); }
.pt-avis-card h3 { font-size:1rem; font-weight:600; color:var(--pt-text); margin:0 0 4px; }
.pt-avis-badge { display:inline-block; background:var(--pt-ambre-fosc); color:#fff;
  font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:var(--pt-radius-sm);
  margin-left:8px; vertical-align:middle; }
.pt-avis-text { color:var(--pt-text); font-size:.9rem; line-height:1.55; margin:4px 0 0; }

/* Graella de targetes per producte (assessor de compra de gasoil): 2 columnes
   que es despleguen a 1 sola a mòbil. */
.pt-mod-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin-top:10px; }

/* ── Telèfon petit (≤ 480px): densitat mínima ── */
@media (max-width: 480px) {
  .pt-topbar { padding:7px 10px; }
  .pt-nav { gap:5px; padding:6px 10px; }
  .pt-main { padding:14px 10px; }
  .pt-kpi { padding:11px 13px; }
  .pt-kpi-val { font-size:1.25rem; }
  .pt-kpi-label { letter-spacing:.3px; }
  .pt-sec { padding:12px 12px; margin-bottom:14px; }
  .pt-sec h3 { font-size:.95rem; }
  .pt-home-grid { grid-template-columns:1fr 1fr; }
  .pt-home-title { font-size:1.2rem; }
  .pt-table { font-size:.8rem; }
  .pt-table th, .pt-table td { padding:6px 8px; }
  .pt-mod-glyph { font-size:1.6rem; }
  .pt-mod-title { font-size:1.2rem; }
}