:root{
  --bg: #0b0c0e;
  --panel: #131417;
  --panel-2: #1a1b1f;
  --border: #26282e;
  --border-soft: #1f2024;
  --text: #e9e9ea;
  --text-dim: #9a9ba1;
  --text-faint: #5f6068;
  --orange: #f97316;
  --orange-dim: #f9731633;
  --green: #22c55e;
  --green-dim: #22c55e22;
  --red: #ef4444;
  --red-dim: #ef444422;
  --amber: #f59e0b;
  --amber-dim: #f59e0b22;
  --gray-dot: #7a7b83;
  --radius: 10px;
  --radius-sm: 7px;
  --mono: 'SF Mono', 'Consolas', 'Menlo', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.wrap{ max-width: 1440px; margin: 0 auto; padding: 22px 24px 60px; }
button{ font-family: inherit; }
a{ color:inherit; }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.logo-chip{ background:#fff; border-radius:8px; padding:8px 14px; display:flex; align-items:center; }
.brand img{ height: 34px; width:auto; display:block; }
.brand-text-col{ display:flex; flex-direction:column; gap:2px; }
.brand-title{ font-size:26px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; color:var(--text); line-height:1.1; }
.last-updated{ font-size:12px; color:var(--text-faint); font-weight:600; }
.brand-divider{ width:1px; height:32px; background:var(--border); }
.topbar-actions{ display:flex; align-items:center; gap:10px; }

.btn{
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-sm);
  cursor: pointer; display:flex; align-items:center; gap:7px; transition: all .15s ease; white-space: nowrap;
}
.btn:hover{ background:#212226; border-color:#33353c; }
.btn.primary{ background: var(--orange); border-color: var(--orange); color: #16110a; }
.btn.primary:hover{ background:#fb8534; }
.btn.ghost{ background: transparent; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn svg{ width:14px; height:14px; }
.btn.small{ padding:7px 12px; font-size:13px; }

.user-chip{
  display:flex; align-items:center; gap:8px;
  background: var(--green-dim); color: var(--green);
  border:1px solid #22c55e44; padding:8px 13px; border-radius: 999px;
  font-size:14px; font-weight:700;
}
.user-chip .dot{ width:7px;height:7px;border-radius:50%; background:var(--green); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 22px; overflow-x:auto; }
.tab-btn{
  background:none; border:none; color: var(--text-faint); font-size:14.5px; font-weight:700;
  padding: 13px 18px; cursor:pointer; border-bottom: 2px solid transparent; white-space:nowrap;
  text-transform: uppercase; letter-spacing:0.3px;
}
.tab-btn:hover{ color: var(--text-dim); }
.tab-btn.active{ color: var(--orange); border-bottom-color: var(--orange); }
.tab-lock-icon{ width:12px; height:12px; margin-left:5px; vertical-align:-1px; display:none; }
.tab-btn.locked-tab{ opacity:0.5; cursor:not-allowed; }
.tab-btn.locked-tab .tab-lock-icon{ display:inline-block; }

/* ---------- Sub-abas de mês ---------- */
.month-tabs-scroll{ overflow-x:auto; }
.month-tabs{ display:flex; gap:6px; min-width:max-content; }
.month-tab{
  background: var(--panel-2); border:1px solid var(--border); color:var(--text-dim);
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px; cursor:pointer;
  white-space:nowrap; transition: all .15s ease;
}
.month-tab:hover{ color:var(--text); border-color:#3a3c44; }
.month-tab.active{ background: var(--orange); border-color: var(--orange); color:#16110a; }

/* ---------- Lista de vendedores ---------- */
.vendedores-list{ display:flex; flex-wrap:wrap; gap:8px; }
.vendedor-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border);
  border-radius:999px; padding:7px 8px 7px 14px; font-size:13px; font-weight:600; color:var(--text);
}
.vendedor-chip .del-vendedor{
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-faint); cursor:pointer;
}
.vendedor-chip .del-vendedor:hover{ background:var(--red-dim); color:var(--red); }
.vendedor-chip .del-vendedor svg{ width:12px; height:12px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: tabFadeIn .35s ease; }
@keyframes tabFadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.chart-card, .panel{ animation: cardFadeIn .4s ease; }
@keyframes cardFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Section header ---------- */
.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; justify-content:space-between; }
.section-title-row{ display:flex; align-items:center; gap:12px; }
.badge-num{ background: var(--orange); color: #16110a; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 5px; letter-spacing: 0.5px; }
.section-icon{ display:flex; align-items:center; color: var(--orange); opacity:0.85; }
.section-icon svg{ width:19px; height:19px; }
.section-title{ font-size: 22px; font-weight: 800; letter-spacing: 0.3px; margin: 0; text-transform: uppercase; }

/* ---------- KPI / Panels ---------- */
.panel{ background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.chart-grid{ display:grid; grid-template-columns: 1fr; gap:18px; }
.chart-card{ background: linear-gradient(180deg, #15161a 0%, #131417 100%); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 24px 26px; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5); }
.chart-card h3{ margin:0 0 4px; font-size:15.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); }
.chart-card .chart-sub{ font-size:13.5px; color:var(--text-faint); margin: 0 0 20px; }

/* ---------- KPIs (Faturamento) ---------- */
.fat-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.fat-kpis .kpi{
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 8px 24px -14px rgba(0,0,0,0.5);
}
.fat-kpis .kpi .label{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; margin-bottom:8px; }
.fat-kpis .kpi .value{ font-size:26px; font-weight:800; color:var(--text); font-variant-numeric: tabular-nums; }
.fat-kpis .kpi.accent .value{ color: var(--orange); }
.kpi-delta{ display:flex; align-items:center; gap:4px; margin-top:8px; font-size:12.5px; font-weight:700; }
.kpi-delta.up{ color: var(--green); }
.kpi-delta.down{ color: var(--red); }
.kpi-delta.flat{ color: var(--text-faint); }
@media (max-width: 900px){ .fat-kpis{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .fat-kpis{ grid-template-columns: 1fr; } }

/* ---------- Meta mensal ---------- */
.meta-card{ padding: 22px 26px; }
.meta-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.meta-progress-bar{ width:100%; height:14px; background:var(--panel-2); border-radius:999px; overflow:hidden; border:1px solid var(--border-soft); }
.meta-progress-fill{ height:100%; background: linear-gradient(90deg, #16a34a, #4ade80); border-radius:999px; transition: width .6s ease; width:0%; }
.meta-progress-fill.over{ background: linear-gradient(90deg, #f97316, #fb923c); }
.meta-progress-label{ margin-top:10px; font-size:13.5px; color:var(--text-dim); font-weight:600; }

/* ---------- Resumo por O.F. ---------- */
.progress-cell{ display:flex; align-items:center; gap:10px; min-width:140px; }
.progress-mini-bar{ flex:1; height:8px; background:var(--panel-2); border-radius:999px; overflow:hidden; border:1px solid var(--border-soft); }
.progress-mini-fill{ height:100%; background: linear-gradient(90deg, #16a34a, #4ade80); border-radius:999px; }
.progress-mini-fill.over{ background: linear-gradient(90deg, #f97316, #fb923c); }
.progress-pct{ font-size:12.5px; font-weight:800; color:var(--text-dim); min-width:38px; text-align:right; }
input.contrato-input{
  background:#202127; border:none; color:inherit; font-family:inherit; font-size:inherit;
  font-weight:inherit; padding:2px 4px; margin:-2px -4px; border-radius:5px; width:120px;
  box-shadow:0 0 0 1px var(--orange); outline:none;
}
.contrato-field{ display:inline-flex; align-items:center; }
.contrato-text{ border-radius:5px; padding:2px 4px; margin:-2px -4px; }
.tab-panel:not(.locked) .contrato-field:hover .contrato-text{ background:#1e1f24; cursor:pointer; }
.contrato-text.empty{ color:var(--text-faint); font-style:italic; }
.chart-canvas-wrap{ position:relative; }

.donut-wrap{ display:flex; align-items:center; gap: 30px; flex-wrap:wrap; justify-content:center; }
.donut-canvas-box{ position:relative; width:220px; height:220px; flex-shrink:0; }
.donut-canvas-box canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.donut-center .pct{ font-size:34px; font-weight:800; color:var(--green); }
.donut-center .lbl{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.donut-legend{ display:flex; flex-direction:column; gap:12px; }
.legend-item{ display:flex; align-items:center; gap:12px; background: var(--panel-2); border:1px solid var(--border-soft); border-radius:10px; padding:12px 16px; min-width:220px; }
.legend-swatch{ width:14px; height:14px; border-radius:5px; flex-shrink:0; box-shadow: 0 2px 8px -1px rgba(0,0,0,0.4); }
.legend-item .lname{ font-size:15px; font-weight:700; }
.legend-item .lcount{ font-size:23px; font-weight:800; margin-left:auto; padding-left:20px; }
.legend-item.ok .lname{ color:var(--green); } .legend-item.ok .lcount{ color:var(--green); }
.legend-item.nok .lname{ color:var(--red); } .legend-item.nok .lcount{ color:var(--red); }

/* ---------- Toolbar (search only) ---------- */
.panel-head{
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap: wrap;
}
.search-box{ position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search-box svg{ position:absolute; left: 12px; top: 50%; transform: translateY(-50%); width:15px; height:15px; color: var(--text-faint); }
.search-box input{
  width:100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; padding: 11px 14px 11px 36px; border-radius: var(--radius-sm); outline: none;
}
.search-box input:focus{ border-color: var(--orange); }
.search-box input::placeholder{ color: var(--text-faint); }
.lock-note{ font-size:13px; color:var(--text-faint); display:flex; align-items:center; gap:6px; }
.lock-note svg{ width:13px;height:13px; }

/* ---------- Table ---------- */
.table-scroll{ overflow-x: auto; }
table{ width: 100%; border-collapse: collapse; font-size: 15.5px; table-layout: auto; }
thead th{
  text-align:left; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint);
  font-weight: 700; padding: 14px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
tbody tr{ border-bottom: 1px solid var(--border-soft); transition: background .1s ease; }
tbody tr:hover{ background: #17181c; }
tbody tr.overdue-row{ background: #1c1310; }
tbody tr.overdue-row:hover{ background: #22160f; }
tbody td{ padding: 11px 14px; vertical-align: middle; color: var(--text); }
td.of-cell{ color: var(--orange); font-weight: 700; font-family: var(--mono); font-size: 14px; }
td.cliente-cell{ font-weight: 600; }
.cliente-cell-inner{ display:flex; align-items:center; gap:9px; }
.client-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; letter-spacing:0.2px;
}
td.mecavix-cell{ color: var(--text-dim); font-family: var(--mono); font-size: 13.5px; }
td.obs-cell{ color: var(--text-dim); font-size: 14px; max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.obs-cell:hover{ white-space:normal; overflow:visible; }
td.entrega-cell{ font-family: var(--mono); font-size: 14px; color: var(--text-dim); }
td.entrega-cell.overdue{ color: var(--red); font-weight:700; }
td.fat-valor-cell{ font-family: var(--mono); font-size: 15px; font-weight:800; color: var(--green); }
td.fat-mes-cell{ font-family: var(--mono); font-size: 13.5px; color: var(--text-dim); }
.date-field{ display:inline-flex; align-items:center; gap:5px; }
.date-text{ border-radius:5px; padding:2px 4px; margin:-2px -4px; }
.tab-panel:not(.locked) .date-field:hover .date-text{ background:#1e1f24; cursor:pointer; }
.cliente-field{ display:inline-flex; align-items:center; }
.cliente-text{ border-radius:5px; padding:2px 4px; margin:-2px -4px; }
.tab-panel:not(.locked) .cliente-field:hover .cliente-text{ background:#1e1f24; cursor:pointer; }
input.cliente-input{
  background:#202127; border:none; color:inherit; font-family:inherit; font-size:inherit;
  font-weight:inherit; padding:2px 4px; margin:-2px -4px; border-radius:5px; width:180px;
  box-shadow:0 0 0 1px var(--orange); outline:none;
}
input[type="date"].date-input{
  background:#202127; border:none; color:inherit; font-family:inherit; font-size:inherit;
  font-weight:inherit; padding:2px 4px; margin:-2px -4px; border-radius:5px;
  box-shadow:0 0 0 1px var(--orange); outline:none; color-scheme: dark;
}
input[type="date"].date-input::-webkit-calendar-picker-indicator{
  filter: invert(0.55) sepia(1) saturate(4) hue-rotate(360deg); cursor:pointer; opacity:0.8;
}
.warn-icon{ display:inline-block; margin-left: 5px; color: var(--amber); }

[contenteditable="true"]{ outline: none; border-radius: 5px; padding: 2px 4px; margin: -2px -4px; }
[contenteditable="true"]:hover{ background: #1e1f24; }
[contenteditable="true"]:focus{ background: #202127; box-shadow: 0 0 0 1px var(--orange); }
.locked [contenteditable]{ pointer-events:none; }
.locked .admin-only-col{ display:none; }
.priority-checkbox{ width:18px; height:18px; accent-color: var(--orange); cursor:pointer; }
.locked .priority-checkbox{ pointer-events:none; opacity:0.55; }

/* ---------- Checklist de material pendente (Suprimentos) ---------- */
.nok-of-block{ border-bottom:1px solid var(--border-soft); }
.nok-of-block:last-child{ border-bottom:none; }
.nok-of-header{ display:flex; align-items:center; gap:14px; padding:13px 16px; }
.nok-expand-btn{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font-size:13px; transition: transform .15s ease, color .15s ease; flex-shrink:0;
}
.nok-expand-btn.open{ transform: rotate(90deg); color:var(--orange); }
.nok-of-header .of-cell{ min-width:44px; }
.nok-of-header .cliente-cell-inner{ flex:1; min-width:160px; }
.nok-of-header .entrega-cell{ min-width:90px; }
.nok-item-count{
  font-size:11.5px; color:var(--text-faint); font-weight:700; background:var(--panel-2);
  border:1px solid var(--border-soft); padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.nok-add-btn{ flex-shrink:0; }
.nok-of-items{ padding: 2px 16px 16px 54px; }
.nok-items-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.nok-items-list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); border:1px solid var(--border-soft); border-radius:7px;
  padding:9px 12px; font-size:13px; color:var(--text-dim);
}
.nok-del-item{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nok-del-item svg{ width:13px; height:13px; }
.nok-del-item:hover{ color:var(--red); }
.nok-add-form{ display:flex; gap:8px; }
.nok-add-form input{
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:7px;
  padding:9px 12px; color:var(--text); font-size:13px; outline:none;
}
.nok-add-form input:focus{ border-color: var(--orange); }
.nok-empty-items{ font-size:12.5px; color:var(--text-faint); font-style:italic; padding:2px 0 10px; }
.locked select.inline-select{ pointer-events:none; opacity:0.85; }
.locked .row-actions{ display:none !important; }

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space:nowrap; border:none; }
.dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.status-pill.st-em-andamento{ background: var(--amber-dim); color: var(--amber); }
.status-pill.st-em-andamento .dot{ background: var(--amber); }
.status-pill.st-a-iniciar{ background: #2a2b30; color: var(--gray-dot); }
.status-pill.st-a-iniciar .dot{ background: var(--gray-dot); }
.status-pill.st-concluido{ background: var(--green-dim); color: var(--green); }
.status-pill.st-concluido .dot{ background: var(--green); }
select.status-pill, select.mat-pill{ appearance:none; -webkit-appearance:none; cursor:pointer; }

.mat-pill{ display:inline-flex; align-items:center; gap:6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; border:none; }
.mat-pill.ok{ background: var(--green-dim); color: var(--green); }
.mat-pill.ok .dot{ background: var(--green); }
.mat-pill.nok{ background: var(--red-dim); color: var(--red); }
.mat-pill.nok .dot{ background: var(--red); }

.row-actions{ display:flex; gap:6px; opacity:0; transition:opacity .1s ease; }
tbody tr:hover .row-actions{ opacity:1; }
.icon-btn{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; background: transparent; border: 1px solid transparent; color: var(--text-faint); cursor:pointer; }
.icon-btn:hover{ background:#232429; color: var(--text); border-color: var(--border); }
.icon-btn.del:hover{ color: var(--red); }
.icon-btn svg{ width:14px; height:14px; }

.empty-state{ padding: 50px 20px; text-align:center; color: var(--text-faint); }
.panel-foot{ padding: 13px 16px; border-top: 1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; color: var(--text-faint); font-size: 13.5px; }

/* ---------- Skeleton loading ---------- */
.skeleton{
  background: linear-gradient(90deg, #1a1b1f 25%, #212226 37%, #1a1b1f 63%);
  background-size: 400% 100%;
  animation: skeletonPulse 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeletonPulse{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.skeleton-row{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--border-soft); }
.skeleton-avatar{ width:26px; height:26px; border-radius:50%; flex-shrink:0; }
.skeleton-line{ height:13px; flex:1; max-width:160px; }
.skeleton-line.w-sm{ max-width:80px; }
.skeleton-chart{ width:100%; height:100%; min-height:200px; }

/* ---------- Gate de acesso ---------- */
.gate-overlay{
  position: fixed; inset:0; z-index: 100;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.gate-overlay.hidden{ display:none; }
.gate-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  width:100%; max-width: 380px; padding: 34px 30px; text-align:center;
}
.gate-logo{ display:inline-flex; margin-bottom:20px; }
.gate-logo img{ height:38px; }
.gate-card h2{ margin:0 0 8px; font-size:19px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; }
.gate-card p{ margin:0 0 20px; font-size:13px; color:var(--text-faint); line-height:1.5; }
.gate-card .field{ margin-bottom:14px; }
.gate-card .field input{ width:100%; text-align:center; letter-spacing:1px; font-size:15px; }
.gate-submit{ width:100%; justify-content:center; padding:11px; font-size:14px; }
.gate-card .form-error{ margin-bottom:12px; }

/* ---------- Login Modal ---------- */
.modal-backdrop{ display:none; position: fixed; inset:0; background: rgba(0,0,0,0.65); z-index: 60; align-items:center; justify-content:center; padding: 20px; }
.modal-backdrop.open{ display:flex; }
.modal{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; }
.modal.wide{ max-width: 560px; }
.modal-head{ padding: 18px 20px; border-bottom: 1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3{ margin:0; font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; }
.modal-body{ padding: 20px; display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:12.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; }
.field input, .field select, .field textarea{
  background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: 14.5px;
  padding: 10px 12px; border-radius: var(--radius-sm); outline:none; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--orange); }
.field input:disabled{ opacity:0.55; cursor:not-allowed; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-foot{ padding: 16px 20px; border-top: 1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:10px; }
.close-x{ background:none; border:none; color:var(--text-faint); cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.close-x:hover{ background:#232429; color:var(--text); }
.form-error{ font-size:14px; color: var(--red); display:none; }
.form-error.show{ display:block; }

/* ---------- Footer: Nova O.F. inline form ---------- */
.footer-form-wrap{ display:flex; justify-content:flex-end; margin-top: 26px; }
.footer-form-card{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:18px 20px; width:100%; max-width:640px; }
.footer-form-card h3{ margin:0 0 3px; font-size:15px; text-transform:uppercase; letter-spacing:0.5px; }
.footer-form-card .sub{ font-size:13.5px; color:var(--text-faint); margin:0 0 14px; }
.footer-form-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:12px; }
.footer-form-grid .field-full{ grid-column: 1 / -1; }
.disabled-note{ display:flex; align-items:center; gap:8px; color:var(--text-faint); font-size:14px; padding: 10px 0; }
.disabled-note svg{ width:15px;height:15px; }

/* ---------- Monitor Mode ---------- */
body.monitor-mode .wrap > .topbar,
body.monitor-mode .wrap > .tabs,
body.monitor-mode #tab-clientes,
body.monitor-mode #tab-suprimentos,
body.monitor-mode #tab-historico,
body.monitor-mode #tab-faturamento,
body.monitor-mode .footer-form-wrap{
  display:none !important;
}
body.monitor-mode{ overflow:hidden; }
body.monitor-mode .wrap{ max-width:none; padding: 22px 34px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.monitor-header{ display:none; align-items:center; justify-content:space-between; margin-bottom:18px; padding-right: 210px; }
body.monitor-mode .monitor-header{ display:flex; }
.monitor-header .m-title{ display:flex; align-items:center; gap:16px; }
.monitor-header .logo-chip{ background:#fff; border-radius:10px; padding:10px 16px; display:flex; align-items:center; }
.monitor-header img{ height:44px; }
.monitor-header h1{ font-size:26px; font-weight:900; text-transform:uppercase; margin:0; letter-spacing:0.5px; }
.monitor-priority-badge{
  background: linear-gradient(90deg, var(--orange), #fb8534);
  color:#16110a; font-size:18px; font-weight:900; letter-spacing:1px;
  padding:8px 20px; border-radius:999px; text-transform:uppercase;
  animation: priorityBadgePulse 1.6s ease infinite;
}
@keyframes priorityBadgePulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(249,115,22,0.55); }
  50%{ box-shadow: 0 0 0 10px rgba(249,115,22,0); }
}
.monitor-header .m-clock{ font-family: var(--mono); font-size:22px; color:var(--text-dim); font-weight:700; }
.monitor-exit{ position:fixed; top:16px; right:16px; z-index:70; }
body.monitor-mode #tab-producao{ display:block !important; }
body.monitor-mode .section-head{ display:none; }
.monitor-grid{ display:none; grid-template-columns: repeat(4, 1fr); gap:20px; }
body.monitor-mode .monitor-grid{ display:grid; }
body.monitor-mode .producao-normal{ display:none; }
body.monitor-mode #prioridadesSummaryPanel{ display:none; }
.monitor-dots{ display:none; justify-content:center; gap:8px; margin-top:30px; }
body.monitor-mode .monitor-dots{ display:flex; }
.monitor-dots .mdot{ width:11px; height:11px; border-radius:50%; background:#2a2b30; transition: all .2s ease; }
.monitor-dots .mdot.active{ background: var(--orange); width:32px; border-radius:6px; }
.monitor-dots .mdot.priority{ background: #fb8534; }
.monitor-dots .mdot.priority.active{ background: var(--orange); box-shadow: 0 0 0 2px rgba(249,115,22,0.35); }
.m-card{
  background: var(--panel); border: 3px solid var(--border-soft); border-radius: 16px; padding: 26px 28px;
}
.m-card.overdue{ border-color: var(--red); background: #1d1310; box-shadow: 0 0 0 2px var(--red) inset; animation: pulseRed 2s infinite; }
.m-card.soon{ border-color: var(--amber); }
@keyframes pulseRed{
  0%,100%{ box-shadow: 0 0 0 2px var(--red) inset; }
  50%{ box-shadow: 0 0 0 5px var(--red) inset; }
}
.m-card .m-of{ font-family: var(--mono); font-size: 30px; font-weight:900; color: var(--orange); }
.m-cliente-row{ display:flex; align-items:center; gap:12px; margin: 8px 0 16px; }
.m-cliente-row .client-avatar{ width:38px; height:38px; font-size:15px; }
.m-card .m-cliente{ font-size: 28px; font-weight:800; line-height:1.15; }
.m-card .m-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.m-card .m-status{ font-size:18px; font-weight:800; padding:8px 15px; border-radius:999px; }
.m-card .m-entrega{ font-family: var(--mono); font-size:22px; font-weight:800; }
.m-card .m-entrega.overdue{ color: var(--red); }
.m-card .m-entrega.soon{ color: var(--amber); }
.m-days-left{
  display:inline-block; margin-top:10px; font-size:14px; font-weight:800;
  color: var(--amber); background: var(--amber-dim); padding:5px 12px; border-radius:999px;
}
.m-card .m-obs{ font-size: 16px; color: var(--text-dim); margin-top: 16px; border-top:1px solid var(--border-soft); padding-top:12px; }
.m-card .m-mat{ font-size:17px; font-weight:800; padding:7px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; }
.m-card .m-status .dot, .m-card .m-mat .dot{ width:9px; height:9px; }
.m-card .m-row > span[style]{ font-size:15px !important; }

@media (max-width: 900px){
  .footer-form-grid{ grid-template-columns: 1fr 1fr; }
  .donut-wrap{ flex-direction:column; }
}
@media (max-width: 1150px){
  table{ font-size: 12.5px; }
  thead th{ padding: 10px 8px; font-size:10.5px; }
  tbody td{ padding: 8px 8px; }
  td.obs-cell{ max-width: 140px; }
  td.mecavix-cell{ font-size:11.5px; }
  td.entrega-cell{ font-size:12px; }
  .status-pill, .mat-pill{ font-size:11px; padding:3px 8px; }
}
@media (max-width: 800px){
  table{ font-size: 11.5px; }
  thead th{ padding: 8px 6px; font-size:9.5px; }
  tbody td{ padding: 7px 6px; }
  td.obs-cell{ max-width: 90px; }
  td.mecavix-cell{ font-size:10.5px; }
  td.of-cell{ font-size:12px; }
  td.entrega-cell{ font-size:11px; }
  .status-pill, .mat-pill{ font-size:10px; padding:2px 6px; }
  .status-pill .dot, .mat-pill .dot{ width:5px; height:5px; }
}
@media (max-width: 560px){
  .wrap{ padding: 16px 12px 50px; }
  .footer-form-grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
}