/* ============================================================
   Quadro Operacional v2 — Grupo 3V / Cantucci
   Identidade visual: dark teal + olive · mobile-first · 480px
   ============================================================ */

:root {
  /* Paleta base — mesma do painel admin */
  --bg:        #081d23;
  --surf:      #10303b;
  --surf2:     #193e4c;
  --surf3:     #1f4e60;
  --ol:        #74725d;        /* olive — cor de marca */
  --ol-dim:    rgba(116,114,93,.28);
  --ol-mid:    rgba(116,114,93,.55);
  --ol-bright: #8e8c72;
  --text:      #f0ede5;        /* creme quente */
  --muted:     #7a9a97;
  --faint:     #4e6e6b;

  /* Semânticas */
  --ok:        #3aab82;
  --ok-bg:     rgba(58,171,130,.12);
  --ok-border: rgba(58,171,130,.35);
  --warn:      #d4952a;
  --warn-bg:   rgba(212,149,42,.12);
  --warn-border:rgba(212,149,42,.35);
  --err:       #c84848;
  --err-bg:    rgba(200,72,72,.12);
  --err-border:rgba(200,72,72,.35);
  --blue:      #3a7fc1;
  --blue-bg:   rgba(58,127,193,.12);
  --blue-border:rgba(58,127,193,.35);

  --r: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.3);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
}
button { cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Layout principal ---------- */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surf);
  border-bottom: 1px solid var(--ol-dim);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; height: 52px;
}
.topbar-back {
  background: none; border: none;
  font-size: 20px; line-height: 1; color: var(--muted);
  padding: 4px 8px 4px 0; flex-shrink: 0;
}
.topbar-logo {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--ol-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: var(--ol); flex-shrink: 0; margin-right: 2px;
}
.topbar-title {
  font-weight: 700; font-size: .9375rem; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-subtitle {
  font-weight: 400; font-size: .75rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border: none; border-radius: var(--r);
  padding: 8px 16px; font-size: .875rem; font-weight: 600;
  transition: opacity .15s, transform .1s; white-space: nowrap; min-height: 36px;
}
.btn:active { opacity: .8; transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary   { background: var(--ol); color: var(--bg); }
.btn-primary:hover { background: var(--ol-bright); }
.btn-ok        { background: var(--ok); color: #fff; }
.btn-ghost     { background: transparent; color: var(--text); border: 1px solid var(--ol-mid); }
.btn-ghost:hover { background: var(--surf2); }
.btn-danger    { background: var(--err); color: #fff; }
.btn-icon { padding: 7px; border-radius: var(--r); background: transparent; border: 1px solid var(--ol-dim); color: var(--muted); }
.btn-icon:hover { border-color: var(--ol-mid); color: var(--text); }
.btn-sm { padding: 5px 12px; font-size: .8125rem; min-height: 30px; }
.btn-full { width: 100%; }

/* ---------- Cards / sections ---------- */
.card {
  background: var(--surf);
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ol-dim);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: .875rem; font-weight: 700; color: var(--text); }
.card-body { padding: 14px 16px; }

/* ---------- Badges de intensidade ---------- */
.badge {
  display: inline-block; border-radius: 999px;
  padding: 2px 8px; font-size: .7rem; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap; text-transform: uppercase;
}
.badge-fraquissima { background: rgba(116,114,93,.15); color: var(--muted); }
.badge-fraca       { background: var(--blue-bg);       color: var(--blue); }
.badge-media       { background: var(--ok-bg);         color: var(--ok); }
.badge-forte       { background: var(--warn-bg);       color: var(--warn); }
.badge-fortissima  { background: var(--err-bg);        color: var(--err); }

/* ---------- Badges de turno ---------- */
.badge-dia   { background: rgba(212,149,42,.18); color: var(--warn); }
.badge-noite { background: rgba(58,127,193,.18);  color: var(--blue); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 12px; }
.form-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .05em;
}
.form-label .req { color: var(--err); margin-left: 2px; }
.form-control {
  width: 100%; padding: 9px 12px;
  background: var(--bg); border: 1px solid var(--ol-dim);
  border-radius: var(--r); color: var(--text);
  font-size: .9375rem; transition: border-color .15s;
  -webkit-appearance: none;
}
.form-control:focus { outline: none; border-color: var(--ol); }
.form-control::placeholder { color: var(--faint); }
textarea.form-control { resize: vertical; min-height: 70px; }
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%237a9a97' d='M8 10.5L3 5.5h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 16px; padding-right: 32px;
}
select.form-control option { background: var(--surf); }

/* ---------- Segmento (Dia / Noite) ---------- */
.seg { display: flex; gap: 6px; }
.seg-btn {
  flex: 1; padding: 9px; border-radius: var(--r);
  border: 1px solid var(--ol-dim); background: var(--bg);
  font-weight: 600; font-size: .875rem; color: var(--muted);
  transition: all .15s;
}
.seg-btn.active-dia   { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.seg-btn.active-noite { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }

/* ---------- Seletor de intensidade ---------- */
.int-row { display: flex; gap: 4px; }
.int-btn {
  flex: 1; min-width: 0; padding: 8px 2px;
  border-radius: var(--r); border: 1px solid var(--ol-dim);
  background: var(--bg); font-size: .7rem; font-weight: 700;
  color: var(--muted); text-align: center;
  transition: all .15s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.int-btn:hover { border-color: var(--ol-mid); color: var(--text); }
.int-btn.active-fraquissima { border-color: var(--ol-mid); background: rgba(116,114,93,.12); color: var(--muted); }
.int-btn.active-fraca       { border-color: var(--blue);   background: var(--blue-bg);       color: var(--blue); }
.int-btn.active-media       { border-color: var(--ok);     background: var(--ok-bg);         color: var(--ok); }
.int-btn.active-forte       { border-color: var(--warn);   background: var(--warn-bg);       color: var(--warn); }
.int-btn.active-fortissima  { border-color: var(--err);    background: var(--err-bg);        color: var(--err); }
.int-btn[class*="active-min"] { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }

/* ---------- Lista de posições ---------- */
.pos-section { margin-bottom: 16px; }
.pos-section-title {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.pos-list { display: flex; flex-direction: column; gap: 5px; }
.pos-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surf2); border-radius: var(--r);
  border: 1px solid var(--ol-dim);
}
.pos-label {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  min-width: 108px; flex-shrink: 0; line-height: 1.3;
}
.pos-picker { flex: 1; min-width: 0; }

/* ---------- Picker autocomplete ---------- */
.picker-wrap { position: relative; }
.picker-inp, .ruptura-item-inp {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--ol-dim); border-radius: 6px;
  background: var(--bg); font-size: .875rem; color: var(--text);
  transition: border-color .15s;
}
.picker-inp:focus, .ruptura-item-inp:focus { outline: none; border-color: var(--ol); }
.picker-inp.filled, .ruptura-item-inp.filled { border-color: var(--ok); color: var(--ok); }
.picker-inp.freelancer { border-color: var(--blue); color: var(--blue); }
.picker-inp.status-freelancer,
.picker-inp.status-semana_teste,
.picker-inp.status-folga,
.picker-inp.status-outro {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-bg);
}
.picker-inp.status-vazia,
.picker-inp.status-falta {
  border-color: var(--err);
  color: var(--err);
  background: var(--err-bg);
}
.ruptura-item-inp:disabled { opacity: .5; cursor: not-allowed; }
.picker-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 14px; color: var(--faint); padding: 0;
}
.picker-clear:hover { color: var(--err); }
.picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surf); border: 1px solid var(--ol-mid);
  border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.4);
  max-height: 220px; overflow-y: auto; z-index: 200;
}
.picker-opt {
  padding: 9px 12px; cursor: pointer; font-size: .875rem;
  border-bottom: 1px solid var(--ol-dim); line-height: 1.3;
}
.picker-opt:last-child { border-bottom: none; }
.picker-opt:hover, .picker-opt.hl { background: var(--surf2); }
.picker-opt-cargo { font-size: .75rem; color: var(--muted); }
.picker-empty { padding: 10px 12px; color: var(--muted); font-size: .875rem; }
.picker-freelancer-hint {
  padding: 8px 12px; font-size: .8rem; color: var(--blue);
  border-top: 1px solid var(--ol-dim); cursor: pointer; font-weight: 700;
}
.picker-freelancer-hint:hover { background: var(--surf2); }
.picker-special-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--ol-dim);
}
.picker-special {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--blue);
  padding: 8px 9px;
  text-align: left;
  font-size: .8rem;
  font-weight: 750;
}
.picker-special:hover { background: var(--surf2); }
.pos-status-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}
.pos-status-freelancer,
.pos-status-semana_teste,
.pos-status-folga,
.pos-status-outro {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}
.pos-status-vazia,
.pos-status-falta {
  border-color: var(--err-border);
  background: var(--err-bg);
}

