/* === Sidebar login page === */
body.login-page .sidebar {
    display: none;
}
body.login-page .content {
    margin-left: 0 !important;
}

/* === Stile Base === */
body {
    font-family: Arial, sans-serif;
    background: #f4f8fb;
    margin: 0;
    padding: 0;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: #0078D7;
    height: calc(100vh - 62px - 38px); /* viewport - topbar - footer */
    position: fixed;
    top: 42px;              /* allineato perfettamente sotto la navbar */
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    color: white;
    padding-top: 10px;      /* meno padding per evitare extra shift */
    z-index: 1000;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
}
.sidebar a {
    display: block;
    color: white;
    padding: 15px;
    text-decoration: none;
    transition: background 0.3s;
}
.sidebar a:hover {
    background: #005a9e;
}
.sidebar canvas {
    width: 100%;
    max-width: 120px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: block;
    background: #005a9e;
    border-radius: 10px;
    padding: 5px;
}

/* Contenuto principale */
.content {
    margin-left: 240px;
    padding: 20px;
    padding-bottom: 80px; 
}

/* === Statistiche Dashboard === */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
}
.stat-box {
    background: #0078D7;
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: calc(33% - 20px);
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    min-width: 220px;
    max-width: 300px;
    transition: transform 0.3s;
}
.stat-box:hover {
    transform: translateY(-5px);
}

/* === Logout Button === */
.logout-button {
    margin-top: 30px;
}
.logout-button a {
    background: #0078D7;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    display: inline-block;
    font-weight: bold;
    transition: background 0.3s;
}
.logout-button a:hover {
    background: #0056b3;
}

/* === Tabelle Responsive === */
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    text-align: center;
}
th {
    background-color: #0078D7;
    color: white;
}

/* === Card Collaboratori (Team INC) === */
.card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    padding: 20px;
    width: 100%;
    height: 100%;
}
.card:hover {
    transform: translateY(-5px);
}
.card-body {
    padding: 20px;
    text-align: center;
}
.card img.rounded-circle {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid #0078D7;
}
.card .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333333;
}
.card .text-muted {
    font-size: 0.9rem;
}

/* === Bottoni di Azione === */
.btn-group .btn {
    margin: 0 4px;
}
.btn-group .btn i {
    font-size: 1.2rem;
}

/* === Toast Success === */
.toast {
    background-color: #28a745 !important;
    color: white !important;
}

/* === Modale Reset Password === */
.modal-content {
    border-radius: 10px;
}
.modal-header {
    background-color: #0078D7;
    color: white;
    border-bottom: none;
}
.modal-footer .btn-danger {
    background-color: #dc3545;
    border: none;
}
.modal-footer .btn-secondary {
    background-color: #6c757d;
    border: none;
}

/* === Login Page layout migliorato === */
.login-page .d-flex-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.login-page form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

/* === Topbar === */
.topbar {
    background-color: #f0f2f5;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 10px 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* === User Info nella Topbar === */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.user-info .dropdown .btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0078D7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.user-info .dropdown .btn:hover {
    background-color: #0056b3;
}
.user-info .dropdown .btn i {
    font-size: 18px;
}

/* === Responsive Mobile Enhancements & Off-Canvas Sidebar === */
@media (max-width: 768px) {
  /* Off-canvas sidebar: nascosta di default */
  .sidebar {
    position: absolute;
    top: 100px;                           /* sotto la topbar alta 100px */
    left: 0;
    width: 220px;                        /* stessa larghezza desktop */
    height: calc(100vh - 100px);          /* schermo meno topbar */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1050;                       /* sopra il contenuto */
  }

  /* Quando ha classe .open, la sidebar torna visibile */
  .sidebar.open {
    transform: translateX(0);
  }

  /* Contenuto principale a schermo pieno */
  .content {
    margin-left: 0 !important;
    padding: 10px;
  }

  /* Adattamenti estetici per mobile */
  .stat-grid { gap: 10px; }
  .stat-box { width: 100%; }
  .card { width: 100%; padding: 15px; }
  table { font-size: 14px; }
  th, td { padding: 8px; }
  .topbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .user-info .dropdown .btn { width: 35px; height: 35px; }
  .user-info .dropdown .btn i { font-size: 16px; }

  /* Sposta l’hamburger più a sinistra */
  #sidebarToggle {
    left: 8px !important;
  }
}

/* === Stile hamburger === */
#sidebarToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: none;
}
#sidebarToggle:focus {
  outline: none;
  box-shadow: none;
}

/* === Sticky Footer === */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background-color: #f8f9fa;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}

/* Correzione posizione dropdown su mobile */
@media (max-width: 768px) {
    /* Riduco i padding orizzontali della topbar per non far “uscire” i pulsanti */
    .navbar.fixed-top .container-fluid {
      padding-left: 40px;
      padding-right: 8px;
    }
    /* Assicuro che il dropdown non superi il bordo */
    .user-info .dropdown {
      margin-right: 0 !important;
    }
  }
  
    /* Nascondo il timer per non allargare la topbar su mobile */
    .session-timer {
        display: none;
      }
    
      /* Riduco leggermente padding orizzontali della navbar */
      .navbar.fixed-top {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }
    
      /* Dropdown iconici (Campanella, Chat) - Niente freccina + fix dimensioni */
.icon-dropdown.dropdown-toggle::after {
    display: none !important;
}

.icon-dropdown {
    padding: 0 !important;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.icon-dropdown i {
    font-size: 18px;
}