/* ═══════════════════════════════════════════════════════════════════════
   Carçudos System — Tema base do APP (telas autenticadas)
   Tokens da paleta: /assets/css/tokens.css (single source of truth)
   ═══════════════════════════════════════════════════════════════════════ */
@import url("/assets/css/tokens.css");

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

h1,h2,h3,h4 { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--primary); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ─── LAYOUT (sidebar + content) ─── */
.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.app-sidebar {
    background: var(--primary); color: white;
    padding: 24px 0;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.app-sidebar .brand {
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700;
    color: white;
    display: flex; align-items: center; gap: 10px;
}
.app-sidebar .brand span { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── Header com Logo + Nome da loja no topo do sidebar ─────────────
   Substitui o "CARÇUDOS SYS" estático por uma identidade dinâmica:
   logo da empresa (48px) à esquerda e nome dela embaixo. Ajuda super-
   admins a saber a loja em uso só de bater o olho. */
.app-sidebar .tenant-brand {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 0 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.app-sidebar .tenant-brand-logo {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.05rem;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.app-sidebar .tenant-brand-logo img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.app-sidebar .tenant-brand-logo.is-initials {
    background: var(--gradient);
    color: #fff;
    letter-spacing: .04em;
}
.app-sidebar .tenant-brand-text {
    display: flex; flex-direction: column;
    min-width: 0;
}
.app-sidebar .tenant-brand-platform {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    margin-bottom: 4px;
}
.app-sidebar .tenant-brand-platform span {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.app-sidebar .tenant-brand-nome {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem; font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar-nav .nav-group { padding: 10px 0 6px; }
.sidebar-nav .nav-group-title {
    padding: 4px 24px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.sidebar-nav a {
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-areas: "ic lbl" "ic desc";
    column-gap: 12px;
    align-items: center;
    padding: 7px 24px;
    color: rgba(255,255,255,0.78);
    transition: 0.15s;
    border-left: 3px solid transparent;
    line-height: 1.2;
}
.sidebar-nav a:hover { color: white; background: rgba(255,255,255,0.05); text-decoration: none; }
.sidebar-nav a.active {
    color: white; background: rgba(74,223,90,0.10);
    border-left-color: var(--secondary);
}
.sidebar-nav a i { grid-area: ic; text-align: center; opacity: 0.85; font-size: 0.95rem; }
.sidebar-nav a .nav-label { grid-area: lbl; font-size: 0.9rem; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.sidebar-nav a .nav-desc {
    grid-area: desc;
    font-size: 0.68rem; color: rgba(255,255,255,0.45);
    font-weight: 400; line-height: 1.25; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-nav a.active .nav-desc { color: rgba(255,255,255,0.7); }
.sidebar-nav .wip-pill {
    font-size: 0.58rem; font-weight: 700; padding: 1px 6px;
    background: rgba(255,193,7,.18); color: #ffe084;
    border-radius: 999px; letter-spacing: .5px;
}

.sidebar-user {
    padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 12px;
}
.sidebar-user .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white;
}
.sidebar-user .info { flex: 1; min-width: 0; }
.sidebar-user .nome { color: white; font-weight: 500; font-size: 0.9rem; }
.sidebar-user .role { color: rgba(255,255,255,0.6); font-size: 0.78rem; }

.app-content { padding: 24px 32px; max-width: 1400px; }

.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.page-header h1 { font-size: 1.6rem; }
.page-header .subtitle { color: var(--muted); margin-top: 4px; }

/* ─── CARDS / SURFACES ─── */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 16px;
}
.card-title {
    font-size: 0.9rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 12px;
}

/* ─── BOTÕES ─── */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-weight: 500; font-size: 0.95rem;
    transition: 0.2s;
    text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--accent); }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-success { background: var(--success); color: white; }
.btn-danger  { background: var(--danger); color: white; }
.btn-ghost   { background: transparent; color: var(--primary); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ─── FORMS ─── */
.field { margin-bottom: 14px; }
.field label {
    display: block; font-size: 0.85rem; color: var(--muted);
    margin-bottom: 6px; font-weight: 500;
}
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--surface);
    transition: 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(27,122,133,0.12);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.field-help { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* ─── TABELAS ─── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.table th { color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.table tbody tr:hover { background: var(--bg); }

/* ─── STATUS BADGES ─── */
.badge {
    display: inline-block;
    padding: 3px 10px; border-radius: 12px;
    font-size: 0.78rem; font-weight: 500;
}
.badge-default  { background: #eee; color: #555; }
.badge-info     { background: rgba(27,122,133,0.12); color: var(--accent); }
.badge-success  { background: rgba(42,157,106,0.12); color: var(--success); }
.badge-warning  { background: rgba(243,156,18,0.12); color: var(--warning); }
.badge-danger   { background: rgba(217,67,67,0.12); color: var(--danger); }

/* ─── TOGGLE SWITCH (matriz de permissões) ─── */
.toggle {
    position: relative; display: inline-block;
    width: 40px; height: 22px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #ccc; border-radius: 22px;
    transition: 0.2s;
}
.toggle .slider::before {
    content: ''; position: absolute;
    height: 16px; width: 16px; left: 3px; top: 3px;
    background: white; border-radius: 50%;
    transition: 0.2s;
}
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(18px); }
.toggle input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* ─── ALERTS ─── */
.alert {
    padding: 12px 16px; border-radius: var(--radius);
    margin-bottom: 16px;
    border-left: 4px solid;
    display: flex; align-items: center; gap: 10px;
}
.alert-info    { background: rgba(27,122,133,0.08); border-color: var(--accent); color: var(--primary); }
.alert-success { background: rgba(42,157,106,0.08); border-color: var(--success); color: #16633e; }
.alert-warning { background: rgba(243,156,18,0.08); border-color: var(--warning); color: #8a5a00; }
.alert-danger  { background: rgba(217,67,67,0.08); border-color: var(--danger); color: #8a1c1c; }

/* ─── RESPONSIVO ─── */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 0; left: -100%;
        width: 280px; max-width: 85vw;
        transition: left 0.3s ease;
        z-index: 1000;
        box-shadow: 4px 0 20px rgba(0,0,0,.25);
    }
    .app-sidebar.open { left: 0; }
    .app-content { padding: 64px 14px 16px; }

    /* Botão hamburguer fixo no canto sup. esquerdo */
    .sidebar-toggle {
        display: flex !important;
        position: fixed; top: 12px; left: 12px;
        z-index: 1100;
        width: 44px; height: 44px;
        border-radius: 10px;
        background: var(--primary); color: #fff;
        border: none; cursor: pointer;
        align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
        font-size: 1.05rem;
    }
    body.admin-mode .sidebar-toggle {
        background: #2c2c2e; color: #fff;
        border: 1px solid #48484a;
    }
    /* Overlay escuro atrás do sidebar quando aberto */
    .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 999;
    }
    .sidebar-backdrop.open { display: block; }

    /* Page header empilha em mobile */
    .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-header > div + * { width: 100%; }

    /* Tabelas: scroll horizontal */
    .table-wrap, .card > .table { overflow-x: auto; }
    .table { min-width: 520px; }

    /* Filtros viram coluna */
    .filtro-bar { flex-direction: column !important; }
    .filtro-bar > * { width: 100% !important; }
}

/* Desktop: esconde toggle e backdrop */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

/* ─── UTILITIES ─── */
.flex { display: flex; gap: 12px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mt-2 { margin-top: 12px; } .mt-4 { margin-top: 20px; }
.text-muted { color: var(--muted); }
.text-right { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL — light mode (default). Estilos dark estão na seção admin-mode.
   Gerado por openModal() em app-shell.js usando estas classes.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
    padding: 16px;
}
.modal {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-lg, 14px);
    width: 100%;
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
    overflow: hidden;
    border: 1px solid var(--border);
}
.modal-sm { max-width: 420px; }
.modal-md { max-width: 640px; }
.modal-lg { max-width: 920px; }
.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface);
}
.modal-title {
    margin: 0;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}
.modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.modal-close:hover { color: var(--text); background: rgba(0,0,0,.06); }
.modal-body {
    padding: 18px 22px;
    overflow: auto;
    flex: 1;
    color: var(--text);
}
.modal-body label { color: var(--text); }
.modal-body input,
.modal-body select,
.modal-body textarea {
    background: var(--surface-2, #fafdfb);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25,193,44,.15);
}
.modal-body .field-help { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--surface);
    flex-wrap: wrap;
}
.modal-footer > .delete-left,
.modal-footer .btn-danger:first-child { margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN-MODE — tema cinza/dev para o painel /admin (super admin global).
   /app permanece verde (operação do tenant). /admin fica em tons de cinza
   pra deixar visualmente claro que o usuário está no painel da plataforma.
   Todas as cores respeitam contraste WCAG AA (≥4.5:1 pra texto normal).
   ═══════════════════════════════════════════════════════════════════════ */
body.admin-mode {
    /* Paleta cinza Apple/macOS dark — mais legível que preto puro */
    --bg-dark:        #1c1c1e;
    --surface-dark:   #2c2c2e;
    --surface-2-dark: #3a3a3c;
    --surface-3-dark: #48484a;
    --border-dark:    #48484a;
    --border-sub:     #38383a;
    --text-dark:      #f5f5f7;
    --text-dark-2:    #d1d1d6;
    --text-dark-mute: #98989d;
    --accent-dark:    #4ADF5A;
    --warn-dark:      #ffd60a;
    --danger-dark:    #ff6b6b;
    --info-dark:      #5ac8fa;

    /* ─── OVERRIDE GLOBAL DE TOKENS ───────────────────────────────────
       Em admin-mode, redefinimos as variáveis BASE (--surface, --text,
       --muted, etc.). Isso resolve, de uma vez só, todos os elementos
       com `style="background:var(--surface)"` inline (KPIs gerados via
       JS, cards do pageEmConstrucao) — eles passam a usar a paleta dark
       sem precisar reescrever cada string de template. */
    --surface:        var(--surface-dark);
    --surface-2:      var(--surface-2-dark);
    --text:           var(--text-dark);
    --muted:          var(--text-dark-mute);
    --border:         var(--border-dark);
    --bg:             var(--bg-dark);
    --shadow-sm:      0 4px 14px rgba(0,0,0,.40);

    background: var(--bg-dark);
    color: var(--text-dark);
}
body.admin-mode .app-content { color: var(--text-dark); background: var(--bg-dark); }

/* Sidebar dark mode no /admin — evita FLASH VERDE entre navegações:
   o CSS pinta o sidebar escuro IMEDIATAMENTE (na primeira pintura, antes
   do JS rodar). Sem isso o sidebar herdava `var(--primary)` (verde) por
   ~100ms até o admin-saas-shell.js aplicar inline-style. */
body.admin-mode .app-sidebar {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%) !important;
}
body.admin-mode .app-sidebar .brand { border-bottom-color: rgba(255,255,255,0.06); }

/* Tipografia — força contraste alto em headings e textos auxiliares */
body.admin-mode h1,
body.admin-mode h2,
body.admin-mode h3,
body.admin-mode h4,
body.admin-mode h5,
body.admin-mode h6,
body.admin-mode strong { color: var(--text-dark) !important; }
body.admin-mode p,
body.admin-mode li,
body.admin-mode span,
body.admin-mode div,
body.admin-mode label,
body.admin-mode td { color: var(--text-dark-2); }
body.admin-mode .subtitle { color: var(--text-dark-2) !important; }
body.admin-mode .text-muted { color: var(--text-dark-mute) !important; }
body.admin-mode .field-help,
body.admin-mode small { color: var(--text-dark-mute) !important; }

/* Links e acentos — verde claro pra ficar visível.
   ATENÇÃO: não pode atingir <a> que seja botão (.btn) — esses precisam
   manter a cor branca/escolhida pela classe do botão. Senão fica
   verde-sobre-verde no admin (caso do "Entrar na empresa"). */
body.admin-mode a:not(.btn) { color: var(--accent-dark); }
body.admin-mode a:not(.btn):hover { color: #6dffa3; }
/* Restaura cor branca em todos os botões-link no admin */
body.admin-mode a.btn,
body.admin-mode a.btn-primary,
body.admin-mode a.btn-secondary,
body.admin-mode a.btn-ghost,
body.admin-mode a.btn-success,
body.admin-mode a.btn-danger { color: #fff !important; }
body.admin-mode a.btn-secondary { color: var(--text-dark) !important; }
body.admin-mode a.btn-ghost { color: var(--text-dark-2) !important; }
body.admin-mode code {
    background: var(--surface-2-dark); color: var(--accent-dark);
    padding: 1px 6px; border-radius: 4px; font-size: .85em;
}

/* Cards e KPIs — claramente destacados do fundo */
body.admin-mode .card,
body.admin-mode .kpi {
    background: var(--surface-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-sub);
    box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
body.admin-mode .card * { color: var(--text-dark-2); }
body.admin-mode .card h1, body.admin-mode .card h2,
body.admin-mode .card h3, body.admin-mode .card h4,
body.admin-mode .card strong { color: var(--text-dark) !important; }
body.admin-mode .card-title { color: var(--text-dark) !important; font-weight: 600; }

/* Tabelas — alto contraste */
body.admin-mode .table { color: var(--text-dark); background: transparent; }
body.admin-mode .table th {
    background: var(--surface-2-dark); color: var(--text-dark);
    border-color: var(--border-dark); font-weight: 600;
}
body.admin-mode .table td { border-color: var(--border-sub); color: var(--text-dark-2); }
body.admin-mode .table tbody tr:hover { background: rgba(255,255,255,.05); }

/* Inputs / Selects / Textareas */
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
    background: var(--surface-2-dark);
    color: var(--text-dark);
    border: 1px solid var(--border-dark);
}
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus {
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(74,223,90,.18);
    outline: none;
}
body.admin-mode input::placeholder,
body.admin-mode textarea::placeholder { color: var(--text-dark-mute); }

/* Botões — primary verde brand, secondary cinza, danger vermelho ─ todos
   com texto branco/claro pra contraste WCAG AA em fundo escuro. */
body.admin-mode .btn-primary,
body.admin-mode button.btn-primary,
body.admin-mode a.btn-primary {
    background: var(--primary);
    color: #fff !important;
    border: 1px solid transparent;
}
body.admin-mode .btn-primary:hover { background: var(--accent); }
body.admin-mode .btn-secondary,
body.admin-mode button.btn-secondary,
body.admin-mode a.btn-secondary {
    background: var(--surface-2-dark);
    color: var(--text-dark) !important;
    border: 1px solid var(--border-dark);
}
body.admin-mode .btn-secondary:hover { background: var(--surface-3-dark); }
body.admin-mode .btn-danger,
body.admin-mode button.btn-danger,
body.admin-mode a.btn-danger {
    background: var(--danger);
    color: #fff !important;
    border: 1px solid transparent;
}
body.admin-mode .btn-danger:hover { background: #b73838; }
body.admin-mode .btn-ghost {
    color: var(--text-dark);
    border: 1px solid var(--border-sub);
}
body.admin-mode .btn-ghost:hover { background: var(--surface-dark); }

/* Alerts — fundo claro do tema light fica ilegível em dark; refazer */
body.admin-mode .alert {
    background: var(--surface-dark);
    border-left: 3px solid var(--info-dark);
    color: var(--text-dark) !important;
}
body.admin-mode .alert *,
body.admin-mode .alert strong { color: var(--text-dark) !important; }
body.admin-mode .alert-info    { border-left-color: var(--info-dark); }
body.admin-mode .alert-success { border-left-color: var(--accent-dark); }
body.admin-mode .alert-warning { border-left-color: var(--warn-dark); }
body.admin-mode .alert-danger  { border-left-color: var(--danger-dark); }

/* Badges — variantes legíveis em fundo escuro */
body.admin-mode .badge {
    background: var(--surface-2-dark);
    color: var(--text-dark);
    border: 1px solid var(--border-sub);
}
body.admin-mode .badge-info    { background: rgba(90,200,250,.18);  color: var(--info-dark); border-color: rgba(90,200,250,.40); }
body.admin-mode .badge-success { background: rgba(74,223,90,.18);   color: var(--accent-dark); border-color: rgba(74,223,90,.40); }
body.admin-mode .badge-warning { background: rgba(255,214,10,.18);  color: var(--warn-dark); border-color: rgba(255,214,10,.40); }
body.admin-mode .badge-danger  { background: rgba(255,107,107,.18); color: var(--danger-dark); border-color: rgba(255,107,107,.40); }

/* Itens de lista específicos do admin */
body.admin-mode .empresa-row,
body.admin-mode .super-row {
    background: var(--surface-dark) !important;
    border: 1px solid var(--border-sub);
}
body.admin-mode .empresa-row .codigo,
body.admin-mode .empresa-row .stat { color: var(--text-dark-mute); }
body.admin-mode .empresa-row .codigo code { background: var(--surface-2-dark); color: var(--accent-dark); }

/* Wizard steps */
body.admin-mode .wizard-steps .step { background: var(--surface-dark); color: var(--text-dark-mute); }
body.admin-mode .wizard-steps .step.active { background: var(--accent-dark); color: #0a3a14; }
body.admin-mode .wizard-steps .step.done   { background: rgba(74,223,90,.20); color: var(--accent-dark); }
body.admin-mode .wizard-steps .sep { background: var(--border-dark); }

/* Box hierarquia/destaque verde-claro herdado do tema light fica esquisito */
body.admin-mode .hierarquia-info {
    background: linear-gradient(135deg, rgba(74,223,90,.10), rgba(74,223,90,.04)) !important;
    border-left-color: var(--accent-dark) !important;
}
body.admin-mode .hierarquia-info * { color: var(--text-dark-2) !important; }
body.admin-mode .hierarquia-info strong,
body.admin-mode .hierarquia-info h3 { color: var(--text-dark) !important; }
body.admin-mode .hierarquia-info code { background: rgba(255,255,255,.10); color: var(--text-dark); }

/* Filtros e search bar */
body.admin-mode .filtro-bar input,
body.admin-mode .filtro-bar select {
    background: var(--surface-dark); color: var(--text-dark);
    border-color: var(--border-sub);
}

/* Modais (gerados pelo openModal do app-shell) — dark mode */
body.admin-mode .modal-backdrop { background: rgba(0,0,0,.75); }
body.admin-mode .modal {
    background: var(--surface-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-sub);
}
body.admin-mode .modal-header,
body.admin-mode .modal-footer {
    background: var(--surface-dark) !important;
    border-color: var(--border-sub) !important;
}
body.admin-mode .modal-title { color: var(--accent-dark) !important; }
body.admin-mode .modal-close { color: var(--text-dark-2); }
body.admin-mode .modal-close:hover { color: var(--text-dark); background: rgba(255,255,255,.06); }
body.admin-mode .modal-body { color: var(--text-dark-2) !important; }
body.admin-mode .modal-body label,
body.admin-mode .modal-body strong { color: var(--text-dark) !important; }
body.admin-mode .modal-body input,
body.admin-mode .modal-body select,
body.admin-mode .modal-body textarea {
    background: var(--surface-2-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-sub) !important;
}
body.admin-mode .modal-body input:focus,
body.admin-mode .modal-body select:focus,
body.admin-mode .modal-body textarea:focus {
    border-color: var(--accent-dark) !important;
    box-shadow: 0 0 0 3px rgba(74,223,90,.18) !important;
}
body.admin-mode .modal-body .field-help,
body.admin-mode .modal-body small { color: var(--text-dark-mute) !important; }
body.admin-mode .modal-body code { background: var(--surface-2-dark) !important; color: var(--accent-dark) !important; padding: 1px 6px; border-radius: 4px; }
body.admin-mode .modal-body .alert-info {
    background: rgba(90,200,250,.10) !important;
    border-color: rgba(90,200,250,.40) !important;
    color: var(--text-dark) !important;
}
body.admin-mode .modal-body .alert-info * { color: var(--text-dark-2) !important; }
body.admin-mode .modal-body .alert-info strong,
body.admin-mode .modal-body .alert-info em { color: var(--text-dark) !important; }

/* Details/summary (usado no wizard de tenant) */
body.admin-mode details summary { color: var(--text-dark-mute); }
body.admin-mode details[open] summary { color: var(--text-dark-2); }

/* Pre / blocos de código (mensagem de erro fatal etc) */
body.admin-mode pre {
    background: var(--surface-2-dark) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-sub);
}

/* Tenant ativo: pílula verde no topo da sidebar do /app */
.tenant-badge {
    margin: 0 18px 14px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(25,193,44,.18), rgba(74,223,90,.10));
    border: 1px solid rgba(74,223,90,.45);
    border-radius: 10px;
    font-size: .82rem;
    color: #ffffff;
    display: flex; align-items: center; gap: 10px;
}
.tenant-badge .tenant-ico {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.15);
    color: #4ADF5A;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.tenant-badge .tenant-info { display: flex; flex-direction: column; min-width: 0; }
.tenant-badge .tenant-label {
    font-size: .62rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,.65);
}
.tenant-badge .tenant-nome {
    font-size: .88rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #ffffff;
}