/* ---------- Extras ---------- */
.extra-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--blue-bg); border: 1px solid var(--blue-border);
  border-radius: var(--r); font-size: .875rem;
}
.extra-nome  { flex: 1; font-weight: 600; color: var(--blue); }
.extra-cargo { font-size: .75rem; color: var(--muted); }
.extra-remove { background: none; border: none; color: var(--err); font-size: 16px; padding: 0; }

/* ---------- Rupturas ---------- */
.ruptura-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--err-bg); border: 1px solid var(--err-border);
  border-radius: var(--r); font-size: .875rem;
}
.ruptura-cat  { font-size: .7rem; font-weight: 700; color: var(--err); text-transform: uppercase; letter-spacing: .04em; min-width: 58px; flex-shrink: 0; }
.ruptura-name { flex: 1; color: var(--text); }
.ruptura-remove { background: none; border: none; color: var(--err); font-size: 16px; padding: 0; }

/* ---------- Alert strip ---------- */
.alert {
  display: flex; gap: 8px; padding: 10px 12px;
  border-radius: var(--r); font-size: .8125rem; align-items: flex-start;
}
.alert-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.alert-err  { background: var(--err-bg);  color: var(--err);  border: 1px solid var(--err-border); }
.alert-ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-border); }
.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* ---------- Home / lista ---------- */
.home-header {
  background: var(--surf);
  border-bottom: 1px solid var(--ol-dim);
  padding: 16px;
}
.home-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.home-logo {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--ol-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ol);
}
.home-brand-name { font-size: 1rem; font-weight: 800; color: var(--text); }
.home-brand-sub  { font-size: .8rem; color: var(--muted); margin-top: -2px; }

