/* ============================================================
   Deltar CRM - fondamenta condivise desktop + mobile
   Variabili tema, font, badge e pill usati da entrambe le
   versioni. I componenti stanno in stile.css (desktop) e
   mobile.css (mobile).
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Variabili tema (notte = default) ---- */
:root {
  --bg:          #17181a;
  --surface:     #1f2124;
  --surface-2:   #26282c;
  --txt:         #ecebe8;
  --txt2:        #a5a29b;
  --txt3:        #7c7973;
  --bordo:       #33353a;
  --bordo-forte: #45484f;
  --accent:       #F07C00;
  --accent-hover: #ff8d14;
  --accent-soft:  rgba(240, 124, 0, .14);
  --accent-testo: #f5a44d;
  --ok:      #63991F;
  --ok-soft: rgba(99, 153, 31, .16);
  --avviso:  #e8a13c;
  --errore:  #e24b4a;
  --errore-soft: rgba(226, 75, 74, .14);
  --blu:     #378ADD;
  --blu-soft: rgba(55, 138, 221, .16);
  --radius:    8px;
  --radius-lg: 12px;
  --ombra-hover: 0 2px 10px rgba(0, 0, 0, .28);
  --sidebar-w: 180px;
  --sidebar-collapsed-w: 58px;
}
:root[data-theme="day"] {
  --bg:          #f6f4ef;
  --surface:     #ffffff;
  --surface-2:   #faf8f4;
  --txt:         #1c1c1a;
  --txt2:        #6b6862;
  --txt3:        #9a968c;
  --bordo:       #e9e6de;
  --bordo-forte: #d8d4ca;
  --accent-hover: #d96f00;
  --accent-soft:  rgba(240, 124, 0, .09);
  --accent-testo: #b35c00;
  --ok-soft: rgba(99, 153, 31, .12);
  --blu-soft: rgba(55, 138, 221, .12);
  --errore-soft: rgba(226, 75, 74, .10);
  --ombra-hover: 0 2px 10px rgba(28, 28, 26, .08);
}

/* ---- Badge e pill ---- */
.badge { padding: 2px 8px; border-radius: 99px; background: var(--surface-2); font-size: .75rem; }
.pill {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.pill-vuota { background: var(--surface-2); color: var(--txt3); border-color: var(--bordo); font-weight: 500; }
/* Pill tier per il mobile (stessi colori di crm/colori.py) */
.pill-a { background: #EAF3DE; border-color: #639922; color: #173404; }
.pill-b { background: #FAEEDA; border-color: #EF9F27; color: #412402; }
.pill-c { background: #FAECE7; border-color: #D85A30; color: #4A1B0C; }
.badge-stato {
  display: inline-block;
  font-size: .72rem;
  font-weight: 550;
  border-radius: 99px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--bordo);
  color: var(--txt2);
  white-space: nowrap;
}
.badge-stato.st-in_lavorazione { background: var(--blu-soft); border-color: transparent; color: var(--blu); }
.badge-stato.st-interessato { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.badge-stato.st-cliente { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.badge-stato.st-chiuso { background: var(--errore-soft); border-color: transparent; color: var(--errore); }

/* Tag "Nuovo" personale: lead reso disponibile di recente e mai aperto
   da chi sta guardando (sparisce per te quando apri la scheda). */
.badge-nuovo {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-testo);
  white-space: nowrap;
  vertical-align: 1px;
}

/* Badge "Nascosta" (solo admin): promemoria discreto, non un richiamo
   all'azione come .badge-nuovo, quindi colori neutri/spenti. */
.badge-nascosta {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 2px 8px;
  background: var(--surface-2);
  color: var(--txt3);
  border: 1px solid var(--bordo-forte);
  white-space: nowrap;
}

/* Contatore richiami scaduti sulla voce Oggi della sidebar */
.badge-richiami {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 5px;
  background: var(--accent);
  color: #fff;
  margin-left: auto;
}

/* Pillola stato pipeline (testata scheda): select vestita da badge */
.stato-pill {
  appearance: none; -webkit-appearance: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  font-size: .78rem; padding: 4px 26px 4px 12px; border-radius: 99px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}