@font-face {
  font-family: "Mona Sans";
  src: url("./assets/fonts/MonaSansVF.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Paleta IDENTICA a do cockpit ZY-OS (zyos-ds.css / GitHub-dark).
     Alinhada de proposito pra o Demandas casar com o cockpit e o Postagens
     nos dois temas, sem depender do /zyos-shared/zyos-ds.css (que da 404 no
     container do VPS por causa do server.js antigo). */
  color-scheme: dark;
  --bg: #0d1117;
  --sidebar: #161b22;
  --stage: #0d1117;
  --surface: #161b22;
  --surface-2: #21262d;
  --surface-3: #30363d;
  --ink: #e6edf3;
  --muted: #8b949e;
  --quiet: #6e7681;
  --line: #30363d;
  --line-strong: #484f58;
  --green: #3fb950;
  --green-soft: rgba(63, 185, 80, .14);
  --amber: #d29922;
  --amber-soft: rgba(210, 153, 34, .14);
  --red: #ff7b72;
  --red-soft: rgba(255, 123, 114, .14);
  --blue: #58a6ff;
  --blue-soft: rgba(88, 166, 255, .14);
  --shadow: 0 1px 2px rgba(1, 4, 9, .32);
}

:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #f6f8fa;
  --sidebar: #ffffff;
  --stage: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #eaeef2;
  --ink: #1f2328;
  --muted: #59636e;
  --quiet: #6e7781;
  --line: #d0d7de;
  --line-strong: #afb8c1;
  --green: #1f883d;
  --green-soft: #dafbe1;
  --amber: #9a6700;
  --amber-soft: #fff8c5;
  --red: #cf222e;
  --red-soft: #ffebe9;
  --blue: #0969da;
  --blue-soft: #ddf4ff;
  --shadow: 0 1px 2px rgba(31, 35, 40, .08);
}

html,
body {
  background: var(--bg);
  font-family: "Mona Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Sidebar e topo — superficie solida, sem vidro/blur */
.app-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  backdrop-filter: none;
  box-shadow: none;
}

.stage-topbar {
  background: none;
  backdrop-filter: none;
}

.board-toolbar {
  background: none;
}

.brand-mark,
.mobile-mark,
.mobile-add {
  border-radius: 8px;
  background: var(--green);
  box-shadow: none;
}

.sidebar-toggle,
.mobile-burger {
  border-radius: 7px;
  box-shadow: none;
}

.nav-item {
  border-radius: 7px;
  color: var(--muted);
}

.nav-item:hover,
.nav-item.is-active,
.nav-item[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
  background-image: none;
}

/* Paineis e cartoes — sem gradiente, raio 6-8px */
.sidebar-card,
.quick-entry,
.side-section,
.board-main,
.metric,
.focus-card {
  background: var(--surface);
  background-image: none;
  border-radius: 8px;
  box-shadow: none;
}

.metric-primary {
  background: var(--surface);
  background-image: none;
  border-left: 3px solid var(--green);
}

.focus-card { border-radius: 8px; }
.focus-item { border-radius: 7px; }
.focus-card .count { background: var(--green); }

.kanban-column {
  background: var(--surface);
  background-image: none;
  border-radius: 8px;
}

.kanban-column.is-over {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.kanban-head span {
  background: var(--surface-3);
}

/* No tema CLARO os titulos das colunas usavam as cores palidas do escuro
   (#8cc6ff, #f5d27a, #ffb084, #c9a6ff, #5fe0a0) — quase invisiveis sobre
   branco. Variantes escuras legiveis, mantendo a cor de cada coluna. */
:root[data-tema="claro"] .kanban-column.col-todo .kanban-head strong { color: #0969da; }
:root[data-tema="claro"] .kanban-column.col-doing .kanban-head strong { color: #9a6700; }
:root[data-tema="claro"] .kanban-column.col-waiting .kanban-head strong { color: #bc4c00; }
:root[data-tema="claro"] .kanban-column.col-paused .kanban-head strong { color: #8250df; }
:root[data-tema="claro"] .kanban-column.col-done .kanban-head strong { color: #1f883d; }

.demand-card {
  background: var(--surface-2);
  background-image: none;
  border-radius: 8px;
  box-shadow: none;
}

.demand-card:hover,
.client-card:hover {
  border-color: var(--line-strong);
}

.badge,
.chip {
  border-radius: 7px;
}

.badge.late { border-color: rgba(239, 107, 107, .32); }
.badge.today { border-color: rgba(232, 179, 92, .32); }

.card-button,
.icon-button,
.button {
  min-height: 36px;
  border-radius: 7px;
}

.button-primary {
  background: var(--green);
  border-color: var(--green);
}

/* Botoes sem modificador (ex.: "Salvar" no modal de edicao) ficavam sem
   fundo (estilo nativo do navegador). Alinha ao mesmo tratamento neutro
   do button-soft, sem tocar no HTML. */
.button:not(.button-primary):not(.button-soft),
.icon-button:not(.button-primary):not(.button-soft) {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line-strong);
}

input,
select,
textarea {
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
}

/* As opcoes do dropdown herdavam texto claro com fundo transparente: quando o
   menu abre, o SO pinta o fundo branco e o texto sumia (fontes escondidas).
   Fundo/texto explicitos por tema resolvem em claro e escuro. */
select option,
select optgroup {
  color: var(--ink);
  background: var(--surface);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.checks label { border-radius: 7px; }
.checks input { accent-color: var(--green); }

.empty {
  background: var(--surface);
  border-radius: 8px;
}

.recurring-item,
.client-card {
  background: var(--surface-2);
  border-radius: 8px;
}

.toast {
  background: var(--green);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.modal-backdrop {
  background: rgba(7, 10, 8, .68);
  backdrop-filter: none;
}

.modal-card {
  background: var(--surface);
  background-image: none;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

html.zy-embed .stage-topbar {
  background: none;
}

@media (max-width: 820px) {
  .mobile-bar {
    background: var(--surface);
    backdrop-filter: none;
  }

  .mobile-burger { border-radius: 7px; }

  .app-sidebar {
    box-shadow: var(--shadow);
  }
}