/* =======================
   THEME SAFE - globale
   ======================= */
:root{
  --bg-mid:  #1f5c73;
  --bg-soft: #e6f2f5;
  --glow:    #38e2c4;

  --text-dark: #0b2f40;
  --text-mid:  #12445a;

  --glass-bg: rgba(255,255,255,0.35);
  --glass-br: rgba(255,255,255,0.45);
}

/* base sito */
html, body{
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  font-family: "Poppins", Arial, sans-serif;
  background: var(--bg-soft);
  color: var(--text-dark);
}

.table-wrapper-x {
  width: 100%;
  overflow-x: auto;
}

/* ==========================
   INPUT / SELECT SAFE
   ========================== */

.input-safe,
.select-safe{
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(0, 0, 0, 0.50);
  color: #0b2f40;
  font-weight: 500;
  padding: 0.75rem;
  transition: all 0.18s ease-in-out;
  text-align-last: center;
}

.input-safe:hover,
.select-safe:hover{
  background: rgba(220,220,220,0.40);
  border-color: rgba(0,0,0,0.55);
}

.input-safe:focus,
.select-safe:focus{
  background: rgba(200,200,200,0.40);
  border-color: var(--bg-mid);
  box-shadow: 0 0 0 .25rem rgba(31,92,115,0.35);
  color: var(--text-dark);
}

/* ==========================
   BUTTON SAFE
   ========================== */

.btn-safe{
  --bs-btn-color: #eaf4f7;
  --bs-btn-bg: var(--bg-mid);
  --bs-btn-border-color: rgba(255,255,255,0.35);

  --bs-btn-hover-color: #eaf4f7;
  --bs-btn-hover-bg: #256a84;
  --bs-btn-hover-border-color: rgba(255,255,255,0.55);

  --bs-btn-active-color: #eaf4f7;
  --bs-btn-active-bg: #1a5268;
  --bs-btn-active-border-color: rgba(255,255,255,0.55);

  --bs-btn-focus-shadow-rgb: 31,92,115;

  font-weight: 600;
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}

.btn-safe:hover{
  filter: brightness(1.2);
}

.btn-safe-out {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.25);
  color: #0b2f40;
  font-weight: 600;
  transition: 0.18s ease-in-out;
}

.btn-safe-out:hover {
  filter: brightness(0.8);
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.40);
}

/* bottone recupera password (disabilitato) */
.btn-recover{
  background: transparent;
  border: 1px solid rgba(13,59,82,0.35);
  color: rgba(13,59,82,0.55);
}
.btn-recover:disabled{
  cursor:not-allowed;
  opacity:0.7;
  filter: none;
}

/* ==========================
   TABELLE E DATATABLES
   ========================== */

.table thead th,
table.dataTable thead th{
  background: var(--bg-mid) !important;
  color: #fff !important;
}

/* Riga hover */
table.dataTable tbody tr:hover {
  background: rgba(31,92,115,0.08) !important;
}

/* Search box */
.dataTables_filter input {
  border-radius: 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.25);
  transition: .2s;
}

.dataTables_filter input:focus {
  background: rgba(255,255,255,0.65);
  box-shadow: 0 0 0 .25rem rgba(31,92,115,0.35);
}

/* Datatable buttons un po' più compatti */
.datatable .btn-safe{
  font-size: .9rem;
}

/* Paginazione DataTables (no sfondo blu) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid var(--safe-border, #d4dfe6) !important;
  border-radius: 8px !important;
  color: var(--safe-text, #0b2f40) !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: transparent !important;
  border: 1px solid var(--safe-border, #c7d7df) !important;
  color: var(--safe-text, #0b2f40) !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(0,0,0,0.05) !important;
  color: var(--safe-text, #0b2f40) !important;
  border-color: var(--safe-border, #c7d7df) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================
   HEADER SAFE2
   ========================== */

