/* Limbaj vizual din prototipul ESCOLA (hostmindai-pisa.html): pagină alb-cald, carduri albe,
   o singură culoare primară (cerneala), font de sistem, bază 15px. Numele vechi de variabile
   rămân (se folosesc în tot fișierul); s-au schimbat doar valorile. */
:root {
  --bg: #f8f7f1; --line: #e7e4d8; --ink: #0d1e22; --muted: #4d6469; --accent: #0d1e22;
  --ok: #0c6b3a; --warn: #8a5300; --bad: #a4211c; --note: #fcf0db;
  --surface-2: #f5f4ec; --surface-3: #ebe9dd; --line-2: #d4d0bf;
  --accent-hover: #263c41; --ring: #4d6469; --chart: #4d6469; --warn-dot: #d99a1e;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(10, 30, 40, .05), 0 3px 10px rgba(10, 30, 40, .06);
  --shadow-pop: 0 16px 40px rgba(10, 30, 40, .18);
}
* { box-sizing: border-box; }
/* Faza H: `#login` și `.three` își pun `display` prin id/clasă, iar asta bate regula implicită
   `[hidden] { display: none }` a browserului — ecranele se suprapuneau în loc să se schimbe
   (se vede în docs/design/dashboard-*.png de dinaintea rândului ăstuia). Tot ce primește mai jos
   display flex/grid (inclusiv `#topbar nav`, `.badge`) cedează aici atributului `hidden`. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 16px; }
a { color: var(--accent); text-underline-offset: 3px; }
summary { cursor: pointer; font-weight: 600; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
button { font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer; min-height: 38px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
button:hover { border-color: var(--muted); background: var(--surface-2); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Primar = trimiterea formularului, „Enviar" din compozitor, „Confirmar"/„Salvar" din dialoguri. */
button[type=submit], #composer > button, dialog menu button[value=ok] { background: var(--accent); border-color: var(--accent); color: #fff; }
button[type=submit]:hover, #composer > button:hover, dialog menu button[value=ok]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
input, select, textarea { font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); min-height: 38px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); width: 100%; background: #fff; }
textarea { line-height: 1.45; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-width: 2px; outline-offset: 1px; border-color: var(--ink); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; padding: 0; accent-color: var(--accent); }
label { display: block; margin: 8px 0; font-size: 14px; font-weight: 500; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.error { color: var(--bad); min-height: 1.2em; }
/* wordmark HostMindAI (padrão demo 2026-10-20): marca + nome do produto, Atkinson Hyperlegible Next local */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("/console/atkinson-hyperlegible-next-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("/console/atkinson-hyperlegible-next-700.woff2") format("woff2"); }
.wm { display: block; font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; text-align: left; margin: 0 12px 0 0; }
.wm-1 { display: block; font-weight: 700; font-size: 1.8rem; letter-spacing: -.05em; line-height: 1.05; color: #202c27; }
.wm-2 { display: block; font-weight: 400; font-size: 1rem; letter-spacing: 0; line-height: 1.2; color: #53605a; margin-top: .3rem; }
#login .wm { margin: 0 0 18px; }
@media (max-width: 600px) { .wm-1 { font-size: 1.45rem; } .wm-2 { font-size: .85rem; } }
/* demo somente leitura: formulário user + senha e aviso (demo-aviso.js) */
#login { align-content: center; gap: 12px; }
#demo-login, .demo-form { width: 400px; max-width: 100%; }
.demo-form { display: grid; gap: 10px; background: #fff; padding: 24px; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.demo-form label { margin: 0; font-weight: 600; }
.demo-form button { min-height: 44px; }
.demo-quem { font-weight: 700; margin: 0; }
.aviso-demo { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 34rem); margin: 0; padding: .75rem 1.1rem; border-radius: 12px; background: #0d1e22; color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.aviso-demo[hidden] { display: none; }
.screen { height: 100%; }

/* Login */
#login { display: grid; place-items: center; padding: 24px; }
.card { background: #fff; padding: 32px; border: 1px solid var(--line); border-radius: 20px; width: 400px; max-width: 100%; box-shadow: var(--shadow); }
.card h1 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 20px; }
#login-form label { font-weight: 600; margin: 0 0 14px; }
#login-form button[type=submit] { width: 100%; min-height: 44px; margin-top: 4px; }
#demo-login { display: grid; gap: 8px; margin-top: 8px; }
#demo-login button { width: 100%; min-height: 44px; }

/* Antet: rândul 1 = marcă, căutare, stare, utilizator; rândul 2 = navigarea, ca file. */
#app { display: flex; flex-direction: column; }
#topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 24px 0; background: #fff; border-bottom: 1px solid var(--line); }
#topbar > strong { font-size: 18px; font-weight: 750; letter-spacing: -.02em; margin-right: 12px; }
#topbar nav { order: 1; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 10px; }
#topbar nav button { background: transparent; border-color: transparent; color: var(--muted); }
#topbar nav button:hover { background: var(--surface-2); color: var(--ink); }
#topbar nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#search-form { display: flex; gap: 8px; flex: 1 1 240px; max-width: 520px; }
#search-q { background: var(--surface-2); }
.presence { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--muted); }
.presence select { width: auto; }
#me { font-size: 14px; color: var(--muted); white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--bad); }
.dot.on { background: var(--ok); }

/* Vederi */
.view { flex: 1; min-height: 0; padding: 20px 24px; gap: 16px; }
.three { display: grid; grid-template-columns: 336px minmax(0, 1fr) 300px; }
#view-supervisor { overflow: auto; }
#view-supervisor section, #view-fusoes section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
aside, #thread-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 0; overflow: auto; }

/* Caixa de entrada: lista */
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 10px; border-bottom: 1px solid var(--line); align-items: center; }
.filters select { min-width: 0; flex: 1 1 130px; font-size: 14px; padding: 7px 6px; }
.filters label { white-space: nowrap; margin: 0; }
#conv-list { list-style: none; margin: 0; padding: 0; }
#conv-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: start; }
/* `1fr` are min-width:auto: cu un nume lung, coloana din mijloc împingea protocolul afară
   din lățimea listei și `<small class=mono>` ieșea din cadru. `min-width: 0` îl lasă să
   se micșoreze și numele să treacă pe două rânduri — protocolul rămâne mereu vizibil. */
#conv-list li > div { min-width: 0; }
#conv-list li > div > div:first-child { font-weight: 600; }
#conv-list li > small { color: var(--muted); font-size: 12px; margin-top: 2px; }
#conv-list li:hover { background: var(--surface-2); }
#conv-list li.active { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }
#conv-list .sla { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.sla.green { background: var(--ok); } .sla.yellow { background: var(--warn-dot); } .sla.red { background: var(--bad); } .sla.none { background: var(--line-2); }
#conv-list .last { color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink); white-space: nowrap; vertical-align: 1px; }

/* Caixa de entrada: conversa */
#thread-col { display: flex; flex-direction: column; }
#thread-empty { margin: auto; padding: 24px; }
#thread { display: flex; flex-direction: column; height: 100%; }
#thread-head { display: flex; gap: 8px 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#thread-title { font-weight: 700; font-size: 17px; }
#actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
#messages { list-style: none; margin: 0; padding: 20px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
#messages li { max-width: 72%; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid var(--line); white-space: pre-wrap; }
#messages li.OUT { align-self: flex-end; background: #e5efe8; border-color: #d2e2d7; border-radius: 14px 4px 14px 14px; }
#messages li small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
#composer { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
#composer textarea { flex: 1; resize: vertical; }
#composer > button { min-height: 44px; padding: 10px 20px; }
.dropdown { position: absolute; bottom: 100%; left: 16px; right: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; max-height: 240px; overflow: auto; box-shadow: var(--shadow-pop); padding: 4px; }
.dropdown div { padding: 8px 12px; cursor: pointer; border-radius: 8px; }
.dropdown div:hover { background: var(--surface-2); }
.dropdown .shortcut { font-family: ui-monospace, monospace; color: var(--accent); margin-right: 8px; font-weight: 600; }

/* Caixa de entrada: contexto */
#context-col { padding: 18px 20px; }
#context-col h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; }
#context-col h3:first-child { margin-top: 0; }
#context-col h3 button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
#c360 summary { margin: 20px 0 8px; font-size: 14px; font-weight: 700; }
#contact { margin: 0; display: grid; grid-template-columns: 1fr; font-size: 14px; }
#contact dt { color: var(--muted); font-size: 13px; margin-top: 8px; }
#contact dt:first-child { margin-top: 0; }
#contact dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
#sla { list-style: none; padding: 0; margin: 0; font-size: 14px; }
#notes { list-style: none; padding: 0; margin: 0; }
#notes li { background: var(--note); border-left: 3px solid var(--warn-dot); border-radius: 4px 10px 10px 4px; padding: 8px 12px; margin-bottom: 6px; white-space: pre-wrap; font-size: 14px; }
#notes li small { display: block; color: var(--muted); font-size: 12px; }
#note-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }

/* Tabele, căutare, dialoguri */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.panel { position: absolute; top: 60px; left: 24px; right: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); z-index: 5; max-height: 60vh; overflow: auto; padding: 16px 20px; box-shadow: var(--shadow-pop); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.panel a { display: block; padding: 8px 0; color: var(--accent); cursor: pointer; border-bottom: 1px solid var(--line); }
dialog { border: 1px solid var(--line); border-radius: 20px; min-width: 360px; max-width: calc(100vw - 32px); padding: 24px; color: var(--ink); box-shadow: var(--shadow-pop); }
dialog::backdrop { background: rgba(13, 30, 34, .35); }
dialog h3 { font-size: 18px; margin: 0 0 12px; }
dialog label { font-weight: 600; }
dialog menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0; margin: 20px 0 0; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 10; margin: 0; box-shadow: var(--shadow-pop); }

/* Faza H — painel: cartões, barras e sparkline (sem biblioteca de gráficos, sem CDN) */
#view-dashboard { overflow: auto; }
.painel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.painel-bar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.painel-bar select { width: auto; }
#painel-exports button { color: var(--accent); margin-right: 14px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* §8 (C4): os dois tipos de SLA, cada um com o seu numerador/denominador — nunca fundidos */
.cards .card.largo { grid-column: span 2; }
.sla-tipos { list-style: none; margin: 0; padding: 0; }
.sla-tipos li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 2px 0; }
.sla-tipos b { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 700; }
.sla-tipos small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.painel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.painel-head h2 { font-size: 20px; margin: 0 0 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cards .card { width: auto; padding: 18px 20px; border-radius: var(--radius); }
.card h3 { font-size: 13px; color: var(--muted); margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; font-weight: 600; letter-spacing: 0; }
.card .target { color: var(--accent); font-weight: 600; white-space: nowrap; }
.card .value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; font-variant-numeric: tabular-nums; }
.card .den { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.card.ok { border-left: 4px solid var(--ok); }
.card.warn { border-left: 4px solid var(--warn-dot); }
.card.ok .value { color: var(--ok); }
.card.warn .value { color: var(--warn); }
.bloco { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.bloco h3 { font-size: 16px; margin: 0 0 10px; }
.bloco h3:not(:first-child) { margin-top: 24px; }
.bloco button + button { margin-left: 6px; }
.bars, .rows { list-style: none; margin: 0; padding: 0; }
.bars li, .rows li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bars li:last-child, .rows li:last-child { border-bottom: 0; }
.rows li { grid-template-columns: 180px 1fr; }
.bar-label { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { background: var(--surface-3); border-radius: 999px; height: 10px; display: block; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--chart); border-radius: 999px; }
.bar-n { font-size: 13px; font-variant-numeric: tabular-nums; }
.row-vals { font-size: 14px; }
.spark { width: 100%; height: 32px; margin-bottom: 6px; }
.spark polyline { fill: none; stroke: var(--chart); stroke-width: 2; vector-effect: non-scaling-stroke; }
.status-AVAILABLE { color: var(--ok); } .status-BUSY, .status-AWAY { color: var(--warn); } .status-OFFLINE { color: var(--muted); }

/* Faza I — editorul „Bot": menus, opções, ações. Sem biblioteca: tabela + selects nativos. */
#view-bot { overflow: auto; }
.painel-bar .linha { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.painel-bar .linha input[type=checkbox] { width: auto; }
.bot-menu h3 code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: var(--surface-3); padding: 1px 6px; border-radius: 6px; }
.bot-menu label { margin: 0 0 10px; }
.bot-menu textarea { resize: vertical; }
table.bot-opts { table-layout: fixed; margin-bottom: 8px; }
table.bot-opts th { font-size: 13px; color: var(--muted); font-weight: 600; }
table.bot-opts td { vertical-align: top; padding: 6px 8px; }
table.bot-opts th:nth-child(3) { width: 130px; }
table.bot-opts th:nth-child(4) { width: 30%; }
table.bot-opts th:last-child { width: 100px; }
#bot-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; white-space: pre-wrap; }
#bot-erro { font-size: 13px; }

/* 2026-09-09: canal na linha da fila, fila+responsável no cabeçalho do fio, ecrã de auditoria */
.badge.chan { background: #e3eef1; color: #1d4a55; }
#thread-meta { font-size: 13px; }
#audit-table td { font-size: 13px; vertical-align: top; }
#audit-table .nowrap { white-space: nowrap; }

/* FAZA_AD.md §3.5 (AD2) — vederea „Privacidade": semáforo de prazo, finalidades, detalhe.
   As quatro cores são as mesmas variáveis do resto da consola; `gri` = sem prazo ou terminal. */
#view-privacidade { overflow: auto; }
#priv-abas button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bulina { width: 10px; height: 10px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; }
.bulina.verde { background: var(--ok); }
.bulina.galben { background: var(--warn-dot); }
.bulina.rosu { background: var(--bad); }
.bulina.gri { background: var(--line-2); }
#priv-tabela .nowrap, #priv-finalidades-tabela .nowrap { white-space: nowrap; }
#priv-tabela tbody tr { cursor: pointer; }
#priv-tabela tbody tr:hover { background: var(--surface-2); }
#priv-finalidades-tabela tr.inativa { color: var(--muted); }
#priv-campos { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
#priv-campos dt { color: var(--muted); }
#priv-campos dd { margin: 0; }
#priv-payload { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px; white-space: pre-wrap; font-size: 13px; }
#priv-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 0; margin: 0; }
#priv-acoes label { margin: 0; }
#priv-acoes select, #priv-acoes input { width: auto; }
#c360-consents { list-style: none; padding: 0; margin: 0; }
#c360-consents li { padding: 4px 0; }
#c360-consents small { display: block; font-size: 12px; }
/* rândul selectat: eticheta de stare își păstrează forma pe fundalul evidențiat */
#conv-list li.active .badge:not(.chan) { background: #fff; }

/* FAZA AW — Indicadores: três estados de célula visualmente DIFERENTES (suprimida ≠ indisponível ≠ sem dados) */
.bi-rolagem { overflow-x: auto; }
table.bi-grade th, table.bi-grade td { white-space: nowrap; }
td.bi-supr { background: #fff4d6; color: #7a5a00; font-weight: 700; font-style: italic; text-align: center; }
td.bi-off { background: #e6e6e6; color: #8a8a8a; font-size: 12px; }
td.bi-nodata { color: var(--muted); }
#bi-motivo { width: 320px; margin: 0 6px; }

/* HostMind Trâmites, Pasul B — vederea „Processos". Sem larguri fixas: lista rola dentro do bloco, nunca a página. */
#view-processos { overflow: auto; }
#view-processos .bloco { overflow-wrap: anywhere; }
.pr-rolagem { overflow-x: auto; }
.pr-linha { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 0 0 12px; }
.pr-linha label { margin: 0; }
.pr-linha select, .pr-linha input { width: auto; }
.pr-check { display: flex; align-items: center; gap: 6px; }
.pr-check input { width: auto; }
.pr-dl { margin: 0 0 12px; display: grid; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); gap: 6px 14px; }
.pr-dl dt { color: var(--muted); }
.pr-dl dd { margin: 0; }
.pr-lista { margin: 0 0 12px; padding-left: 20px; }
.pr-lista li { padding: 3px 0; }
.pr-resposta { margin-top: 4px; padding: 6px 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
.pr-form { display: grid; gap: 8px; max-width: 640px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pr-form label { margin: 0; }
.pr-form textarea, .pr-form input, .pr-form select { width: 100%; }
.badge.pr-vencido { background: #fbe3e0; color: #8a1c10; }
@media (max-width: 600px) { .pr-dl { grid-template-columns: minmax(0, 1fr); } }