* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f5f7; --panel: #fff; --ink: #1c2733; --muted: #66707c; --line: #e2e6ea;
  --red: #d63031; --red-bg: #ffe3e3; --orange: #e17055; --orange-bg: #ffe8d9;
  --yellow: #b8860b; --yellow-bg: #fff3c4; --grey-bg: #eef0f2; --green: #1e824c; --green-bg: #d9f2e3;
  --purple: #6c5ce7; --purple-bg: #e9e5ff; --blue: #0a66c2; --blue-bg: #dcebff;
  --brand: #1234F2;
}
body { font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
button { cursor: pointer; font: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- login ---------- */
#login-overlay {
  position: fixed; inset: 0; background: #10131a; display: flex; align-items: center; justify-content: center; z-index: 100;
}
#login-overlay .box { background: #fff; padding: 32px; border-radius: 12px; width: 320px; text-align: center; }
#login-overlay h1 { font-size: 20px; margin-bottom: 4px; }
#login-overlay p { color: var(--muted); margin-bottom: 16px; }
#login-overlay input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; font: inherit; }
#login-overlay button { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; }
#login-error { color: var(--red); font-size: 13px; margin-top: 8px; min-height: 18px; }

/* ---------- header ---------- */
header {
  background: #10131a; color: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
}
header h1 { font-size: 17px; font-weight: 700; }
header h1 span { color: #8ab4ff; }
header .spacer { flex: 1; }
header .meta { font-size: 12px; color: #aab4c0; }
header button {
  border: 1px solid #3a4250; background: #1d2430; color: #fff; padding: 7px 12px; border-radius: 8px; font-size: 13px;
}
header button:hover { background: #2a3342; }
header button.primary { background: var(--brand); border-color: var(--brand); font-weight: 600; }
#banner { display: none; padding: 10px 16px; font-size: 13px; }
#banner.err { display: block; background: var(--red-bg); color: var(--red); }
#banner.ok { display: block; background: var(--green-bg); color: var(--green); }

/* ---------- counters ---------- */
#counters { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 12px 16px 4px; }
.counter { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.counter .n { font-size: 22px; font-weight: 700; }
.counter .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.counter.active { outline: 2px solid var(--brand); }
.counter.c-red .n { color: var(--red); } .counter.c-orange .n { color: var(--orange); }
.counter.c-yellow .n { color: var(--yellow); } .counter.c-green .n { color: var(--green); }
.counter.c-purple .n { color: var(--purple); } .counter.c-grey .n { color: var(--muted); }

/* ---------- filtros ---------- */
#filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; align-items: center; }
#filters select, #filters input[type=text] {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; max-width: 180px;
}
#filters label.chk { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--line); padding: 6px 9px; border-radius: 8px; cursor: pointer; user-select: none; }
#filters label.chk:has(input:checked) { border-color: var(--brand); color: var(--brand); }
#filters button.clear { border: 0; background: none; color: var(--blue); font-size: 13px; }

/* ---------- tabela ---------- */
#queue-wrap { padding: 0 16px 40px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 8px; border-bottom: 2px solid var(--line); background: #fafbfc; white-space: nowrap; cursor: pointer; user-select: none; }
th.sorted { color: var(--brand); }
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.row:hover { background: #f7f9fb; }
tr.row.dragging { opacity: .35; }
tr.drop-above td { border-top: 3px solid var(--brand); }
tr.drop-below td { border-bottom: 3px solid var(--brand); }

.drag { cursor: grab; color: #b6bec7; font-size: 16px; padding: 0 2px; touch-action: none; }
.drag.off { visibility: hidden; }

.prio { display: inline-block; min-width: 40px; text-align: center; font-weight: 800; font-size: 15px; border-radius: 8px; padding: 4px 6px; cursor: pointer; }
.prio:hover { outline: 2px solid var(--blue); }
.prio.p-overdue { background: var(--red-bg); color: var(--red); }
.prio.p-today, .prio.p-tomorrow { background: var(--orange-bg); color: var(--orange); }
.prio.p-next7 { background: var(--yellow-bg); color: var(--yellow); }
.prio.p-later, .prio.p-nodate { background: var(--grey-bg); color: var(--muted); }
.prio.p-done { background: var(--green-bg); color: var(--green); }
.sub { font-size: 11px; color: var(--muted); white-space: nowrap; }

td.title-cell { min-width: 260px; max-width: 460px; }
.t-title { font-weight: 600; }
.t-summary { color: var(--muted); font-size: 12.5px; }
.chips { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; }
.chip { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--grey-bg); color: #444; border: 1px solid #0001; }
.chip.state-done { background: var(--green-bg); color: var(--green); }
.chip.state-blocked { background: var(--purple-bg); color: var(--purple); }
.chip.state-localdone { background: var(--green-bg); color: var(--green); font-weight: 700; }
.chip.state-standby { background: var(--yellow-bg); color: var(--yellow); }
.chip.state-cancel { background: var(--grey-bg); color: var(--muted); text-decoration: line-through; }
.chip.meta { background: #fff; }

tr.r-overdue td:first-child { box-shadow: inset 4px 0 0 var(--red); }
tr.r-today td:first-child, tr.r-tomorrow td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
tr.r-next7 td:first-child { box-shadow: inset 4px 0 0 #e6c200; }
tr.r-done td { background: #f3faf5; }
tr.r-blocked td:first-child { box-shadow: inset 4px 0 0 var(--purple); }
tr.r-manualurgent td { background: var(--blue-bg); }

.due-late { color: var(--red); font-weight: 700; }
.nowrap { white-space: nowrap; }

select.manual { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: #fff; }
select.manual.overridden { border-color: var(--blue); color: var(--blue); }
.actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 108px; }
.actions .done-btn { border: 1px solid var(--green); color: var(--green); background: #fff; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; }
.actions .done-btn.undo { border-color: var(--muted); color: var(--muted); }
.actions a { font-size: 12.5px; text-align: center; }

#empty { padding: 40px; text-align: center; color: var(--muted); display: none; }
#loading { padding: 30px; text-align: center; color: var(--muted); }

@media (max-width: 900px) {
  #counters { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  td, th { padding: 6px 5px; }
}