/* ===============================================================================
   SS-IPTV — painel administrativo
   ===============================================================================

   Arquivo unico de estilo do painel, organizado como sistema:

     1. Tokens            cores, elevacao, raio, tipografia
     2. Ponte Bootstrap   alinha as variaveis do Bootstrap aos tokens
     3. Base              corpo, tipografia, foco
     4. Layout            shell, sidebar, topbar, main
     5. Componentes       cabecalho de pagina, cards, indicadores, grade, formularios
     6. Responsivo

   Regra de manutencao: **um seletor, um lugar**. A versao anterior deste arquivo
   cresceu por remendos e chegou a ter `.admin-shell`, `.admin-page-header` e
   `.admin-empty-state` declarados duas e tres vezes, cada um sobrescrevendo o
   anterior — era impossivel saber qual valor valia sem ler os 668 linhas.

   Sem fonte externa de proposito: o painel roda em rede fechada e um `@import`
   de CDN viraria uma dependencia de internet para o texto aparecer certo.
   =============================================================================== */

/* ===============================================================================
   1. TOKENS
   =============================================================================== */

:root {
    /* --- Superficies, do fundo para a frente ---------------------------------
       Quatro niveis em vez de um cinza so. E o que faz um card parecer estar
       SOBRE a pagina em vez de desenhado nela. */
    --ss-bg: #080d17;           /* fundo da aplicacao, o mais profundo */
    --ss-surface: #101a2b;      /* card */
    --ss-surface-raised: #16223a;  /* cabecalho de tabela, input, chip */
    --ss-surface-hover: #1c2a45;   /* linha sob o cursor */
    --ss-sidebar: #0a1120;      /* menu, entre o fundo e o card */

    /* --- Linhas -------------------------------------------------------------- */
    --ss-line: #1d2942;         /* divisoria discreta */
    --ss-line-strong: #2b3a5c;  /* borda de controle, mais presente */

    /* --- Texto --------------------------------------------------------------- */
    --ss-text: #e8edf7;         /* corpo e numeros */
    --ss-text-strong: #ffffff;  /* titulo */
    --ss-text-dim: #a7b6cd;     /* rotulo, apoio */
    --ss-text-mute: #8496b0;    /* metadado, o mais fraco que ainda passa em AA */

    /* --- Acento --------------------------------------------------------------
       Dois azuis, e nao um: #4f8ef7 e claro o suficiente para ser TEXTO sobre
       fundo escuro (5,4:1), mas como FUNDO de botao com texto branco da apenas
       3,21:1 — reprova em AA. #2563c9 sob texto branco da 5,67:1. */
    --ss-accent: #4f8ef7;          /* texto, icone, borda, foco */
    --ss-accent-strong: #2563c9;   /* fundo de botao com texto branco */
    --ss-accent-line: rgba(79, 142, 247, 0.45);
    --ss-accent-text: #a8c8fd;

    /* --- Estados ------------------------------------------------------------- */
    --ss-ok: #34d399;
    --ss-warn: #fbbf24;
    --ss-danger: #f87171;

    /* --- Fundos de realce, SOLIDOS -------------------------------------------
       Cada um e a composicao exata da versao translucida sobre a superficie em
       que aparece. Solido de proposito: com rgba o contraste medido fica
       ambiguo — a ferramenta ignora o alfa e acusa reprovacao onde o texto e
       perfeitamente legivel — e o que nao da para medir nao da para garantir.
       Contrastes conferidos: pilula ok 7,1:1 · danger 5,4:1 · warn 8,1:1 ·
       accent 8,4:1 · faixa de HTTP 11,7:1 · item ativo do menu 16,5:1. */
    --ss-accent-bg: #192a48;    /* accent 14% sobre o card */
    --ss-accent-bg-deep: #121f36;  /* accent 14% sobre o fundo da pagina */
    --ss-ok-bg: #153239;
    --ss-warn-bg: #2f2f2a;
    --ss-danger-bg: #2c2433;
    --ss-danger-bg-deep: #251922;  /* danger 12% sobre o fundo da pagina */
    --ss-quiet-bg: #151f30;     /* realce neutro, para estado vazio */

    /* --- Raio ---------------------------------------------------------------- */
    --ss-radius-sm: 0.375rem;
    --ss-radius: 0.625rem;
    --ss-radius-lg: 0.875rem;

    /* --- Elevacao ------------------------------------------------------------
       Sombra discreta e escura: no tema escuro, sombra clara suja a superficie. */
    --ss-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ss-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.75);

    /* --- Tipografia ---------------------------------------------------------- */
    --ss-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
    --ss-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;

    /* --- Medidas ------------------------------------------------------------- */
    --ss-sidebar-w: 208px;
    --ss-content-max: 1440px;
}

