:root {
    --app-sidebar-w: 260px;
    --app-sidebar-bg: #16233a;
    --app-sidebar-fg: #dbe3f0;
    --app-sidebar-active: #2f6fed;
    --app-bg: #f4f6fa;
    --bs-primary: #2f6fed;
    --bs-primary-rgb: 47, 111, 237;
    --bs-link-color: #2f6fed;
    --bs-link-color-rgb: 47, 111, 237;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { background: var(--app-bg); min-height: 100vh; }

.btn-primary { --bs-btn-bg: #2f6fed; --bs-btn-border-color: #2f6fed; --bs-btn-hover-bg: #245bd0; --bs-btn-hover-border-color: #245bd0; }

/* --- layout ------------------------------------------------------------------------------- */
.app-sidebar,
.app-sidebar.offcanvas-lg {
    width: var(--app-sidebar-w);
    --bs-offcanvas-bg: var(--app-sidebar-bg);
    --bs-offcanvas-color: var(--app-sidebar-fg);
    /* Bootstrap su schermi larghi forza lo sfondo trasparente con !important */
    background-color: var(--app-sidebar-bg) !important;
    color: var(--app-sidebar-fg);
}
@media (min-width: 992px) {
    .app-sidebar { position: fixed; inset: 0 auto 0 0; overflow-y: auto; visibility: visible !important; transform: none !important; }
    .app-main { margin-left: var(--app-sidebar-w); }
}
.app-sidebar .brand { color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.app-sidebar .brand i { color: #6ea0ff; }
.app-sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #9aa8c1; margin: 1.25rem 1rem .4rem; }
.app-sidebar .nav-link { color: var(--app-sidebar-fg); border-radius: .5rem; padding: .5rem .85rem; margin: 1px .5rem; display: flex; align-items: center; gap: .65rem; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar .nav-link.active { background: var(--app-sidebar-active); color: #fff; }
.app-sidebar .nav-link .badge { margin-left: auto; }
.app-sidebar .offcanvas-header .btn-close { filter: invert(1); }

.app-topbar { background: #fff; border-bottom: 1px solid #e3e7ef; position: sticky; top: 0; z-index: 1020; }
.app-content { padding: 1.5rem; max-width: 1400px; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } }

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 650; margin: 0; }
.page-header .subtitle { color: #6b778c; font-size: .95rem; }

.card { border: 1px solid #e3e7ef; border-radius: .75rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f6; font-weight: 600; border-radius: .75rem .75rem 0 0 !important; }
.table > :not(caption) > * > * { padding: .55rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b778c; font-weight: 600; background: #f8f9fc; }
.table-hover tbody tr { cursor: default; }

/* --- timbratura ----------------------------------------------------------------------------- */
.clock-card { background: linear-gradient(135deg, #1e3c72 0%, #2f6fed 100%); color: #fff; border: 0; }
.clock-card .clock-time { font-size: 3.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.clock-card .clock-date { opacity: .85; }
.btn-clock { font-size: 1.15rem; font-weight: 600; padding: .9rem 1.25rem; border-radius: .75rem; min-width: 10rem; }
.btn-clock-in { background: #19b36b; border-color: #19b36b; color: #fff; }
.btn-clock-in:hover { background: #12985a; border-color: #12985a; color: #fff; }
.btn-clock-out { background: #fff; border-color: #fff; color: #1e3c72; }
.btn-clock-out:hover { background: #e8eefc; color: #1e3c72; }
.btn-clock.suggested { box-shadow: 0 0 0 .3rem rgba(255,255,255,.35); }

.stat { display: flex; flex-direction: column; }
.stat .label { font-size: .78rem; color: #6b778c; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px dashed #e3e7ef; }
.timeline li:last-child { border-bottom: 0; }
.timeline .dot { width: .75rem; height: .75rem; border-radius: 50%; flex: none; }
.dot-in { background: #19b36b; } .dot-out { background: #e5484d; }

/* --- foglio presenze ---------------------------------------------------------------------- */
.sheet td, .sheet th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet tr.nonworking td { background: #f6f7f9; color: #8a94a6; }
.sheet tr.holiday td { background: #fff6e5; }
.sheet tr.anomaly td:first-child { box-shadow: inset 3px 0 0 #e5484d; }
.sheet tr.today td { background: #eef4ff; }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .1rem .5rem; border-radius: 1rem; background: #eef1f6; color: #3b475c; margin: 1px; }
.chip .swatch { width: .55rem; height: .55rem; border-radius: 50%; }
.clocking-pill { display: inline-block; font-size: .82rem; padding: .05rem .45rem; border-radius: .35rem; margin: 1px; background: #eef1f6; }
.clocking-pill.in { background: #e3f6ec; color: #0f7a47; }
.clocking-pill.out { background: #fde8e8; color: #b42318; }
.clocking-pill.warn { outline: 1px solid #f79009; }
.clocking-pill.deleted { text-decoration: line-through; opacity: .5; }

.swatch-lg { width: 1rem; height: 1rem; border-radius: .3rem; display: inline-block; vertical-align: middle; }
.tree-indent { display: inline-block; width: 1.25rem; }
.form-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6b778c; font-weight: 600; margin: 1.5rem 0 .75rem; border-bottom: 1px solid #eef1f6; padding-bottom: .35rem; }
.inherit-hint { font-size: .78rem; color: #6b778c; }
.empty-state { text-align: center; color: #8a94a6; padding: 2.5rem 1rem; }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #16233a 0%, #2f6fed 100%); padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }