/* ==========================================================
   Gestione Patrimonio - foglio di stile comune
   Usato da: gestionale.html, login.html
   ========================================================== */

:root {
  --blu: #1f3a5f;
  --blu-scuro: #14263f;
  --grigio-fondo: #d4d0c8;
  --grigio-chiaro: #ece9e0;
  --bordo: #808080;
  --testo: #1a1a1a;
  --errore: #a40000;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: var(--testo);
  background: var(--grigio-fondo);
  display: flex;
  flex-direction: column;
}

/* ---------- Barra superiore ----------
   banner.png va messo nella stessa cartella di questo file css */
#banner {
  height: 70px;
  flex-shrink: 0;
  background-color: var(--blu);
  background-image: url("banner.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border-bottom: 2px solid var(--blu-scuro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  overflow: hidden;
}
#banner .titolo-sx { white-space: nowrap; }

/* Applicativo in uso: a destra, sopra l'immagine */
#applicativo {
  margin-left: auto;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
#applicativo small {
  display: block;
  font-size: 11px;
  font-weight: normal;
}

/* ---------- Menu ---------- */
#menu {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--grigio-chiaro);
  border-bottom: 1px solid var(--bordo);
  padding: 2px 4px;
}
#menu a {
  padding: 3px 12px;
  color: var(--testo);
  text-decoration: none;
}
#menu a:hover { background: var(--blu); color: #fff; }

/* Utente in uso + logout, in fondo al menu */
#menu .utente {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
  white-space: nowrap;
}
#menu .utente b { font-weight: bold; }
#menu .utente .sep { color: var(--bordo); }

/* ---------- Corpo ---------- */
#corpo { flex: 1; display: flex; min-height: 0; }

#laterale {
  width: 190px;
  background: var(--grigio-chiaro);
  border-right: 1px solid var(--bordo);
  padding: 8px;
  overflow-y: auto;
}
#laterale h3 {
  margin: 0 0 6px;
  padding: 3px 6px;
  background: var(--blu);
  color: #fff;
  font-size: 12px;
}
#laterale ul { list-style: none; margin: 0 0 14px; padding: 0; }
#laterale li a {
  display: block;
  padding: 3px 6px;
  color: var(--testo);
  text-decoration: none;
  border-bottom: 1px dotted var(--bordo);
}
#laterale li a:hover { background: #fff; text-decoration: underline; }

#contenuto { flex: 1; padding: 12px; overflow: auto; }

.pannello {
  background: #fff;
  border: 1px solid var(--bordo);
  box-shadow: 2px 2px 0 rgba(0,0,0,.2);
  margin-bottom: 14px;
}
.pannello > .titolo {
  background: var(--blu);
  color: #fff;
  font-weight: bold;
  padding: 4px 8px;
}
.pannello > .dati { padding: 10px; }

/* ---------- Form ---------- */
.riga { display: flex; align-items: center; margin-bottom: 6px; }
.riga label { width: 130px; }
input[type=text], input[type=password], select, textarea {
  border: 2px inset #fff;
  border-color: var(--bordo) #fff #fff var(--bordo);
  padding: 2px 4px;
  font: inherit;
  width: 220px;
  background: #fff;
}
/* Font dei campi di input */
input[type=text], input[type=password], select, textarea {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}
/* ---------- Campi di input stile SAP ----------
   Al clic il campo diventa giallo e compaiono i "mirini" rossi agli angoli.
   Il bordo diventa trasparente (stessa larghezza, quindi nessun salto di layout)
   così lo sfondo - cornice sottile + mirini - si vede al suo posto. */
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: transparent;
  background-color: #fff4a8;
  background-image:
    /* mirini: alto-sinistra, alto-destra, basso-sinistra, basso-destra */
    linear-gradient(#a8143c, #a8143c), linear-gradient(#a8143c, #a8143c),
    linear-gradient(#a8143c, #a8143c), linear-gradient(#a8143c, #a8143c),
    linear-gradient(#a8143c, #a8143c), linear-gradient(#a8143c, #a8143c),
    linear-gradient(#a8143c, #a8143c), linear-gradient(#a8143c, #a8143c),
    /* cornice sottile: alto, sinistra, basso, destra */
    linear-gradient(#8c8c8c, #8c8c8c), linear-gradient(#8c8c8c, #8c8c8c),
    linear-gradient(#8c8c8c, #8c8c8c), linear-gradient(#8c8c8c, #8c8c8c);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-size:
    7px 2px, 2px 7px,
    7px 2px, 2px 7px,
    7px 2px, 2px 7px,
    7px 2px, 2px 7px,
    100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position:
    left top,     left top,
    right top,    right top,
    left bottom,  left bottom,
    right bottom, right bottom,
    left top,     left top,  left bottom,  right top;
}

button {
  font: inherit;
  padding: 3px 16px;
  margin-right: 6px;
  background: var(--grigio-chiaro);
  border: 2px outset #fff;
  cursor: pointer;
}
button:active { border-style: inset; }

/* ---------- Tabella ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--grigio-fondo);
  border: 1px solid var(--bordo);
  padding: 3px 6px;
  text-align: left;
}
td { border: 1px solid #b5b5b5; padding: 3px 6px; }
tr:nth-child(even) td { background: #f3f1ea; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.neg, th.neg { color: #a40000; }

/* ---------- Barra di stato ---------- */
#stato {
  flex-shrink: 0;
  background: var(--grigio-chiaro);
  border-top: 1px solid var(--bordo);
  padding: 2px 8px;
  display: flex;
  justify-content: space-between;
}

/* ---------- Pagina di login ----------
   Legato a #centro, quindi funziona anche senza class="login" sul body */
#centro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 0;
  overflow: auto;
}
#centro .pannello {
  width: 100%;
  max-width: 380px;
  margin: auto;            /* centra il pannello in orizzontale e verticale */
}
#centro .pannello > .dati { padding: 14px 12px; }
#centro .info {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--bordo);
}
#centro .riga { margin-bottom: 8px; }
#centro .riga label { width: 90px; flex-shrink: 0; }
#centro .riga input,
#centro .riga select { flex: 1; min-width: 0; padding: 3px 4px; }
#centro .azioni { margin-top: 14px; text-align: right; }
#centro .azioni button { margin-right: 0; margin-left: 6px; }
#centro button.principale { font-weight: bold; }
#errore {
  min-height: 16px;
  margin-top: 10px;
  color: var(--errore);
  font-weight: bold;
}