.navbar {
  background: var(--bg-mid) !important;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.navbar .navbar-brand {
  color: #eaf4f7 !important;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.navbar .navbar-text {
  color: #eaf4f7 !important;
  font-weight: 500;
}

.navbar .btn-outline-light {
  border-color: rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}

.navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.65) !important;
}

/* Icon buttons in navbar */
.btn-icon-safe{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff !important;

  transition: all .18s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}

.btn-icon-safe:hover{
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.75);
  transform: translateY(-1px);
}

.btn-icon-safe:active{
  background: rgba(255,255,255,0.18);
  transform: translateY(0);
}

.navbar .btn-icon-safe{
  margin-left: .25rem;
}

/* ==========================
   LAYOUT APPLICAZIONE
   Catena flex esatta:
   body (flex column, 100vh)
     └ nav.navbar          (altezza naturale)
     └ #app-container      (flex:1, colonna)
         └ .wrapper         (flex:1, riga)
             └ #sidebar     (scroll indipendente)
             └ #main-content(scroll indipendente)
   NON si applica alle pagine auth (.safe-auth-page).
   ========================== */

body:not(.safe-auth-page) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* div diretto figlio del body (tra navbar e wrapper) */
#app-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Riga sidebar + contenuto */
.wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* ==========================
   SIDEBAR SAFE2
   ========================== */

/* contenitore sidebar */
#sidebar,
.sidebar{
  background: var(--bg-mid) !important;
  color: #fff;
  /* altezza dettata da align-items:stretch del wrapper */
  overflow-y: auto;        /* scroll indipendente della sidebar */
  overflow-x: hidden;
  padding-top: 1rem;
  box-shadow: 4px 0 10px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* Area contenuto principale: scroll indipendente */
#main-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* link base */
#sidebar .nav-link,
.sidebar .nav-link{
  display: flex;
  align-items: center;
  color: #eaf4f7 !important;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: 0.18s ease-in-out;
  border-left: 4px solid transparent;
}

#sidebar .bi,
.sidebar .bi{
  margin-right: 6px;
  opacity: 0.85;
}

/* varianti colore da pagine.colore
   (stesso bg per attivo e non attivo) */
#sidebar .nav-link.nav-darkest,
#sidebar .nav-link.nav-darkest.active,
.sidebar .nav-link.nav-darkest,
.sidebar .nav-link.nav-darkest.active{
  background-color: #052535;
  color:#fff;
}

#sidebar .nav-link.nav-darker,
#sidebar .nav-link.nav-darker.active,
.sidebar .nav-link.nav-darker,
.sidebar .nav-link.nav-darker.active{
  background-color: #08384f;
  color:#fff;
}

#sidebar .nav-link.nav-dark,
#sidebar .nav-link.nav-dark.active,
.sidebar .nav-link.nav-dark,
.sidebar .nav-link.nav-dark.active{
  background-color: #0b4d68;
  color:#fff;
}

#sidebar .nav-link.nav-default,
#sidebar .nav-link.nav-default.active,
.sidebar .nav-link.nav-default,
.sidebar .nav-link.nav-default.active{
  background-color: transparent;
  color:#ffffff;
}

#sidebar .nav-link.nav-light,
#sidebar .nav-link.nav-light.active,
.sidebar .nav-link.nav-light,
.sidebar .nav-link.nav-light.active{
  background-color: rgba(255,255,255,0.10);
  color:#fff;
}

#sidebar .nav-link.nav-lighter,
#sidebar .nav-link.nav-lighter.active,
.sidebar .nav-link.nav-lighter,
.sidebar .nav-link.nav-lighter.active{
  background-color: rgba(255,255,255,0.18);
  color:#fff;
}

#sidebar .nav-link.nav-lightest,
#sidebar .nav-link.nav-lightest.active,
.sidebar .nav-link.nav-lightest,
.sidebar .nav-link.nav-lightest.active{
  background-color: rgba(255,255,255,0.26);
  color:#fff;
}

/* hover solo per voci NON attive */
#sidebar .nav-link:not(.active):hover,
.sidebar .nav-link:not(.active):hover{
  filter: brightness(1.12);
}

/* voce attiva: SOLO bordo + grassetto, nessun cambio sfondo */
#sidebar .nav-link.active,
#sidebar .nav-link.active:hover,
#sidebar .nav-link.active:focus,
.sidebar .nav-link.active,
.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:focus{
  background-color: transparent !important;
  font-weight: 600;
  color: #ffffff !important;
  filter: none !important;
  border: 2px solid var(--safe-accent, #38e2c4);
  border-radius: 8px;
}

/* modalità icon-only */
#sidebar.icon-only .nav-link span,
.sidebar.icon-only .nav-link span{
  display:none;
}


/* ==========================
   DASHBOARD SAFE2
   ========================== */

/* banner team */
.team-banner{
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  background: rgba(31,92,115,0.10);
  border: 1px solid rgba(31,92,115,0.25);
  color: var(--text-dark);
}
.team-banner h2{
  margin: 0;
  font-weight: 700;
  color: var(--text-mid);
}

/* card statistiche */
.stat-card{
  border-radius: 18px;
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-br);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

.stat-card .card-body{
  padding: 1.25rem 1.25rem 1rem 1.25rem;
}

.stat-card .card-title{
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: .5rem;
}

.stat-card .card-title a{
  color: var(--text-mid);
  text-decoration: none;
}
.stat-card .card-title a:hover{
  text-decoration: underline;
}

/* numeri più "importanti" */
.stat-card .card-text{
  color: var(--text-dark);
  font-size: 1rem;
}
.stat-card .stat-number{
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--bg-mid);
}

/* ==========================
   FORM / CONTROLLI GLOBALI
   ========================== */

label{
  color:#0b2f40;
  font-weight:600;
}

/* Textbox più scuri sullo sfondo chiaro */
.form-control {
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #0b2f40;
  transition: all 0.18s ease-in-out;
}

.form-control:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.5);
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--bg-mid);
  box-shadow: 0 0 0 0.25rem rgba(31, 92, 115, 0.35);
  color: #0b2f40;
}