.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--surf); border-bottom: 1px solid var(--ol-dim);
}
.month-nav-label { font-weight: 700; font-size: .9375rem; color: var(--text); }
.month-nav-btn   { background: none; border: none; font-size: 20px; color: var(--muted); padding: 4px 6px; }
.month-nav-btn:hover { color: var(--text); }

.filter-row {
  display: flex; gap: 6px; padding: 10px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--surf); border-bottom: 1px solid var(--ol-dim);
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--ol-dim); background: var(--bg);
  font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: all .15s;
}
.filter-chip.active { border-color: var(--ol); background: rgba(116,114,93,.15); color: var(--ol); }

.quadros-list {
  flex: 1; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}

.quadro-card {
  background: var(--surf); border: 1px solid var(--ol-dim);
  border-radius: var(--r); padding: 13px 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
  border-left: 3px solid transparent;
}
.quadro-card:hover { background: var(--surf2); }
.quadro-card:active { transform: scale(.99); }
.quadro-card.has-alert   { border-left-color: var(--warn); }
.quadro-card.has-ruptura { border-left-color: var(--err); }
.quadro-card.ok          { border-left-color: var(--ok); }

.qc-row1  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qc-date  { font-size: .75rem; color: var(--muted); }
.qc-nome  { font-weight: 700; font-size: .9375rem; margin-top: 1px; }
.qc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.qc-ints   { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.qc-int    { font-size: .75rem; color: var(--muted); }
.qc-int b  { color: var(--text); }

.empty-state { text-align: center; padding: 56px 16px; color: var(--muted); }
.empty-state-icon { font-size: 36px; margin-bottom: 12px; opacity: .5; }
.empty-state p { font-size: .9375rem; }

.fab {
  position: fixed; bottom: 20px;
  left: 50%; transform: translateX(-50%);
  background: var(--ol); color: var(--bg);
  border: none; border-radius: 999px;
  padding: 13px 24px; font-size: .9rem; font-weight: 700;
  box-shadow: 0 4px 20px rgba(116,114,93,.35);
  display: flex; align-items: center; gap: 8px; z-index: 50;
}
.fab:hover { background: var(--ol-bright); }
.fab:active { transform: translateX(-50%) scale(.97); }

/* ---------- Form view ---------- */
.form-view {
  flex: 1; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.section-label {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 9px;
}
.section-card {
  background: var(--surf); border: 1px solid var(--ol-dim);
  border-radius: var(--r); padding: 14px;
}

/* ---------- Detail / visualização ---------- */
.detail-view { flex: 1; overflow-y: auto; }

.detail-hero {
  background: var(--surf);
  border-bottom: 1px solid var(--ol-dim);
  padding: 18px 16px;
}
.detail-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.detail-hero h2  { font-size: 1.0625rem; font-weight: 800; color: var(--text); }
.detail-hero .meta { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.detail-hero .badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }

.detail-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.detail-sector-title {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}

.detail-pos-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--ol-dim);
  font-size: .875rem;
}
.detail-pos-row:last-child { border-bottom: none; }
.detail-pos-label { width: 106px; flex-shrink: 0; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.detail-pos-name  { flex: 1; font-weight: 600; color: var(--text); }
.detail-pos-name.vazio { color: var(--faint); font-style: italic; font-weight: 400; }
.detail-pos-cargo { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.detail-pos-row.detail-status-freelancer,
.detail-pos-row.detail-status-semana_teste,
.detail-pos-row.detail-status-folga,
.detail-pos-row.detail-status-outro {
  margin: 4px 0;
  padding: 8px 10px;
  border: 1px solid var(--warn-border);
  border-radius: var(--r);
  background: var(--warn-bg);
}
.detail-pos-row.detail-status-vazia,
.detail-pos-row.detail-status-falta {
  margin: 4px 0;
  padding: 8px 10px;
  border: 1px solid var(--err-border);
  border-radius: var(--r);
  background: var(--err-bg);
}
.detail-pos-special { color: var(--warn); }
.detail-status-vazia .detail-pos-special,
.detail-status-falta .detail-pos-special { color: var(--err); }
.detail-pos-motivo { color: var(--muted); }
.badge-status {
  margin-left: 6px;
  font-size: .62rem;
  vertical-align: 1px;
}
.badge-status-freelancer,
.badge-status-semana_teste,
.badge-status-folga,
.badge-status-outro {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge-status-vazia,
.badge-status-falta {
  background: var(--err-bg);
  color: var(--err);
}

.action-bar {
  padding: 10px 14px; display: flex; gap: 8px;
  background: var(--surf); border-top: 1px solid var(--ol-dim);
  position: sticky; bottom: 0;
}

/* ---------- WhatsApp preview ---------- */
.wpp-preview {
  background: #0d2b25; color: #d4edda;
  border: 1px solid rgba(58,171,130,.3);
  border-radius: var(--r); padding: 12px 14px;
  font-size: .8125rem; line-height: 1.55;
  white-space: pre-wrap; font-family: 'Courier New', monospace;
  word-break: break-word; max-height: 280px; overflow-y: auto;
}

/* ---------- Dashboard ---------- */
.dash-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 12px;
}

/* stats cards */
.dash-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.dash-stats-3 { grid-template-columns: repeat(3, 1fr); }

.stat-card {
  background: var(--surf); border: 1px solid var(--ol-dim);
  border-radius: var(--r); padding: 14px 12px;
}
.stat-card .num { font-size: 1.875rem; font-weight: 800; color: var(--ol); line-height: 1; }
.stat-card .lbl { font-size: .7rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* charts layout */
.dash-charts {
  display: flex; flex-direction: column; gap: 12px;
}
.dash-chart-card { flex: 1; min-width: 0; }
.dash-chart-body {
  padding: 14px;
  position: relative; height: 230px;
}
.dash-chart-body canvas { position: absolute; inset: 14px; width: calc(100% - 28px) !important; height: calc(100% - 28px) !important; }

/* chart empty state */
.chart-empty {
  text-align: center; color: var(--muted); font-size: .875rem;
  padding-top: 70px;
}

.dash-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card-primary {
  background:
    linear-gradient(135deg, rgba(150,139,102,.16), rgba(14,58,69,.07)),
    var(--surf);
}
.stat-card .hint {
  color: var(--faint);
  font-size: .72rem;
  margin-top: 7px;
  line-height: 1.25;
}
.stat-card .stat-err { color: var(--err); }
.stat-card .stat-warn { color: var(--warn); }
.stat-card .stat-ok { color: var(--ok); }

.dash-attention-grid,
.dash-side-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.card-subtitle {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.dash-list-body {
  padding: 8px;
}

.dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-list-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--ol-dim);
  border-radius: 10px;
  background: rgba(255,255,255,.52);
}

.dash-list-row strong {
  display: block;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.25;
}

.dash-list-row span:not(.badge) {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  margin-top: 2px;
}

.dash-list-button {
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}

.dash-list-button:hover {
  background: var(--surf2);
  border-color: rgba(150,139,102,.42);
}

.dash-row-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.dash-more,
.dash-empty-line {
  color: var(--muted);
  font-size: .8rem;
  padding: 9px 10px;
}

.dash-table-wrap {
  padding: 0;
  overflow-x: auto;
}

.dash-unit-table th,
.dash-unit-table td {
  padding: 9px 10px;
  white-space: nowrap;
}

.dash-unit-table td:first-child {
  min-width: 190px;
}

.dash-unit-table td:first-child strong,
.dash-unit-table td:first-child span {
  display: block;
}

.dash-unit-table td:first-child span {
  color: var(--muted);
  font-size: .72rem;
  margin-top: 2px;
}

.cell-err { color: var(--err); font-weight: 800; }
.cell-warn { color: var(--warn); font-weight: 800; }

.dash-mix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mix-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: .86rem;
}

.mix-row small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.mix-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(14,58,69,.08);
  overflow: hidden;
}