/* ===============================================================================
   2. PONTE BOOTSTRAP
   ===============================================================================
   O Bootstrap escuro traz cinzas proprios que, sobre este fundo, chegam a
   contraste 1.15 — texto ilegivel. Aqui os tokens passam a valer para os
   componentes dele. */

:root,
[data-bs-theme="dark"] {
    --bs-body-bg: var(--ss-bg);
    --bs-body-color: var(--ss-text);
    --bs-body-color-rgb: 232, 237, 247;
    --bs-emphasis-color: var(--ss-text-strong);
    --bs-heading-color: var(--ss-text-strong);
    --bs-secondary-color: var(--ss-text-dim);
    --bs-secondary-color-rgb: 167, 182, 205;
    --bs-border-color: var(--ss-line-strong);
    --bs-border-radius: var(--ss-radius);
    --bs-link-color: var(--ss-accent-text);
    --bs-link-hover-color: #ffffff;
    --bs-primary: var(--ss-accent);
    --bs-font-sans-serif: var(--ss-font);
}

/* ===============================================================================
   3. BASE
   =============================================================================== */

body.admin-body,
body.admin-auth-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ss-font);
    color: var(--ss-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.admin-body {
    background: var(--ss-bg);
}

body.admin-auth-body {
    background:
        radial-gradient(1100px 620px at 50% -12%, rgba(79, 142, 247, 0.18), transparent 70%),
        var(--ss-bg);
    display: grid;
    place-items: center;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ss-text-strong);
    letter-spacing: -0.011em;
    font-weight: 650;
}

.form-label {
    color: var(--ss-text-dim);
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.text-secondary,
.admin-section .form-text,
.form-text {
    color: var(--ss-text-dim) !important;
}

/* Numero de dado nunca deve "dancar" quando o valor muda: figura tabular mantem
   todos os digitos com a mesma largura. */
.admin-stat-value,
.admin-kv dd,
.admin-grid td,
.admin-code-id,
.admin-log-output {
    font-variant-numeric: tabular-nums;
}

/* Foco visivel em tudo que recebe teclado. Vem antes dos componentes para que
   qualquer regra posterior nao apague sem intencao. */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.btn-close:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ss-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ===============================================================================
   4. LAYOUT
   =============================================================================== */

.admin-shell {
    display: grid;
    grid-template-columns: var(--ss-sidebar-w) 1fr;
    min-height: 100vh;
}

/* --- Sidebar ------------------------------------------------------------------ */

.admin-sidebar {
    display: flex;
    flex-direction: column;
    background: var(--ss-sidebar);
    border-right: 1px solid var(--ss-line);
    padding: 1.15rem 0.7rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.45rem 1.15rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--ss-line);
}

/* Marca com o monograma: da identidade ao menu sem depender de arquivo de imagem. */
.admin-brand::before {
    content: "SS";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ss-radius-sm);
    background: var(--ss-accent-strong);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: var(--ss-shadow);
}

/* O texto da marca vive num bloco proprio: como irmao direto do monograma ele
   entrava no mesmo eixo do flex e "SS-IPTV" quebrava em duas linhas na sidebar
   de 208px. */
.admin-brand-text {
    min-width: 0;
}

.admin-brand h1 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.admin-brand small {
    display: block;
    color: var(--ss-text-mute);
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.52rem 0.6rem;
    border-radius: var(--ss-radius-sm);
    color: var(--ss-text-dim);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.admin-nav a svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    opacity: 0.75;
    transition: opacity 0.12s ease;
}

.admin-nav a:hover {
    background: var(--ss-surface-raised);
    color: var(--ss-text);
}

.admin-nav a:hover svg {
    opacity: 1;
}

/* Ativo marcado por cor E barra lateral: quem nao distingue matiz continua
   sabendo em que tela esta. */
.admin-nav a.active {
    background: var(--ss-accent-bg-deep);
    color: var(--ss-text-strong);
    font-weight: 600;
}

