:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c2333;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #7d8590;
  --accent: #58a6ff;
  --green: #2ea043;
  --yellow: #d29922;
  --orange: #f0883e;
  --red: #f85149;
  --blue: #1f6feb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
header .brand { font-weight: 600; font-size: 18px; }
header .meta { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.conn-dot { font-size: 10px; }

.centered {
  max-width: 360px;
  margin: 80px auto;
  text-align: center;
  background: var(--panel);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.centered input, .centered button { width: 100%; padding: 8px 12px; margin: 6px 0; }

input, select, textarea, button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
}
button { cursor: pointer; }
button:hover { background: var(--border); }
button.danger { color: var(--red); border-color: var(--red); }

main { padding: 20px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.toolbar .spacer { flex: 1; }
.muted { color: var(--muted); }

.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.column {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  min-height: 300px;
}
.column-header {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.column-count {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
}

.card {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
}
.card:hover { background: var(--border); }
.card-title { font-weight: 500; margin-bottom: 4px; }
.card-meta { display: flex; gap: 8px; font-size: 11px; color: var(--muted); }
.card-priority-high { border-left-color: var(--red); }
.card-priority-low { border-left-color: var(--muted); }

/* Status-specific tints */
.column[data-status="pending"] .card { border-left-color: var(--yellow); }
.column[data-status="in_progress"] .card { border-left-color: var(--blue); }
.column[data-status="waiting_input"] .card { border-left-color: var(--orange); }
.column[data-status="blocked"] .card { border-left-color: var(--red); }
.column[data-status="done"] .card { border-left-color: var(--green); opacity: 0.7; }
.column[data-status="cancelled"] .card { border-left-color: var(--muted); opacity: 0.5; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* CRÍTICO: display:flex sobrescreve [hidden] sem isso. */
.modal[hidden], section[hidden], main[hidden] {
  display: none !important;
}
.modal-inner {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-inner.narrow { max-width: 480px; }
.modal-inner header { padding: 12px 20px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.modal-inner h3 { margin: 0; }
.modal-inner header button { background: transparent; border: none; font-size: 22px; padding: 0; }
.modal-meta {
  padding: 12px 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.modal-body { padding: 16px 20px; }
.modal-body input, .modal-body select, .modal-body textarea { width: 100%; margin: 6px 0; }
.modal-activity { padding: 16px 20px; border-top: 1px solid var(--border); }
.modal-activity h4 { font-size: 13px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.modal-activity .event-line { font-size: 12px; color: var(--muted); margin: 4px 0; }
.modal-activity .comment {
  background: var(--panel-2);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 6px 0;
  font-size: 13px;
}
.modal-activity .comment .author { color: var(--accent); font-weight: 500; font-size: 12px; }
.modal-activity textarea { width: 100%; }
.modal-actions { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }