/* ==========================================================================
   DISE LedWall Solutions - tema dell'interfaccia (chiaro)
   Sovrascrive Bootstrap 3 senza toccare il markup delle view.
   Caricato per ultimo in header.php (e dopo login.css nella pagina di accesso).
   ========================================================================== */

:root {
  /* colori dei comandi */
  --dise-blu: #3a71b8;          /* blu del logo */
  --dise-blu-scuro: #2f5c96;
  --dise-blu-chiaro: #e8f0fa;
  --dise-verde: #16a34a;
  --dise-verde-scuro: #15803d;
  --dise-arancio: #ea8f28;
  --dise-arancio-scuro: #c9741a;
  --dise-rosso: #dc2626;
  --dise-rosso-scuro: #b91c1c;

  /* superfici */
  --dise-sfondo: #f4f6f9;
  --dise-superficie: #ffffff;
  --dise-bordo: #e3e8ef;
  --dise-bordo-forte: #cbd5e1;
  --dise-testo: #1f2937;
  --dise-testo-tenue: #6b7280;

  /* raggi: interfaccia con angoli morbidi */
  --dise-raggio-s: 10px;
  --dise-raggio-m: 14px;
  --dise-raggio-l: 20px;

  --dise-ombra: 0 1px 2px rgba(31, 41, 55, .05), 0 6px 18px rgba(31, 41, 55, .07);
  --dise-ombra-alta: 0 18px 44px -12px rgba(31, 41, 55, .22);
}

/* ---------- base ---------- */

html, body {
  background: var(--dise-sfondo) !important;
  color: var(--dise-testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body, .container, .container-fluid, div, p, td, th, label,
input, select, textarea, button, a, h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
}

/* le icone hanno un font proprio: non vanno toccate dalla regola qui sopra */
.glyphicon { font-family: "Glyphicons Halflings" !important; }
.fa, [class^="fa-"], [class*=" fa-"] { font-family: FontAwesome !important; }

h1, h2, h3, h4, h5 { color: var(--dise-testo); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--dise-blu); }
a:hover, a:focus { color: var(--dise-blu-scuro); text-decoration: none; }

/* ---------- barra di navigazione (chiara, con il logo) ---------- */

.navbar, .navbar-inverse, .navbar-default {
  background: var(--dise-superficie) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dise-bordo) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .05);
  min-height: 62px;
  margin-bottom: 0;
}

.navbar .navbar-brand,
.navbar-inverse .navbar-brand {
  height: auto;
  padding: 11px 22px 11px 16px;
}

/* il logo sostituisce il testo del marchio */
.navbar .navbar-brand img.dise-logo { display: block; height: 38px; width: auto; }

