:root {
    --bg: #16161D;
    --panel: #1A1A22;
    --field: #2B2C38;
    --field-border: #4A4B59;
    --text: #E6E6E6;
    --muted: #9A9AA5;
    --accent: #2E7D32;
    --accent-hover: #3C9A41;
    --danger: #7A2E2E;
    --danger-hover: #9A3A3A;
    --link: #9FD9FF;
    /* Altura ÚNICA de qualquer controle numa linha (botão, input, select) — é o que
       impede barras de filtro com elementos de tamanhos diferentes. */
    --control-h: 38px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}

.dk9-admin { min-height: 100vh; }

h1 { font-size: 22px; margin: 0 0 16px; }
/* O Blazor foca o <h1> ao navegar (acessibilidade); não mostrar o contorno branco. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }
h2 { font-size: 18px; margin: 0 0 12px; }
a { color: var(--link); }

/* ---- Campos ---- */
label { display: block; opacity: .8; margin-bottom: 4px; }

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], input[type=month],
input[type=email], input[type=tel], input[type=url], input[type=search],
input:not([type]),
select, textarea {
    width: 100%;
    background: var(--field);
    color: var(--text);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 14px;
    outline: none;
    color-scheme: dark;
    font-family: inherit;
}

/* Bloco read-only que cresce com o texto (ex.: descrição fixa de grupo de sistema) —
   sem barra de rolagem; a altura acompanha o conteúdo. */
