/* ==========================================================================
   Penna&Pixel — tema condiviso delle applicazioni
   Sorgente unica: modificare qui, mai nelle singole app.
   Caricare prima di ogni altro foglio di stile.
   ========================================================================== */

@import url('./fonts/fonts.css');

/* Material Symbols in locale, solo le icone usate (vedi icone.txt) */
@font-face{
  font-family:'Material Symbols Rounded';
  font-style:normal;
  font-weight:100 700;
  font-display:block;
  src:url('./fonts/material-symbols-rounded-subset.woff2') format('woff2');
}

:root{
  /* --- colori di marca --- */
  --pp-viola:#831f82;
  --pp-viola-scuro:#5d1660;
  --pp-arancio:#ff7722;
  --pp-arancio-testo:#b84a0c;   /* l'arancio pieno non ha contrasto sufficiente sul chiaro */
  --pp-lilla:#e7daee;
  --pp-pesca:#f7bc9c;

  /* --- superfici --- */
  --pp-bg:#fdfbfd;
  --pp-surface:#ffffff;
  --pp-card:#f6eff8;
  --pp-line:#e8dfec;
  --pp-line-2:#d7c8de;

  /* --- testo --- */
  --pp-ink:#1f1424;
  --pp-ink-2:#5a4a62;
  --pp-ink-3:#736679;

  /* --- colori funzionali, tarati per il fondo chiaro --- */
  --pp-ok:#1f7a4d;      --pp-ok-bg:#eaf5ef;   --pp-ok-line:#bfe0cd;
  --pp-warn:#9a5f09;    --pp-warn-bg:#fdf4e3; --pp-warn-line:#e8d2a4;
  --pp-bad:#b02020;     --pp-bad-bg:#fbecec;  --pp-bad-line:#eec4c4;
  --pp-info:#1f5fa8;    --pp-info-bg:#eaf1fa;

  /* --- forma --- */
  --pp-radius:10px;
  --pp-radius-lg:14px;
  --pp-grad:linear-gradient(135deg,#ff7722 0%,#831f82 100%);
  --pp-shadow:0 10px 30px rgba(131,31,130,.10);
  --pp-shadow-lg:0 24px 60px rgba(131,31,130,.18);

  /* --- tipografia --- */
  --pp-font:'Montserrat',system-ui,-apple-system,sans-serif;
  --pp-font-titoli:'Righteous','Montserrat',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--pp-font);
  background:var(--pp-bg);
  color:var(--pp-ink);
  -webkit-font-smoothing:antialiased;
}

/* i numeri incolonnati restano allineati anche senza un font monospaziato */
.pp-num{font-variant-numeric:tabular-nums;letter-spacing:.01em}

.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;
  direction:ltr;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400;
  user-select:none;
}

/* ---------------------- barre di scorrimento ----------------------
   Stessa forma ovunque: pista chiara appena accennata, cursore lilla che
   si scurisce al passaggio. Dentro la barra laterale serve l'opposto,
   perché lì il fondo è scuro.                                          */
*{scrollbar-width:thin;scrollbar-color:var(--pp-line-2) transparent}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--pp-card);border-radius:8px}
::-webkit-scrollbar-thumb{
  background:var(--pp-line-2);border-radius:8px;
  border:2px solid var(--pp-card);   /* stacca il cursore dalla pista */
}
::-webkit-scrollbar-thumb:hover{background:#b79bc6}
::-webkit-scrollbar-thumb:active{background:var(--pp-viola)}
::-webkit-scrollbar-corner{background:var(--pp-card)}

/* barre orizzontali del gantt e del kanban: un filo più marcate, si usano molto */
.pp-scroll-x::-webkit-scrollbar{height:13px}
.pp-scroll-x::-webkit-scrollbar-thumb{background:#c3aed0;border-width:3px}
.pp-scroll-x::-webkit-scrollbar-thumb:hover{background:var(--pp-viola)}

/* dentro la barra laterale scura */
aside{scrollbar-color:rgba(255,255,255,.22) transparent}
aside ::-webkit-scrollbar-track,aside::-webkit-scrollbar-track{background:transparent}
aside ::-webkit-scrollbar-thumb,aside::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border:2px solid transparent;background-clip:padding-box;
}
aside ::-webkit-scrollbar-thumb:hover,aside::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}

/* ---------------------- selezione e focus ---------------------- */
::selection{background:rgba(131,31,130,.16)}
:focus-visible{outline:2px solid var(--pp-viola);outline-offset:2px}

/* ---------------------- marchio ---------------------- */
.pp-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.pp-brand .pp-mark{
  width:36px;height:36px;border-radius:10px;background:var(--pp-grad);
  display:grid;place-items:center;color:#fff;flex:none;
  box-shadow:0 4px 12px rgba(131,31,130,.26);
}
.pp-brand h1{font-family:var(--pp-font-titoli);font-size:16px;font-weight:400;line-height:1.15;white-space:nowrap}
.pp-brand small{display:block;font-size:11px;font-weight:500;color:var(--pp-ink-3);letter-spacing:.02em}