.navbar-inverse .navbar-nav > li > a,
.navbar .navbar-nav > li > a {
  color: #4b5563 !important;
  font-weight: 500;
  font-size: 14.5px;
  padding: 21px 16px;
  transition: color .15s ease, background-color .15s ease;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:hover {
  color: var(--dise-blu) !important;
  background: var(--dise-blu-chiaro) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a,
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .open > a {
  color: var(--dise-blu) !important;
  background: var(--dise-blu-chiaro) !important;
  box-shadow: inset 0 -3px 0 var(--dise-blu);
}

.navbar .glyphicon, .navbar .fa { opacity: .6; margin-right: 6px; }

.dropdown-menu {
  border: 1px solid var(--dise-bordo);
  border-radius: var(--dise-raggio-m);
  box-shadow: var(--dise-ombra);
  padding: 6px;
  margin-top: 4px;
}
.dropdown-menu > li > a {
  border-radius: var(--dise-raggio-s);
  padding: 9px 13px;
  color: var(--dise-testo);
  font-weight: 500;
}
.dropdown-menu > li > a:hover {
  background: var(--dise-blu-chiaro);
  color: var(--dise-blu-scuro);
}

/* ---------- sezioni non utilizzate ---------- */
/* i veicoli non fanno parte di questa installazione */
#vehicle-tab, #vehicle-group-tab,
#vehicle, #vehicle-group { display: none !important; }

/* ---------- contatore dei display (era un testo scorrevole) ---------- */
.dise-contatore {
  background: var(--dise-blu-chiaro);
  border: 1px solid #c9dcf3;
  border-radius: 999px;
  color: #1e3a5f !important;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 6px 16px;
  /* il JS imposta display:block inline: la larghezza si adatta al contenuto */
  max-width: max-content;
  width: auto;
}
.dise-contatore .num { color: var(--dise-blu) !important; font-weight: 700; }

/* ---------- contenitori ---------- */

.panel, .well, .thumbnail {
  background: var(--dise-superficie);
  border: 1px solid var(--dise-bordo) !important;
  border-radius: var(--dise-raggio-m) !important;
  box-shadow: var(--dise-ombra);
}
.panel-heading {
  background: var(--dise-superficie) !important;
  border-bottom: 1px solid var(--dise-bordo) !important;
  border-radius: var(--dise-raggio-m) var(--dise-raggio-m) 0 0 !important;
  font-weight: 600;
  padding: 15px 18px;
}

/* la tabella principale di ogni pagina diventa una scheda */
.tab-content {
  background: var(--dise-superficie);
  border: 1px solid var(--dise-bordo);
  border-radius: var(--dise-raggio-m);
  box-shadow: var(--dise-ombra);
  padding: 18px;
  margin-top: 12px;
}

/* ---------- campi ---------- */

.form-control {
  height: 42px;
  border: 1px solid var(--dise-bordo-forte);
  border-radius: var(--dise-raggio-s);
  box-shadow: none;
  color: var(--dise-testo);
  padding: 8px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--dise-blu);
  box-shadow: 0 0 0 3px rgba(58, 113, 184, .16);
}
.form-control::-webkit-input-placeholder { color: #9ca3af; }
.form-control::placeholder { color: #9ca3af; }

.input-group-addon {
  background: var(--dise-sfondo);
  border: 1px solid var(--dise-bordo-forte);
  border-right: 0;
  border-radius: var(--dise-raggio-s) 0 0 var(--dise-raggio-s);
  color: var(--dise-testo-tenue);
  min-width: 44px;
}
.input-group .form-control:not(:first-child) {
  border-radius: 0 var(--dise-raggio-s) var(--dise-raggio-s) 0;
}

label { font-weight: 600; color: #374151; }

select.form-control, select {
  border-radius: var(--dise-raggio-s);
  border: 1px solid var(--dise-bordo-forte);
  height: 38px;
  padding: 6px 10px;
}

/* ---------- pulsanti: blu, verde, arancio, rosso ---------- */

.btn {
  border-radius: var(--dise-raggio-s);
  border: 1px solid transparent;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(58, 113, 184, .25); }
.btn .glyphicon, .btn .fa { margin-right: 6px; }

.btn-primary, .btn-info {
  background: var(--dise-blu); border-color: var(--dise-blu); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus {
  background: var(--dise-blu-scuro); border-color: var(--dise-blu-scuro); color: #fff;
}

.btn-success {
  background: var(--dise-verde); border-color: var(--dise-verde); color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background: var(--dise-verde-scuro); border-color: var(--dise-verde-scuro); color: #fff;
}

.btn-warning {
  background: var(--dise-arancio); border-color: var(--dise-arancio); color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
  background: var(--dise-arancio-scuro); border-color: var(--dise-arancio-scuro); color: #fff;
}

.btn-danger {
  background: var(--dise-rosso); border-color: var(--dise-rosso); color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: var(--dise-rosso-scuro); border-color: var(--dise-rosso-scuro); color: #fff;
}

.btn-default {
  background: var(--dise-superficie);
  border-color: var(--dise-bordo-forte);
  color: #374151;
}
.btn-default:hover, .btn-default:focus {
  background: var(--dise-sfondo);
  border-color: #b6c2d2;
  color: var(--dise-testo);
}

.btn-group > .btn:first-child { border-radius: var(--dise-raggio-s) 0 0 var(--dise-raggio-s); }
.btn-group > .btn:last-child  { border-radius: 0 var(--dise-raggio-s) var(--dise-raggio-s) 0; }

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

.table {
  background: var(--dise-superficie);
  border-radius: var(--dise-raggio-m);
  overflow: hidden;
}
.table > thead > tr > th {
  background: var(--dise-sfondo);
  border-bottom: 1px solid var(--dise-bordo) !important;
  color: var(--dise-testo-tenue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 13px 14px;
  /* senza queste due, le intestazioni lunghe vanno a capo e sembrano sfalsate */
  vertical-align: middle !important;
  white-space: nowrap;
}
.table > tbody > tr > td {
  border-top: 1px solid #eef1f6 !important;
  padding: 13px 14px;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--dise-blu-chiaro) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--dise-bordo-forte);
  border-radius: var(--dise-raggio-s);
  padding: 6px 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--dise-raggio-s) !important;
  border: 1px solid var(--dise-bordo) !important;
  margin-left: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--dise-blu) !important;
  border-color: var(--dise-blu) !important;
  color: #fff !important;
}

/* ---------- etichette di stato ---------- */

.label, .badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 10px;
}
.label-success { background: #dcfce7; color: #14532d; }
.label-danger  { background: #fee2e2; color: #7f1d1d; }
.label-warning { background: #fef3c7; color: #78350f; }
.label-info    { background: var(--dise-blu-chiaro); color: #1e3a5f; }
.label-default { background: #eef1f6; color: #475569; }

/* ---------- schede ---------- */

.nav-tabs { border-bottom: 1px solid var(--dise-bordo); }
.nav-tabs > li > a {
  border: 0;
  border-radius: var(--dise-raggio-s) var(--dise-raggio-s) 0 0;
  color: var(--dise-testo-tenue);
  font-weight: 600;
  margin-right: 2px;
}
.nav-tabs > li > a:hover { background: var(--dise-sfondo); color: var(--dise-testo); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  box-shadow: inset 0 -3px 0 var(--dise-blu);
  color: var(--dise-blu);
}

/* ---------- finestre modali ---------- */

.modal-content {
  border: 0;
  border-radius: var(--dise-raggio-l);
  box-shadow: var(--dise-ombra-alta);
}
.modal-header {
  border-bottom: 1px solid var(--dise-bordo);
  padding: 18px 22px;
}
.modal-header .modal-title { font-weight: 600; font-size: 17px; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--dise-bordo); padding: 16px 22px; }
.modal-backdrop.in { opacity: .4; }

/* ---------- avvisi ---------- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--dise-raggio-m);
  font-weight: 500;
  padding: 14px 18px;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: var(--dise-blu-chiaro); border-color: #c3d8f0; color: #1e3a5f; }

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

body.dise-login,
.dise-login {
  background: var(--dise-sfondo) !important;
  background-image:
      radial-gradient(900px 420px at 12% -8%, rgba(58, 113, 184, .13), transparent 62%),
      radial-gradient(760px 380px at 88% 4%, rgba(58, 113, 184, .07), transparent 64%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

.dise-login .container {
  margin-top: 0 !important;
  padding-top: 6vh;
  padding-bottom: 6vh;
}

/* il vecchio login.css fissa 350x230px e position:absolute: qui va annullato */
.dise-login .loginBox {
  background: var(--dise-superficie) !important;
  border: 1px solid var(--dise-bordo) !important;
  border-radius: var(--dise-raggio-l) !important;
  box-shadow: var(--dise-ombra-alta) !important;
  font: inherit !important;
  height: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  max-width: 460px;
  position: static !important;
  top: auto !important;
  padding: 38px 38px 32px !important;
  width: 100% !important;
}

.dise-login .row { margin-left: 0; margin-right: 0; }

/* la card sta dentro una colonna 8/12: va portata a piena larghezza per centrarla */
.dise-login .container > .row > div[class*="col-"] {
  float: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* dentro la card gli offset e i float di Bootstrap non servono piu' */
.dise-login .loginBox [class*="col-xs-offset"],
.dise-login .loginBox [class*="col-sm-offset"],
.dise-login .loginBox [class*="col-md-offset"] { margin-left: 0 !important; }

.dise-login .loginBox .pull-left,
.dise-login .loginBox .pull-right { float: none !important; }

.dise-login .loginBox .col-xs-8,
.dise-login .loginBox .col-sm-8,
.dise-login .loginBox .col-md-8,
.dise-login .loginBox .col-xs-4,
.dise-login .loginBox .col-sm-4,
.dise-login .loginBox .col-md-4 {
  float: none !important;
  padding: 0 !important;
  width: 100% !important;
}

.dise-login .loginBox section { float: none !important; width: 100% !important; }

/* login.css fissa h2 a 45px: serve altezza libera per il sottotitolo */
.dise-login .loginBox h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  height: auto !important;
  letter-spacing: -.02em;
  margin: 0 0 22px !important;
  text-align: center;
}

/* sottotitolo aggiunto via CSS, il markup non cambia */
.dise-login .loginBox h2[data-localize="user-login"]::after {
  content: "Accedi alla piattaforma per gestire i tuoi display";
  color: var(--dise-testo-tenue);
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 8px;
}

.dise-login .loginBox .input-group { margin-bottom: 14px; width: 100%; }
.dise-login .loginBox .form-control { height: 46px; }

.dise-login .loginBox .btn-primary,
.dise-login .loginBox #login {
  border-radius: var(--dise-raggio-s);
  display: block;
  font-size: 15px;
  height: 46px;
  margin-top: 6px;
  width: 100%;
}

/* blocco "non hai un account": diventa il piede della card */
.dise-login .loginBox .col-md-4 > section,
.dise-login .loginBox .col-xs-4 > section {
  border-top: 1px solid var(--dise-bordo);
  margin-top: 26px;
  padding-top: 20px;
  text-align: center;
}
.dise-login .loginBox h2[data-localize="no-account"] {
  color: var(--dise-testo-tenue) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 0 12px !important;
}
.dise-login .loginBox h4 {
  color: var(--dise-testo-tenue);
  font-size: 13.5px;
  font-weight: 500;
  margin: 0 0 10px;
}
/* il pulsante di registrazione resta secondario rispetto ad Accedi */
.dise-login .loginBox .regBtn {
  background: var(--dise-superficie) !important;
  border: 1px solid var(--dise-bordo-forte) !important;
  color: #374151 !important;
  margin-top: 0 !important;
  width: 100%;
}
.dise-login .loginBox .regBtn:hover {
  background: var(--dise-sfondo) !important;
  border-color: #b6c2d2 !important;
}

/* intestazione con il logo sopra la card */
.dise-login .dise-login-brand {
  margin: 0 auto 26px;
  max-width: 460px;
  text-align: center;
}
.dise-login .dise-login-brand img {
  height: 68px;
  width: auto;
}
.dise-login .dise-login-brand .dise-login-claim {
  color: var(--dise-testo-tenue);
  font-size: 14px;
  margin-top: 12px;
}

.dise-login .navbar { display: none !important; }

.dise-login-piede {
  color: #9ca3af;
  font-size: 12.5px;
  margin: 26px auto 0;
  text-align: center;
}

/* ---------- ritocchi vari ---------- */

.progress { background: #eef1f6; border-radius: 999px; box-shadow: none; height: 8px; }
.progress-bar { background: var(--dise-blu); }

.pagination > li > a, .pagination > li > span { color: var(--dise-blu); }
.pagination > .active > a, .pagination > .active > span {
  background: var(--dise-blu); border-color: var(--dise-blu);
}

hr { border-top: 1px solid var(--dise-bordo); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--dise-sfondo); }
::-webkit-scrollbar-thumb { background: #c7d0dc; border: 3px solid var(--dise-sfondo); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a9b5c4; }