:root { --app-bg: #1b1d21; --app-panel: #24272d; --app-panel-soft: #2d3037; --app-text: #eef0f3; --app-muted: #a5aab4; --app-accent: #6f73ff; }
body { background: var(--app-bg); color: var(--app-text); font-family: Poppins, Arial, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: 250px; background: #15171a; flex-shrink: 0; }
.app-main { flex: 1; min-width: 0; }
.app-logo { padding: 24px; font-size: 21px; font-weight: 700; color: #fff; }
.app-menu { padding: 12px 16px; }
.app-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 7px; color: var(--app-muted); text-decoration: none; }
.app-menu a:hover, .app-menu a.active { background: var(--app-panel-soft); color: #fff; }
.app-menu .material-icons { font-size: 20px; }
.app-header { min-height: 76px; padding: 18px 30px; border-bottom: 1px solid #30343b; display: flex; justify-content: flex-end; align-items: center; }
.app-content { padding: 30px; }
.app-card { background: var(--app-panel); border: 1px solid #343841; border-radius: 8px; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); }
.form-control, .form-select { background: #17191d; border-color: #40444d; color: #fff; }
.form-control:focus, .form-select:focus { background: #17191d; color: #fff; border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(111,115,255,.2); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, #30335d, transparent 40%), var(--app-bg); }
.auth-card { width: min(100%, 440px); padding: 38px; }
.text-muted { color: var(--app-muted) !important; }
.metric-card { height: 100%; padding: 18px; background: var(--app-panel); border: 1px solid #343841; border-radius: 8px; }
.metric-card span, .metric-card small { display: block; color: var(--app-muted); font-size: 12px; }
.metric-card strong { display: block; margin: 8px 0 4px; font-size: 28px; font-weight: 600; }
/* Linha acima do kanban: importacao a esquerda; filtro de usuario e periodo a direita. */
.board-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.board-toolbar-start, .board-toolbar-end { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.board-toolbar-end { margin-left: auto; }
.board-toolbar .card-filter { margin-bottom: 0; }
.card-filter { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 18px; }
.card-filter label { color: var(--app-muted); font-size: 13px; }
.card-filter select, .card-filter input[type="search"] { min-width: 220px; padding: 7px 12px; border: 1px solid #40444d; border-radius: 5px; background: #17191d; color: #fff; }
.card-filter input[type="search"] { width: min(300px, 100%); }
.card-filter input[type="search"]::placeholder { color: var(--app-muted); }
@media (max-width: 600px) {
  .card-filter { align-items: stretch; flex-direction: column; }
  .board-toolbar, .board-toolbar-end { align-items: stretch; flex-direction: column; margin-left: 0; }
}
@media (max-width: 800px) { .app-sidebar { width: 210px; } .app-content { padding: 20px; } }
@media (max-width: 600px) { .app-shell { display: block; } .app-sidebar { width: 100%; } .app-menu { display: flex; gap: 4px; overflow-x: auto; } .app-menu a { white-space: nowrap; } .app-content { padding: 16px; } }

/*
 * Botoes com icone Material (2026-10-07): o icone vinha com 24px e alinhado pela linha de base do
 * texto, ficando acima do rotulo. Vale para todos os botoes e links .btn da aplicacao; regras de
 * componente mais especificas (tamanho do icone, gap) continuam prevalecendo. `.d-none` e `[hidden]`
 * do Bootstrap usam !important e seguem ocultando o botao.
 */
.btn:has(.material-icons) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn .material-icons { font-size: 1.3em; line-height: 1; vertical-align: middle; }
.btn-sm .material-icons { font-size: 1.25em; }