.admin-nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ss-accent);
}

.admin-nav a.active svg {
    opacity: 1;
    color: var(--ss-accent-text);
}

/* Logo abaixo do menu, NAO no rodape da viewport: com `margin-top:auto` o Sair
   ia para o fim de uma sidebar de 100vh e deixava um vao enorme depois do
   ultimo item. Ja tinha sido corrigido antes; a reescrita do arquivo trouxe o
   defeito de volta. */
.admin-sidebar-footer {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ss-line);
}

/* --- Area principal ----------------------------------------------------------- */

.admin-main {
    position: relative;
    overflow-x: hidden;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--ss-line);
    background: rgba(8, 13, 23, 0.85);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Sessao como chip: identifica o usuario sem competir com o titulo da pagina. */
.admin-topbar-session {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    background: var(--ss-surface);
    font-size: 0.8rem;
    color: var(--ss-text-mute);
}

.admin-topbar-session strong {
    color: var(--ss-text);
    font-weight: 600;
}

.admin-main-inner {
    width: min(var(--ss-content-max), 100%);
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2.5rem;
}

/* ===============================================================================
   5. COMPONENTES
   =============================================================================== */

/* --- Cabecalho de pagina ------------------------------------------------------ */

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ss-line);
}

.admin-page-header h2 {
    font-size: 1.32rem;
    line-height: 1.2;
    margin: 0 0 0.2rem;
}

.admin-page-header p {
    font-size: 0.88rem;
    color: var(--ss-text-dim);
    margin: 0;
}

.admin-section {
    min-width: 0;
}

/* --- Cards ------------------------------------------------------------------- */

.admin-card,
.admin-section .card.admin-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow);
}

.admin-card > .card-body {
    padding: 1.15rem 1.25rem;
}

/* Titulo de card: pequeno, firme, com respiro previsivel. */
.admin-card h3 {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.005em;
}

.admin-subsection-card {
    background: var(--ss-bg);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    padding: 1rem 1.05rem;
}

.admin-subsection-card h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ss-text-mute);
    font-weight: 650;
    margin-bottom: 0.85rem !important;
}

/* --- Indicadores da faixa de estado ------------------------------------------
   `.admin-stat` estava usada no dashboard e NAO existia no CSS: os quatro
   indicadores apareciam como caixas vazias, com o numero no mesmo tamanho de um
   rotulo qualquer. E o principal motivo de a tela parecer sem acabamento. */

.admin-stat {
    position: relative;
    overflow: hidden;
}

.admin-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ss-accent-line), transparent 80%);
}

.admin-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    color: var(--ss-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O valor precisa caber tanto em "496.573" quanto em "ATIVA + FONTE LOCAL":
   `clamp` com base na largura do card evita que o texto longo quebre em duas
   linhas e deixe a faixa de indicadores desalinhada. */
.admin-stat-value {
    display: block;
    margin-top: 0.3rem;
    font-size: clamp(1.05rem, 1.7cqi + 0.55rem, 1.45rem);
    font-weight: 680;
    line-height: 1.2;
    color: var(--ss-text-strong);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.admin-stat > .card-body {
    padding: 1rem 1.15rem 1.05rem;
    container-type: inline-size;
}

/* --- Lista rotulo/valor ------------------------------------------------------ */

.admin-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 1rem;
    margin: 0;
}

.admin-kv dt,
.admin-kv dd {
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--ss-line);
}

/* A ultima linha nao precisa de divisoria: ela encosta na borda do card. */
.admin-kv dt:last-of-type,
.admin-kv dd:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-kv dt {
    color: var(--ss-text-dim);
    font-size: 0.855rem;
    font-weight: 400;
}

.admin-kv dd {
    margin: 0;
    text-align: right;
    color: var(--ss-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.admin-kv-sep {
    border-top: 1px solid var(--ss-line);
    margin: 0.95rem 0;
}

/* --- Grade (DataGrid) -------------------------------------------------------- */

.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--ss-radius);
    border: 1px solid var(--ss-line);
}

.admin-grid {
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ss-text);
}

.admin-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ss-surface-raised);
    border-bottom: 1px solid var(--ss-line-strong);
    padding: 0.62rem 0.75rem;
    font-size: 0.71rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ss-text-dim);
    white-space: nowrap;
}