.mix-bar i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ol), var(--brand-blue));
}

.mix-bar-warn i {
  background: linear-gradient(90deg, var(--warn), var(--err));
}

/* month nav inline na topbar */
.dash-month-nav { display: flex; align-items: center; gap: 2px; }
.dash-mes-label { font-size: .8125rem; font-weight: 700; color: var(--text); white-space: nowrap; padding: 0 4px; }

/* distribution table */
.dist-table th, .dist-table td { padding: 8px 10px; text-align: center; }
.dist-table th:first-child, .dist-table td:first-child { text-align: left; }
.dist-setor { font-weight: 700; color: var(--text); white-space: nowrap; }
.dist-total { font-weight: 700; color: var(--muted); }
.dist-pct   { display: block; font-size: .68rem; color: var(--faint); margin-top: 1px; }
.dist-cell-empty { color: var(--faint); }
.dist-cell-0 { color: var(--muted); }
.dist-cell-1 { color: var(--blue);  font-weight: 600; }
.dist-cell-2 { color: var(--ok);    font-weight: 600; }
.dist-cell-3 { color: var(--warn);  font-weight: 600; }
.dist-cell-4 { color: var(--err);   font-weight: 600; }

/* home header com botão dashboard */
.home-header {
  display: flex; align-items: center; justify-content: space-between;
}

