/* =========================================================
   CarKPI Dashboard - custom.css
   Bootstrap 5 friendly overrides & utilities
   ========================================================= */

/* ---------- Root palette & spacing ---------- */
:root{
  --ck-bg: #f8f9fa;
  --ck-dark: #212529;
  --ck-primary: #0d6efd;
  --ck-success: #198754;
  --ck-danger: #dc3545;
  --ck-card-radius: .75rem;
  --ck-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}

/* ---------- Base ---------- */
html,body{
  height:100%;
}
body{
  background: var(--ck-bg);
  font-size: 0.95rem;
}

/* Remove focus outline ugliness */
a:focus, button:focus, input:focus, .form-control:focus{
  box-shadow: none !important;
  outline: none !important;
}

/* Sidebar fissa a sinistra */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:240px;
  height:100vh;
  background:#212529;
  color:#fff;
  overflow-y:auto;
  z-index:1020;            /* non esagerato */
}

.chart-box{
  position:relative;
  height:420px;           /* regola a piacere */
}

/* Spazio per il contenuto */
.ms-sidebar{
  margin-left:240px;       /* stessa larghezza della sidebar */
}

/* Mobile: sidebar nascosta, contenuto full width */
@media (max-width: 991.98px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.open{ transform:none; }
  .ms-sidebar{ margin-left:0; }
}


/* Responsive: sidebar nascosta su mobile */
@media (max-width: 991.98px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.open{
    transform:none;
  }
  .ms-sidebar{
    margin-left:0;
  }
}


/* ---------- Cards & KPI ---------- */
.card{
  border:0;
  border-radius: var(--ck-card-radius);
  box-shadow: var(--ck-shadow);
}
.card-header{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.05);
  font-weight:600;
}
#kpi-cards .card{
  cursor:default;
}
#kpi-cards h3{
  margin:0;
  font-weight:700;
  font-size:1.4rem;
}
#kpi-cards .card-title{
  text-transform:uppercase;
  font-size:.7rem;
  letter-spacing:.6px;
  color:#6c757d;
}

/* ---------- Forms / Filters ---------- */
#filter-form .form-label{
  font-size:.8rem;
  color:#6c757d;
}
#btn-apply, #filter-form button[type="submit"]{
  font-weight:600;
}

/* ---------- Charts ---------- */
canvas{
  max-width:100%;
}
/*.card-body > canvas{
  height:320px !important; /* Chart.js respects explicit height */
}*/
.chart-box{
  position: relative;
  width: 100%;
  height: 420px;              /* regola l’altezza a piacere */
}

.chart-box canvas{
  width: 100% !important;     /* forza il 100% della card */
  height: 100% !important;
}

/* ---------- Tables ---------- */
table.dataTable tbody tr:hover{
  background-color: rgba(13,110,253,.05);
}
table.dataTable thead th{
  font-size:.8rem;
  text-transform:uppercase;
  color:#6c757d;
}
table.dataTable td{
  vertical-align:middle;
  font-size:.85rem;
}

/* DataTables processing overlay tweak */
.dataTables_processing{
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%);
  padding:1rem 1.5rem !important;
  border-radius:.5rem;
  background:#fff;
  box-shadow:var(--ck-shadow);
  z-index:2000;
}

/* ---------- Views ---------- */
.app-view{
  animation: fadeIn .25s ease-in;
}
.d-none.app-view{
  display:none !important;
}

/* ---------- Utilities ---------- */
.text-small{ font-size:.8rem; }
.cursor-pointer{ cursor:pointer; }

/* ---------- Dark mode (optional) ---------- */
.dark-mode body{
  background:#121212;
  color:#e6e6e6;
}
.dark-mode .card{
  background:#1e1e1e;
  color:#e6e6e6;
  box-shadow:none;
}
.dark-mode .card-header{
  background:#1e1e1e;
  border-bottom:1px solid #2a2a2a;
}
.dark-mode .navbar-dark{
  background:#000 !important;
}
.dark-mode table.dataTable tbody tr:hover{
  background:rgba(255,255,255,.05);
}
.dark-mode .dataTables_processing{
  background:#1e1e1e;
  color:#e6e6e6;
}

/* ---------- Animations ---------- */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px){
  #kpi-cards h3{ font-size:1.2rem; }
  .card-body > canvas{ height:260px !important; }
}
@media (max-width: 575.98px){
  .navbar-brand{ font-size:1rem; }
  #kpi-cards .card-title{ font-size:.65rem; }
  #filter-form .form-label{ font-size:.7rem; }
}