.admin-grid tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid var(--ss-line);
    border-bottom: 0;
    font-size: 0.875rem;
}

.admin-grid tbody tr:first-child td {
    border-top: 0;
}

.admin-grid tbody tr:hover > td {
    background: var(--ss-surface-hover);
}

/* Linha da geracao em uso: cor e barra, para nao depender so de matiz. */
.admin-grid-row-current > td {
    background: var(--ss-accent-bg) !important;
}

.admin-grid-row-current > td:first-child {
    box-shadow: inset 3px 0 0 var(--ss-accent);
}

.admin-grid-actions {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.admin-grid-actions .btn {
    min-width: 4.6rem;
}

/* A coluna de acoes fica fixa a direita.
   Sem isto, em tabela mais larga que o container (Categorias tem 8 colunas e
   quatro botoes por linha) o ultimo botao aparecia cortado na borda do card, sem
   nenhuma pista de que era preciso rolar — o operador simplesmente nao via a
   acao. Fixa, ela esta sempre alcancavel. */
.admin-grid th:last-child,
.admin-grid td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--ss-surface);
    box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.75);
}

.admin-grid th:last-child {
    z-index: 3;
    background: var(--ss-surface-raised);
}

.admin-grid tbody tr:hover > td:last-child {
    background: var(--ss-surface-hover);
}

.admin-grid-row-current > td:last-child {
    background: var(--ss-accent-bg) !important;
}

.admin-grid-actions .admin-btn-icon {
    min-width: 2.1rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.admin-btn-icon .btn-label-icon {
    line-height: 1;
}

/* Larguras fixas nas colunas estreitas de Execucoes: sem isto a coluna de
   resultado domina a tabela e empurra as acoes para fora da tela. */
.admin-grid-exec th:nth-child(1), .admin-grid-exec td:nth-child(1) { width: 3.5rem; }
.admin-grid-exec th:nth-child(3), .admin-grid-exec td:nth-child(3) { width: 6rem; }
.admin-grid-exec th:nth-child(5), .admin-grid-exec td:nth-child(5) { width: 5.5rem; }
.admin-grid-exec th:nth-child(8), .admin-grid-exec td:nth-child(8) { width: 7rem; }

.admin-nowrap { white-space: nowrap; }

/* --- Texto que nao pode esticar a tabela ------------------------------------- */

.admin-code-id,
.admin-keywords-cell,
.profile-card-logo,
.profile-card-target,
.profile-card-name {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Id de geracao: fundo solido de proposito — com rgba a medicao de contraste
   fica ambigua e nao da para provar que o texto e legivel. */
.admin-code-id {
    max-width: 13rem;
    padding: 0.13rem 0.42rem;
    border-radius: var(--ss-radius-sm);
    background: var(--ss-surface-raised);
    border: 1px solid var(--ss-line);
    color: var(--ss-accent-text);
    font-family: var(--ss-font-mono);
    font-size: 0.76rem;
}

.admin-keywords-cell {
    max-width: 20rem;
    color: var(--ss-text-dim);
    font-size: 0.83rem;
}

.profile-card-name { max-width: 14rem; }
.profile-card-target { max-width: 30rem; }

/* Guarda: estas classes sao para elementos EM LINHA dentro da celula.
   Aplicadas por engano no proprio <td>, o `display:inline-block` acima tira a
   celula do layout da tabela — o nome virava uma caixa solta, alinhada no topo,
   e a divisoria da linha deixava de atravessar a coluna. Aconteceu em Perfis.
   Aqui a celula volta a ser celula; a truncagem simplesmente nao se aplica, o
   que degrada o texto e nao a tabela. */
td.profile-card-name,
td.profile-card-target,
td.profile-card-logo,
td.admin-keywords-cell,
td.admin-code-id {
    display: table-cell;
}

.profile-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 18rem;
    color: var(--ss-text-dim);
    font-size: 0.82rem;
}

/* Mensagem longa: 2 linhas na grade, completa no `title`. */
.admin-msg-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 34rem;
    font-size: 0.855rem;
    line-height: 1.4;
}

.admin-rule-note {
    margin-bottom: 1rem;
}

/* --- Formularios ------------------------------------------------------------- */