.readonly-box {
    background: var(--field); color: var(--text); border: 1px solid var(--field-border);
    border-radius: 6px; padding: 9px 10px; font-size: 14px; line-height: 1.45;
    white-space: pre-wrap; opacity: .9;
}
/* Textarea que cresce com o conteúdo (sem rolagem). field-sizing: Chromium/Edge 123+. */
textarea.autosize { field-sizing: content; min-height: 64px; overflow: hidden; resize: none; }
/* Remove as setinhas (spin buttons) dos campos numéricos — preenchimento sempre manual. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ===================== Financeiro (conta-corrente do projeto) ===================== */
/* Resumo do saldo no topo da aba — destaque visual com cor (verde=positivo / vermelho=negativo). */
.balance-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    background: var(--field); padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--field-border); }
.balance-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-value.pos { color: #66BB6A; }
.balance-value.neg { color: #EF5350; }

/* Tabela de lançamentos. Linhas alternadas + colunas numéricas tabular-nums para alinhar
   o ponto decimal. */
.finance-table { width: 100%; border-collapse: collapse; }
.finance-table th, .finance-table td { padding: 10px 12px; }
.finance-table thead th { text-align: left; background: #20262F; border-bottom: 1px solid var(--field-border);
    font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.finance-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.finance-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.finance-table td.credit { color: #66BB6A; font-variant-numeric: tabular-nums; font-weight: 600; }
.finance-table td.debit { color: #EF5350; font-variant-numeric: tabular-nums; font-weight: 600; }
.finance-table td.pos, .finance-table td.neg { font-variant-numeric: tabular-nums; font-weight: 700; }
.finance-table td.pos { color: #B0BEC5; }
.finance-table td.neg { color: #EF5350; }

/* Toggle Crédito/Débito do modal de lançamento — 2 botões grandes lado a lado. */
.cd-toggle { display: flex; gap: 14px; }
.cd-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 12px; border-radius: 10px; cursor: pointer;
    background: var(--field); border: 2px solid var(--field-border); color: var(--muted);
    transition: transform 80ms ease, border-color 120ms ease; }
.cd-btn:hover { transform: translateY(-1px); }
.cd-btn .cd-ico { font-size: 28px; line-height: 1; }
.cd-btn .cd-label { font-size: 16px; font-weight: 700; color: var(--text); }
.cd-btn .cd-hint { font-size: 11px; }
.cd-btn.credit.active { border-color: #66BB6A; background: rgba(102,187,106,0.12); }
.cd-btn.credit.active .cd-label { color: #66BB6A; }
.cd-btn.debit.active { border-color: #EF5350; background: rgba(239,83,80,0.12); }
.cd-btn.debit.active .cd-label { color: #EF5350; }

/* DateTimeInput — combo de texto editável (com máscara em código) + botão de calendário
   ao lado que abre o picker nativo. O input "hidden" fica posicionado em cima do botão
   só para o browser ancorar o popup do calendário ali. */
.dt-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.dt-wrap .dt-text {
    /* herda a estilização global dos inputs (fundo escuro, borda arredondada). */
    flex: 1; min-width: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}
.dt-wrap .dt-cal-btn {
    flex: 0 0 auto;
    padding: 7px 10px;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.dt-wrap .dt-cal-btn:hover { background: #2F3340; border-color: #4FC3F7; }
/* O input nativo fica invisível, mas posicionado no mesmo lugar do botão para que o
   popup do calendário ancore lá. Não pode ser display:none (perde a referência), nem
   visibility:hidden (alguns browsers se recusam a abrir o popup). */
.dt-wrap .dt-hidden {
    position: absolute;
    right: 0; top: 0;
    width: 38px; height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    border: none; padding: 0;
}

/* Inputs de data/hora têm estilização nativa do browser que muitas vezes ignora
   as regras genéricas acima (especialmente em Chromium). Forçamos com !important
   + appearance:none para garantir que o fundo escuro e o raio sejam respeitados. */
input[type=date],
input[type=datetime-local],
input[type=time],
input[type=month] {
    background: var(--field) !important;
    color: var(--text) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: 6px !important;
    color-scheme: dark !important;
    appearance: none;
    -webkit-appearance: none;
    min-height: 38px;
}
/* Ícone do calendário/relógio: invertido completo (preto → branco) e bem visível. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
    cursor: pointer;
    opacity: 1;
    padding: 2px;
    margin-left: 4px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}
/* Os pseudo-elementos internos do datetime-local (campos dd/mm/aaaa --:--) também
   precisam herdar a cor do texto — caso contrário aparecem em cinza claro feio. */
input[type=date]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit {
    color: var(--text);
}
input[type=date]::-webkit-datetime-edit-text,
input[type=datetime-local]::-webkit-datetime-edit-text,
input[type=time]::-webkit-datetime-edit-text { color: var(--muted); padding: 0 2px; }
input[type=date]::-webkit-datetime-edit-fields-wrapper,
input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper,
input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input:focus, select:focus, textarea:focus { border-color: #4FC3F7; }
/* Placeholder bem mais discreto que o texto preenchido. */
input::placeholder, textarea::placeholder { color: #5E5E6B; opacity: 1; }
input:read-only { color: var(--muted); }

.field { margin-bottom: 12px; }

/* ---- Botões ---- */
button {
    background: var(--field);
    color: var(--text);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
}
button:hover { background: #3A3B47; }
button:disabled { opacity: .55; cursor: default; }
button.accent { background: var(--accent); border-color: transparent; color: #fff; }
button.accent:hover { background: var(--accent-hover); }
button.danger { background: var(--danger); border-color: transparent; color: #fff; }
button.danger:hover { background: var(--danger-hover); }
button.link { background: transparent; border: none; color: var(--link); padding: 2px 4px; }

/* ===================== Monitor de Automações (/admin/automacoes) =====================
   GLOBAL (não isolado) de propósito: várias partes (gauges/selos/badges) são emitidas por
   RenderFragment em @code, e o CSS isolado .razor.css NÃO recebe o atributo de escopo nesses
   fragmentos. Mantendo aqui, tudo é estilizado de forma confiável. */
.auto-batchbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px;
    padding:10px 12px; border:1px solid var(--field-border); border-radius:10px; background:var(--field); }
.auto-batchbar button { padding:6px 12px; font-size:13px; }

/* Toast de atualização — flutuante, canto SUPERIOR direito, logo abaixo da barra superior
   (onde o usuário está olhando). NÃO reflui o topo nem empurra os ícones. */
.auto-toast {
    position: fixed; right: 18px; top: 64px; z-index: 1200;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 500;
    background: var(--field); color: var(--text);
    border: 1px solid var(--field-border); box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.auto-toast.ok { color: #3ad29f; border-color: rgba(48,163,108,.4); }
.spin { display:inline-block; animation:auto-spin 1s linear infinite; }
@keyframes auto-spin { to { transform:rotate(360deg); } }

.auto-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 0 10px; }
.auto-search { display:flex; align-items:center; gap:8px; flex:1 1 260px; max-width:460px;
    padding:8px 12px; background:var(--field); border:1px solid var(--field-border); border-radius:10px; }
.auto-search i { opacity:.55; }
.auto-search input { flex:1; background:transparent; border:none; outline:none; color:inherit; font-size:14px; padding:0; }
.auto-search-clear { padding:0 2px; }

.auto-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.auto-card { border:1px solid var(--field-border); border-left:3px solid transparent; border-radius:12px;
    background:var(--card-bg, #1b1c25); overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.auto-card.is-online { border-left-color:#30a46c; }
.auto-card.is-offline { border-left-color:#8b8f9a; }
.auto-card.is-open { border-color:rgba(79,195,247,.45); box-shadow:0 6px 22px rgba(0,0,0,.28); }

.auto-head { display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; user-select:none; }
.auto-head:hover { background:rgba(127,127,127,.06); }
.auto-chevron { opacity:.5; font-size:12px; flex:0 0 auto; }
.auto-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.auto-dot.on { background:#30a46c; box-shadow:0 0 0 3px rgba(48,163,108,.18); }
.auto-dot.off { background:#8b8f9a; }
.auto-name { font-weight:600; font-size:15px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auto-status { font-size:12px; opacity:.6; flex:0 0 auto; }
.auto-sel { width:16px; height:16px; flex:0 0 auto; cursor:pointer; }

.auto-health { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px;
    display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.auto-health.ok { color:#3ad29f; background:rgba(48,163,108,.16); }
.auto-health.warn { color:#f5c451; background:rgba(245,165,36,.16); }
.auto-health.crit { color:#ff7b7b; background:rgba(229,72,77,.18); }
.auto-health.off { color:#a7adba; background:rgba(140,143,154,.16); }

.auto-ver-chip { font-size:12px; padding:3px 9px; border-radius:999px; background:rgba(127,127,127,.16);
    flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; }
.auto-badge { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
    display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; }
.auto-badge.ok { color:#3ad29f; background:rgba(48,163,108,.14); }
.auto-badge.avail { color:#f5c451; background:rgba(245,165,36,.16); }
.auto-badge.blocked { color:#ff7b7b; background:rgba(229,72,77,.16); }

.auto-body { padding:6px 18px 18px; border-top:1px solid var(--field-border); }

.auto-gauges { display:flex; flex-wrap:wrap; gap:14px; margin:16px 0 14px; }
.auto-gauge { display:flex; flex-direction:column; align-items:center; gap:1px; width:108px; padding:14px 8px;
    background:rgba(127,127,127,.06); border:1px solid var(--field-border); border-radius:12px; }
.auto-gauge__svg { width:80px; height:80px; display:block; }
.auto-gauge__track { fill:none; stroke:rgba(127,127,127,.18); stroke-width:8; }
.auto-gauge__val { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dasharray .5s ease; }
.auto-gauge__pct { fill:var(--text); font-size:17px; font-weight:700; }
.auto-gauge__label { font-size:12.5px; font-weight:600; margin-top:5px; }
.auto-gauge__text { font-size:11px; opacity:.6; }

.auto-foot { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
.auto-stat { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:5px 10px;
    border-radius:8px; background:rgba(127,127,127,.08); }
.auto-stat i { opacity:.7; }
.auto-license .bi-patch-check { color:#3ad29f; opacity:1; }
.auto-warn { color:#f5a524; font-weight:600; }

.auto-update-admin { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px;
    padding-top:14px; border-top:1px solid var(--field-border); }
.auto-update-admin .accent { padding:7px 13px; font-size:13px; }
.auto-offline-note { margin:12px 0 0; font-size:12.5px; color:#f5a524; display:flex; align-items:center; gap:6px; }

.auto-power { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.auto-power button { padding:7px 13px; font-size:13px; }
.auto-power button:disabled, .auto-update-admin button:disabled, .auto-update-admin .seg button:disabled {
    opacity:.4; cursor:not-allowed; }

.auto-pager { display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0 4px; }
.auto-pager .link:disabled { opacity:.35; cursor:not-allowed; }

/* Status online em verde (diferencia do offline) */
.auto-status.on { color:#3ad29f; opacity:1; font-weight:600; }
.auto-status.off { color:#9aa0ac; }

/* Chip de versão colorido por situação de atualização */
.auto-ver-chip.ver-ok { background:rgba(48,163,108,.16); color:#3ad29f; }
.auto-ver-chip.ver-old { background:rgba(245,165,36,.16); color:#f5c451; }

/* Tiles de métrica (não-gauge) ao lado dos medidores */
.auto-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    width:108px; padding:14px 8px; background:rgba(127,127,127,.06); border:1px solid var(--field-border); border-radius:12px; }
.auto-tile__icon { font-size:22px; opacity:.7; }
.auto-tile__val { font-size:18px; font-weight:700; }
.auto-tile__label { font-size:12px; opacity:.6; }
.auto-tile.warn .auto-tile__icon, .auto-tile.warn .auto-tile__val { color:#f5a524; }

/* Feedback do "Atualizar" (✓ Atualizado) */

/* Dica do botão de lote. O espaço pro rodapé fixo (banner) agora é global
   (.dk9-banner-footer__spacer no fim do documento) — não precisa mais de padding aqui. */
.auto-batch-hint { flex-basis:100%; margin-top:2px; }
.auto-content { padding-bottom:16px; }

/* ===== Tela de Versões (/admin/releases) ===== */
.rel-form-row { display:flex; gap:14px; flex-wrap:wrap; }
.rel-file { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rel-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:8px; }
.rel-badge.on { color:#3ad29f; background:rgba(48,163,108,.16); }
.rel-badge.off { color:#f5c451; background:rgba(245,165,36,.16); }
tr.rel-inactive { opacity:.55; }

/* ===== Catálogo de Downloads (/admin/downloads) ===== */
.dl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.dl-card { display:flex; flex-direction:column; gap:12px; background:var(--panel);
    border:1px solid var(--field-border); border-radius:12px; padding:16px; }
.dl-head { display:flex; align-items:flex-start; gap:12px; }
.dl-head > i { font-size:24px; color:var(--link); line-height:1; margin-top:2px; }
.dl-titles { min-width:0; }
.dl-name { font-weight:600; }
.dl-qr { display:flex; justify-content:center; padding:8px; background:#fff; border-radius:8px; align-self:center; }
.dl-qr img { display:block; }
.dl-link { word-break:break-all; }
.dl-btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; align-self:flex-start; }
.dl-size { color:var(--muted); font-size:12px; }
.dl-btn .dl-size { color:inherit; opacity:.85; }

/* Seletor visual de ícones (modal de item) */
.dl-iconpicker { display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:8px;
    max-height:190px; overflow-y:auto; padding:8px; background:var(--field); border:1px solid var(--field-border); border-radius:8px; }
.dl-iconpick { display:flex; align-items:center; justify-content:center; height:44px; border-radius:8px;
    background:var(--panel); border:1px solid var(--field-border); color:var(--text); font-size:20px; cursor:pointer;
    padding:0; transition:border-color .12s, background .12s; }
.dl-iconpick:hover { border-color:var(--link); }
.dl-iconpick.is-sel { border-color:var(--link); background:rgba(159,217,255,.16); color:var(--link); }

/* Lista administrativa — cards arrastáveis (reordenar) */
.dl-reorder-hint { display:flex; align-items:center; gap:6px; margin:0 0 10px; }
.dl-adminlist { display:flex; flex-direction:column; gap:8px; }
.dl-adminrow { display:flex; align-items:center; gap:12px; background:var(--panel);
    border:1px solid var(--field-border); border-radius:10px; padding:10px 12px; }
.dl-adminrow.rel-inactive { opacity:.55; }
.dl-adminrow.is-dragging { opacity:.4; border-style:dashed; }
.dl-drag { color:var(--muted); cursor:grab; font-size:18px; flex:0 0 auto; }
.dl-rowicon { color:var(--link); font-size:22px; flex:0 0 auto; }
.dl-rowmain { flex:1; min-width:0; }
.dl-rowkind { margin-left:8px; }
.dl-rowactions { display:flex; gap:6px; flex:0 0 auto; }

/* Família .dk9-btn no STUDIO — algumas telas (BoardEditModal, ToolsTab, Console, Comunicação,
   QR, EmailProviderEditor) usam essas classes (originárias do Home). Mapeadas aqui aos tokens
   do Studio para NÃO renderizarem sem estilo. Look idêntico aos botões nativos do Studio. */
.dk9-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--field); color: var(--text);
    border: 1px solid var(--field-border); border-radius: 6px;
    padding: 8px 14px; font-size: 14px; line-height: 1; cursor: pointer;
}
.dk9-btn:hover { background: #3A3B47; }
.dk9-btn:disabled { opacity: .55; cursor: not-allowed; }
.dk9-btn i { font-size: 1rem; }
.dk9-btn--ghost { /* neutro: herda o base */ }
.dk9-btn--primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
.dk9-btn--primary:hover { background: var(--accent-hover); }
.dk9-btn--danger { background: var(--danger); border-color: transparent; color: #fff; }
.dk9-btn--danger:hover { background: var(--danger-hover); }
.dk9-btn--sm { padding: 4px 10px; font-size: 12.5px; }

/* ---- Login ---- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 320px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.login-box h1 { margin-bottom: 0; }
.login-box .sub { opacity: .7; margin-bottom: 8px; }
.login-forgot { font-size: 0.85rem; opacity: .7; text-decoration: none; }
.login-forgot:hover { opacity: 1; text-decoration: underline; }
/* Link discreto renderizado como botão (ex.: receber código por e-mail) — herda .login-forgot. */
.link-btn { background: none; border: 0; cursor: pointer; color: inherit; padding: 2px; }
.link-btn:disabled { opacity: .4; cursor: default; }

/* ---- 2FA no login (inscrição com QR + campo de código) ---- */
.twofa-setup { display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 12px; }
.twofa-setup-intro { font-size: 0.82rem; opacity: .8; line-height: 1.4; }
.twofa-qr { border-radius: 6px; background: #fff; padding: 6px; }
.twofa-secret-label { font-size: 0.75rem; opacity: .6; margin-top: 2px; }
.twofa-secret { font-family: monospace; font-size: 0.95rem; letter-spacing: 1px; word-break: break-all; }
.twofa-help { font-size: 0.75rem; opacity: .6; line-height: 1.4; text-align: center; }
.twofa-email-sent { font-size: 0.82rem; color: #8FD19E; }

/* ---- Erro ---- */
.err { color: #FF9B9B; background: #3A1E1E; border-radius: 6px; padding: 8px 10px; }

/* ---- Layout admin ---- */
/* Barra superior — destacada do fundo da página (antes usava --panel, quase igual ao --bg
   e ficava imperceptível). Tom mais claro + borda + sombra sutil dão a separação. */
.topbar { background: #23242F; padding: 6px 16px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #34354420; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.25);
    /* Fixa a barra de navegação no topo — não rola junto com o conteúdo. Padding simétrico
       (6px) deixa os botões de 36px com o MESMO respiro em cima e embaixo; barra mais baixa. */
    position: sticky; top: 0; z-index: 50; }
.content { padding: 20px; max-width: 980px; margin: 0 auto; }
.build-badge { position: fixed; bottom: 6px; right: 10px; font-size: 11px; color: var(--muted); background: rgba(0,0,0,0.35); padding: 2px 8px; border-radius: 10px; pointer-events: none; user-select: none; z-index: 9999; font-family: ui-monospace, "Consolas", monospace; }

/* ---- Lista de projetos / eventos / itens ---- */
.card {
    background: #20262F;
    border-radius: 8px;
    padding: 12px 14px;
    /* Espaçamento generoso entre cards consecutivos — 6px era visualmente "grudado"
       contra o fundo de tom semelhante. 14px garante separação clara mesmo quando
       muitos cards são listados em sequência. */
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Sutil sombra interna pra reforçar a separação visual entre cards. */
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.card + .card { margin-top: 0; }  /* margin-bottom de cima + margin-top de baixo não somam */
.card:hover { background: #2A323D; }
.card .name { font-weight: bold; }
.card .local { opacity: .7; font-size: 12px; }
.row-actions { display: flex; gap: 8px; }

/* ---- Mapa de pinos (atribuição visual, sucessor do pntBoardPin) ---- */
/* Seletor composto vence o .modal { width:460px } declarado mais abaixo no arquivo.
   Largura pelo CONTEÚDO: ESP32 (2 colunas) fica enxuto, Mega (3 colunas) cresce. */
.modal.pinmap-modal { width: fit-content; min-width: 520px; max-width: 96vw; }
/* Cabeçalho do mapa de pinos: título (alça de arraste) + botão Fechar no canto direito.
   margin-bottom dá respiro entre a linha do título e o primeiro card abaixo. */
.pinmap-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pinmap-head-close { cursor: pointer; flex: none; }
/* Quem define a largura do modal são as TABELAS — os textos longos (aviso ADC2, barra
   "na mão", erro) não podem esticar o fit-content. width:min-content zera a contribuição
   deles no cálculo e min-width:100% os re-estica pra largura final ditada pelas tabelas. */
.pinmap-modal .pinmap-hand,
.pinmap-modal .pinmap-warning,
.pinmap-modal .pinmap-images,
.pinmap-modal .err,
.pinmap-modal > .muted { width: min-content; min-width: 100%; box-sizing: border-box; }
/* As dicas DENTRO da barra flex precisam do oposto: contribuição zero (flex-basis 0)
   e SEM o min-width:100% acima — senão a frase volta a ditar a largura do modal.
   Declarada DEPOIS e com mesma especificidade, esta regra vence a de cima. */
.pinmap-modal .pinmap-hand__hint {
    flex: 1 1 0; width: auto; min-width: 0;
    white-space: normal; font-size: 0.85rem;
}
.pinmap-field { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.pinmap-field input { flex: 1; }
.pinmap-field button {
    padding: 6px 12px; white-space: nowrap; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 6px;
}
/* A barra é uma COLUNA: linha 1 = badge + dica, linha 2 (só WD) = botões de modo.
   Botões na mesma linha da dica a esmagavam — flex rachava o espaço livre e a
   frase quebrava palavra por palavra. */
.pinmap-hand {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 12px; margin-bottom: 12px;
    border: 1px solid #3a4252; border-radius: 8px;
    background: #232a36;
}
.pinmap-hand--dir { border-color: #4caf7d; }   /* modo DIREÇÃO — verde como o legado */
.pinmap-hand__row { display: flex; align-items: center; gap: 10px; }
.pinmap-hand__modes { display: flex; gap: 8px; }
/* Dicas de texto dentro da barra: flex-basis 0 ZERA a contribuição na largura
   intrínseca (flex não quebra itens — sem isso a frase estica o modal inteiro). */
.pinmap-hand__hint { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 0.85rem; }
.pinmap-columns { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; }

/* ====== Código fonte das placas (Ferramentas) ====== */
.sketch-view { margin-top: 12px; }
.sketch-view__toolbar { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; }
.sketch-view__code {
    background: #14181f; border: 1px solid #2A2A33; border-radius: 8px;
    padding: 12px; max-height: 480px; overflow: auto;
    font-size: 12.5px; line-height: 1.45; white-space: pre;
}

/* ====== Planta da casa (montagem) ====== */
.planta-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.planta-upload input[type=text] { flex: 0 1 280px; min-width: 180px; }

/* ===== Auditoria (logs de modificação) ===== */
.audit-filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.audit-filters .field { min-width: 180px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th, .audit-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2A2A33; vertical-align: top; }
.audit-table th { color: #9aa0ad; font-weight: 600; }
.audit-table td.nowrap { white-space: nowrap; }
.audit-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.audit-create { background: rgba(46, 160, 67, .18); color: #3fb950; }
.audit-update { background: rgba(56, 139, 253, .18); color: #58a6ff; }
.audit-delete { background: rgba(248, 81, 73, .18); color: #f85149; }
.audit-diff { display: flex; flex-direction: column; gap: 2px; }
.audit-diff > div { font-size: 12px; }
/* Diff revelado em linha própria, abrangendo todas as colunas, logo abaixo da linha clicada.
   A célula da linha-pai perde a borda inferior para "colar" visualmente no diff. */
.audit-table tr.audit-diff-row > td { padding: 0 10px 10px; border-bottom: 1px solid #2A2A33; }
.audit-diff-box { padding: 8px 12px; border-left: 2px solid #58a6ff; background: rgba(88,166,255,.06); border-radius: 6px; }
.audit-pager { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.planta-toolbar { display: flex; gap: 14px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.planta-stage {
    position: relative; display: inline-block; max-width: 100%;
    border: 1px solid #2A2A33; border-radius: 12px; overflow: hidden;
    background: #fff;   /* plantas costumam ter fundo branco */
}
.planta-stage img { display: block; max-width: 100%; height: auto; }
.planta-stage--edit { cursor: crosshair; }
.planta-marker {
    position: absolute; transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.55);
    background: var(--planta-color, #f5b34a);
    cursor: pointer; padding: 0;
}
.planta-marker--group { background: transparent; border: 4px solid var(--planta-color, #6ad1ff); }
.planta-marker--moving { outline: 3px dashed #6ad1ff; outline-offset: 3px; }
/* Marcador selecionado na multi-seleção (Ctrl/Shift+clique). */
.planta-marker--selected { outline: 3px solid #4FC3F7; outline-offset: 3px; box-shadow: 0 0 0 2px rgba(79,195,247,.35); }
/* Barra de alinhamento dos marcadores selecionados. */
.planta-align-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0;
    padding: 8px 12px; background: var(--panel); border: 1px solid var(--field-border); border-radius: 8px; }
.planta-marker__label {
    position: absolute; top: 110%; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 0.7rem; font-weight: 600;
    color: #fff; background: rgba(0, 0, 0, 0.65);
    padding: 1px 6px; border-radius: 6px; pointer-events: none;
}
/* Marcador de ESPELHO = quadradinho (gêmeo digital) */
.planta-marker--plate {
    border-radius: 6px; width: 28px; height: 28px;
    background: var(--planta-color, #c8b6ff); color: #1a1626;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}

/* Áreas em polígono (gêmeo digital) sobre a planta */
.planta-areas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.planta-area {
    fill: var(--twin-area-color, #f5b34a); fill-opacity: .12;
    stroke: var(--twin-area-color, #f5b34a); stroke-width: .3; stroke-opacity: .7;
    pointer-events: none;
}
.planta-area.is-edit { pointer-events: auto; cursor: pointer; }
.planta-area.is-edit:hover { fill-opacity: .28; }
.planta-draft-line { fill: rgba(122,90,248,.15); stroke: #7a5af8; stroke-width: .4; stroke-dasharray: 1.5 1; }
.planta-draft-dot { fill: #7a5af8; }
.planta-draw-actions { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }

/* Segmented (modos da planta + tipo de alvo do marcador) */
.seg { display: inline-flex; border: 1px solid #2A2A33; border-radius: 8px; overflow: hidden; }
.seg button {
    background: transparent; color: inherit; border: 0; padding: 6px 12px; cursor: pointer;
    border-right: 1px solid #2A2A33; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center;
}
.seg button:last-child { border-right: 0; }
.seg button.active { background: #7a5af8; color: #fff; }

/* ====== Espelhos & Circuitos ====== */
/* Modal do mapa: mesmo regime do mapa de pinos — a PAREDE dita a largura; textos longos
   (barra da mão, erro, bandeja) têm contribuição zerada e re-esticam pra 100%. */
.modal.platemap-modal { width: fit-content; min-width: 460px; max-width: 96vw; }
.platemap-modal .pinmap-hand,
.platemap-modal .err,
.platemap-modal .platemap-desc,
.platemap-modal .platemap-tray { width: min-content; min-width: 100%; box-sizing: border-box; }
.platemap-modal .pinmap-hand__hint { flex: 1 1 0; width: auto; min-width: 0; }
/* A "parede": colunas de teclas lado a lado, como o instalador enxerga o espelho. */
.platemap-wall {
    display: flex; gap: 12px; justify-content: flex-start;
    padding: 16px; border: 2px solid #3a4252; border-radius: 12px; background: #1d222c;
    /* Espelhos podem ter até 20 colunas — rola na horizontal em vez de estourar o modal. */
    overflow-x: auto; max-width: 100%;
}
.platemap-col { display: flex; flex-direction: column; gap: 10px; }
.platemap-slot {
    position: relative; width: 160px; height: 56px;
    border: 1px solid #2A2A33; border-radius: 8px; background: #232a36;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.platemap-slot--occupied { cursor: pointer; }
.platemap-slot--occupied:hover { background: #2A323D; }
/* Tecla de OUTRO ponto (ou preview no editar espelho): só informação, nada de clique —
   inclusive o badge, que no resto do sistema tem cursor de "pegar". */
/* Antes ficava esmaecido (opacity .8) e quase ilegível no "Editar espelho". Sem fade: a posição
   precisa ser bem visível; o cursor "default" já sinaliza que é só informação. */
.platemap-slot--readonly { cursor: default; }
.platemap-slot--readonly .pinmap-badge { cursor: default; }
.platemap-wall--mini { padding: 10px; gap: 8px; }
.platemap-wall--mini .platemap-col { gap: 6px; }
.platemap-wall--mini .platemap-slot { width: 92px; height: 40px; }
.platemap-wall--mini .platemap-slot__info { max-width: 80px; }
.platemap-slot--droppable { cursor: pointer; }
.platemap-slot--droppable:hover { background: rgba(106, 209, 255, 0.15); outline: 1px dashed #6ad1ff; }
.platemap-slot__info {
    font-size: 0.75rem; color: #eef2f8; max-width: 148px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.platemap-slot__empty { color: #aab4c6; font-size: 0.8rem; }
/* Mais contraste no preview "Editar espelho": fundo um tom mais claro e borda visível. */
.platemap-slot--readonly { background: #2b3340; border-color: #3a4454; }
.platemap-tray__title { margin: 14px 0 8px; }
.platemap-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.platemap-chip {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px;
    border: 1px solid #3a4252; border-radius: 8px; background: #232a36; cursor: grab;
}
.platemap-chip--hand { border-color: #4caf7d; }
.platemap-chip__desc { font-size: 0.85rem; }
/* Tabela dimensionada pelo conteúdo (sem flex:1): a coluna Ponto tem largura FIXA de
   um badge confortável — nada de células gigantes quando o mapa está vazio. */
.pinmap-table { border-collapse: collapse; font-size: 13px; }
.pinmap-table th, .pinmap-table td {
    border: 1px solid #2A2A33; padding: 3px 8px; text-align: center;
}
.pinmap-gpio { font-weight: bold; width: 48px; white-space: nowrap; cursor: help; }
.pinmap-meta { width: 44px; opacity: .7; }
.pinmap-cell { cursor: pointer; width: 92px; min-width: 92px; max-width: 92px; height: 30px; position: relative; }
.pinmap-cell--na { background: #1c1f26; cursor: not-allowed; opacity: .45; }
.pinmap-cell--reserved { background: rgba(255, 80, 80, 0.18); }
.pinmap-cell--occupied:hover { background: #2A323D; }
.pinmap-cell--droppable:hover { background: rgba(106, 209, 255, 0.15); outline: 1px dashed #6ad1ff; }
/* Pino incompatível com o tipo do ponto-alvo (LDR sem ADC, acionador em pino só-entrada): esmaecido
   + hachura âmbar + cursor de bloqueio. O servidor recusa de qualquer forma; isto ORIENTA antes. */
.pinmap-cell--incompat {
    cursor: not-allowed;
    opacity: .5;
    background-image: repeating-linear-gradient(45deg,
        rgba(245, 166, 35, 0.16) 0, rgba(245, 166, 35, 0.16) 5px,
        transparent 5px, transparent 10px);
}
.pinmap-cell--incompat:hover { outline: 1px dashed rgba(245, 166, 35, 0.75); }
.pinmap-badge {
    display: inline-block; padding: 1px 10px; border-radius: 999px;
    background: #14646b; font-weight: 600; cursor: grab;
    white-space: nowrap;   /* "33-D" não pode quebrar no hífen e virar duas linhas */
}
/* No form do Ponto o badge é só indicador — não se arrasta nada ali. */
.pinmap-field .pinmap-badge { cursor: default; }
.pinmap-badge--target { background: #2f7d46; }
.pinmap-badge--hand { background: #2f7d46; cursor: grab; }
.pinmap-x {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; line-height: 1; padding: 0;
    border: none; background: transparent; color: #f87171; cursor: pointer; font-size: 14px;
}
.pinmap-reserved-name { color: #ff9b9b; font-size: 12px; }
/* Input de reserva cabe DENTRO da célula de 30px — sem estufar a linha. */
.pinmap-reserve-input {
    width: 100%; height: 24px; padding: 0 6px;
    font-size: 12px; line-height: 22px;
    box-sizing: border-box; border-radius: 4px;
}
.pinmap-warning { margin-top: 12px; color: #f5b34a; font-weight: 600; }
.pinmap-images { margin-top: 12px; }
.pinmap-images img { display: block; max-width: 100%; margin: 10px auto; }

/* Chip de projeto vinculado (tela de Acesso → aba Usuários). */
.user-project-chip {
    display: inline-flex; align-items: center;
    padding: 2px 10px;
    border: 1px solid rgba(106, 209, 255, 0.3);
    border-radius: 999px;
    background: rgba(106, 209, 255, 0.08);
    font-size: 11px;
}

/* ---- Modal ---- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    /* Ancorado ao topo: ao trocar de aba o conteúdo cresce p/ baixo e o
       cabeçalho permanece no mesmo lugar (padrão do sistema). */
    display: flex; align-items: flex-start; justify-content: center;
    /* z-index ACIMA do rodapé de banner (70) — senão o banner fixo cobre o fim do modal.
       overflow:auto deixa modais altos rolarem dentro do backdrop, sempre acima do banner. */
    padding: 6vh 12px; z-index: 100; overflow: auto;
}
.modal {
    background: var(--bg); border: 1px solid #2A2A33; border-radius: 10px;
    width: 460px; max-width: 92vw; overflow: visible; padding: 20px;
}
.modal h2 { margin-top: 0; cursor: move; user-select: none; }
.modal-header { cursor: move; user-select: none; }
.modal-header h2 { margin: 0; }
/* Respiro entre o título/checkbox Ativo e o primeiro campo — sem isto o cabeçalho fica
   colado no conteúdo e a tela inteira parece embolada. */
.modal-header { margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
/* Grade compacta (2 colunas) das telas Gerenciais ocultáveis por usuário (ProjectAccessFields). */
.pa-hidden-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pa-hidden-grid .checkbox-row { margin: 4px 0; }
@media (max-width: 640px) { .pa-hidden-grid { grid-template-columns: 1fr; } }
.checkbox-row input { width: auto; }

/* Checkbox padronizado (padronização visual): no tema escuro o checkbox nativo fica
   cinza-em-cinza e é difícil saber se está marcado. accent-color pinta o "check" com a cor
   de destaque + tamanho maior e cursor de mão. Vale pra TODOS os checkboxes do Studio
   (Grupos de Sistema/permissões, formulários, etc.). Radio já usa o mesmo token. */
input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    flex: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    border: 1px solid var(--field-border);
    border-radius: 4px;
    background: var(--field);   /* desmarcado: MESMAS cores de um campo de formulário (e-mail etc.) */
    transition: background .15s, border-color .15s;
}
input[type=checkbox]:hover:not(:disabled) { border-color: #6ea8ff; }
input[type=checkbox]:checked { background: #6ea8ff; border-color: #6ea8ff; }
input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 8px;
    border: solid #16161D;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);   /* centra o "✓" em qualquer box-sizing */
}
input[type=checkbox]:focus-visible { outline: 2px solid #6ea8ff; outline-offset: 1px; }
input[type=checkbox]:disabled { cursor: not-allowed; opacity: .45; }

.modal.wide { width: 560px; }
.modal.xwide { width: 720px; }
/* Aba "Pinos" da Editar placa: a grade de 3 colunas é larga — deixa o modal crescer pra
   caber tudo sem rolagem horizontal (como o modal do Mapa de pinos), limitado à viewport. */
.modal.modal--pinsfit { width: fit-content; min-width: 560px; max-width: 96vw; }

/* ---- Abas ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #2A2A33; margin-bottom: 14px; flex-wrap: wrap; }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: #B5B5B5; padding: 8px 12px; cursor: pointer; border-radius: 0; }
.tab:hover { background: transparent; color: #fff; }
.tab.active { color: #fff; border-bottom-color: #4FC3F7; }

/* ---- Cabeçalho do projeto ---- */
.proj-header { background: #1E2530; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
/* Nome + " - " + cidade/UF: mesma fonte/peso/cor (sem opacidade). */
.proj-header .pname { font-size: 18px; font-weight: bold; color: var(--link); }

/* ---- 2 colunas em formulário ---- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.muted { opacity: .6; font-size: 12px; }
.section-title { font-weight: bold; opacity: .9; margin: 10px 0 4px; }
/* Grade de cards (catálogo de integrações etc.) — responsiva. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.card-grid .card { display: flex; align-items: center; }
/* Selo neutro discreto ("Em breve"). */
.badge-soft { display: inline-block; font-size: 10px; font-weight: 600; opacity: .7;
    border: 1px solid currentColor; border-radius: 8px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }
.ok { color: #36c08a; }
hr.sep { border: none; border-top: 1px solid #2A2A33; margin: 12px 0; }
.file-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; }

/* Overlay de upload em andamento — cobre o card por completo durante o anexo de arquivos
   ao histórico, para o usuário ter feedback imediato e não duvidar se algo está acontecendo. */
.upload-overlay {
    position: absolute; inset: 0;
    background: rgba(15, 22, 32, .88);
    border-radius: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; z-index: 5;
}
.upload-overlay .upload-title { color: #fff; font-weight: 600; font-size: 14px; }
.upload-overlay .upload-sub { color: #B5B5B5; font-size: 12px; }

/* ---- Agrupamentos (Conjunto/Cena/Rotina/Efeito) ---- */
.group-badge {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; margin-right: 6px; vertical-align: middle;
    text-transform: uppercase; letter-spacing: .5px;
}
.group-badge-G { background: #2E7D32; color: #fff; }
.group-badge-C { background: #6A1B9A; color: #fff; }
.group-badge-R { background: #1565C0; color: #fff; }
.group-badge-E { background: #EF6C00; color: #fff; }

/* Badges dos tipos de Evento (mesmo formato visual do group-badge) */
.event-badge {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; margin-right: 6px; vertical-align: middle;
    text-transform: uppercase; letter-spacing: .5px; color: #fff;
}
.event-badge-H { background: #00838F; }  /* Horário (Scheduled) */
.event-badge-A { background: #F9A825; color: #000; }  /* Sol (Astronomical) */
.event-badge-V { background: #5E35B1; }  /* Quando um sensor mudar (ByValue) */
.event-badge-T { background: #00695C; }  /* Tempo parado (Timeout) */
.event-badge-R { background: #C62828; }  /* Repetições (Repetitive) */
.event-badge-O { background: #455A64; }  /* Quando o sistema iniciar (Startup) */
.event-badge-S { background: #6D4C41; }  /* Mudou de perfil (ByProfile) */

/* Wizard de criação: 4 cards explicativos */
.wizard-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
}
.wizard-card {
    text-align: left; padding: 16px; background: var(--field); border: 1px solid var(--field-border);
    border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s;
}
.wizard-card:hover { background: #2F3340; border-color: #4FC3F7; }
.wizard-icon { font-size: 24px; margin-bottom: 8px; }
.wizard-title { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 4px; }
.wizard-desc { color: #B5B5B5; font-size: 12px; line-height: 1.4; }

/* Bloco explicativo do tipo, no topo do form de criação */
.info-block {
    border-radius: 6px; padding: 10px 12px; margin: 8px 0;
    border-left: 4px solid; font-size: 13px;
}
.info-block-G { background: #1B3320; border-color: #2E7D32; }
.info-block-C { background: #2A1B33; border-color: #6A1B9A; }
.info-block-R { background: #1B2233; border-color: #1565C0; }
.info-block-E { background: #33271B; border-color: #EF6C00; }
.info-block-event { background: #1F2733; border-color: #4FC3F7; display: flex; gap: 12px; align-items: flex-start; }

/* Exemplo no cartão do Wizard (linha em itálico abaixo da descrição) */
.wizard-example { color: #8FB9D6; font-size: 11.5px; margin-top: 6px; font-style: italic; }

/* Form de evento Agendado: 4 botões grandes para escolher o modo */
.schedule-mode-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.schedule-mode-btn { background: var(--field); border: 1px solid var(--field-border); border-radius: 6px;
    padding: 10px 12px; text-align: center; cursor: pointer; color: var(--text); transition: background .15s, border-color .15s; }
.schedule-mode-btn:hover { background: #2F3340; }
.schedule-mode-btn.active { background: #1F4A8C; border-color: #4FC3F7; color: #fff; }
.smb-label { font-weight: 700; font-size: 13px; }
.smb-hint { font-size: 11px; color: #B5B5B5; margin-top: 2px; }
.schedule-mode-btn.active .smb-hint { color: #B5DCFF; }

/* Input de texto livre dentro do bloco "Avançado" do CommandTargetPicker — fica com
   placeholder cinza legível em vez do "quase branco" default. */
.advanced-content .advanced-input { width: 100%; }
.advanced-content .advanced-input::placeholder { color: #8a8f99; opacity: 0.85; }

/* Multi-seleção de perfis em badges coloridos (ProfileBadgePicker). Cada badge tem a cor
   do perfil — ligado = fundo cheio + ✓ + anel interno branco; desligado = borda pontilhada
   semi-transparente, deixando claro qual está marcado e qual não está. */
/* gap pequeno o suficiente pra caber os 6 perfis em uma única linha no modal padrão,
   mas grande o suficiente pra ficarem separados visualmente. */
.profile-picker { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.profile-badge { padding: 7px 12px; }
.profile-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: transform 80ms ease, opacity 120ms ease; }
.profile-badge:hover { transform: translateY(-1px); opacity: 1 !important; }
.profile-badge-mark { font-weight: 800; min-width: 12px; text-align: center; }
.profile-badge-name { font-weight: 600; }

/* Botões compactos de dia da semana (Dom..Sáb) */
.weekday-row { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday-btn { min-width: 52px; padding: 8px 10px; border-radius: 6px;
    background: var(--field); border: 1px solid var(--field-border); color: var(--text); cursor: pointer; font-weight: 600; }
.weekday-btn:hover { background: #2F3340; }
.weekday-btn.on { background: #2E7D32; border-color: #66BB6A; color: #fff; }

/* Grade dos 31 dias do mês */
.monthday-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.monthday-btn { padding: 6px 0; background: var(--field); border: 1px solid var(--field-border);
    border-radius: 4px; color: var(--text); cursor: pointer; font-size: 12px; }
.monthday-btn:hover { background: #2F3340; }
.monthday-btn.on { background: #2E7D32; border-color: #66BB6A; color: #fff; }

/* Form astronômico — escolha Nascer/Pôr e slider de offset */
.sun-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sun-btn { background: var(--field); border: 1px solid var(--field-border); border-radius: 6px;
    padding: 12px; cursor: pointer; color: var(--text); text-align: center; }
.sun-btn:hover { background: #2F3340; }
.sun-btn.active { background: #4A3000; border-color: #F9A825; color: #FFD79B; }
.sun-ico { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.offset-live { margin-top: 6px; font-style: italic; color: #FFD79B; text-align: center; }

/* Bloco "Avançado" colapsável (anti-flapping no ByValue, e outros usos futuros) */
.advanced-block { margin-top: 12px; }
.advanced-toggle { background: transparent; border: none; color: #4FC3F7; cursor: pointer;
    padding: 6px 0; font-size: 13px; font-weight: 600; }
.advanced-toggle:hover { color: #81D4FA; }
.advanced-content { padding: 8px 12px; background: var(--field); border-left: 3px solid #4FC3F7;
    border-radius: 0 4px 4px 0; margin-top: 4px; }

/* TimeSpanPicker — 4 inputs compactos lado a lado (dias/horas/min/seg) */
.timespan-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ts-cell { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.ts-cell input { width: 60px; text-align: center; padding: 6px; }
.ts-cell label { font-size: 11px; color: #B5B5B5; margin-top: 2px; }
.ts-total { margin-left: 8px; font-size: 12px; align-self: center; }

/* Multi-seleção (modo Avançado) — chips toggle */
.multi-toggle-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--field);
    border: 1px solid var(--field-border); border-radius: 6px; max-height: 200px; overflow-y: auto; }
.multi-toggle-btn { padding: 4px 10px; border-radius: 12px; background: transparent;
    border: 1px solid var(--field-border); color: var(--text); cursor: pointer; font-size: 12px; }
.multi-toggle-btn:hover { background: #2F3340; }
.multi-toggle-btn.on { background: #1565C0; border-color: #4FC3F7; color: #fff; }

/* Alerta amarelo (avisos didáticos não-bloqueantes) */
.alert { background: #3A2F1B; border-left: 4px solid #F9A825; color: #FFD79B;
    padding: 10px 12px; border-radius: 6px; font-size: 13px; }

/* Lista de checkbox por ambiente (Conjunto) */
.checkbox-list { background: var(--field); border: 1px solid var(--field-border); border-radius: 6px;
    padding: 8px; max-height: 320px; overflow-y: auto; }
.env-group { border-bottom: 1px solid #2A2A33; padding: 4px 0; }
.env-group:last-child { border-bottom: none; }
.env-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.env-toggle { background: transparent; border: none; color: var(--text); padding: 4px 0; text-align: left;
    font-weight: 600; font-size: 13px; flex: 1; cursor: pointer; }
.env-toggle:hover { color: #4FC3F7; }
.group-sel-count { color: #4FC3F7; font-weight: 600; margin-left: 8px; font-size: 11px; }
.env-group-items { padding: 4px 0 4px 18px; }

/* Lista de valores em Cena/Rotina */
.cena-list { background: var(--field); border: 1px solid var(--field-border); border-radius: 6px;
    padding: 8px; max-height: 360px; overflow-y: auto; }
.cena-row { display: flex; align-items: center; gap: 12px; padding: 6px 4px;
    border-bottom: 1px solid #2A2A33; }
.cena-row:last-child { border-bottom: none; }
.cena-row-info { flex: 1; min-width: 0; }
.cena-row-ctrl { flex: 1.5; min-width: 0; display: flex; align-items: center; }
.cena-row-delay { display: flex; flex-direction: column; align-items: flex-end; }

/* Botões em grupo (toggle Lig/Desl, ou WD Fechar/Parar/Abrir) */
.btn-group { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--field-border); }
.btn-group-item { background: var(--field); color: var(--text); border: none; padding: 6px 12px;
    cursor: pointer; font-size: 13px; border-right: 1px solid var(--field-border); }
.btn-group-item:last-child { border-right: none; }
.btn-group-item:hover { background: #3A3B47; }
.btn-group-item.active { background: #4FC3F7; color: #08111F; font-weight: 600; }

/* Lista do Efeito (linhas livremente adicionáveis) */
.efeito-list { background: var(--field); border: 1px solid var(--field-border); border-radius: 6px;
    padding: 8px; max-height: 420px; overflow-y: auto; }
.efeito-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #2A2A33; }
.efeito-row:last-child { border-bottom: none; }
.efeito-row button.danger { padding: 4px 8px; font-size: 14px; }

/* Coluna de reordenação (setas ▲/▼) e marcador de tempo cumulativo */
.cena-row-order { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.ord-btn {
    background: var(--field); color: var(--text); border: 1px solid var(--field-border);
    border-radius: 4px; width: 24px; height: 20px; padding: 0; line-height: 1;
    font-size: 10px; cursor: pointer;
}
.ord-btn:hover:not(:disabled) { background: #3A3B47; color: #4FC3F7; }
.ord-btn:disabled { opacity: .3; cursor: not-allowed; }
/* Alça de arraste genérica + feedback de drop nas listas de passos (Rotina/Efeito). */
.reorder-grip { color: #5e6680; font-size: 1.1rem; cursor: grab; flex: none; }
.reorder-grip:active { cursor: grabbing; }
.cena-row.dragging, .efeito-row.dragging { opacity: .45; }
.cena-row.drag-over, .efeito-row.drag-over { box-shadow: 0 -2px 0 #4FC3F7 inset; }
.cena-cum {
    display: inline-block; margin-top: 4px; font-size: 11px;
    color: #4FC3F7; font-weight: 600; font-variant-numeric: tabular-nums;
}
.back-link { background: transparent; border: none; color: var(--link); cursor: pointer; padding: 0; margin-bottom: 8px; }

/* ---- Aviso de reconexão (PT) ---- */
#components-reconnect-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000; align-items: center; justify-content: center; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
.reconnect-box { background: var(--panel); border: 1px solid #2A2A33; border-radius: 10px; padding: 24px 28px; max-width: 420px; text-align: center; }
.reconnect-box h3 { margin: 8px 0; }
.reconnect-box p { opacity: .8; }
.reconnect-modal .r-failed, .reconnect-modal .r-rejected { display: none; }
#components-reconnect-modal.components-reconnect-failed .r-reconnecting,
#components-reconnect-modal.components-reconnect-rejected .r-reconnecting { display: none; }
#components-reconnect-modal.components-reconnect-failed .r-failed { display: block; }
#components-reconnect-modal.components-reconnect-rejected .r-rejected { display: block; }
.spinner { width: 28px; height: 28px; margin: 0 auto; border: 3px solid #3A3B47; border-top-color: #4FC3F7; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Sanfona (accordion) de configurações ---- */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.accordion details { background: var(--panel); border: 1px solid #2A2A33; border-radius: 8px; }
.accordion summary { cursor: pointer; padding: 12px 14px; font-weight: bold; list-style: none; user-select: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before { content: "▸"; color: var(--muted); margin-right: 8px; }
.accordion details[open] summary::before { content: "▾"; }
.accordion summary .sub { font-weight: normal; opacity: .55; font-size: 12px; margin-left: 8px; }
.accordion .acc-body { padding: 0 14px 14px; }
.acc-body .desc { opacity: .6; font-size: 12px; margin: 0 0 10px; }

/* ---- Linha de lista (não usa .card p/ evitar hover do container) ---- */
.list-row { background: #20262F; border: 1px solid transparent; border-radius: 6px; padding: 10px 12px; margin: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-row:hover { background: #2A323D; }
.list-row .name { font-weight: bold; }
/* Lista reordenável por arraste — mesmo visual dos catálogos do Admin (alça + alvo de drop). */
.list-row[draggable="true"] { cursor: grab; }
.list-row[draggable="true"] .reorder-grip { color: #5e6680; font-size: 1.05rem; cursor: grab; padding: 0 2px; flex: none; }
.list-row.drag-over { border-color: #4FC3F7; box-shadow: 0 0 0 1px #4FC3F7 inset; }
.list-row.dragging { opacity: .45; }

/* ---- Label que se comporta como botão (ex.: anexar arquivo) ---- */
.btnlike { display: inline-block; background: var(--field); color: var(--text); border: 1px solid var(--field-border); border-radius: 6px; padding: 8px 14px; font-size: 14px; cursor: pointer; opacity: 1; margin: 0; }
.btnlike:hover { background: #3A3B47; }

/* ---- Sino de notificações ---- */
.bell-wrap { position: relative; display: inline-block; }
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -6px; background: #C0392B; color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 5px; line-height: 1.4; }
.bell-panel { position: absolute; right: 0; top: 110%; width: 340px; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid #2A2A33; border-radius: 8px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
/* Overlay invisível em tela cheia que fecha o painel ao clicar fora dele.
   z-index abaixo do .bell-panel (60) para não intercepta cliques dentro do painel. */
.bell-outside { position: fixed; inset: 0; z-index: 55; background: transparent; cursor: default; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #2A2A33; }
.bell-item { padding: 10px 12px; border-bottom: 1px solid #23232B; cursor: pointer; }
.bell-item:hover { background: #2A323D; }
.bell-item.unread { background: #1E2530; }
.bell-item.unread .bell-title { font-weight: bold; }

/* =============================================================================
   ThemeSwitcher — botão "paleta" no topbar + popover de tema/densidade
   ============================================================================ */
/* ThemeSwitcher e classes .ts-* migradas pra cards.css (compartilhado Studio+Home). */

/* =============================================================================
   MenuTab — montagem do menu (drag-drop + form + live preview)
   ============================================================================ */
.menu-tab { display: flex; flex-direction: column; gap: 12px; }
.menu-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.menu-toolbar button { display: inline-flex; align-items: center; gap: 6px; }

/* Badge de estado de publicação do menu. Dirty = pulsa pra chamar atenção. */
.menu-pub-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.menu-pub-badge--clean {
    background: rgba(63, 199, 122, 0.12);
    color: #3fc77a;
    border-color: rgba(63, 199, 122, 0.3);
}
.menu-pub-badge--dirty {
    background: rgba(245, 179, 74, 0.16);
    color: #f5b34a;
    border-color: rgba(245, 179, 74, 0.4);
    animation: dk9-pub-pulse 2s ease-in-out infinite;
}
@keyframes dk9-pub-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 74, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 179, 74, 0.20); }
}
.menu-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1000px) { .menu-grid { grid-template-columns: 1fr; } }

.menu-tree-pane,
.menu-edit-pane {
    background: #1A1F2A;
    border: 1px solid #2A2A33;
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 400px;
}
/* Painel direito acompanha o scroll — fica fixo enquanto a árvore rola */
.menu-edit-pane {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}
.menu-tree-pane > header,
.menu-edit-pane > header {
    display: flex; align-items: baseline; gap: 10px;
    border-bottom: 1px solid #2A2A33;
    padding-bottom: 8px; margin-bottom: 10px;
}
.menu-tree-pane > header h3,
.menu-edit-pane > header h3 { margin: 0; font-size: 1rem; }

.menu-tree, .menu-tree ul { list-style: none; padding-left: 18px; margin: 0; }
.menu-tree { padding-left: 0; }
.menu-tree__li { margin: 2px 0; }
.menu-node {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 7px; background: #232a36;
    user-select: none;
    transition: background 0.15s;
}
/* Linha azul antes do nó quando o cursor está na zona superior durante drag */
.menu-node.drop-before::before,
.menu-node.drop-after::after {
    content: ""; position: absolute; left: 0; right: 0;
    height: 3px; background: var(--dk9-accent, #6ea8ff); border-radius: 2px;
    box-shadow: 0 0 6px rgba(110, 168, 255, 0.6);
}
.menu-node.drop-before::before { top: -3px; }
.menu-node.drop-after::after { bottom: -3px; }
/* Drop como filho: highlight do nó alvo */
.menu-node.drop-as-child {
    background: rgba(110, 168, 255, 0.20) !important;
    outline: 2px dashed var(--dk9-accent, #6ea8ff);
}
.menu-node:hover { background: #2c3543; }
/* Spans clicáveis dentro do nó — só estes editam o item (botão "+" fica fora). */
.menu-node .clickable { cursor: pointer; }
.menu-node .clickable:hover { color: var(--dk9-accent, #6ea8ff); }
.menu-node.is-selected {
    background: rgba(110, 168, 255, 0.22);
    box-shadow: inset 0 0 0 1px var(--dk9-accent, #6ea8ff);
}
.menu-node__grip { color: #5e6680; font-size: 1rem; cursor: grab; padding: 0 2px; }
.menu-node__grip:active { cursor: grabbing; }
.menu-node__type {
    display: inline-block; padding: 1px 6px; border-radius: 5px;
    font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem;
    font-weight: 700; letter-spacing: 0.4px;
}
.menu-node__type.is-ger { background: rgba(245, 179, 74, 0.18); color: #f5b34a; }
.menu-node__type.is-op  { background: rgba(110, 168, 255, 0.18); color: #6ea8ff; }
.menu-node__type.is-pt  { background: rgba(63, 199, 122, 0.18); color: #3fc77a; }
.menu-node__title { flex: 1; font-weight: 500; color: #e8ecf7; }
.menu-node__code {
    font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem;
    background: rgba(110, 168, 255, 0.14); color: #8ec5ff;
    border: 1px solid rgba(110, 168, 255, 0.25);
    border-radius: 5px; padding: 0 5px;
}
.menu-node__route { font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem; color: #9aa3c4; }
.menu-node__count { color: #6b7397; font-size: 0.75rem; }
.menu-node__add {
    width: 26px; height: 26px; padding: 0; border: 0;
    background: transparent; color: #9aa3c4; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.menu-node__add:hover { background: rgba(63, 199, 122, 0.2); color: #3fc77a; }

.menu-root-actions { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #2A2A33; }

.menu-empty {
    text-align: center; color: #9aa3c4; padding: 28px 12px;
}
.menu-empty i { font-size: 2rem; display: block; margin-bottom: 6px; color: #6b7397; }
.menu-empty button { margin-top: 10px; }

.menu-edit-empty {
    text-align: center; color: #6b7397; padding: 60px 16px;
}
.menu-edit-empty i { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.menu-edit-empty p { margin: 4px 0; }

.menu-actions {
    display: flex; gap: 8px; margin-top: 10px;
    border-top: 1px solid #2A2A33; padding-top: 10px;
}
.menu-actions button { display: inline-flex; align-items: center; gap: 6px; }
.menu-actions .danger { margin-left: auto; }

.menu-preview {
    margin-top: 18px;
    border-top: 1px dashed #2A2A33;
    padding-top: 12px;
}
.menu-preview > header h4 { margin: 0 0 8px; font-size: 0.92rem; color: #9aa3c4; }
.menu-preview__bg {
    background: #0f1320;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #2A2A33;
}
.preview-hint { font-size: 0.8rem; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }

.radio-inline { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.radio-inline input { accent-color: var(--dk9-accent, #6ea8ff); }

/* ============ Aba Ferramentas ============ */
.tools-tab { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.tools-tab .lede { color: var(--dk9-text-dim, #9fa6b8); margin: 0 0 8px; }
.tool-card {
    background: var(--dk9-card, #1a1f2e);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 20px;
}
.tool-card > header {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem; font-weight: 600;
    margin-bottom: 6px;
}
.tool-card > header i { color: var(--dk9-accent, #6ad1ff); font-size: 1.15rem; }
.tool-card p.muted { margin: 0 0 12px; color: var(--dk9-text-dim, #9fa6b8); font-size: 0.92rem; }
.tools-order, .tools-range {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px;
    margin-bottom: 12px;
}
.tools-range { grid-template-columns: repeat(2, 1fr); }
.tools-order label, .tools-range label {
    display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem;
    color: var(--dk9-text-dim, #9fa6b8);
}
/* Os selects/inputs aqui usam o PADRÃO global de campo (var(--field)/--field-border, radius 6,
   color-scheme:dark) — NÃO sobrescrever com visual ad-hoc (era uma variante fora do padrão). */
/* Seleção de placas (código fonte): checkboxes em coluna, com "todas" destacada. */
.tools-boardpick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tools-boardpick label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.tools-boardpick__all { font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Pré-via do QR na aba QR Codes (imagem + URL/baixar lado a lado). */
.qr-preview { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.qr-preview img { background: #fff; padding: 6px; border-radius: 8px; }
.qr-preview code { word-break: break-all; }

.alexa-block { margin-top: 14px; }
.alexa-block h4 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    display: flex; align-items: center; gap: 8px;
}
.alexa-block h4 small { color: var(--dk9-text-dim, #9fa6b8); font-weight: 400; }
.alexa-block pre {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.84rem;
    color: var(--dk9-accent, #6ad1ff);
    max-height: 200px; overflow: auto;
    margin: 0;
}
.copy-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 2px 8px;
    color: var(--dk9-text-dim, #9fa6b8);
    cursor: pointer;
    font-size: 0.82rem;
}
.copy-btn:hover { color: var(--dk9-accent, #6ad1ff); border-color: var(--dk9-accent, #6ad1ff); }
.warn { color: #f5b34a; }
.err { background: rgba(226,92,92,0.14); color: #f4a4a4; padding: 7px 12px; border-radius: 7px; font-size: 0.88rem; }
.spin { animation: dk9-spin 1.1s linear infinite; }

/* Modal genérico (regen GUID) */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(8,11,19,0.7); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.modal-card {
    background: var(--dk9-card, #1a1f2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 22px 24px;
    width: min(480px, 92vw);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.modal-card h3 { margin: 0 0 10px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.modal-card p { color: var(--dk9-text-dim, #9fa6b8); }
.modal-card footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ============ Mega-tabs (Projetos: super + sub) ============ */
/* Linha 1: super-abas (Cadastro/Comportamento/Operação/Administração) — visual mais firme */
.tabs--super {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}
.tabs--super .tab {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 16px;
    color: #8a8a96;
}
.tabs--super .tab:hover { color: #d5d5da; }
.tabs--super .tab.active {
    color: #fff;
    border-bottom-color: #4FC3F7;
}

/* Linha 2: sub-abas — visual mais leve, sem underline, com pill no ativo */
.tabs--sub {
    border-bottom: 1px solid #2A2A33;
    margin-bottom: 14px;
    padding: 4px 0 6px;
    gap: 2px;
}
.tab--sub {
    font-size: 0.88rem;
    padding: 5px 11px;
    border-radius: 6px;
    border-bottom: none !important;
    color: #aaa;
}
.tab--sub:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e0e0e0;
}
.tab--sub.active {
    background: rgba(79, 195, 247, 0.14);
    color: #4FC3F7;
    border-bottom-color: transparent !important;
}

/* Sub-abas de CONFIGURAÇÃO (setup acessório) agrupadas à direita, atrás de uma divisória,
   marcadas por engrenagem discreta + tom violeta — mesma convenção do Admin. O violeta não
   conflita com o azul de "você está aqui": item de config ativo vira pílula violeta. */
.tabs-sub__config {
    margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
    padding-left: 12px; border-left: 1px solid #2A2A33;
}
.tabs-sub__gear { color: #a99be0; font-size: 14px; margin-right: 4px; cursor: default; }
.tab--sub.is-config { color: #a99be0; }
.tab--sub.is-config:hover { background: rgba(169,155,224,0.10); color: #c3b8ef; }
.tab--sub.is-config.active { background: rgba(169,155,224,0.18); color: #c3b8ef; border-bottom-color: transparent !important; }

/* ============ Login toolbar (canto sup. direito, antes do login) ============ */
.login-toolbar {
    position: fixed; top: 12px; right: 16px; z-index: 100;
    display: flex; gap: 8px;
}

/* Para o LanguageSwitcher hospedado dentro de cards/menus do Studio */
.row-actions .lang-switcher__btn,
.login-toolbar .lang-switcher__btn {
    color: var(--dk9-text, #e6e9ef);
}

/* H1 outline fix global no Studio também — qualquer página com tabindex="-1" */
h1[tabindex] { outline: none !important; }
h1[tabindex]:focus { outline: none !important; }
h1[tabindex]:focus-visible { outline: none !important; box-shadow: none !important; }

/* ============ LanguageSwitcher compact (icon-only, alinhado com outros botões topbar) ============ */
.lang-switcher--compact .lang-switcher__btn {
    padding: 6px 9px;
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
}
.lang-switcher--compact .lang-switcher__btn i {
    font-size: 1.1rem;
}

/* ============ Topbar: agrupa lado esquerdo (back + saudação) e botão "voltar" ============ */
.topbar-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.topbar-back {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dk9-text-dim, #9fa6b8);
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    font-size: 1.05rem;
}
.topbar-back:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--dk9-text, #e6e9ef);
}

/* ============ Topbar: padroniza TODOS os botões pro mesmo visual ============
   O usuário pediu visual único: tudo seguindo o padrão do botão "Sair" / "Sino"
   (background var(--field), border var(--field-border), padding 8x14, radius 6,
   altura ~36px). As implementações ad-hoc (theme-switcher, lang-switcher) são
   sobrescritas dentro de .row-actions pra encaixar nesse padrão. */
.row-actions {
    align-items: stretch;
}
.row-actions > * {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
}
/* ATENÇÃO: aqui usamos > button (filho direto) e seletores específicos dos botões
   topbar — descendentes (.row-actions button) afetariam botões DENTRO dos popups
   (ts-opt do theme switcher, lang-switcher__item, bell-item, etc.) e quebrariam
   o visual desses popups. */
.row-actions > .theme-switcher > .theme-switcher__toggle,
.row-actions > .lang-switcher > .lang-switcher__btn,
.row-actions > .bell-wrap > .bell-btn,
.row-actions > .topbar-icon-btn,
.row-actions > button {
    background: var(--field);
    color: var(--text);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    padding: 0 12px;
    height: 36px;
    line-height: 1;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.row-actions > .theme-switcher > .theme-switcher__toggle:hover,
.row-actions > .lang-switcher > .lang-switcher__btn:hover,
.row-actions > .bell-wrap > .bell-btn:hover,
.row-actions > .topbar-icon-btn:hover,
.row-actions > button:hover {
    background: #3A3B47;
}
.row-actions .theme-switcher__toggle i,
.row-actions .lang-switcher__btn i,
.row-actions .topbar-icon-btn i {
    font-size: 1rem;
}
/* Os switches viraram botões "iguais" — mas o popover ainda precisa do .lang-switcher
   container relativo, então não mexemos no wrapper. */
.row-actions .lang-switcher,
.row-actions .theme-switcher,
.row-actions .bell-wrap {
    display: inline-flex;
    align-items: stretch;
}

/* Topbar-back ganha texto "Voltar" agora — ajusta padding/largura, mantém altura 36. */
.topbar-back {
    background: transparent;
    border: 1px solid var(--field-border);
    color: var(--text);
    border-radius: 6px;
    padding: 0 14px;
    height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}
.topbar-back:hover { background: #3A3B47; }
.topbar-back i { font-size: 1rem; opacity: 0.85; }

/* Saudação ganha respiro maior depois do botão Voltar. */
.topbar-greeting { margin-left: 16px; }

/* Linhas inativas do Financeiro */
.finance-row--inactive {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}
.finance-row--inactive td:last-child {
    text-decoration: none;   /* botão de Reativar não pode ficar riscado */
}

/* ============ HARD overrides: topbar buttons IDÊNTICOS ============
   Outras folhas (cards.css do Dk9.Ui.Web) trazem .lang-switcher__btn próprio que
   estava vencendo a cascata. Aqui força !important pra garantir visual único:
   altura 36, padding 0 12, mesma borda, mesmo background. Não-negociável. */
.row-actions .lang-switcher .lang-switcher__btn,
.row-actions .theme-switcher .theme-switcher__toggle,
.row-actions .bell-wrap .bell-btn,
.row-actions .topbar-icon-btn,
.row-actions > button {
    background: var(--field) !important;
    color: var(--text) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    font-size: 0.92rem !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.row-actions .lang-switcher .lang-switcher__btn:hover,
.row-actions .theme-switcher .theme-switcher__toggle:hover,
.row-actions .bell-wrap .bell-btn:hover,
.row-actions .topbar-icon-btn:hover,
.row-actions > button:hover {
    background: #3A3B47 !important;
}

/* Mais espaço entre Voltar e a saudação */
.topbar-greeting { margin-left: 28px !important; }

/* Overlay invisível pra fechar Theme switcher ao clicar fora — espelha o pattern
   do bell-outside. z-index < .theme-switcher__pop (60). */
.theme-switcher__outside {
    position: fixed; inset: 0; z-index: 55;
    background: transparent; cursor: default;
}
/* .lang-switcher__backdrop migrado pra cards.css (compartilhado Studio+Home). */

/* ============================================================================
   Botão "Voltar" no cluster da DIREITA (item mais à esquerda dele), não isolado
   no canto esquerdo. Sem mexer no markup de cada página: promovemos os filhos da
   .topbar-left (display:contents) e reordenamos por flex order — saudação à
   esquerda (margin-auto empurra o resto pra direita), depois Voltar, depois os
   demais ícones. Páginas sem Voltar não mudam (nada com order:2 aparece).
   ========================================================================== */
.topbar { gap: 8px; }
.topbar > .topbar-left { display: contents; }
.topbar .topbar-greeting { order: 1; margin-right: auto; }
.topbar .topbar-back { order: 2; }
.topbar > .row-actions { order: 3; }

/* ============================================================================
   ACESSO REMOTO L7 — Console (SQL + terminal). Admin-only.
   ========================================================================== */
.console-sql {
    width: 100%; min-height: 120px; resize: vertical;
    background: #0c0c12; color: #e6e6ea;
    border: 1px solid var(--field-border); border-radius: 8px;
    padding: 10px 12px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px;
}
.console-grid-wrap { margin-top: 8px; max-height: 480px; overflow: auto; border: 1px solid var(--field-border); border-radius: 8px; }
.console-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family: Consolas, monospace; }
.console-grid thead th {
    position: sticky; top: 0; background: #23232b; color: #c7c9d4;
    text-align: left; padding: 6px 10px; border-bottom: 2px solid #34343f; white-space: nowrap;
}
.console-grid tbody td { padding: 5px 10px; border-bottom: 1px solid #23232b; white-space: pre; vertical-align: top; }
.console-grid tbody tr:nth-child(odd) td { background: rgba(255,255,255,.022); }
.ok-box { background: rgba(46,125,50,0.16); color: #a6e0a8; padding: 7px 12px; border-radius: 7px; font-size: 0.9rem; }
.console-term { height: 60vh; min-height: 360px; background: #0c0c12; border: 1px solid var(--field-border); border-radius: 8px; padding: 6px; }
.console-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #555; }
.console-dot.on { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }

/* Compilação de sketch (aba Ferramentas) */
.compile-result { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--field-border); }
.compile-result--ok { border-color: #2ecc71; }
.compile-result--fail { border-color: #e67e22; }
.compile-result__head { margin: 0 0 8px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.compile-result details { margin-top: 8px; }
.compile-result summary { cursor: pointer; color: var(--dk9-text-dim, #9fa6b8); }
.compile-log { max-height: 320px; overflow: auto; background: #0c0c12; color: #d6d6dc; padding: 10px; border-radius: 6px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; }

/* ═══════════════ Tabela padrão (listas/relatórios do Studio) ═══════════════
   A classe .dk9-table já era usada pela aba Materiais mas NUNCA existiu no CSS — a tabela de
   relatórios renderizava crua (sem borda, sem cabeçalho, sem zebra). Definida aqui, no design
   system, para qualquer tela do Studio que precise de tabela. */
.dk9-table { border-collapse: collapse; }
.dk9-table th, .dk9-table td { padding: 8px 10px; border-bottom: 1px solid #2A2A33; vertical-align: top; }
.dk9-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--field-border); }
.dk9-table tbody tr:hover { background: #1E1E27; }
.dk9-table tbody tr:last-child td { border-bottom: none; }

/* ═══════════════ Materiais (orçamento & compras) ═══════════════ */

/* Trilha de passos: explica o fluxo (planejar → comprar → receber → conferir) e mostra o que
   falta em cada etapa. É a parte DIDÁTICA da tela — quem chega agora entende a ordem das coisas. */
.mat-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.mat-step {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    background: #20262F; border: 1px solid #2A2A33; border-radius: 8px;
    padding: 10px 12px; color: var(--text); cursor: pointer; font: inherit;
}
.mat-step:hover { background: #262D38; }
.mat-step.active { border-color: #4FC3F7; }
.mat-step__n {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: #2A3340; color: #4FC3F7; font-weight: 700; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.mat-step.active .mat-step__n { background: #4FC3F7; color: #16161D; }
.mat-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-step__title { font-weight: 600; }
.mat-step__hint { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .mat-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Botão "?" da ajuda contextual (explica a sub-aba atual). */
.mat-help {
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Miniatura da foto do material na lista do catálogo. */
.mat-thumb {
    flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
    background: #2A2A33; display: flex; align-items: center; justify-content: center;
    color: var(--muted); margin-right: 10px;
}
.mat-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Foto no modal do material (maior) + botões de trocar/remover. */
.mat-form-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.mat-form-fields { flex: 1; min-width: 0; }
.mat-photo { flex: none; width: 150px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mat-photo__box {
    width: 150px; height: 150px; border-radius: 8px; overflow: hidden;
    background: #2A2A33; border: 1px solid var(--field-border);
    display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 28px;
}
.mat-photo__box img { width: 100%; height: 100%; object-fit: cover; }
/* Na coluna estreita da foto, o botão de escolher arquivo e o de remover ocupam a largura toda. */
.mat-photo .dk9-file, .mat-photo button { width: 100%; justify-content: center; }
@media (max-width: 700px) { .mat-form-top { flex-direction: column; } .mat-photo, .mat-photo__box { width: 100%; } }

/* Modal do material é mais largo: comporta a tabela de fornecedores. */
.modal.modal--wide { width: 780px; }

.mat-sec-title { margin: 14px 0 2px; font-size: 15px; }

/* Fornecedor com o MENOR valor final em reais — é a resposta que o comprador procura. */
.mat-best td { background: rgba(46, 125, 50, .12); }
.mat-best-tag {
    margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: 11px;
    background: var(--accent); color: #fff;
}
.mat-off td { opacity: .55; }
/* Preço velho (mais de 90 dias): o comprador precisa saber que talvez não valha mais. */
.mat-stale { color: #E0A44C; }
.mat-link { margin-left: 8px; font-size: 12px; white-space: nowrap; }
.mat-icon { padding: 4px 8px; }
.mat-total { font-weight: 600; margin: 2px 0 8px; }

.mat-supplier-form {
    border: 1px solid var(--field-border); border-radius: 8px;
    padding: 12px; margin-top: 10px; background: #1E1E27;
}

/* Selo do material visível só para o ROOT. */
.mat-badge-root {
    margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: 11px;
    background: #4A3A6B; color: #D9CBFF;
}

/* ═══════════════ Barra de ferramentas (ações + filtros no topo de uma lista) ═══════════════
   Era copiada e colada à mão em cada tela ("display:flex;gap:8px;align-items:flex-end..."), e o
   resultado ficava DESALINHADO: botão e campo têm paddings diferentes por natureza (8px vs 9px),
   então "Nova compra", o select "Filtrar por item" e "Relatório (PDF)" saíam com alturas distintas.
   Aqui a altura dos controles da barra é FIXA (--control-h) → tudo na mesma linha, do mesmo tamanho.
   REGRA: toda barra de ações/filtros do sistema usa .toolbar — nunca flex inline na tela. */
.toolbar {
    display: flex;
    align-items: flex-end;      /* o rótulo do campo fica ACIMA; o alinhamento é pela base */
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.toolbar .field { margin: 0; }  /* o espaçamento é do gap da barra, não da margem do campo */
.toolbar > button,
.toolbar button:not(.tab),
.toolbar input:not([type=checkbox]):not([type=radio]),
.toolbar select {
    height: var(--control-h);
}
/* Botão com ícone: centraliza o conteúdo na altura fixa. */
.toolbar button:not(.tab) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding-top: 0; padding-bottom: 0;
}
/* Campo dentro da barra não deve espremer: largura mínima utilizável. */
.toolbar .field { min-width: 160px; }