/* FAMP – Data-Dense Dashboard theme over Bootstrap 5
   Palette: professional navy + blue accent. Font: Fira Sans (+ tabular nums). */
:root {
  --c-primary: #0F172A;
  --c-primary-700: #1E293B;
  --c-secondary: #334155;
  --c-accent: #0369A1;
  --c-accent-600: #0284C7;
  --c-bg: #F1F5F9;
  --c-surface: #FFFFFF;
  --c-fg: #0F172A;
  --c-muted: #64748B;
  --c-border: #E2E8F0;
  --c-success: #16A34A;
  --c-warning: #D97706;
  --c-danger: #DC2626;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);

  --bs-body-font-family: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-fg);
  --bs-primary: var(--c-accent);
  --bs-border-color: var(--c-border);
}

body {
  background: var(--c-bg);
  font-family: var(--bs-body-font-family);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
}

.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- navbar -- */
.navbar.famp-nav {
  background: var(--c-primary);
  box-shadow: var(--shadow);
  padding-top: .6rem; padding-bottom: .6rem;
}
.famp-nav .navbar-brand { font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; }
.famp-nav .brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--c-accent-600), var(--c-accent));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem;
}
.famp-nav .nav-link { color: #CBD5E1; font-weight: 500; border-radius: var(--radius-sm); padding: .4rem .8rem; transition: background .15s, color .15s; }
.famp-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.famp-nav .nav-link.active { color: #fff; background: var(--c-accent); }
.user-chip { display:inline-grid; place-items:center; min-width:26px; height:22px; padding:0 .4rem; border-radius:6px; background: var(--c-accent); color:#fff; font-size:.7rem; font-weight:700; }
.famp-nav .dropdown-menu { font-size:.9rem; }

/* ----------------------------------------------------------------- cards -- */
.card { border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); font-weight: 600; }

.kpi-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); height: 100%; }
.kpi-card .kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 600; }
.kpi-card .kpi-value { font-size: 1.65rem; font-weight: 700; line-height: 1.1; margin-top: .15rem; color: var(--c-primary); }
.kpi-card .kpi-sub { font-size: .78rem; color: var(--c-muted); }
.kpi-card.accent { border-left: 3px solid var(--c-accent); }
.kpi-card.success { border-left: 3px solid var(--c-success); }
.kpi-card.warning { border-left: 3px solid var(--c-warning); }

