rustploy 0.1.0

/* Rustploy — web UI stylesheet.
   Tradução literal dos design tokens e classes de
   crates/rustploy-gui/views/styles/app.gss (client iced), para que o
   resultado visual seja indistinguível do client nativo. */

:root {
    --bg:      #0A0E14;
    --surface: #0D1117;
    --raised:  #161B22;
    --border:  #21262D;
    --text:    #E6EDF3;
    --text-2:  #C9D1D9;
    --muted:   #8B949E;
    --faint:   #6E7681;
    --accent:  #58A6FF;
    --blue:    #1F6FEB;
    --spin:    #2F81F7;
    --green:   #238636;
    --ok:      #3FB950;
    --danger:  #DA3633;
    --error:   #F85149;
    --warn:    #D29922;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-2);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* row/column: os mesmos contêineres flex do glacier-ui (row.gv/column.gv),
   mantidos como tags para que o HTML fique próximo do .gv original — facilita
   portar as próximas telas por comparação direta. */
row, column { display: flex; min-width: 0; min-height: 0; }
row    { flex-direction: row; }
column { flex-direction: column; }
[hidden], [x-cloak] { display: none !important; }
.content_center { align-items: center; justify-content: center; }

button, input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.screen     { width: 100%; height: 100%; background: var(--bg); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn_primary, .btn_danger, .btn_ghost {
    padding: 11px 20px; border-radius: 5px; cursor: pointer;
    border: 1px solid transparent; text-align: center;
}
.btn_primary { color: var(--green); border-color: var(--green); background: rgba(35,134,54,.12); }
.btn_danger  { color: var(--danger); border-color: var(--danger); background: rgba(218,54,51,.10); }
.btn_ghost   { color: var(--text-2); border-color: var(--border); background: var(--raised); }
.btn_primary:hover { background: rgba(35,134,54,.22); }
.btn_danger:hover  { background: rgba(218,54,51,.20); }
.btn_ghost:hover   { background: var(--border); }

/* ── Panels & cards ───────────────────────────────────────────────────── */
.content    { width: 100%; height: 100%; padding: 28px 32px; gap: 22px; background: var(--bg); overflow: auto; }
.panel      { background: var(--surface); border-radius: 7px; border: 1px solid var(--border); padding: 4px; }
.card       { width: 100%; background: var(--raised); border-radius: 6px; border: 1px solid var(--border); padding: 18px; gap: 10px; }
.panel_fill { width: 100%; flex: 1 1 auto; min-height: 0; background: var(--surface); border-radius: 7px; border: 1px solid var(--border); padding: 4px; gap: 4px; }

/* ── Typography ───────────────────────────────────────────────────────── */
.title      { font-size: 30px; font-weight: 700; color: var(--text); margin: 0; }
.subtitle   { font-size: 13px; color: var(--muted); }
.muted      { font-size: 12px; color: var(--muted); }
.label_cap  { font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .04em; }

/* ── Shell layout ─────────────────────────────────────────────────────── */
.header_row    { width: 100%; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
/* flex:1 1 0 (não width:100%): dentro de .header_row/.svc_head/.proj_topbar
   este é UM DOS FILHOS de uma row junto com ações/stats ao lado — width:100%
   reivindicaria a largura inteira do pai e empurraria os irmãos pra fora da
   tela (overflow horizontal, viu-se cortando os botões Deploy/Reload/
   Rollback/Stop do cabeçalho de serviço). flex-basis:0 faz o título crescer
   e ceder espaço aos irmãos igualmente, como o `width: fill` do client iced
   (que soma entre os "fill" da linha, ao contrário do width:100% do CSS). */
.header_titles { flex: 1 1 0; min-width: 0; gap: 6px; }
.stats_row     { gap: 14px; flex-shrink: 0; }
.scroll_fill   { width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; }
/* flex-shrink:0 — mesmo caso do .form_panel documentado abaixo: dentro de
   .scroll_fill (overflow:auto), o corpo da tabela tem que manter a altura
   natural de todas as linhas e deixar só o scroll ceder espaço. Sem isso,
   tabelas com mais linhas (Images/Volumes/Networks) eram espremidas por
   uma fração diferente da tabela de Containers (1 linha só), produzindo
   alturas de linha inconsistentes entre abas. */
.table_body    { width: 100%; flex-shrink: 0; }
.row_wrap      { width: 100%; }

/* ── Table ────────────────────────────────────────────────────────────── */
/* flex-shrink:0 em .env_head/.thead — sem isso, o mesmo espremimento acima
   também atinge a barra de filtros e o cabeçalho da tabela: a altura deles
   colapsa e, como as células de coluna agora têm overflow:hidden (pro
   truncate funcionar), o texto do cabeçalho fica cortado/invisível em vez
   de só "vazar" visualmente como antes. */
.thead      { width: 100%; padding: 14px 18px; background: var(--raised); border-radius: 5px; flex-shrink: 0; }
.th         { font-size: 11px; font-weight: 700; color: var(--faint); }
.trow       { width: 100%; padding: 13px 18px; align-items: center; }
.td         { font-size: 13px; color: var(--text-2); }
.td_key     { font-size: 13px; font-weight: 700; color: var(--accent); }
/* Colunas que exibem texto puro (não badge/botão): truncam com reticências em
   vez de vazar pra fora da célula ou esticar a linha (nomes/tags/imagens
   longos). `min-width:0` é necessário além de `overflow:hidden` — <text> não
   é `row`/`column`, então não herda o reset global da linha 44, e um item
   flex sem isso ignora `width`/`flex` e cresce pro tamanho do conteúdo em vez
   de truncar. Como a largura vem de `width`/`flex` — inclusive as reduzidas
   nos breakpoints abaixo — o corte reage ao redimensionar a janela sem JS. */
.col_icon, .col_svc, .col_img, .col_proj, .col_dur, .col_start {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col_icon   { width: 28px; }
.col_svc    { width: 240px; }
.col_img    { width: 200px; }
.col_proj   { width: 180px; }
.col_state  { width: 170px; }
.col_dur    { width: 150px; }
.col_start  { flex: 1 1 auto; }
.col_act    { width: 120px; justify-content: flex-end; }
hr, .rule   { width: 100%; height: 1px; border: none; background: var(--border); margin: 0; flex-shrink: 0; }

/* ── Stat card ────────────────────────────────────────────────────────── */
.stat_card  { background: var(--surface); border-radius: 6px; border: 1px solid var(--border); padding: 16px 22px; gap: 6px; }
.stat_num   { font-size: 26px; font-weight: 700; color: var(--accent); }
.stat_num_g { font-size: 26px; font-weight: 700; color: var(--ok); }

/* ── State cell ───────────────────────────────────────────────────────── */
.state_cell { gap: 7px; align-items: center; }
.state_lbl  { font-size: 12px; }
.state_dot  { font-size: 11px; }
.state_ok    { color: var(--ok); }
.state_bad   { color: var(--error); }
.state_info  { color: var(--accent); }
.state_warn  { color: var(--warn); }
.state_muted { color: var(--muted); }

/* ── Login ────────────────────────────────────────────────────────────── */
.login_wrap  { width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--bg); }
.login_card  { width: 100%; max-width: 460px; background: var(--surface); border-radius: 4px; border: 1px solid var(--border); padding: 32px; gap: 16px; }
.login_head  { align-items: center; gap: 14px; }
.login_brand { width: 100%; gap: 6px; }
.login_title { font-size: 30px; font-weight: 700; color: #A9C7FF; margin: 0; }
.field_group { width: 100%; gap: 6px; flex-shrink: 0; }
.field_row   { width: 100%; justify-content: space-between; }
.field_label { font-size: 11px; font-weight: 700; color: var(--muted); }
.field_input { width: 100%; padding: 13px 14px; background: var(--raised); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.field_input:focus { outline: none; border-color: var(--accent); }
.login_checks { width: 100%; gap: 8px; padding: 4px 0; }
.check_row   { align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.connect_btn { width: 100%; color: #fff; background: var(--spin); padding: 14px; text-align: center; border-radius: 3px; border: none; cursor: pointer; font-weight: 600; }
.connect_btn:hover { filter: brightness(1.1); }
.connect_btn:disabled { opacity: .6; cursor: default; }
.status_row  { gap: 14px; align-items: center; }
.err { color: var(--error); font-size: 12px; }
.ok  { color: var(--ok); }

/* ── Shell (sidebar / topbar) ─────────────────────────────────────────── */
.sidebar     { width: 264px; height: 100%; background: var(--surface); padding: 28px 20px; gap: 6px; flex-shrink: 0; }
.brand_box   { gap: 2px; padding: 0 8px 18px 8px; }
.brand       { font-size: 21px; font-weight: 700; color: var(--text); }
.brand_sub   { font-size: 11px; color: var(--faint); }
.nav_section { font-size: 11px; font-weight: 700; color: var(--faint); padding: 16px 8px 6px 8px; }
.nav_spacer  { flex: 1 1 auto; }
.main_col    { width: 100%; height: 100%; min-width: 0; }
.topbar      { width: 100%; padding: 18px 28px; gap: 18px; align-items: center; flex-shrink: 0; }
.search      { flex: 1 1 auto; padding: 11px 14px; background: var(--raised); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.search:focus { outline: none; border-color: var(--accent); }
.topbar_status { white-space: nowrap; }

.nav_row_on, .nav_row_off {
    width: 100%; padding: 11px 14px; gap: 10px; align-items: center;
    border-radius: 5px; cursor: pointer; border: none; text-align: left;
    background: none; font-family: inherit; font-size: 14px;
}
.nav_row_on  { background: var(--blue); }
.nav_row_off:hover { background: var(--raised); }
.nav_icon_on   { font-size: 14px; color: var(--text); }
.nav_icon_off  { font-size: 14px; color: var(--faint); }
.nav_label_on  { color: var(--text); }
.nav_label_off { color: var(--muted); }

/* ── Grid de cards (Projects / serviços de um projeto) ─────────────────── */
/* flex-shrink:0 — mesmo motivo do .form_panel/.env_wrap acima: .grid é
   filho direto de .scroll_fill (flex column com overflow:auto). Cards com
   pouco conteúdo nunca estouravam o espaço disponível, então o espremimento
   nunca aparecia; cards mais altos (container/CPU/MEM/ações no card de
   serviço) sim — como row/column têm min-height:0 globalmente (linha ~42),
   o espremimento cascateava pros filhos de CADA .card (linhas viravam ~4px
   de altura, texto sobreposto). Só o scroll de .scroll_fill deve ceder
   espaço, nunca o grid. */
.grid       { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; flex-shrink: 0; }
.card_head  { width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.card_name  { flex: 1 1 auto; font-size: 16px; font-weight: 700; color: var(--text); }
.card_open, .card_edit {
    padding: 9px 14px; text-align: center; border-radius: 5px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
.card_remove {
    padding: 9px 10px; text-align: center; border-radius: 5px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--danger); background: rgba(218,54,51,.10); color: var(--danger);
}
.card_open:hover, .card_edit:hover { background: var(--border); }
.card_remove:hover { background: rgba(218,54,51,.20); }
.badge      { gap: 7px; align-items: center; }
.badge_lbl  { font-size: 12px; font-weight: 700; }

/* ── Card de serviço (grid "Serviços" de um projeto) ────────────────────
   Porta 1:1 do <style> de crates/rustploy-gui/views/components/service_card.gv
   (component-scoped lá; aqui entra na folha global, mesmo esquema de nomes). */
.c_name        { font-size: 16px; font-weight: 700; color: var(--text); }
.c_port        { font-size: 12px; color: var(--muted); }
.card_ctr      { width: 100%; gap: 6px; }
.card_stats    { width: 100%; gap: 12px; }
.card_stat     { width: 100%; gap: 4px; }
.card_stat_num { font-size: 18px; font-weight: 700; color: var(--text-2); }
.card_actions  { width: 100%; gap: 8px; }
.card_stop {
    width: 100%; padding: 9px 10px; text-align: center; border-radius: 5px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
.card_stop:hover { background: var(--border); }

/* ── Barra de topo do projeto/serviço (voltar + ações à direita) ───────── */
.proj_topbar  { width: 100%; align-items: center; flex-shrink: 0; }
.proj_actions { gap: 8px; align-items: center; flex-shrink: 0; }
.hspacer      { flex: 1 1 auto; }
.btn_sm_primary, .btn_sm_ghost, .btn_sm_danger {
    padding: 7px 13px; border-radius: 4px; font-size: 12px; cursor: pointer; border: 1px solid transparent;
    white-space: nowrap;
}
.btn_sm_primary { color: var(--green); border-color: var(--green); background: rgba(35,134,54,.12); }
.btn_sm_ghost   { color: var(--text-2); border-color: var(--border); background: var(--raised); }
.btn_sm_danger  { color: var(--danger); border-color: var(--danger); background: rgba(218,54,51,.10); }

/* ── Sub-abas (origem do novo serviço / abas do detalhe de serviço) ────── */
/* flex-shrink:0 pelo mesmo motivo do .log_line abaixo: sem isso, uma aba
   com conteúdo grande (ex. Logs cheio de linhas) disputa espaço com esta
   barra de abas dentro da coluna de altura fixa do detalhe de serviço, e o
   flexbox espreme a barra de abas a poucos pixels — ela some da tela. */
.tabs   { gap: 4px; flex-shrink: 0; }
.tab_on, .tab_off {
    padding: 9px 16px; border-radius: 5px; cursor: pointer; border: none; font-family: inherit; font-size: 13px;
}
.tab_on  { color: var(--text); background: var(--blue); }
.tab_off { color: var(--muted); background: var(--surface); }
.tab_off:hover { background: var(--raised); }

/* ── Formulários (criar projeto/serviço) ────────────────────────────────
   .field_group/.field_input já vêm da tela de login. */
/* flex-shrink:0: dentro de .scroll_fill (flex column com overflow:auto), um
   .form_panel mais alto que o espaço disponível senão é espremido pelo
   algoritmo de flexbox em vez de simplesmente rolar — filhos como .hc_grid
   (que não tem altura própria fixa) colapsam pra quase 0 e o <input> "flutua"
   visualmente por cima do texto seguinte (overflow:visible). Só o scroll
   deve ceder espaço, nunca o conteúdo. */
.form_panel { width: 100%; max-width: 640px; flex-shrink: 0; background: var(--surface); border-radius: 7px; border: 1px solid var(--border); padding: 24px; gap: 10px; }

/* ── Listas chave/valor (env vars / domínios) ───────────────────────────
   Compartilhado por Environment e Domains, mesmo padrão do client iced.
   flex-shrink:0 — mesmo motivo do .form_panel acima: .env_wrap é filho
   direto de .content (flex column de altura fixa, overflow:auto). Sem isso,
   um projeto com muitas variáveis (ex. 68) faz o flexbox espremer .env_wrap
   pra caber na altura disponível em vez de deixar o .content rolar — como
   row/column têm min-height:0 globalmente (linha ~42), o espremimento passa
   pros filhos (.kv_list/.kv_row) e cada linha de texto (overflow:visible)
   acaba se sobrepondo à seguinte. Só o scroll de .content deve ceder
   espaço, nunca o conteúdo. */
.env_wrap    { width: 100%; gap: 10px; flex-shrink: 0; }
/* flex-shrink:0 — na tela Projects, `.env_add` (a linha do botão "+ Novo
   projeto") é filho DIRETO de `.content`, sem nenhum `.env_wrap`/
   `.form_panel` protegido por perto pra blindar; nas outras telas já vem
   protegido transitivamente (dentro de `.env_wrap`/`.form_panel`/`.card`),
   mas um botão nunca deveria mesmo encolher abaixo do tamanho natural. */
.env_add     { gap: 8px; align-items: center; flex-shrink: 0; }
.env_in_key, .env_in_val { flex: 1 1 auto; padding: 9px 12px; background: var(--raised); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.env_head    { width: 100%; align-items: center; justify-content: space-between; flex-shrink: 0; }
.kv_list     { width: 100%; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); padding: 8px 18px; }
.kv_row      { width: 100%; padding: 12px 0; align-items: center; gap: 8px; }
.kv_key      { flex: 1 1 auto; font-size: 13px; color: var(--muted); }
.kv_val      { font-size: 16px; font-weight: 700; color: var(--text); }
.kv_val_fill { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: var(--text-2); }
.env_key     { font-size: 13px; font-weight: 700; color: var(--accent); width: 220px; }
.env_sep     { width: 10px; }
.env_del     { color: var(--danger); padding: 4px 10px; cursor: pointer; border: none; background: none; font-family: inherit; }
.dk_rm       { color: var(--danger); padding: 5px 12px; border-radius: 3px; cursor: pointer; border: 1px solid var(--danger); background: rgba(218,54,51,.10); font-size: 12px; }
.dk_rm:hover { background: rgba(218,54,51,.20); }

/* ── Detalhe de serviço: cabeçalho + abas ────────────────────────────── */
/* flex-shrink:0 — mesmo motivo do .grid/.form_panel acima: esta é a única
   coluna (sem classe própria até este fix) direto de .content (overflow:
   auto) que embrulha .tabs + o painel de CADA aba (General/Healthcheck/
   Advanced têm várias .kv_row empilhadas sem scroll_fill próprio, ao
   contrário de Environment/Domains). Sem isso, um serviço com bastante
   conteúdo numa dessas abas era espremido em vez de .content rolar. */
.svc_tabs_wrap  { width: 100%; flex-shrink: 0; }
.svc_head       { width: 100%; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.svc_title_row  { align-items: center; gap: 14px; }
.svc_title      { flex: 1 1 auto; }
.svc_substatus  { gap: 10px; align-items: center; }
.svc_actions    { gap: 10px; align-items: center; flex-shrink: 0; }
.btn_blue       { color: var(--blue); padding: 11px 22px; border-radius: 5px; cursor: pointer; border: 1px solid var(--blue); background: rgba(31,111,235,.12); }
.btn_blue:hover { background: rgba(31,111,235,.22); }
.panel_pad      { width: 100%; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); padding: 18px; gap: 8px; }

/* ── Connection (valores copiáveis) / Healthcheck (grid 2 colunas) ──── */
.copy_btn  { color: var(--text-2); padding: 5px 12px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font-size: 12px; }
.copy_btn:hover { background: var(--raised); }
.copy_btn:disabled { opacity: .5; cursor: default; }
.copy_btn:disabled:hover { background: var(--surface); }
.hc_grid   { width: 100%; gap: 14px; }
.hc_field  { flex: 1 1 0; min-width: 0; gap: 6px; }

/* ── Deployments (ações por linha) ──────────────────────────────────── */
.dep_actions  { gap: 8px; align-items: center; }
.dep_logs_btn { color: var(--text-2); padding: 5px 12px; border-radius: 3px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); }
.dep_del_btn  { color: var(--danger); padding: 5px 12px; border-radius: 3px; cursor: pointer; border: 1px solid var(--danger); background: rgba(218,54,51,.10); }
.col_act_2    { width: 90px; justify-content: flex-end; }
.col_act_4    { width: 170px; justify-content: flex-end; gap: 8px; }
/* Mesma linha de job acima, +1 controle (editar). */
.col_act_5    { width: 210px; justify-content: flex-end; gap: 8px; }

/* ── Logs (aba Logs do serviço) ─────────────────────────────────────── */
.log_panel { width: 100%; flex: 1 1 auto; min-height: 0; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); padding: 14px 16px; gap: 8px; }
/* flex-shrink:0 é necessário aqui: o reset global `row, column { min-height: 0 }`
   (linha 42) tira a resistência natural desses itens a encolher, então sem
   isso centenas de .log_line disputando espaço dentro de .scroll_fill
   (overflow:auto) eram espremidas a ~1px de altura cada, sobrepondo os
   glifos de todas as linhas — parecia texto embaralhado/corrompido, mas
   era só compressão via flexbox; o scroll nunca chegava a entrar em ação. */
.log_body  { width: 100%; gap: 2px; flex-shrink: 0; }
.log_line  { width: 100%; gap: 12px; flex-shrink: 0; }
.log_time  { width: 76px; font-size: 11px; color: var(--faint); }
.log_text  { flex: 1 1 auto; font-size: 12px; color: #9DA7B3; }

/* ── .env: toggle "Exportar"/".env" + editor de texto ──────────────────── */
.muted_fill { flex: 1 1 auto; font-size: 12px; color: var(--muted); }
.btn_export, .btn_export_on {
    padding: 9px 16px; border-radius: 4px; cursor: pointer; border: none; font-family: inherit; font-size: 13px;
}
.btn_export    { color: var(--muted); background: var(--surface); }
.btn_export:hover { background: var(--raised); }
.btn_export_on { color: var(--text); background: var(--blue); }
.env_editor {
    width: 100%; height: 200px; padding: 10px 12px; background: var(--raised); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
    resize: vertical;
}
.env_editor:focus { outline: none; border-color: var(--accent); }

/* ── Modal (build log) ───────────────────────────────────────────────────
   Caixa de tamanho FIXO centralizada (não mais full-bleed): build logs têm
   linhas sem quebra (barras de progresso do docker pull) que vazavam da tela
   antes. O header fica FORA da área rolável, então "Fechar" nunca some. */
.modal_backdrop {
    position: fixed; inset: 0; z-index: 50; background: rgba(1,4,9,.72);
    align-items: center; justify-content: center; padding: 40px;
}
.modal_box {
    width: 100%; max-width: 900px; height: 100%; max-height: 640px;
    background: var(--surface); border-radius: 7px; border: 1px solid var(--border);
    overflow: hidden;
}
.modal_head { width: 100%; padding: 14px 18px; align-items: center; justify-content: space-between; background: var(--raised); flex-shrink: 0; }
.modal_body { width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px; }
/* Stepper do deploy: uma linha de passos (✓ feito, ● atual, ✕ falhou, ○ pendente). */
.stepper    { width: 100%; flex-shrink: 0; padding: 2px 16px 10px; gap: 6px; flex-wrap: wrap; align-items: center; }
.step_item  { gap: 6px; align-items: center; flex-shrink: 0; }
.step       { font-size: 12px; white-space: nowrap; }
.step_sep   { color: var(--border); }
.step_done    { color: var(--ok); }
.step_current { color: var(--accent); font-weight: 700; }
.step_failed  { color: var(--error); font-weight: 700; }
.step_pending { color: var(--muted); }
.step_msg   { white-space: normal; overflow-wrap: anywhere; }
.log_pre {
    margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #9DA7B3;
    white-space: pre; overflow-wrap: normal;
}

/* ── Seção de conteúdo (Deploy Engine) ───────────────────────────────────
   Tradução das mesmas classes de app.gss. O `.panel_fill` é um painel que
   ocupa a tela inteira — certo quando a tela tem UMA lista. O Deploy Engine
   tem três, de naturezas diferentes (fila curta, um deploy rodando por vez,
   histórico longo), e três `.panel_fill` empilhados davam um terço da altura
   a cada um: três caixas enormes e vazias quando não há deploy nenhum. Aqui
   a altura vem do conteúdo e só o histórico recebe o que sobra. */
.section, .section_fill {
    width: 100%;
    background: var(--surface);
    border-radius: 7px;
    border: 1px solid var(--border);
}
.section       { flex: 0 0 auto; }
.section_fill  { flex: 1 1 auto; min-height: 0; }
.section_head  { width: 100%; align-items: center; padding: 13px 16px; flex-shrink: 0; }
.section_title { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .04em; }
.section_body  { width: 100%; padding: 0 6px 6px 6px; flex-shrink: 0; }
.section_scroll{ width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 6px 6px 6px; }
/* Vazio: centralizado e com respiro, em vez de uma frase solta no canto
   superior esquerdo de um painel de 300px de altura. */
.empty_state   { width: 100%; text-align: center; padding: 26px 0; font-size: 12px; color: var(--faint); flex-shrink: 0; }
/* Só para a seção que recebe `fill` (o histórico): sem isto o aviso de vazio
   fica encostado no topo de um card de várias centenas de pixels. */
.empty_wrap    { width: 100%; flex: 1 1 auto; min-height: 0; align-items: center; }
/* Fila pausada: faixa com a cor de alerta, não um cinza que se confunde com
   o estado vazio logo abaixo. */
.banner_warn   { width: 100%; padding: 9px 16px; font-size: 12px; color: var(--warn); background: var(--raised); border-radius: 5px; flex-shrink: 0; }

/* ── Toasts ──────────────────────────────────────────────────────────────
   Porte do `toasts.rs` do glacier-ui: empilhados no canto inferior direito,
   não-modais (a UI por baixo continua clicável) e cumulativos, cada um com
   seu próprio cronômetro. z-index acima do modal — um erro disparado de
   dentro do modal de build log precisa aparecer por cima dele. */
.toast_wrap {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    /* Largura fixa (e não uma por conteúdo): empilhados, toasts de tamanhos
       diferentes viram uma escada de bordas à esquerda. */
    width: 380px; max-width: calc(100vw - 40px);
    gap: 10px; pointer-events: none;
}
.toast {
    pointer-events: auto;
    width: 100%;
    align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 6px;
    background: var(--raised); border: 1px solid var(--border);
    border-left: 3px solid var(--faint);
    box-shadow: 0 8px 24px rgba(1,4,9,.55);
    animation: toast_in .16s ease-out;
}
@keyframes toast_in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.toast_icon  { flex-shrink: 0; font-size: 13px; line-height: 18px; color: var(--faint); }
.toast_msg   { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.toast_close { flex-shrink: 0; padding: 0 2px; font-size: 15px; line-height: 18px; color: var(--faint); cursor: pointer; }
.toast_close:hover { color: var(--text); }

.toast_info    { border-left-color: var(--accent); }
.toast_success { border-left-color: var(--ok); }
.toast_warning { border-left-color: var(--warn); }
.toast_error   { border-left-color: var(--error); }
.toast_info    .toast_icon { color: var(--accent); }
.toast_success .toast_icon { color: var(--ok); }
.toast_warning .toast_icon { color: var(--warn); }
.toast_error   .toast_icon { color: var(--error); }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) { .stats_hide_xl { display: none !important; } }
@media (max-width: 1000px) { .stats_hide_lg { display: none !important; } }
@media (max-width: 760px)  { .stats_hide_md { display: none !important; } }

@media (max-width: 900px) {
  .sidebar     { width: 76px; padding: 18px 8px; align-items: center; }
  .topbar      { padding: 12px 16px; gap: 10px; }
  .brand       { font-size: 16px; }
  .brand_sub   { display: none; }
  .nav_section { display: none; }
  .nav_label_on, .nav_label_off { display: none; }
  .content    { padding: 16px 18px; gap: 16px; }
  .title      { font-size: 24px; }
  .stats_row  { gap: 10px; }
  .thead, .trow { padding: 10px 12px; }
  .col_svc    { width: 150px; }
  .col_proj   { width: 120px; }
  .col_state  { width: 130px; }
  .col_dur    { width: 90px; }
  /* Numa tela estreita o toast ocupa a largura toda: 260px de mínimo num
     viewport de 360 deixaria a mensagem em quatro linhas. */
  .toast_wrap { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .toast      { width: 100%; min-width: 0; max-width: none; }
}

@media (max-width: 560px) {
  .sidebar { width: 64px; padding: 14px 6px; gap: 4px; }
  .brand   { font-size: 12px; }
  .topbar  { padding: 10px 10px; gap: 8px; }
  .search, .topbar_status { display: none; }
  .content    { padding: 10px 10px; gap: 12px; }
  .title      { font-size: 20px; }
  .col_svc    { width: 110px; }
  .col_proj   { width: 82px; }
  .col_state  { width: 110px; }
  .col_dur    { width: 64px; }
  .stats_row  { display: none; }
  .col_start  { display: none; }
}