:root{
  --brand-50:#eef5ff;
  --brand-100:#d9e8ff;
  --brand-200:#b9d3ff;
  --brand-300:#93b9ff;
  --brand-400:#6597f2;
  --brand-500:#2c6bed; /* primary */
  --brand-600:#0b5ed7; /* accent / header */
  --brand-700:#0a4fb6;
  --brand-800:#083f8f;
  --brand-900:#072f6a;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f7f9fc;
  --card:#ffffff;
  --line:#e6ebf0;
  --topbar-height:56px;
  --sticky-header-top:0px;
  --success-500:#16a34a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.45}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--card),rgba(255,255,255,0.85));backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1440px;margin:0 auto;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-badge{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand-600),var(--brand-400));box-shadow:0 4px 14px rgba(11,94,215,.25)}
.brand span{font-size:16px}
.year-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;background:var(--card);font-weight:600;color:var(--brand-700)}
.year-pill .year-label{font-size:13px}
.year-pill .year-comp{font-size:12px;font-weight:600;color:var(--muted)}
.year-pill .year-sep{color:var(--line)}
.year-pill .year-logs{font-size:12px;font-weight:500;color:var(--muted);padding-right:6px}
.year-select{border:1px solid var(--brand-200);background:var(--brand-50);border-radius:999px;padding:4px 8px;font-size:13px;font-weight:700;color:var(--brand-700);cursor:pointer}
.year-select:disabled{opacity:.5;cursor:progress}

/* container */
.container{max-width:1440px;margin:0 auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}