/* chart-wrap legado (se houver) */
.chart-wrap  { padding: 0 14px 14px; }
.chart-title { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.chart-wrap canvas { max-height: 190px; }

/* ---------- Escala de referência ---------- */
.ref-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.ref-table th {
  text-align: left; padding: 5px 8px;
  color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--ol-dim);
}
.ref-table td { padding: 5px 8px; border-bottom: 1px solid var(--ol-dim); }
.ref-table tr:last-child td { border-bottom: none; }
.ref-abaixo { color: var(--err) !important; font-weight: 700; }
.ref-ok     { color: var(--ok); }

.ref-scroll { overflow-x: auto; }
.ref-full-table {
  min-width: 760px;
  text-align: center;
}
.ref-full-table th,
.ref-full-table td {
  text-align: center;
  padding: 8px 10px;
}
.ref-full-table th:first-child,
.ref-full-table th:nth-child(2),
.ref-full-table td:first-child,
.ref-full-table td:nth-child(2) {
  text-align: left;
}
.ref-turno {
  font-weight: 800;
  color: var(--text);
  vertical-align: middle;
  background: rgba(14,58,69,.04);
}
.ref-setor {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ref-cell {
  font-weight: 800;
  border-left: 1px solid var(--ol-dim);
}
.ref-fechada {
  background: #171717 !important;
  color: #fff !important;
}
.ref-producao {
  background: #4b235f !important;
  color: #fff !important;
}
.ref-min {
  background: rgba(14,58,69,.11) !important;
  color: var(--brand-blue) !important;
}
.ref-fraquissima {
  background: rgba(99,122,124,.12) !important;
  color: #5b6d6e !important;
}
.ref-fraca {
  background: rgba(47,157,114,.12) !important;
  color: #197450 !important;
}
.ref-media {
  background: rgba(200,132,36,.14) !important;
  color: #8b5d14 !important;
}
.ref-forte {
  background: rgba(200,79,73,.13) !important;
  color: #9b332e !important;
}
.ref-fortissima {
  background: rgba(191,29,35,.92) !important;
  color: #fff !important;
}
.ref-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}
.ref-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ref-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
}
.ref-status-card {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .82rem;
  font-weight: 800;
}

/* ---------- Toasts ---------- */
#toasts {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 5px; z-index: 999; pointer-events: none;
  width: min(calc(100vw - 28px), 452px);
}
.toast {
  padding: 10px 16px; border-radius: var(--r);
  font-size: .875rem; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: auto;
  animation: slideup .2s ease-out;
}
.toast.info    { background: var(--surf3);  color: var(--text); border: 1px solid var(--ol-mid); }
.toast.success { background: var(--ok);     color: #fff; }
.toast.error   { background: var(--err);    color: #fff; }
.toast.warn    { background: var(--warn);   color: var(--bg); }

@keyframes slideup {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Loading ---------- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--ol-dim);
  border-top-color: var(--ol);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-state { text-align: center; padding: 40px 16px; }
.loading-state p { margin-top: 12px; color: var(--muted); font-size: .875rem; }

/* ---------- UX refinements: home + dashboard ---------- */
.home-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-new-btn {
  display: none;
}

.home-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.home-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background: rgba(255,254,250,.82);
  box-shadow: 0 10px 24px rgba(14,58,69,.06);
}

.home-summary strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-summary span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.quadros-list {
  padding-bottom: 92px;
}

.fab {
  bottom: max(18px, env(safe-area-inset-bottom));
}

.dash-command-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background:
    linear-gradient(135deg, rgba(14,58,69,.06), rgba(150,139,102,.10)),
    rgba(255,254,250,.92);
  box-shadow: var(--shadow);
}

.dash-command-strip > div {
  min-width: 0;
}

.dash-command-kicker {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}

.dash-command-strip strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.25;
}

.dash-command-strip p {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  margin-top: 4px;
}

.dash-command-warn {
  border-left: 4px solid var(--warn);
}

.dash-command-err {
  border-left: 4px solid var(--err);
}

.dash-command-ok {
  border-left: 4px solid var(--ok);
}

.dash-list-row {
  background: rgba(255,254,250,.86);
  border-radius: var(--r);
}

.dash-list-button:focus-visible,
.filter-chip:focus-visible,
.btn:focus-visible,
.fab:focus-visible {
  outline: 3px solid rgba(30,111,145,.24);
  outline-offset: 2px;
}