/* ---------------------------------------------------------------- tables -- */
.card .table { margin-bottom: 0; }
.table { --bs-table-bg: var(--c-surface); color: var(--c-fg); }
.table > thead th {
  background: #F8FAFC; color: var(--c-secondary); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--c-border);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.table-hover > tbody > tr { transition: background .12s; }
.table-hover > tbody > tr:hover { background: #F1F6FB; }
.table td { vertical-align: middle; }
.code-pill { font-weight: 700; color: var(--c-accent); text-decoration: none; }
.code-pill:hover { text-decoration: underline; }
.sub { color: var(--c-muted); font-size: .8rem; }

/* badges & progress */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge.soft-secondary { background: var(--c-muted); }
.chip { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: #EEF2F7; color: var(--c-secondary); border: 1px solid var(--c-border); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.dot.ok { background: var(--c-success); } .dot.warn { background: var(--c-warning); } .dot.bad { background: var(--c-danger); }
.progress { background: #EAEFF5; border-radius: 999px; }
.progress-bar { font-weight: 600; }

/* ----------------------------------------------------------- staff table -- */
.table-staff th, .table-staff td { white-space: nowrap; }
.table-staff input.cell { width: 64px; text-align: right; border: 1px solid transparent; background: #F8FAFC; border-radius: var(--radius-sm); padding: .25rem .4rem; transition: border-color .12s, background .12s; }
.table-staff input.cell:hover { border-color: var(--c-border); }
.table-staff input.cell:focus { border-color: var(--c-accent); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.table-staff input.budget { background: #FFF7ED; }
.table-staff .res-name { font-weight: 600; }
.col-scarichi { background: #F8FAFC; }
.sca-link { color: var(--c-accent); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; font-weight: 600; }
.sca-link:hover { text-decoration: underline; }

/* resource matrix: planned (previsione) columns tinted */
.col-plan { background: #EFF6FF; }
thead .col-plan { background: #DCEAFE; }
.legend-box { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:.25rem; border:1px solid var(--c-border); }
.legend-box.legend-act { background:#fff; }
.legend-box.legend-plan { background:#DCEAFE; }

/* ----------------------------------------------------------------- forms -- */
.form-control, .form-select { border-color: var(--c-border); border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.btn-primary { --bs-btn-bg: var(--c-accent); --bs-btn-border-color: var(--c-accent); --bs-btn-hover-bg: var(--c-accent-600); --bs-btn-hover-border-color: var(--c-accent-600); --bs-btn-active-bg: var(--c-accent-600); }
.btn-dark { --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-hover-bg: var(--c-primary-700); --bs-btn-hover-border-color: var(--c-primary-700); }
.btn { border-radius: var(--radius-sm); font-weight: 500; }

/* dropzone */
.dz { border-color: var(--c-border) !important; transition: background .15s, border-color .15s; }
.dz:hover { border-color: var(--c-accent) !important; background: #F0F7FC; }

/* page header */
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-head .sub { font-size: .85rem; }

a { color: var(--c-accent); }
.text-muted { color: var(--c-muted) !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Cronologia note/commenti — timeline con bordo a sinistra */
.nota-list .nota-item { border-left: 2px solid #e2e8f0; padding-left: .75rem; padding-bottom: .85rem; margin-left: .15rem; }
.nota-list .nota-item:last-child { padding-bottom: 0; }
.nota-list .nota-item + .nota-item { padding-top: .1rem; }

/* Recap risorse: matrice mesi con heatmap %JSB */
.table-recap th, .table-recap td { white-space: nowrap; }
.table-recap .alloc-th { font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.table-recap .alloc-th.fut { color: #94a3b8; }
.table-recap .alloc-cell { text-align: right; font-variant-numeric: tabular-nums; min-width: 46px; padding-left: .4rem; padding-right: .4rem; }
.alloc-hi  { background: #dcfce7; color: #166534; font-weight: 600; }   /* >= target */
.alloc-mid { background: #fef9c3; color: #854d0e; font-weight: 600; }   /* vicino al target */
.alloc-lo  { background: #fee2e2; color: #991b1b; font-weight: 600; }   /* sotto */

/* "Non in forza": mesi prima dell'ingresso o dopo l'uscita (recap + dettaglio) */
.alloc-absent, .col-absent {
  background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 5px, #e2e8f0 5px, #e2e8f0 10px) !important;
  color: #94a3b8 !important;
}
.legend-box.col-absent { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; }

/* Recap: celle di previsione (mesi futuri) in corsivo per distinguerle dal consuntivo */
.table-recap .alloc-fut { font-style: italic; }
.table-recap .alloc-fut::before { content: "~"; opacity: .55; margin-right: 1px; }

/* Risorse disponibili: heatmap giornate libere + header ordinabili */
.table-recap th.sortable { cursor: pointer; }
.table-recap th.sortable:hover { color: #0369A1; }
.table-recap th.sortable.sorted { text-decoration: underline; color: #0369A1; }
.disp-hi  { background:#dcfce7; color:#166534; font-weight:600; }   /* molto disponibile */
.disp-mid { background:#fef9c3; color:#854d0e; font-weight:600; }   /* poco disponibile */
.disp-lo  { background:#fee2e2; color:#991b1b; font-weight:600; }   /* saturo / oltre */

/* Disponibilità: celle cliccabili (heatmap verde via inline style) */
.table-recap .disp-cell { cursor: pointer; }
.table-recap .disp-cell:hover { outline: 2px solid #0369A1; outline-offset: -2px; }

/* Sovra-allocazione: cella rossa con icona di avviso */
.table-recap .disp-over { background:#dc2626 !important; color:#fff !important; font-weight:600; }
.table-recap .disp-over::before { content:"⚠ "; }