.admin-section .form-control,
.admin-section .form-select,
.admin-auth-card .form-control {
    background-color: var(--ss-bg);
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-radius-sm);
    color: var(--ss-text);
    padding: 0.48rem 0.7rem;
    font-size: 0.9rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.admin-section .form-control::placeholder {
    color: var(--ss-text-mute);
}

.admin-section .form-control:focus,
.admin-section .form-select:focus,
.admin-auth-card .form-control:focus {
    background-color: var(--ss-bg);
    color: var(--ss-text-strong);
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.28);
}

.admin-section .form-control-color {
    padding: 0.25rem;
    min-height: 2.35rem;
}

/* --- Botoes ------------------------------------------------------------------ */

.btn {
    border-radius: var(--ss-radius-sm);
    font-weight: 550;
    font-size: 0.875rem;
    padding: 0.44rem 0.9rem;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-primary {
    --bs-btn-bg: var(--ss-accent-strong);
    --bs-btn-border-color: var(--ss-accent-strong);
    --bs-btn-hover-bg: #1f56b2;
    --bs-btn-hover-border-color: #1f56b2;
    --bs-btn-active-bg: #1b4c9e;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    font-weight: 600;
}

/* Os outline do Bootstrap ficam ilegiveis aqui: texto branco sobre ciano claro
   da contraste 1.96. Cada um recebe um par cor/borda medido. */
.btn-outline-light {
    --bs-btn-color: var(--ss-text);
    --bs-btn-border-color: var(--ss-line-strong);
    --bs-btn-hover-bg: var(--ss-surface-raised);
    --bs-btn-hover-border-color: var(--ss-line-strong);
    --bs-btn-hover-color: var(--ss-text-strong);
}

.btn-outline-info {
    --bs-btn-color: var(--ss-accent-text);
    --bs-btn-border-color: var(--ss-accent-line);
    --bs-btn-hover-bg: var(--ss-accent-bg);
    --bs-btn-hover-border-color: var(--ss-accent);
    --bs-btn-hover-color: #ffffff;
}

.btn-outline-danger {
    --bs-btn-color: #fca5a5;
    --bs-btn-border-color: rgba(248, 113, 113, 0.5);
    --bs-btn-hover-bg: var(--ss-danger-bg);
    --bs-btn-hover-border-color: var(--ss-danger);
    --bs-btn-hover-color: #ffffff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ss-text-dim);
    --bs-btn-border-color: var(--ss-line-strong);
    --bs-btn-hover-bg: var(--ss-surface-raised);
    --bs-btn-hover-color: var(--ss-text);
}

/* Espacador que ocupa a linha de um rotulo ausente.
   Precisa manter o `inline-block` do .form-label, e nao virar `block` via
   utilitario do Bootstrap: um inline-block deixa ~2px de folga abaixo de si (a
   descida da linha), e sem essa folga o botao subia 2px em relacao ao campo. */
.admin-field-spacer {
    display: none;
}

@media (min-width: 992px) {
    .admin-field-spacer {
        display: inline-block;
    }
}

/* Botao que divide a linha com um campo: mesma caixa vertical do controle, para
   os dois lerem como uma faixa unica. Sem isto o botao fica 2px mais baixo e o
   desalinhamento aparece justamente ao lado do input. */
.admin-btn-field {
    padding-block: 0.48rem;
    font-size: 0.9rem;
}

/* --- Badges ------------------------------------------------------------------ */

.badge {
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.34em 0.62em;
    border-radius: 999px;
}

/* Pilulas de estado: fundo suave + texto colorido lê melhor que bloco saturado,
   e mantem a linha da tabela calma. */
.badge.bg-success { background: var(--ss-ok-bg) !important; color: var(--ss-ok); }
.badge.bg-danger  { background: var(--ss-danger-bg) !important; color: var(--ss-danger); }
.badge.bg-warning { background: var(--ss-warn-bg) !important; color: var(--ss-warn); }
.badge.bg-primary { background: var(--ss-accent-bg) !important; color: var(--ss-accent-text); }
.badge.bg-info    { background: var(--ss-accent-bg) !important; color: var(--ss-accent-text); }
.badge.bg-secondary {
    background: var(--ss-surface-raised) !important;
    color: var(--ss-text-dim);
}

/* --- Estado vazio ------------------------------------------------------------ */

.admin-empty-state {
    max-width: 100%;
    border: 1px dashed var(--ss-line-strong);
    border-radius: var(--ss-radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
    color: var(--ss-text-dim);
    background: var(--ss-quiet-bg);
}

/* --- Saida de log ----------------------------------------------------------- */

.admin-log-output {
    background: #04070e;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    padding: 1rem 1.1rem;
    color: #cfe0f5;
    font-family: var(--ss-font-mono);
    font-size: 0.8rem;
    line-height: 1.55;
    max-height: 70vh;
    overflow: auto;
    white-space: pre-wrap;
}

/* --- Faixa de HTTP ----------------------------------------------------------
   Informativa, nao dominante: em `position:fixed` ela cobria o cabecalho
   (medido: alerta y=10 h=30 sobre cabecalho y=19). */

.admin-http-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 1.5rem 0;
    padding: 0.45rem 2.6rem 0.45rem 0.8rem;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-left: 3px solid var(--ss-danger);
    border-radius: var(--ss-radius-sm);
    background: var(--ss-danger-bg-deep);
    color: #fecaca;
    font-size: 0.82rem;
    line-height: 1.35;
}

.admin-http-strip strong {
    color: #fee2e2;
    font-weight: 650;
}

/* --- Menu movel -------------------------------------------------------------- */

.admin-mobile-nav-card {
    margin: 0.9rem 1.5rem 0;
}

.admin-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--ss-radius-sm);
    color: var(--ss-text-dim);
    text-decoration: none;
    font-size: 0.92rem;
}

