/* =====================================================================
   Suivi Production — thème industriel (Bootstrap 5)
   ===================================================================== */
:root {
  --app-sidebar-w: 250px;
  --app-sidebar-bg: #17212b;
  --app-sidebar-fg: #c9d3dd;
  --app-accent: #f39c12;
  --app-bg: #f2f4f7;
  --bs-primary: #1f5f99;
  --bs-primary-rgb: 31, 95, 153;
  --bs-link-color: #1f5f99;
  --bs-link-color-rgb: 31, 95, 153;
}

body { background: var(--app-bg); font-size: .95rem; }

.btn-primary { --bs-btn-bg: #1f5f99; --bs-btn-border-color: #1f5f99; --bs-btn-hover-bg: #184c7a; --bs-btn-hover-border-color: #184c7a; --bs-btn-active-bg: #133d63; }
.btn-outline-primary { --bs-btn-color: #1f5f99; --bs-btn-border-color: #1f5f99; --bs-btn-hover-bg: #1f5f99; --bs-btn-hover-border-color: #1f5f99; }
.text-primary { color: #1f5f99 !important; }

/* ---------- Layout ---------- */
.app-topbar { background: var(--app-sidebar-bg); }
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; }

.app-sidebar { background: var(--app-sidebar-bg) !important; color: var(--app-sidebar-fg); }
@media (min-width: 992px) {
  .app-sidebar { width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
@media (max-width: 991.98px) {
  .app-sidebar { --bs-offcanvas-width: 280px; }
}

.sidebar-brand { align-items: center; gap: .65rem; padding: 1.1rem 1.1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand > i { font-size: 1.7rem; color: var(--app-accent); }
.sidebar-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand small { color: #8a99a8; font-size: .75rem; }

.sidebar-nav { padding: .5rem 0; }
.sidebar-link {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .62rem 1.1rem; color: var(--app-sidebar-fg); text-decoration: none;
  background: none; border: 0; text-align: left; font-size: .95rem;
  border-left: 3px solid transparent;
}
.sidebar-link > i:first-child { font-size: 1.1rem; width: 1.2rem; text-align: center; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-link.active { color: #fff; background: rgba(243,156,18,.12); border-left-color: var(--app-accent); }
.sidebar-toggle .chev { font-size: .75rem; transition: transform .2s; }
.sidebar-toggle.collapsed .chev { transform: rotate(-90deg); }
.sidebar-sublink { display: block; padding: .42rem 1.1rem .42rem 3.05rem; color: #9fb0c0; text-decoration: none; font-size: .9rem; }
.sidebar-sublink:hover { color: #fff; }
.sidebar-sublink.active { color: var(--app-accent); font-weight: 600; }
.sidebar-user { padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); color: #fff; }

/* ---------- Page ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); border-radius: .6rem; }
.card-header { background: #fff; font-weight: 600; border-bottom: 1px solid #edf0f3; }
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #5b6b7b; background: #f7f9fb; white-space: nowrap; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 700; background: #f7f9fb; }

/* ---------- KPI ---------- */
.kpi { padding: .9rem 1rem; height: 100%; }
.kpi .kpi-label { font-size: .75rem; text-transform: uppercase; color: #6b7a89; letter-spacing: .03em; }
.kpi .kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: .8rem; color: #6b7a89; }
.kpi .kpi-icon { font-size: 1.6rem; opacity: .25; }
.kpi-accent { border-left: 4px solid var(--app-accent); }
.kpi-blue { border-left: 4px solid #1f5f99; }
.kpi-green { border-left: 4px solid #198754; }
.kpi-red { border-left: 4px solid #dc3545; }
.kpi-gray { border-left: 4px solid #6c757d; }

.shift-card .shift-title { font-weight: 700; }
.shift-card dl { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; margin: 0; font-size: .9rem; }
.shift-card dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-box { position: relative; height: 260px; }

/* ---------- Formulaires ---------- */
.form-label { font-weight: 500; font-size: .88rem; margin-bottom: .25rem; }
.form-control, .form-select { min-height: 42px; }
input[type=number] { -moz-appearance: textfield; }
.required::after { content: " *"; color: #dc3545; }

.wizard-steps { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; scrollbar-width: thin; }
.wizard-steps button { flex: 0 0 auto; border: 1px solid #d5dce3; background: #fff; border-radius: 2rem; padding: .35rem .85rem; font-size: .85rem; color: #4a5866; white-space: nowrap; }
.wizard-steps button .n { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #e7ebef; text-align: center; line-height: 1.4rem; font-size: .75rem; margin-right: .3rem; }
.wizard-steps button.active { background: #1f5f99; border-color: #1f5f99; color: #fff; }
.wizard-steps button.active .n { background: rgba(255,255,255,.25); color: #fff; }
.wizard-steps button.done .n { background: #198754; color: #fff; }

.repeat-row { border: 1px solid #e3e8ee; border-radius: .5rem; padding: .75rem; margin-bottom: .75rem; background: #fbfcfd; position: relative; }
.repeat-row .row-remove { position: absolute; top: .4rem; right: .4rem; }
.calc-box { background: #eef4fa; border-radius: .5rem; padding: .6rem .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-box .big { font-size: 1.35rem; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.summary-grid > div { background: #fff; border: 1px solid #e3e8ee; border-radius: .5rem; padding: .65rem .8rem; }
.summary-grid .lbl { font-size: .75rem; text-transform: uppercase; color: #6b7a89; }
.summary-grid .val { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.sticky-actions { position: sticky; bottom: 0; z-index: 10; background: rgba(242,244,247,.96); border-top: 1px solid #dfe4ea; padding: .75rem 0; margin-top: 1rem; }

/* Saisie opérateur : sélecteur d'article, compteurs, pesées */
.article-pick { padding: .75rem 1rem; border-width: 2px; border-style: dashed; }
.article-pick.chosen { border-style: solid; background: #eef4fa; color: #17212b; }
.article-pick.chosen .js-pick-label { color: #1f5f99; font-size: 1.15rem; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.pick-grid .btn, #pickProducts .btn { min-height: 56px; font-size: 1.1rem; font-weight: 600; }
.pick-grid .btn small, #pickProducts .btn small { display: block; font-size: .72rem; font-weight: 400; opacity: .8; }
.stepper .btn { min-width: 44px; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.pesee-chip { display: inline-flex; align-items: center; gap: .35rem; background: #e7f1fb; border: 1px solid #b8d4ee; border-radius: 2rem; padding: .25rem .4rem .25rem .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pesee-chip button { border: 0; background: #fff; border-radius: 50%; width: 1.6rem; height: 1.6rem; line-height: 1; color: #dc3545; }
.nc-quick { background: #fff6f6; border-radius: .5rem; padding: .25rem .35rem .5rem; }

.presence-item { border: 1px solid #e3e8ee; border-radius: .5rem; padding: .5rem .65rem; background: #fff; }

/* ---------- Filtres ---------- */
.filters .form-control, .filters .form-select { min-height: 38px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #17212b 0%, #1f5f99 100%); padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
  .page-head h1 { font-size: 1.2rem; }
  .kpi .kpi-value { font-size: 1.2rem; }
  .btn { padding: .5rem .85rem; }
  .table-responsive { font-size: .88rem; }
  .chart-box { height: 220px; }
}

/* ---------- Impression ---------- */
@media print {
  .app-sidebar, .app-topbar, .no-print, .page-head .actions, .sticky-actions { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .app-main .container-fluid { padding: 0 !important; }
}