/* Theme explicit variables */
:root { --bg: #0b0b0f; --fg: #f5f5f5; }
:root[data-theme="light"] { --bg: #f7f7fb; --fg: #0b0b0f; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --bg: #f7f7fb; --fg: #0b0b0f; }
}
body { background: var(--bg); color: var(--fg); }

/* Reset e base */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  background: var(--bg, #0b0b0f);
  color: var(--fg, #f5f5f5);
  min-height: 100%;
}

:root {
  --bg: #0b0b0f;
  --fg: #f5f5f5;
  --c-backlog: #5865f2;
  --c-importante: #f59e0b;
  --c-urgente: #ef4444;
  --c-circunstancial: #10b981;
}

/* Cabeçalho */
.glass-header {
  position: sticky; top: 0;
  backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid hsl(0 0% 100% / .08);
  z-index: 10;
}
.header-row { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; gap:1rem; }
.app-title { margin:0; font-size:1.25rem; font-weight:700; }
.view-switch { display:flex; gap:.5rem; }
.nav-btn { background:none; border:0; padding:.5rem .75rem; font-weight:600; border-radius:8px; cursor:pointer; color:inherit; }
.nav-btn[aria-pressed="true"] { background:hsl(0 0% 100% / .12); }

/* Botões genéricos */
.btn { background:hsl(0 0% 100% / .12); border:1px solid hsl(0 0% 100% / .1); color:inherit; padding:.45rem .8rem; border-radius:8px; cursor:pointer; }
.btn.primary { background: #3b82f6; border-color: transparent; color:#fff; }
.btn.ghost { background: transparent; border-color: hsl(0 0% 100% / .2); }
.btn.subtle { background: hsl(0 0% 100% / .08); }
.icon-btn { background: none; border: 0; color: inherit; cursor: pointer; padding:.25rem .4rem; border-radius:6px; }
.icon-btn:hover { background: hsl(0 0% 100% / .12); }

/* Layout principal */
.container { max-width: 1440px; margin:0 auto; padding:1rem; }
.view { display:none; }
.view.is-active { display:block; }

/* Controles do dia */
.day-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:12px 0; }
.capacity { font-weight:600; padding:.25rem .5rem; border-radius:8px; background:hsl(0 0% 100% / .04); }
.capacity.danger { color: var(--c-urgente); background: hsl(0 80% 50% / .10); }
.tag-filter select { padding:.4rem .6rem; border-radius:8px; border:1px solid hsl(0 0% 100% / .12); background: color-mix(in oklab, var(--bg) 85%, transparent); color:inherit; }
.date-controls { display:flex; gap:.5rem; align-items:center; }

/* Board de listas */
.board {
  display:grid; gap:16px;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  align-items:start; min-height: 100svh; padding: 16px;
}
@media (max-width:1280px){ .board{ grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width:760px){ .board{ grid-template-columns: 1fr; } }

.list { display:flex; flex-direction:column; gap:.75rem; background: color-mix(in oklab, var(--bg) 80%, transparent); border-radius:12px; padding:.75rem; }
.list-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.list-body { display:flex; flex-direction:column; gap:.75rem; max-height: calc(100svh - 160px); overflow:auto; overscroll-behavior: contain; scroll-behavior: smooth; }

/* Botões de adicionar (por lista) */
.btn-add { color:#fff; border:0; padding:.35rem .75rem; border-radius:999px; font-weight:600; box-shadow:0 4px 16px hsl(0 0% 0% / .2); cursor:pointer; }
.list-backlog .btn-add { background: var(--c-backlog); }
.list-importante .btn-add { background: var(--c-importante); }
.list-urgente .btn-add { background: var(--c-urgente); }
.list-circunstancial .btn-add { background: var(--c-circunstancial); }

/* Cards */
.card { background: color-mix(in oklab, var(--bg) 85%, transparent); border:1px solid hsl(0 0% 100% / .08); border-radius:14px; padding:12px; display:grid; gap:8px; }
.card[data-list="importante"]{ border-left:4px solid var(--c-importante); }
.card[data-list="urgente"]{ border-left:4px solid var(--c-urgente); }
.card[data-list="circunstancial"]{ border-left:4px solid var(--c-circunstancial); }
.card.done { opacity:.55; text-decoration: line-through; }
.card .meta { display:flex; flex-wrap:wrap; gap:6px; font-size:.85rem; opacity:.9; }
.tag { padding:.15rem .5rem; border-radius:999px; background:hsl(0 0% 100% / .08); }

/* Modal */
.modal { position:fixed; inset:0; display:grid; place-items:center; background: color-mix(in oklab, black 30%, transparent); }
.modal > .card { backdrop-filter: blur(24px); background: color-mix(in oklab, var(--bg) 70%, transparent); border:1px solid hsl(0 0% 100% / .08); border-radius:16px; padding:20px; width:min(560px, 92vw); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.form-grid { display:grid; gap:.5rem; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:.5rem; }
.form-col { display:grid; gap:.25rem; }
.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; }

/* Blur do app quando modal abre */
.modal-open .app-root { filter: blur(6px); transform: translateZ(0); }

/* Toast */
.toast { position:fixed; bottom:1rem; left:50%; transform: translateX(-50%); background:hsl(0 0% 10% / .85); color:#fff; padding:.5rem 1rem; border-radius:8px; box-shadow:0 4px 16px hsl(0 0% 0% / .3); font-weight:500; }

/* Checklist / Subtarefas */
.checklist-group { margin-top:.5rem; border:1px solid hsl(0 0% 100% / .08); border-radius:12px; padding:.75rem; }
.checklist-group > legend { font-weight:700; padding:0 .25rem; opacity:.9; }
.checklist-input-row { display:flex; gap:.5rem; margin-bottom:.5rem; }
.checklist-input-row input { flex:1; padding:.5rem .6rem; border-radius:8px; border:1px solid hsl(0 0% 100% / .12); background: color-mix(in oklab, var(--bg) 85%, transparent); color: inherit; }
.checklist { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.checklist li { display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem; border-radius:8px; background:hsl(0 0% 100% / .04); }
.checklist li.done { opacity:.65; text-decoration: line-through; }
.checklist li button.icon { margin-left:auto; background:none; border:0; color:inherit; cursor:pointer; opacity:.8; }