/* ==========================================================================
   brand.css — Sfera Informatica — Vikunja (pm.sfera-srl.it)
   --------------------------------------------------------------------------
   Iniettato da Nginx Proxy Manager (sub_filter) prima di </head>.
   Servito da: https://pm.sfera-srl.it/custom/brand.css
   File nel container NPM: /data/custom/brand.css

   Il logo NON è qui: si imposta nell'env di Vikunja
   (VIKUNJA_SERVICE_CUSTOMLOGOURL). Qui c'è solo come viene mostrato.

   Dopo ogni modifica: salva e fai Ctrl+F5 (o finestra in incognito).
   Nomi di variabili e classi verificati sul sorgente di Vikunja: dopo un
   aggiornamento di Vikunja ricontrolla che tutto sia ancora a posto.
   ========================================================================== */


/* ==========================================================================
   1. COLORI DEL BRAND
   ========================================================================== */
:root {
  /* Blu Sfera #1d3662 = hsl(218deg 54% 25%).
     Colore principale: pulsanti, link, elementi attivi.
     Vikunja lo vuole in HSL perché ne ricava le varianti chiare/scure. */
  --primary-h: 218deg;
  --primary-s: 54%;
  --primary-l: 25%;

  /* Rosso Sfera #DF091A: accento (linea sotto la barra, bordo login). */
  --brand-accent: #DF091A;

  /* Blu Sfera pieno, usato come fondo dietro il logo bianco. */
  --brand-navy: #1d3662;

  /* Sfondo di pagina, barra in alto e menu: grigio chiaro tendente al blu. */
  --brand-site-background: hsl(218, 30%, 96%);
}

/* Tema scuro (Vikunja mette la classe "dark" su <html>).
   Il blu Sfera è troppo scuro su fondo scuro: qui lo schiarisco per
   mantenere leggibili link e pulsanti. Lo sfondo resta quello di Vikunja. */
@media screen {
  :root.dark {
    --primary-h: 218deg;
    --primary-s: 60%;
    --primary-l: 62%;
    --brand-site-background: hsl(215, 27.9%, 16.9%);
  }
}

:root,
:root.dark {
  --site-background: var(--brand-site-background);
}


/* ==========================================================================
   2. LOGO (solo dimensioni)
   I !important servono perché gli stili dei componenti Vikunja possono
   essere caricati dopo questo file.
   ========================================================================== */
img.logo,
.logo img {
  max-width: 180px !important;
  max-height: 48px !important;
  object-fit: contain;
}


/* ==========================================================================
   3. BARRA IN ALTO
   Sottile linea rossa Sfera sotto la barra di navigazione.
   ========================================================================== */
.navbar {
  box-shadow: inset 0 -3px 0 var(--brand-accent) !important;
}


/* ==========================================================================
   4. PAGINA DI LOGIN / REGISTRAZIONE
   Struttura Vikunja: .no-auth-wrapper > .noauth-container > .image + #main-content
   ========================================================================== */

/* Riquadro di login: bordo superiore rosso Sfera. */
.no-auth-wrapper .noauth-container {
  border-top: 4px solid var(--brand-accent) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

/* Pannello a sinistra (solo tablet/desktop): immagine Sfera.
   Il file va in /data/compose/1/data/custom/login.jpg e va pubblicato in
   NPM con una location = /custom/login.jpg (come brand.css).
   Consigliata: almeno 1200 px di lato, soggetto in basso/al centro
   (Vikunja la ritaglia con "cover" ancorata in basso). */
.no-auth-wrapper .noauth-container .image {
  background-image: url("/custom/login.jpg") !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

/* Velatura sopra l'immagine, per leggere "Bentornato!": sfumatura blu Sfera
   (Vikunja di suo usa una sfumatura nera). */
.no-auth-wrapper .noauth-container .image::before {
  background-image: linear-gradient(
    to top,
    rgba(29, 54, 98, .85) 0%,
    rgba(29, 54, 98, .40) 35%,
    rgba(29, 54, 98, .10) 100%
  ) !important;
}

/* Lama in basso a sinistra della pagina di login: tolto, resta il colore
   di sfondo. */
.no-auth-wrapper {
  background-image: none !important;
}


/* ==========================================================================
   4b. ILLUSTRAZIONI
   Lama con occhiali da sole in home quando non ci sono attività.
   ========================================================================== */
.llama-cool {
  display: none !important;
}


/* ==========================================================================
   5. MOTTO
   Mostrato sopra il modulo di login, anche da telefono.
   Per toglierlo: content: none;
   ========================================================================== */
.no-auth-wrapper #main-content::before {
  content: "Sfera Informatica & Strumentazione";
  display: block;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  color: var(--primary);
}