/* ---------- Schermi stretti ---------- */
@media (max-width: 700px) {
  #laterale { display: none; }
  .riga { flex-direction: column; align-items: flex-start; }
  input[type=text], input[type=password], select, textarea { width: 100%; }
  #centro .riga { align-items: stretch; }
  #centro .riga label { width: auto; margin-bottom: 2px; }
}

/* ---------- Aggiunte: messaggi, link, barre, azioni ---------- */
.msg { padding: 5px 8px; margin-bottom: 12px; border: 1px solid; font-weight: bold; }
.msg.ok  { background: #e3f0df; border-color: #4a7c3a; color: #24491a; }
.msg.err { background: #f7dcdc; border-color: #a40000; color: #a40000; }

#contenuto a { color: #0b3f91; }
#menu a.attivo { background: var(--blu); color: #fff; }
#laterale li a.attivo { background: #fff; font-weight: bold; border-left: 4px solid var(--blu); }
#laterale h3 { margin-top: 0; }

#contenuto .pannello .titolo a { color: #fff; font-weight: normal; float: right; text-decoration: underline; }
.sotto-titolo { margin: 0 0 8px; }
.schede { margin-bottom: 8px; }
#contenuto .schede a { display: inline-block; padding: 2px 10px; border: 1px solid var(--bordo); background: var(--grigio-chiaro); color: var(--testo); text-decoration: none; margin-right: 2px; }
#contenuto .schede a:hover { background: #fff; }
#contenuto .schede a.attivo { background: var(--blu); color: #fff; font-weight: bold; }

table:not(.involucro) form { display: inline; margin: 0; }
td.az { white-space: nowrap; text-align: right; }
input.corto { width: 95px; }
input.medio { width: 150px; }
button.piccolo { padding: 1px 8px; margin: 0 0 0 2px; font-size: 11px; }
tr.totale th, tr.totale td { background: var(--grigio-fondo); font-weight: bold; }
td.scaduta, span.scaduta { color: #a40000; font-weight: bold; }
td.presto { color: #8a5a00; font-weight: bold; }
td.pagata { color: #666; }

.barra { width: 120px; height: 10px; border: 1px solid var(--bordo); background: #fff; }
.barra .riempi { height: 100%; background: var(--blu); }
.barra .riempi.sfora { background: #a40000; }

.griglia { display: flex; flex-wrap: wrap; gap: 14px; }
.griglia > .pannello { flex: 1 1 380px; margin-bottom: 0; }
.griglia + .pannello, .griglia + .griglia { margin-top: 14px; }
.nota { color: #555; margin: 6px 0 0; }
textarea { width: 100%; }

/* ---------- Area amministrazione ---------- */
.avviso-admin { padding: 6px 8px; margin-bottom: 12px; border: 1px solid #8a5a00; background: #fff3cd; color: #5c3b00; }
.avviso-admin.grave { border-color: #a40000; background: #f7dcdc; color: #a40000; font-weight: bold; }
.checks label { display: block; width: auto; margin-bottom: 3px; }
.checks input { margin-right: 6px; }
.riga.alto { align-items: flex-start; }
.stato-on  { color: #24491a; font-weight: bold; }
.stato-off { color: #a40000; font-weight: bold; }
td.az a { margin-right: 4px; }

/* ---------- Elementi visibili solo in stampa (vedi stampa.css) ---------- */
.solo-stampa, #stampa-testata { display: none; }

/* Involucro di stampa: a schermo e' "invisibile" (display: contents), in stampa fa
   ripetere la testata ASSETRA su ogni pagina (vedi stampa.css) */
table.involucro, table.involucro > thead, table.involucro > tbody,
table.involucro > thead > tr, table.involucro > tbody > tr,
table.involucro > thead > tr > td, table.involucro > tbody > tr > td { display: contents; }

/* Utenti in sola lettura: spariscono i moduli di modifica (il blocco vero e' lato server).
   Non cambia nulla per gli altri utenti. */
body.sola-lettura form[method="post"]:not(.sempre) { display: none; }
body.sola-lettura .pannello:has(> .dati > form[method="post"]:not(.sempre)) { display: none; }


/* ---------- Icone (img/icone, 16x16) ---------- */
img.icona { width: 16px; height: 16px; border: 0; vertical-align: -3px; margin-right: 5px; }
/* Nei pulsanti e nelle barre l'icona non deve allargare la riga */
button img.icona, .pannello > .titolo img.icona { margin-top: -3px; margin-bottom: -3px; }
button.piccolo img.icona { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.msg img.icona { vertical-align: -3px; margin-right: 6px; }
/* Login: lucchetto allineato al centro della scritta "Accesso" */
#centro .pannello > .titolo img.icona { vertical-align: -2px; }