/* ==========================
   AUTH PAGES (login / landing)
   ========================== */

.safe-auth-page{
  background: var(--bg-soft);
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: "Poppins", Arial, sans-serif;
  overflow-x: hidden;
}
.safe-no-scroll{
  overflow: hidden;
}

/* Card vetro opaco bianco - default larga */
.glass-card{
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  border-radius:20px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  box-sizing: border-box;
}

/* SOLO login/landing: più stretta */
.safe-auth-page .glass-card{
  width: 100%;
  max-width: 420px;
  padding: 2rem;
}

/* Mobile auth: non full width */
@media (max-width:576px){
  .safe-auth-page .glass-card{
    max-width:94%;
    padding:1.6rem;
  }
}

/* logo login */
.login-logo{
  display:block;
  width:160px;
  margin:0 auto 1rem auto;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
  border-radius:20px;
  overflow:hidden;
}

/* titoli login / landing */
.login-title,
.header-title{
  text-align:center;
  font-size:1.6rem;
  font-weight:700;
  color: var(--text-mid);
  margin-bottom:1.25rem;
  text-shadow:0 1px 4px rgba(0,0,0,0.12);
}

/* login title blu chiaro speciale */
.login-title{
  color: #e6f2f5;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* ==========================
   FLIP LOGO EFFECT (login)
   ========================== */

.flip-card {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  width: 160px;
  height: 160px;
  margin: 0 auto 1rem auto;
  perspective: 1200px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .8s ease;
  transform-style: preserve-3d;
  border-radius: 20px;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  border-radius: 20px;
}

.flip-front img,
.flip-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

.flip-back {
  transform: rotateY(180deg);
}