.ref-table {
  width: 100%;
}

/* ---------- Utilitários ---------- */
.divider   { height: 1px; background: var(--ol-dim); margin: 6px 0; }
.text-muted { color: var(--muted); }
.text-sm   { font-size: .8125rem; }
.flex      { display: flex; }
.flex-1    { flex: 1; }
.items-center { align-items: center; }
.gap-6     { gap: 6px; }
.gap-8     { gap: 8px; }
.mt-8      { margin-top: 8px; }
.mt-12     { margin-top: 12px; }
.justify-between { justify-content: space-between; }

/* ======================================================
   Responsive — mobile-first, expande a partir de 640 px
   ====================================================== */

@media (min-width: 640px) {
  #app { max-width: 760px; }

  /* Padding lateral maior */
  .home-header  { padding: 18px 24px; }
  .month-nav    { padding-left: 20px; padding-right: 20px; }
  .filter-row   { padding-left: 20px; padding-right: 20px; flex-wrap: wrap; overflow-x: visible; }
  .quadros-list { padding: 14px 20px; }
  .form-view    { padding: 18px 20px; gap: 14px; }
  .detail-body  { padding: 14px 20px; }
  .detail-hero  { padding: 20px 24px; }
  .action-bar   { padding: 12px 20px; }

  /* Topbar: aumenta um pouco */
  .topbar { padding: 0 20px; height: 56px; }

  /* Home: cards em grid 2 colunas por grupo de data */
  .cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Detalhe: setores em 2 colunas */
  .setores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  /* Formulário: pares de campos lado a lado */
  .form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-2col .form-group { margin-bottom: 0; }

  /* Intensity buttons um pouco maiores */
  .int-btn { padding: 10px 4px; font-size: .75rem; }

  /* Action bar: botões não esticam demais */
  .action-bar { gap: 12px; }

  /* Toast proporcionalmente mais largo */
  #toasts { width: min(calc(100vw - 40px), 730px); }

  .home-new-btn {
    display: inline-flex;
  }

  .home-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quadros-list {
    padding-bottom: 24px;
  }

  .fab {
    display: none;
  }

  .dash-command-strip {
    grid-template-columns: 1.3fr 1fr .8fr;
    gap: 16px;
    padding: 16px 18px;
  }

  /* Dashboard: charts lado a lado */
  .dash-charts { flex-direction: row; }
  .dash-body   { padding: 16px 20px; }
  .dash-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-attention-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-side-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
}

@media (min-width: 1024px) {
  #app { max-width: 1180px; }

  /* Home: 4 colunas */
  .cards-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Action bar: botões de tamanho razoável no desktop */
  .action-bar { justify-content: flex-end; }
  .action-bar .flex-1 { flex: 0 0 auto; min-width: 180px; }

  /* Form: padding maior */
  .form-view { padding: 22px 28px; }
  .detail-body { padding: 18px 28px; }
  .dash-body   { padding: 20px 28px; }
  .detail-hero { padding: 24px 28px; }
  .dash-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  #toasts { width: min(calc(100vw - 40px), 950px); }
}

