/* Stile della piattaforma NIS2.
   Sopra Bootswatch flatly: si usano i suoi colori (#2c3e50 blu di testata, #18bc9c verde
   di accento, #7b8a8b testo secondario) senza reintrodurne di nuovi, cosi' le schermate
   restano coerenti con il tema e con il progetto di riferimento del cliente. */

body {
  padding-bottom: 32px;
  background: #f4f6f7;
  color: #34495e;
}

/* ---------- intestazioni e contenuti ---------- */

.page-heading {
  margin: 26px 0 6px;
  font-weight: 300;
  color: #2c3e50;
}
/* Il paragrafo esplicativo sotto il titolo: e' testo di servizio, non deve competere
   con il titolo ne' con i dati. */
.page-heading + p,
.page-heading + .text-muted {
  color: #7b8a8b;
  margin-bottom: 22px;
  max-width: 70em;
}

.metric {
  border: 1px solid #dde4e6;
  border-radius: 4px;
  padding: 18px;
  margin-bottom: 20px;
  text-align: center;
  background: #fff;
}
.metric strong { display: block; font-size: 2.2em; color: #2c3e50; }
.metric span, .footer { color: #7b8a8b; }

/* ---------- pannelli ---------- */

.panel {
  margin-top: 18px;
  border: 1px solid #dde4e6;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(44, 62, 80, .06);
}
.panel-heading {
  font-weight: 600;
  color: #2c3e50;
  background: #f8fafa;
  border-bottom: 1px solid #e6ebec;
}
.panel .btn { margin: 4px 4px 4px 0; }

/* ---------- tabelle ---------- */

.table > thead > tr > th {
  border-bottom: 2px solid #dde4e6;
  color: #2c3e50;
  font-weight: 600;
  white-space: nowrap;
}
.table > tbody > tr > td { vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #f2f8f7; }
/* I pulsanti di riga non devono allargare la riga ne' andare a capo. */
.table .btn { margin: 0 2px; white-space: nowrap; }

/* ---------- form ---------- */

.form-group label { color: #2c3e50; font-weight: 600; }
.form-control:focus {
  border-color: #18bc9c;
  box-shadow: 0 0 0 2px rgba(24, 188, 156, .15);
}
.help-block { color: #7b8a8b; }

/* ---------- menu ---------- */

.navbar-default { border: 0; border-radius: 0; margin-bottom: 0; }
/* Il gruppo che contiene la pagina corrente resta evidenziato: con molte schermate
   sapere dove ci si trova e' parte della navigazione, non un abbellimento. */
.navbar-default .nav > .active > a,
.navbar-default .nav > .active > a:hover,
.navbar-default .nav > .active > a:focus { background: #1a252f; }
.navbar-default .dropdown-menu { border: 0; border-radius: 0 0 4px 4px; padding: 6px 0; }
.navbar-default .dropdown-menu > li > a { padding: 7px 20px; color: #2c3e50; }
.navbar-default .dropdown-menu > li > a:hover { background: #18bc9c; color: #fff; }
.navbar-default .dropdown-menu .divider { margin: 6px 0; background: #e6ebec; }

/* ---------- messaggi ---------- */

p.bg-danger, p.bg-success, p.bg-info, p.bg-warning, p.bg-primary {
  padding: 14px 18px;
  border-radius: 4px;
}
p.bg-danger, span.bg-danger { color: #fff; }
span.bg-success { color: #fff; }
.help-block.alert-danger { color: #fff; }

/* ---------- pagina di accesso ---------- */

.pagina-accesso {
  /* Sfondo nei toni della testata: la schermata di accesso e' l'unica senza navbar,
     e senza questo richiamo sembrerebbe di un'altra applicazione. */
  background: linear-gradient(160deg, #2c3e50 0%, #1a252f 100%);
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accesso-riquadro { width: 100%; max-width: 380px; padding: 24px; }

.accesso-marchio { text-align: center; margin-bottom: 22px; }
.accesso-logo {
  display: inline-block;
  font-size: 2.4em;
  font-weight: 300;
  letter-spacing: .16em;
  color: #fff;
  border-bottom: 3px solid #18bc9c;
  padding-bottom: 6px;
}
.accesso-marchio p {
  margin: 14px 0 0;
  color: #aab7c4;
  font-size: .95em;
  line-height: 1.5;
}

.accesso-pannello { margin-top: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.accesso-pannello .panel-body { padding: 26px; }
.accesso-pannello .btn { margin-top: 10px; }
.accesso-avviso { font-size: .95em; }

.accesso-nota {
  margin-top: 20px;
  text-align: center;
  color: #8b9aa8;
  font-size: .85em;
  line-height: 1.5;
}

/* ---------- tendina di ricerca dei riferimenti ---------- */
/* fragments/riferimento.html + js/riferimento.js: il contenitore e' posizionato
   perche' la lista si ancori al campo di ricerca. */

.rif-campo { position: relative; }
.rif-tendina {
  position: absolute; z-index: 1000; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #dde4e6; border-radius: 4px;
  box-shadow: 0 6px 12px rgba(44, 62, 80, .18);
}
.rif-tendina li { padding: 7px 12px; cursor: pointer; font-size: .95em; color: #2c3e50; }
.rif-tendina li + li { border-top: 1px solid #eef2f4; }
.rif-tendina li.rif-attivo { background: #18bc9c; color: #fff; }
.rif-tendina li.rif-vuoto { color: #7b8a8b; cursor: default; font-style: italic; }

/* Uscita: e' un form (il logout e' un POST), va allineato alle altre voci del menu. */
.navbar-uscita { margin: 0; padding: 0; border: 0; box-shadow: none; }
.navbar-uscita .btn-link { color: #fff; padding: 15px; text-decoration: none; }
.navbar-uscita .btn-link:hover { background: #1a252f; color: #fff; text-decoration: none; }