/* control bar */
.controls{display:grid;grid-template-columns:1fr repeat(4,auto);gap:10px;align-items:center}
.control,input[type="text"],select{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;font-size:14px}
.btn{cursor:pointer;border:1px solid var(--brand-200);background:linear-gradient(180deg,var(--brand-50),#fff);border-radius:12px;padding:10px 14px;font-weight:700;color:var(--brand-700);box-shadow:0 2px 0 rgba(11,94,215,.1)}
.btn:hover{background:linear-gradient(180deg,var(--brand-100),#fff)}
.btn.active{background:linear-gradient(180deg,var(--brand-600),var(--brand-700));color:#fff;border-color:var(--brand-800);box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.muted{color:var(--muted);font-size:12px;justify-self:end}

/* summary cards */
.summary{top:var(--topbar-height);z-index:40;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 4px 18px rgba(2,8,23,.04)}
.sum-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px}
.sum-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 0 rgba(2,8,23,.03)}
.sum-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sum-value{font-size:22px;font-weight:800}
.sum-blank .sum-value{color:#0f172a}
.sum-pend  .sum-value{color:#b45309}
.sum-and   .sum-value{color:#1d4ed8}
.sum-fin   .sum-value{color:#059669}
.progress{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.progress-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.progress-value{font-weight:800;color:#14532d}
.progress-bar{height:12px;border-radius:999px;border:1px solid #bbf7d0;background:#e8f7ee;overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--success-500);border-radius:999px;transition:width .25s ease}

/* table shell */
.card{border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 6px 24px rgba(2,8,23,.05)}
.table-wrap{overflow-y:visible;border-radius:16px}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1200px}
thead th{position:sticky;top:var(--sticky-header-top);background:var(--brand-600);color:#fff;font-weight:700;font-size:13px;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.15);z-index:10;white-space:nowrap}
/* vertical month delimiters */
thead th:nth-child(n+4){box-shadow: inset 1px 0 0 rgba(255,255,255,.22);}
thead th:nth-child(4){box-shadow: inset 1px 0 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(255,255,255,.22);} /* first month both sides */
tbody td:nth-child(n+4){box-shadow: inset 1px 0 0 var(--line);}
tbody td:nth-child(4){box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);} /* keep aligned with header */

tbody td{background:#fff;border-bottom:1px solid var(--line);padding:10px;vertical-align:top}
tbody tr:hover td{background:#fafcff}
.center{text-align:center}

/* sticky left columns — ordem: Anexo (62) | Sistema (172) | Prio (86) | Empresa.
   O `left` de cada uma e a soma das larguras das anteriores. */
.sticky-left-0{position:sticky;left:0;background:#fff;z-index:2;box-shadow:inset -1px 0 0 var(--line)}
.sticky-left-1{position:sticky;left:62px;background:#fff;z-index:2;box-shadow:inset -1px 0 0 var(--line)}
.sticky-left-2{position:sticky;left:234px;background:#fff;z-index:2;box-shadow:inset -1px 0 0 var(--line)}
.sticky-left-3{position:sticky;left:320px;background:#fff;z-index:2;box-shadow:inset -1px 0 0 var(--line)}
.attach-cell{width:62px;vertical-align:middle}
.sys-cell{width:172px}
.prio-cell{width:86px}
.emp-cell{min-width:280px;outline:none}
thead th.sticky-left-0,
thead th.sticky-left-1,
thead th.sticky-left-2,
thead th.sticky-left-3{background:var(--brand-600);color:#fff;z-index:11;box-shadow:inset -1px 0 0 rgba(255,255,255,.22)}

/* status selects */
.etapa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.etapa .label{font-size:12px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
select.status{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;min-width:168px;transition:box-shadow .15s ease, transform .05s ease}
select.status:focus{outline:none;box-shadow:0 0 0 3px rgba(11,94,215,.2)}
select.status.s-blank{background:#f3f4f6;color:#111827;}
select.status.s-pend{background:#fff7ed;color:#92400E;border-color:#f6d9b6}
select.status.s-and{background:#eef2ff;color:#1E40AF;border-color:#c7d2fe}
select.status.s-fin{background:#ecfdf5;color:#065F46;border-color:#a7f3d0}

/* system select */
.sys-select{min-width:auto;width:150px;padding:8px 10px;font-weight:600;font-size:13px;background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-700)}
.sys-select.sys-none{background:#f3f4f6;border-color:var(--line);color:var(--muted);font-weight:500}

/* priority select */
.prio-select{min-width:auto;width:72px;padding:8px 10px;font-weight:700}
.p1{background:#fee2e2;border-color:#fecaca}
.p2{background:#fef9c3;border-color:#fde68a}
.p3{background:#e0e7ff;border-color:#c7d2fe}

/* inline forms */
.col-config { display: none; }

.view-ecd .col-month, .view-ecf .col-month { display: none; }
.view-gpc .col-annual { display: none; }

.view-ecd, .view-ecf { min-width: auto; }

.view-split { display: flex; gap: 24px; align-items: flex-start; margin-top: 20px; }
.view-split .table-wrap { margin-top: 0; flex: 1; min-width: 0; }

#chartPanel { display: none; flex: 1; position: sticky; top: calc(var(--sticky-header-top) + 20px); }

.inline-form{display:none;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card)}
.error{display:none;color:#b91c1c;font-size:12px}

/* receipt upload (ECF) */
.receipt-cell{display:flex;gap:6px;align-items:center}
.receipt-cell select{flex:1;min-width:0}
.icon-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);padding:0;transition:all .15s ease}
.icon-btn:hover{border-color:var(--brand-300);color:var(--brand-600);background:var(--brand-50)}
.icon-btn.has-receipt,
.icon-btn.has-file{border-color:#a7f3d0;background:#ecfdf5;color:#059669}
.icon-btn.uploading{opacity:.5;pointer-events:none}
.icon-btn svg{width:18px;height:18px;pointer-events:none}

/* visualizador do anexo (abre na tela, sem baixar) */
.viewer{position:fixed;inset:0;z-index:100;background:rgba(2,8,23,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px}
.viewer[hidden]{display:none}
.viewer-box{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(2,8,23,.35);width:min(1000px,100%);height:min(88vh,100%);display:flex;flex-direction:column;overflow:hidden}
.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.viewer-title{font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-actions{display:flex;gap:8px;flex:0 0 auto}
.viewer-btn{padding:6px 14px;font-size:13px;white-space:nowrap}
.viewer-body{flex:1;min-height:0;background:#f1f5f9;display:flex;align-items:center;justify-content:center;overflow:auto}
.viewer-body iframe{width:100%;height:100%;border:0}
.viewer-body img{max-width:100%;max-height:100%;object-fit:contain}