.admin-mobile-nav a svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.75;
}

.admin-mobile-nav a:hover,
.admin-mobile-nav a.active {
    background: var(--ss-accent-bg);
    color: var(--ss-text-strong);
}

/* --- Sobreposicoes: toast e modal ------------------------------------------- */

.admin-toast-container {
    z-index: 1080;
}

.toast {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow-lg);
    color: var(--ss-text);
}

/* O X fica no canto superior DIREITO.
   O `.toast` do Bootstrap e display:block: sem isto o botao caia abaixo do
   texto e encostado a esquerda. */
.admin-toast-container .toast {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.admin-toast-container .toast-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.25rem;
}

.admin-toast-container .btn-close {
    flex: 0 0 auto;
    margin: 0.55rem 0.6rem 0 0;
    padding: 0.3rem;
}

.modal-content {
    background: var(--ss-surface);
    color: var(--ss-text);
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--ss-line);
}

.modal-header .modal-title {
    font-size: 1rem;
}

.modal-header .btn-close {
    margin: -0.25rem -0.25rem -0.25rem auto;
    padding: 0.5rem;
}

.modal-footer {
    justify-content: flex-start;
    gap: 0.4rem;
}

/* Botao de fechar de alerta: mesma posicao em qualquer contexto, com respiro. */
.alert-dismissible {
    padding-right: 2.6rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    padding: 0.35rem;
    z-index: 2;
}

.progress {
    background: var(--ss-surface-raised) !important;
    border-radius: 999px;
    height: 0.6rem;
}

/* A barra carrega o rotulo "45%" em texto branco por dentro, entao ela precisa
   do azul escuro, e nao do claro: com #4f8ef7 o rotulo fica em 3,21:1.
   A largura inicial vem daqui, e nao de um `style=` no HTML: a politica de
   conteudo bloqueia atributo de estilo inline. O painel.js continua ajustando
   `.style.width` por CSSOM, que a politica permite. */
.progress-bar {
    width: 0;
    background: var(--ss-accent-strong);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
}

/* --- Tela de login ---------------------------------------------------------- */

.admin-auth-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
}

/* ===============================================================================
   6. RESPONSIVO
   =============================================================================== */

@media (max-width: 1400px) {
    .profile-card-target { max-width: 22rem; }
    .admin-keywords-cell { max-width: 14rem; }
}

@media (max-width: 1200px) {
    .profile-card-target { max-width: 16rem; }
    .admin-keywords-cell { max-width: 11rem; }
    .admin-grid-actions .btn { min-width: 0; }
}

@media (max-width: 992px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-topbar {
        justify-content: space-between;
        padding: 0 1rem;
    }

    .admin-main-inner {
        padding: 1rem 1rem 2.5rem;
    }

    .admin-http-strip,
    .admin-mobile-nav-card {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .admin-page-header {
        align-items: flex-start;
    }
}

/* Quem pediu menos animacao no sistema nao deve receber transicao nenhuma. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}