@media (min-width: 1320px) {
  #app { max-width: 1240px; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #111; }
  :root { color-scheme: light; }
  .topbar, #toasts, .action-bar, .fab, .print-hide { display: none !important; }
  #app { max-width: 100%; }
  .card, .section-card { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  .detail-hero { background: #1a1a1a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wpp-preview { display: none !important; }
  .detail-pos-row { border-bottom: 1px solid #eee; }
}

/* ============================================================
   Design system claro — Grupo 3V / Cantucci
   Mantém azul + bege como assinatura, mas troca a base escura
   por branco/cinza quente para uso diário mais confortável.
   ============================================================ */

:root {
  --bg:        #f4f1ea;
  --surf:      #fffefa;
  --surf2:     #f8f5ee;
  --surf3:     #eee7d9;
  --ol:        #968b66;
  --ol-dim:    rgba(22,58,66,.14);
  --ol-mid:    rgba(22,58,66,.28);
  --ol-bright: #7f7554;
  --text:      #173a43;
  --muted:     #637a7c;
  --faint:     #8d9b9a;
  --brand-blue:#0e3a45;
  --brand-blue-2:#123f4b;
  --ok:        #2f9d72;
  --ok-bg:     rgba(47,157,114,.12);
  --ok-border: rgba(47,157,114,.28);
  --warn:      #c88424;
  --warn-bg:   rgba(200,132,36,.13);
  --warn-border:rgba(200,132,36,.30);
  --err:       #c84f49;
  --err-bg:    rgba(200,79,73,.12);
  --err-border:rgba(200,79,73,.30);
  --blue:      #1e6f91;
  --blue-bg:   rgba(30,111,145,.12);
  --blue-border:rgba(30,111,145,.28);
  --shadow: 0 14px 34px rgba(14,58,69,.10);
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at top left, rgba(150,139,102,.18), transparent 32rem),
    linear-gradient(180deg, #fbfaf6 0, var(--bg) 40%);
  color: var(--text);
}

#app {
  background: transparent;
}

.topbar {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(14,58,69,.12);
}

.topbar-back,
.topbar-subtitle,
.month-nav-btn,
.dash-mes-label {
  color: rgba(255,255,255,.76);
}

.topbar-back:hover,
.month-nav-btn:hover {
  color: #fff;
}

.topbar-logo,
.home-logo {
  background: var(--brand-blue);
  border-color: rgba(150,139,102,.55);
  color: #f3ead3;
}

.home-header {
  background: rgba(255,254,250,.92);
  border-bottom: 1px solid var(--ol-dim);
  box-shadow: 0 10px 28px rgba(14,58,69,.08);
}

.home-brand-name,
.topbar-title,
.month-nav-label,
.qc-nome,
.detail-hero h2,
.card-header h3,
.section-label,
.pos-section-title,
.detail-sector-title,
.dist-setor {
  color: var(--text);
}

.month-nav,
.filter-row,
.action-bar {
  background: rgba(255,254,250,.90);
  border-color: var(--ol-dim);
}

.filter-chip,
.seg-btn,
.int-btn,
.btn-ghost,
.btn-icon {
  background: #fff;
  border-color: var(--ol-dim);
  color: var(--muted);
}

.filter-chip.active,
.btn-ghost:hover,
.btn-icon:hover {
  background: var(--surf3);
  border-color: rgba(150,139,102,.45);
  color: var(--text);
}

.btn-primary,
.fab {
  background: var(--ol);
  color: #fff;
  box-shadow: 0 12px 26px rgba(150,139,102,.22);
}

.btn-primary:hover,
.fab:hover {
  background: var(--ol-bright);
}

.card,
.section-card,
.stat-card,
.quadro-card,
.detail-hero {
  background: var(--surf);
  border-color: var(--ol-dim);
  box-shadow: var(--shadow);
}

.quadro-card:hover,
.pos-item,
.picker-opt:hover,
.picker-opt.hl {
  background: var(--surf2);
}

.form-control,
.picker-inp,
.ruptura-item-inp {
  background: #fff;
  border-color: var(--ol-dim);
  color: var(--text);
}

.form-control:focus,
.picker-inp:focus,
.ruptura-item-inp:focus {
  border-color: var(--ol);
  box-shadow: 0 0 0 3px rgba(150,139,102,.14);
}

select.form-control option,
.picker-dropdown {
  background: #fff;
  color: var(--text);
}

.picker-dropdown {
  border-color: rgba(22,58,66,.22);
  box-shadow: 0 16px 40px rgba(14,58,69,.16);
}

.badge-fraquissima { background: rgba(99,122,124,.13); color: #5b6d6e; }
.badge-fraca       { background: var(--blue-bg); color: #1e6f91; }
.badge-media       { background: var(--ok-bg); color: #197450; }
.badge-forte       { background: var(--warn-bg); color: #8b5d14; }
.badge-fortissima  { background: var(--err-bg); color: #9b332e; }
.badge-dia         { background: rgba(200,132,36,.14); color: #8b5d14; }
.badge-noite       { background: rgba(14,58,69,.12); color: var(--brand-blue); }

.alert-warn,
.alert-err,
.alert-ok,
.extra-item,
.ruptura-item {
  box-shadow: none;
}

.wpp-preview {
  background: #f7f4ed;
  color: #173a43;
  border-color: var(--ol-dim);
}

.ref-table th,
.ref-table td,
.detail-pos-row {
  border-color: var(--ol-dim);
}

.toast.info {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--ol-dim);
}

.toast.warn {
  color: #fff;
}

/* Final UX overrides for the operational board. Keep after the light theme. */
.home-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-new-btn {
  display: inline-flex;
}

.home-summary > div,
.dash-list-row {
  background: rgba(255,254,250,.88);
}

.quadros-list {
  padding-bottom: 24px;
}

.fab {
  display: none;
}

.dash-command-strip {
  background:
    linear-gradient(135deg, rgba(14,58,69,.06), rgba(150,139,102,.10)),
    rgba(255,254,250,.94);
}

@media (min-width: 640px) {
  .home-new-btn {
    display: inline-flex;
  }

  .quadros-list {
    padding-bottom: 24px;
  }
}

/* ---------- Dashboard executivo ---------- */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ol-dim);
  border-left: 4px solid var(--ok);
  border-radius: var(--r);
  background: rgba(255,254,250,.94);
  box-shadow: var(--shadow);
}

.dash-hero-warn { border-left-color: var(--warn); }
.dash-hero-critical { border-left-color: var(--err); }
.dash-hero-ok { border-left-color: var(--ok); }

.dash-eyebrow,
.dash-command-kicker {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dash-hero h2 {
  margin-top: 6px;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.dash-hero p {
  color: var(--muted);
  font-size: .86rem;
  margin-top: 7px;
}

.dash-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.dash-hero-meta span {
  border: 1px solid var(--ol-dim);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--surf2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.dash-hero-side {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background: var(--surf2);
}

.dash-hero-side strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 1rem;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-kpi {
  min-width: 0;
  min-height: 104px;
  padding: 14px 12px;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background: var(--surf);
  box-shadow: var(--shadow);
}

.dash-kpi span,
.dash-score span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-kpi strong {
  display: block;
  margin-top: 8px;
  color: var(--brand-blue);
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.dash-kpi small {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: .74rem;
  line-height: 1.25;
}

.dash-kpi-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.dash-kpi-critical {
  background: var(--err-bg);
  border-color: var(--err-border);
}

.dash-kpi-ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.dash-kpi-warn strong { color: var(--warn); }
.dash-kpi-critical strong { color: var(--err); }
.dash-kpi-ok strong { color: var(--ok); }

.dash-data-caveat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn);
  border-radius: var(--r);
  background: var(--warn-bg);
}

.dash-data-caveat strong {
  color: var(--warn);
  font-size: .82rem;
}

.dash-data-caveat span {
  color: var(--text);
  font-size: .82rem;
}

.dash-action-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-segment {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dash-segment::-webkit-scrollbar { display: none; }

.dash-segment button {
  flex: 0 0 auto;
  border: 1px solid var(--ol-dim);
  border-radius: 999px;
  background: var(--surf);
  color: var(--muted);
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 800;
}

.dash-segment button.active {
  border-color: rgba(150,139,102,.48);
  background: var(--surf3);
  color: var(--text);
}

.dash-unit-select {
  display: grid;
  gap: 5px;
}

.dash-unit-select span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.dash-unit-select select {
  width: 100%;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background: var(--surf);
  color: var(--text);
  padding: 8px 10px;
}

.dash-action-card .card-body {
  padding: 10px;
}

.dash-action-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dash-action-item {
  position: relative;
  width: 100%;
  display: grid;
  gap: 5px;
  text-align: left;
  border: 1px solid var(--ol-dim);
  border-left: 4px solid var(--muted);
  border-radius: var(--r);
  background: var(--surf);
  color: inherit;
  padding: 12px;
}

button.dash-action-item:hover {
  background: var(--surf2);
  border-color: rgba(150,139,102,.42);
}

.dash-action-critical {
  border-left-color: var(--err);
  background: var(--err-bg);
}

.dash-action-warn {
  border-left-color: var(--warn);
  background: var(--warn-bg);
}

.dash-action-ok {
  border-left-color: var(--ok);
  background: var(--ok-bg);
}

.dash-action-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.dash-action-item strong {
  color: var(--text);
  font-size: .96rem;
  line-height: 1.25;
}

.dash-action-item p {
  color: var(--text);
  font-size: .83rem;
  line-height: 1.35;
}

.dash-action-item small {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}

.dash-action-item em {
  color: var(--brand-blue);
  font-size: .76rem;
  font-style: normal;
  font-weight: 850;
}

.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.dash-section-head h3 {
  color: var(--text);
  font-size: 1rem;
}

.dash-section-head span {
  color: var(--muted);
  font-size: .78rem;
}

.dash-unit-grid,
.dash-diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.dash-unit-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--ol-dim);
  border-radius: var(--r);
  background: var(--surf);
  box-shadow: var(--shadow);
}

.dash-unit-card.has-risk {
  border-left: 4px solid var(--warn);
}

.dash-unit-card.is-ok {
  border-left: 4px solid var(--ok);
}

.dash-unit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.dash-unit-head strong {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.2;
}

.dash-unit-head span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.coverage-bar {
  height: 8px;
  margin: 12px 0;
  border-radius: 999px;
  background: var(--surf3);
  overflow: hidden;
}

.coverage-bar i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: var(--ok);
}

.coverage-bar i.warn { background: var(--warn); }
.coverage-bar i.critical { background: var(--err); }

.dash-unit-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dash-score {
  min-width: 0;
  padding: 8px;
  border-radius: var(--r);
  background: var(--surf2);
}

.dash-score b {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dash-score.ok { background: var(--ok-bg); }
.dash-score.warn { background: var(--warn-bg); }
.dash-score.critical { background: var(--err-bg); }
.dash-score.ok b { color: var(--ok); }
.dash-score.warn b { color: var(--warn); }
.dash-score.critical b { color: var(--err); }

@media (min-width: 640px) {
  .dash-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr);
    padding: 18px;
  }

  .dash-hero h2 {
    font-size: 1.35rem;
  }

  .dash-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dash-action-controls {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
  }

  .dash-unit-select {
    width: min(320px, 36vw);
  }

  .dash-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dash-action-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-unit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-diagnostic-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .75fr);
  }
}