/* ---------------------- campi ---------------------- */
.pp-input,.pp-select,.pp-textarea{
  width:100%;padding:9px 12px;border-radius:var(--pp-radius);
  border:1px solid var(--pp-line-2);background:var(--pp-surface);color:var(--pp-ink);
  font-family:var(--pp-font);font-size:14px;outline:none;color-scheme:light;transition:.14s;
}
.pp-input:hover,.pp-select:hover,.pp-textarea:hover{border-color:#c9b6d3}
.pp-input:focus,.pp-select:focus,.pp-textarea:focus{
  border-color:var(--pp-viola);box-shadow:0 0 0 3px rgba(131,31,130,.10);
}
.pp-label{
  display:block;font-size:11px;font-weight:700;color:var(--pp-ink-3);
  margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;
}

/* ---------------------- bottoni ---------------------- */
.pp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--pp-radius);cursor:pointer;
  border:1px solid var(--pp-line-2);background:var(--pp-surface);color:var(--pp-ink-2);
  font-family:var(--pp-font);font-size:13px;font-weight:600;transition:.14s;white-space:nowrap;
}
.pp-btn:hover{background:var(--pp-card);border-color:var(--pp-viola);color:var(--pp-viola)}
.pp-btn:active{transform:translateY(1px)}
.pp-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pp-btn--primary{background:var(--pp-grad);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(131,31,130,.22)}
.pp-btn--primary:hover{color:#fff;filter:brightness(1.06);border-color:transparent}
.pp-btn--ghost{background:transparent;border-color:transparent;color:var(--pp-ink-3)}
.pp-btn--ghost:hover{background:var(--pp-card);border-color:transparent}
.pp-btn--danger{background:var(--pp-bad-bg);border-color:var(--pp-bad-line);color:var(--pp-bad)}
.pp-btn--danger:hover{background:#f7dcdc;border-color:var(--pp-bad);color:var(--pp-bad)}
.pp-btn--icon{width:34px;height:34px;padding:0}

/* ---------------------- superfici ---------------------- */
.pp-card{background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:var(--pp-radius-lg)}
.pp-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid transparent;
}

/* ---------------------- animazioni ---------------------- */
@keyframes pp-spin{to{transform:rotate(360deg)}}
@keyframes pp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pp-spinner{
  width:32px;height:32px;border:3px solid var(--pp-line);
  border-top-color:var(--pp-viola);border-radius:50%;animation:pp-spin .7s linear infinite;
}

/* ---------------------- stampa ----------------------
   Obiettivo: il PDF contiene solo la vista corrente, senza barra laterale
   né comandi. Il gantt è più largo di un foglio, quindi viene rimpicciolito
   quel tanto che basta invece di essere tagliato.                           */
.pp-solo-stampa{display:none}

@media print{
  @page{ size:A4 landscape; margin:10mm; }

  html,body{height:auto;background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* fuori tutto ciò che serve solo a schermo */
  .pp-no-print,aside{display:none !important}
  .pp-solo-stampa{display:block !important}

  /* il contenuto occupa il foglio intero */
  main{width:100% !important;min-width:0 !important}
  .pp-stampabile{padding:0 !important}

  /* niente barre di scorrimento: in stampa il contenuto si vede tutto */
  .pp-scroll-x{overflow:visible !important;width:auto !important}

  /* Il gantt viene ridotto dal JavaScript in base allo zoom scelto (--pp-zoom):
     se il calcolo non è disponibile si ricade sul valore della vista annuale. */
  .pp-adatta{zoom:var(--pp-zoom,.62)}

  /* le ombre sprecano toner e non aggiungono nulla su carta */
  *{box-shadow:none !important}

  /* Vietare l'interruzione di una tabella lunga la spinge tutta alla pagina
     dopo e lascia la prima quasi bianca: si protegge solo la singola riga. */
  tr,li,.pp-evita-taglio{break-inside:avoid;page-break-inside:avoid}
  table,.pp-card{break-inside:auto;page-break-inside:auto}
  thead{display:table-header-group}       /* l'intestazione si ripete a ogni pagina */

  /* nessuno spazio morto prima del contenuto */
  .pp-stampabile > *:first-child{margin-top:0 !important}
  .pp-testata-stampa{margin-top:0}

  a[href]:after{content:''}               /* niente indirizzi stampati accanto ai link */
}

/* intestazione che compare solo sul foglio */
.pp-testata-stampa{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--pp-viola);padding-bottom:8px;margin-bottom:12px;
}
.pp-testata-stampa h1{font-family:var(--pp-font-titoli);font-size:19px;font-weight:400;line-height:1.2}
.pp-testata-stampa .pp-sotto{font-size:11.5px;color:var(--pp-ink-2);margin-top:2px}
.pp-testata-stampa .pp-quando{font-size:10.5px;color:var(--pp-ink-3);text-align:right;white-space:nowrap}
.pp-sintesi-stampa{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  font-size:11px;color:var(--pp-ink-2);
}
.pp-sintesi-stampa span b{font-size:13px;color:var(--pp-ink)}

/* tendine dentro la barra scura: le option hanno fondo di sistema, va forzato */
aside select option{
  background:#2a2033;
  color:#f2edf5;
}
aside select option:checked{
  background:#3a2b46;
}