/* ==========================================================================
   Ordito Presenze - Tema (palette dal logo Ordito Consulting)
   ========================================================================== */
:root {
  --ordito-navy-950: #0f1729;
  --ordito-navy-900: #16213e;
  --ordito-navy-800: #1c2b4a;
  --ordito-blue-700: #1e3c72;
  --ordito-blue-600: #2856a3;
  --ordito-blue-500: #3a72c4;
  --ordito-blue-400: #5b93d8;
  --ordito-blue-300: #8ab4e8;
  --ordito-blue-100: #eaf2fc;
  --ordito-bg: #f4f7fb;
  --ordito-surface: #ffffff;
  --ordito-text: #1c2b4a;
  --ordito-text-muted: #64748b;
  --ordito-success: #1dac7c;
  --ordito-warning: #f8c027;
  --ordito-danger: #e85b67;
  --ordito-radius: 14px;

  --bs-primary: var(--ordito-blue-600);
  --bs-primary-rgb: 40, 86, 163;
  --bs-body-font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-color: var(--ordito-text);
  --bs-body-bg: var(--ordito-bg);
}

body { background: var(--ordito-bg); }

.btn-primary {
  --bs-btn-bg: var(--ordito-blue-600);
  --bs-btn-border-color: var(--ordito-blue-600);
  --bs-btn-hover-bg: var(--ordito-blue-700);
  --bs-btn-hover-border-color: var(--ordito-blue-700);
  --bs-btn-active-bg: var(--ordito-blue-700);
  --bs-btn-focus-shadow-rgb: 40, 86, 163;
}
.text-primary { color: var(--ordito-blue-600) !important; }
.bg-primary { background: var(--ordito-blue-600) !important; }
a { color: var(--ordito-blue-600); }
a:hover { color: var(--ordito-blue-700); }

/* ---------- Topbar ---------- */
.topbar {
  background: linear-gradient(120deg, var(--ordito-navy-900) 0%, var(--ordito-blue-700) 100%);
  height: 64px;
  position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 2px 10px rgba(15,23,41,.15);
}
.topbar .navbar-brand { color: #fff; }
.topbar .btn-link, .topbar .btn-link:hover { color: #fff; text-decoration: none; }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}
.clock-widget {
  color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.12); padding: 6px 14px; border-radius: 30px; font-size: .95rem;
}
.notif-menu { width: 320px; max-height: 380px; overflow-y: auto; }

/* ---------- Layout ---------- */
.app-wrapper { display: flex; min-height: calc(100vh - 64px); }
.app-sidebar {
  width: 250px; flex: 0 0 250px;
  background: var(--ordito-navy-900);
  color: #cfd9ea;
  padding: 20px 0;
}
.app-sidebar .nav-link {
  color: #cfd9ea; padding: 11px 22px; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 20px; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar .nav-link.active {
  background: rgba(255,255,255,.08); color: #fff;
  border-left-color: var(--ordito-blue-400);
}
.sidebar-heading {
  color: #7e8db0; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
  font-weight: 700; padding: 18px 22px 6px;
}
.app-content { flex: 1 1 auto; min-width: 0; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; top: 64px; bottom: 0; left: -260px; z-index: 1040;
    transition: left .25s ease; overflow-y: auto;
  }
  .app-sidebar.show { left: 0; box-shadow: 4px 0 20px rgba(0,0,0,.25); }
  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,.35); z-index: 1035;
  }
}

/* ---------- Cards & widgets ---------- */
.card { border: none; border-radius: var(--ordito-radius); box-shadow: 0 2px 14px rgba(28,43,74,.06); }
.card-header { background: transparent; border-bottom: 1px solid #eef1f6; font-weight: 700; }

.stat-card { border-radius: var(--ordito-radius); padding: 22px; color: #fff; position: relative; overflow: hidden; }
.stat-card .stat-icon { font-size: 2rem; opacity: .35; position: absolute; right: 18px; top: 18px; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; }
.stat-card .stat-label { font-size: .82rem; opacity: .9; font-weight: 600; }
.stat-card.bg-navy { background: linear-gradient(135deg, var(--ordito-navy-900), var(--ordito-blue-700)); }
.stat-card.bg-blue { background: linear-gradient(135deg, var(--ordito-blue-600), var(--ordito-blue-400)); }
.stat-card.bg-success { background: linear-gradient(135deg, #17976b, var(--ordito-success)); }
.stat-card.bg-warning { background: linear-gradient(135deg, #e0a90a, var(--ordito-warning)); color: #4a3600; }

.punch-widget { text-align: center; padding: 30px 20px; }
.punch-time { font-size: 2.6rem; font-weight: 800; color: var(--ordito-navy-900); font-variant-numeric: tabular-nums; }
.punch-date { color: var(--ordito-text-muted); font-weight: 600; margin-bottom: 18px; text-transform: capitalize; }
.punch-btn {
  width: 150px; height: 150px; border-radius: 50%; border: none; font-size: 1.05rem; font-weight: 800;
  color: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; box-shadow: 0 10px 30px rgba(28,86,163,.35); transition: transform .15s ease;
}
.punch-btn:active { transform: scale(.96); }
.punch-btn.entrata { background: linear-gradient(135deg, var(--ordito-success), #17976b); }
.punch-btn.uscita { background: linear-gradient(135deg, var(--ordito-danger), #c8434f); }
.punch-btn i { font-size: 2rem; }
.punch-status { margin-top: 16px; font-weight: 700; }

.badge-stato-in_attesa, .badge-stato-in_attesa { background: var(--ordito-warning); color: #4a3600; }
.badge-stato-approvata, .badge-stato-approvato { background: var(--ordito-success); color: #fff; }
.badge-stato-rifiutata, .badge-stato-rifiutato { background: var(--ordito-danger); color: #fff; }

/* ---------- Login page ---------- */
body.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at top left, var(--ordito-blue-700), var(--ordito-navy-950) 70%);
  padding: 20px;
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 40px 34px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.auth-logo { display: block; margin: 0 auto 22px; height: 56px; }

/* ---------- Tables ---------- */
.table-ordito thead th { background: var(--ordito-blue-100); color: var(--ordito-navy-900); font-weight: 700; border: none; }
.table-ordito td, .table-ordito th { vertical-align: middle; }

.app-footer { color: var(--ordito-text-muted); }

.icon-circle {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ordito-blue-100); color: var(--ordito-blue-600); font-size: 1.2rem;
}