/* === OpenConnection ClientPortal Layout — Lote 3.6 SP3-Pre === */

/* ── CSS var aliases not defined in tokens.css ── */

.sn-layout {
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--bg-app);
    color:var(--fg-default);
}

/* ───── Sidebar ───── */
.sn-sidebar {
    display:none;
    background:var(--bg-surface);
    border-right:0.0625rem solid var(--border-soft);
    flex-direction:column;
    padding:var(--s-5) 0;
}

/* 2026-07-12 (mesmo fix ja aplicado em admin.css): .sn-burger (MainShell.razor)
   toggla data-state="open|closed" no .sn-sidebar, mas nao havia regra CSS
   reagindo a esse atributo em <48rem -> botao "Abrir menu" nao fazia nada no
   mobile. Abaixo de 48rem o drawer agora aparece como overlay fixo ao clicar;
   acima de 48rem a sidebar ja e estatica (regra existente em @media min-width:48rem)
   e este bloco nao se aplica. */
@media (max-width: 47.9375rem) {
    .sn-sidebar[data-state="open"] {
        display:flex;
        position:fixed;
        inset:0 25% 0 0;
        z-index:40;
        height:100vh;
        overflow-y:auto;
        box-shadow:var(--shadow-xl);
    }
    /* Backdrop atras do drawer (sem JS - so CSS, via general sibling combinator) */
    .sn-sidebar[data-state="open"] ~ .sn-main::before {
        content:"";
        position:fixed;
        inset:0;
        background:var(--overlay-backdrop);
        z-index:30;
    }
}

.sn-sidebar-logo {
    display:flex; align-items:center; gap:var(--s-2);
    padding:var(--s-3) var(--s-5) var(--s-5);
    border-bottom:0.0625rem solid var(--border-soft);
    margin-bottom:var(--s-4);
    /* 2026-07-18 (equalizar-navy-logomarca): a wordmark "dark" (openpower-wordmark-dark.svg)
       traz seu proprio fundo navy opaco (#253264, ja o tom canonico da logo). Antes desta
       regra o container herdava --bg-surface (branco no light / quase-preto #080C21 no dark),
       criando um "quadro" visivel ao redor da logo. Equalizando o fundo do container para o
       MESMO navy da propria arte (--brand-bg-logo-dark, ja definido em tokens.css p/ #617/#631),
       a logo funde com o fundo em qualquer tema. */
    background:var(--brand-bg-logo-dark);
}
.sn-sidebar-logo .sn-sidebar-brand-name { color:var(--white); }
.sn-sidebar-logo .sn-sidebar-brand-sub  { color:var(--seg-green); }
.sn-sidebar-brand-name { font-size:var(--fs-body-4); font-weight:var(--fw-semibold); color:var(--fg-strong); display:block; line-height:1.2; }
.sn-sidebar-brand-sub  { font-size:0.5625rem; color:var(--fg-secondary); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:0.125rem; }

.sn-nav { flex:1; padding:0 var(--s-3); overflow-y:auto; }
.sn-nav-section { font-size:0.625rem; color:var(--fg-secondary); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; padding:var(--s-3) var(--s-3) var(--s-1); }
.sn-nav-item {
    display:flex; align-items:center; gap:var(--s-3);
    padding:var(--s-2) var(--s-3);
    border-radius:var(--radius-xs);
    font-size:var(--fs-ui); color:var(--fg-default);
    text-decoration:none;
    margin-bottom:0.125rem;
}
.sn-nav-item:hover { background:var(--action-bg-soft); color:var(--fg-strong); }
.sn-nav-item.active { background:var(--seg-green); color:var(--seg-blue); font-weight:var(--fw-medium); }

/* ───── Main ───── */
.sn-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.sn-header {
    background:var(--bg-surface);
    border-bottom:0.0625rem solid var(--border-soft);
    padding:var(--s-3) var(--s-5);
    display:flex; align-items:center; justify-content:space-between;
    min-height:var(--s-10);
}
.sn-header-title { font-size:var(--fs-body-3); font-weight:var(--fw-semibold); color:var(--fg-strong); margin:0; }
.sn-header-actions { display:flex; align-items:center; gap:var(--s-3); }
.sn-icon-btn, .sn-burger, .sn-logout {
    background:transparent; border:none; cursor:pointer;
    color:var(--fg-secondary);
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--radius-xs);
    padding:var(--s-2);
}
.sn-icon-btn:hover { background:var(--bg-muted); color:var(--fg-strong); }
.sn-user-pill {
    display:flex; align-items:center; gap:var(--s-2);
    padding:var(--s-1) var(--s-4) var(--s-1) var(--s-1);
    background:var(--bg-muted);
    border-radius:var(--radius-pill);
    font-size:var(--fs-caption); color:var(--fg-default);
}
.sn-avatar { width:1.75rem; height:1.75rem; border-radius:50%; background:var(--seg-green); color:var(--seg-blue); font-size:var(--fs-micro); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; }

.sn-content { flex:1; overflow-y:auto; padding:var(--s-5); }

/* ───── Bottom nav (mobile only) ───── */
.sn-bottomnav {
    display:flex; justify-content:space-around;
    background:var(--bg-surface);
    border-top:0.0625rem solid var(--border-soft);
    padding:var(--s-2) 0;
    padding-bottom:calc(var(--s-2) + env(safe-area-inset-bottom, 0rem));
}
.sn-bn-item {
    display:flex; flex-direction:column; align-items:center; gap:0.125rem;
    padding:var(--s-1) var(--s-2);
    font-size:0.625rem; color:var(--fg-secondary);
    text-decoration:none;
}
.sn-bn-item.active { color:var(--fg-strong); }

.sn-burger { display:inline-flex; }

/* ───── Tablet (sidebar compacta 10rem com labels) ───── */
@media (min-width:48rem) {
    .sn-layout { flex-direction:row; }
    /* #452: overflow-x hidden so content doesn't spill, overflow-y auto so nav scrolls */
    .sn-sidebar { display:flex; width:10rem; position:sticky; top:0; height:100vh; overflow-x:hidden; overflow-y:auto; }
    .sn-sidebar-brand, .sn-nav-section { display:block; }
    /* #506: padding-top added so logo is not clipped at top edge on tablet */
    /* D-TELA-9: left-padding ensures logo first char is not clipped by overflow-x:hidden */
    .sn-sidebar-logo { justify-content:flex-start; padding:var(--s-3) var(--s-3) var(--s-5); padding-left:var(--s-4); overflow:hidden; }
    .sn-sidebar-logo img { flex-shrink:0; height:1.5rem; width:auto; max-width:calc(100% - 0.5rem); }
    .sn-nav-item { justify-content:flex-start; padding:var(--s-2) var(--s-3); }
    .sn-bottomnav, .sn-burger { display:none; }
}
/* Sobrescreve D2.9 do theme (tooltip !important) → labels inline visíveis */
@media (min-width:48rem) and (max-width: 63.9375rem) {
    .sn-nav-label {
        position:static !important; transform:none !important;
        background:transparent !important; color:inherit !important;
        padding:0 !important; border-radius:0 !important;
        font-size:var(--fs-ui) !important; white-space:nowrap !important;
        margin-left:0 !important; opacity:1 !important;
        z-index:auto !important; pointer-events:auto !important;
        word-break:normal !important; line-height:var(--lh-compact) !important;
        overflow:hidden !important; text-overflow:ellipsis !important;
        max-width:var(--nav-label-max-w, 6.25rem) !important;
    }
    .sn-nav-section { display:block !important; }
}

/* ───── Desktop (sidebar expandida 13.75rem) ───── */
@media (min-width:64rem) {
    .sn-sidebar { width:13.75rem; }
    .sn-sidebar-brand, .sn-nav-label, .sn-nav-section { display:block; }
    /* D-TELA-9: reset tablet constraints; logo shows at full size */
    .sn-sidebar-logo { justify-content:flex-start; padding:0 var(--s-5) var(--s-5); overflow:hidden; }
    .sn-sidebar-logo img { flex-shrink:0; height:1.5rem; width:auto; max-width:100%; }
    .sn-nav-item { justify-content:flex-start; padding:var(--s-2) var(--s-3); }
    /* D2.5 — Allow long labels (e.g. "Fluxo de Consentimento") to wrap */
    .sn-nav-label { white-space:normal; word-break:break-word; line-height:var(--lh-compact); }
}

/* D1.5/D2.6 + D2.9 — movidos para theme.css (compartilhado Admin+Portal) */

/* ============ D2.8 — DOCS / Portal: remove stuck focus outline on header title ============ */
.sn-header-title { outline:none; }
.sn-header-title:focus-visible { outline:none; box-shadow:none; }
.sn-header-left h1 { outline:none; }

/* ============ #455 — DOCS: nav[tabindex="-1"] must not show focus ring ============ */
.sn-nav[tabindex="-1"]:focus { outline:none; }
.sn-nav[tabindex="-1"]:focus-visible { outline:none; box-shadow:none; }

/* ───── Legado (páginas que ainda usam classes Tailwind via client.css) ───── */
.code-block {
    background-color:var(--bg-muted);
    color:var(--fg-default);
    border-radius:var(--radius-sm);
    padding:var(--s-5);
    font-family:monospace;
    font-size:0.875rem;
    overflow-x:auto;
    position:relative;
}
.quota-bar { transition:width 0.3s ease; }

/* ============ Auth shell — hero+card pattern ============ */
.sn-auth-shell { display:flex; min-height:100vh; background:var(--bg-app); }
.sn-auth-hero { flex:1.2; background:var(--brand-bg-logo, var(--seg-blue)); position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; overflow:hidden; }
.sn-auth-hero-grad { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%,rgba(var(--seg-green-rgb),.15),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(var(--seg-green-rgb),.10),transparent 50%); pointer-events:none; }
.sn-auth-hero-content { position:relative; z-index:1; max-width:22.5rem; text-align:left; color:var(--fg-strong); display:flex; flex-direction:column; gap:var(--s-5); }
/* #785-dogfood: mesmo par --fg-strong/--fg-secondary já flipa por tema (tokens.css);
   estava hardcoded em var(--white) e ficava invisível no light (bg vira branco). */
.sn-auth-hero-title { font-size:var(--fs-h3); font-weight:700; margin:0; color:var(--fg-strong); }
.sn-auth-hero-sub { font-size:var(--fs-body-4); color:var(--fg-secondary); margin:0; line-height:1.5; }
.sn-auth-body { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s-8); position:relative; }
.sn-auth-theme-btn { position:absolute; top:var(--s-5); right:var(--s-5); }
.sn-auth-card { width:100%; max-width:26.25rem; background:var(--bg-surface); border-radius:var(--radius-card); box-shadow:var(--shadow-auth-card); padding:var(--s-9); }
@media (max-width:48rem) {
  .sn-auth-shell { flex-direction:column; }
  .sn-auth-hero { flex:none; min-height:12.5rem; padding:var(--s-7); }
  .sn-auth-body { padding:var(--s-5); }
  .sn-auth-card { padding:var(--s-7); box-shadow:none; max-width:100%; }
}

/* ============ Auth card content ============ */
.sn-auth-card-header { margin-bottom:var(--s-7); }
.sn-auth-card-title { font-size:var(--fs-h4); font-weight:700; color:var(--fg-strong); margin:0 0 0.375rem; }
.sn-auth-card-sub { font-size:var(--fs-ui); color:var(--fg-secondary); margin:0; }
.sn-auth-card-footer { margin-top:var(--s-6); text-align:center; }

/* ============ Form fields ============ */
.sn-form { display:flex; flex-direction:column; gap:var(--s-5); }
.sn-form-field { display:flex; flex-direction:column; gap:0.375rem; }
.sn-form-label { font-size:var(--fs-caption); font-weight:500; color:var(--fg-default); }
.sn-input { width:100%; padding:var(--s-3) var(--s-4); font-size:var(--fs-body-4); border:0.0625rem solid var(--border-strong); border-radius:var(--radius-xs); background:var(--bg-surface); color:var(--fg-strong); transition:border-color .15s,box-shadow .15s; box-sizing:border-box; }
.sn-input:focus { outline:none; border-color:var(--seg-blue); box-shadow:0 0 0 0.1875rem rgba(var(--seg-blue-rgb),.12); }

/* ============ Buttons ============ */
.sn-btn { display:inline-flex; align-items:center; justify-content:center; padding:var(--s-3) 1.125rem; font-size:var(--fs-body-4); font-weight:600; border:none; border-radius:0.625rem; cursor:pointer; transition:background .15s,transform .05s; text-decoration:none; }
.sn-btn:disabled { opacity:.5; cursor:not-allowed; }
.sn-btn-block { width:100%; }
.sn-btn-primary { background:var(--seg-blue); color:var(--white); }
.sn-btn-primary:hover { background:var(--seg-blue-110); }
.sn-btn-primary:active { transform:scale(.99); }
.sn-btn-ghost { background:transparent; border:0.0625rem solid var(--border-strong); color:var(--fg-default); }
.sn-btn-ghost:hover { background:var(--bg-muted); }
.sn-btn-ghost:disabled { opacity:.4; }

/* ============ Links ============ */
.sn-link { color:var(--fg-strong); font-size:var(--fs-ui); text-decoration:none; }
.sn-link:hover { text-decoration:underline; }

/* ============ Pages ============ */
.sn-page { padding:var(--s-7) 0; }
.sn-page-header { margin-bottom:var(--s-7); }
.sn-page-title { font-size:var(--fs-h4); font-weight:700; color:var(--fg-strong); margin:0 0 var(--s-1); }
.sn-page-sub { font-size:var(--fs-ui); color:var(--fg-secondary); margin:0; }

/* ============ Cards ============ */
.sn-card { background:var(--bg-surface); border:0.0625rem solid var(--border-soft); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:var(--s-6); }
.sn-card-table { padding:0; }
.sn-card-header { padding:var(--s-5) var(--s-6); border-bottom:0.0625rem solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.sn-card-title { font-size:0.9375rem; font-weight:600; color:var(--fg-strong); margin:0; }

/* ============ Grid + stat cards ============ */
.sn-grid { display:grid; gap:var(--s-5); }
.sn-grid-stats { grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); margin-bottom:var(--s-6); }
.sn-stat-card { background:var(--bg-surface); border:0.0625rem solid var(--border-soft); border-radius:var(--radius-sm); padding:var(--s-6); display:flex; flex-direction:column; gap:0.375rem; transition:box-shadow .15s,border-color .15s; }
.sn-stat-card:hover { box-shadow:0 0.25rem 0.75rem rgba(var(--seg-blue-rgb),.08); border-color:var(--border-strong); }
.sn-stat-card-link { cursor:pointer; transition:transform .15s,box-shadow .15s; text-decoration:none; color:inherit; display:block; }
.sn-stat-card-link:hover { transform:translateY(-0.125rem); box-shadow:0 0.25rem 0.75rem rgba(var(--seg-blue-rgb),.12); }
.sn-stat-label { font-size:var(--fs-micro); color:var(--fg-secondary); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.sn-stat-value { font-size:var(--fs-h3); font-weight:700; color:var(--fg-strong); line-height:1; }

/* ============ Tables ============ */
.sn-table { width:100%; border-collapse:collapse; }
.sn-table thead { background:var(--bg-app); }
.sn-table th { text-align:left; padding:var(--s-4) var(--s-5); font-size:var(--fs-micro); font-weight:600; color:var(--fg-secondary); text-transform:uppercase; letter-spacing:.05em; border-bottom:0.0625rem solid var(--border-soft); }
.sn-table td { padding:0.875rem var(--s-5); font-size:var(--fs-ui); color:var(--fg-strong); border-bottom:0.0625rem solid var(--border-soft); }
.sn-table tbody tr:last-child td { border-bottom:none; }
.sn-table tbody tr:hover { background:var(--bg-app); }

/* ============ Table — responsive (G6/G7) ============ */
/* sn-card-table scrolls on tablet; cards on mobile */
.sn-card-table { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sn-card-table .sn-table { min-width:33.75rem; }
@media (max-width:37.5rem) {
    .sn-card-table .sn-table { min-width:unset; }
    .sn-card-table { overflow-x:visible; }
    .sn-card-table .sn-table thead { display:none; }
    .sn-card-table .sn-table tbody tr {
        display:block;
        border:0.0625rem solid var(--border-soft);
        border-radius:var(--radius-xs);
        margin-bottom:var(--s-3);
        padding:var(--s-1) 0;
        background:var(--bg-surface);
    }
    .sn-card-table .sn-table tbody tr:hover { background:var(--bg-app); }
    .sn-card-table .sn-table td {
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:var(--s-2);
        padding:var(--s-2) 0.875rem;
        border-bottom:0.0625rem solid var(--border-soft);
        font-size:var(--fs-caption);
        max-width:100%;
        box-sizing:border-box;
    }
    .sn-card-table .sn-table tbody tr td:last-child { border-bottom:none; }
    .sn-card-table .sn-table td[data-label]::before {
        content:attr(data-label);
        font-size:0.625rem;
        font-weight:600;
        color:var(--fg-secondary);
        text-transform:uppercase;
        letter-spacing:.04em;
        white-space:nowrap;
        flex-shrink:0;
        padding-top:0.125rem;
    }
}

/* ============ Badges ============ */
.sn-badge { display:inline-flex; align-items:center; padding:0.125rem var(--s-3); border-radius:var(--radius-pill); font-size:var(--fs-micro); font-weight:600; }
.sn-badge-success { background:var(--success-bg); color:var(--success-dark); }
.sn-badge-warning { background:var(--alert-light); color:var(--alert); }
.sn-badge-danger  { background:var(--error-bg); color:var(--error-dark); }
.sn-badge-error   { background:var(--error-bg); color:var(--error-dark); }
.sn-badge-info    { background:var(--info-bg); color:var(--info-dark); }
.sn-badge-neutral { background:var(--bg-muted); color:var(--fg-secondary); }

/* ============ Alerts ============ */
.sn-alert { padding:var(--s-4) var(--s-5); border-radius:var(--radius-xs); font-size:var(--fs-ui); margin-bottom:var(--s-5); }
.sn-alert-error   { background:var(--error-bg); color:var(--error-dark); }
.sn-alert-warning { background:var(--alert-light); color:var(--alert); }
.sn-alert-success { background:var(--success-bg); color:var(--success-dark); }
.sn-alert-info    { background:var(--bg-muted); color:var(--fg-default); }

/* ============ Empty state ============ */
.sn-empty { padding:3rem var(--s-7); text-align:center; color:var(--fg-muted); font-size:var(--fs-body-4); }

/* ============ Header left ============ */
.sn-header-left { display:flex; align-items:center; gap:var(--s-3); flex:1; }

/* ============ Tabs ============ */
.sn-tabs { display:flex; border-bottom:0.0625rem solid var(--border-soft); margin-bottom:var(--s-6); }
.sn-tab { padding:var(--s-2) var(--s-5); font-size:var(--fs-ui); font-weight:600; border:none; background:transparent; cursor:pointer; border-bottom:0.125rem solid transparent; color:var(--fg-secondary); transition:color .15s,border-color .15s; margin-bottom:-0.0625rem; }
.sn-tab:hover:not(.sn-tab-active) { color:var(--fg-default); }
.sn-tab-active { border-bottom-color:var(--brand-droplet-green); color:var(--fg-strong); }

/* ============ Auth shell toolbar (ThemeToggle em login pages) ============ */
.sn-auth-shell { position:relative; }
.sn-auth-toolbar { position:absolute; top:var(--s-5); right:var(--s-5); z-index:10; }

/* ============ #617/WLT.A.01-FIX — Logo on auth hero (Portal login) ============ */
/* sn-auth-hero background agora é --brand-bg-logo (branco no light, navy no
   dark — WLT.A.01). O invert só deve valer no tema dark (fundo escuro); em
   light o fundo é branco e um logo forçado a branco ficaria invisível. */
:root[data-theme="dark"] .sn-auth-hero .sn-auth-hero-content img { filter:brightness(0) invert(1); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sn-auth-hero .sn-auth-hero-content img { filter:brightness(0) invert(1); }
}

/* ============ #618-FIX-T — UsageHistory table responsiva ============ */
/* Mobile (≤29.9375rem): card layout with data-label */
@media (max-width:29.9375rem) {
    .usage-history-table { width:100%; }
    .usage-history-table thead { display:none; }
    .usage-history-table tbody tr {
        display:flex;
        flex-direction:column;
        border:0.0625rem solid var(--border-light);
        border-radius:var(--radius-xs);
        margin-bottom:var(--s-3);
        padding:var(--s-1) 0;
        background:var(--bg-surface);
    }
    .usage-history-table td {
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:var(--s-2);
        padding:var(--s-2) 0.875rem;
        border-bottom:0.0625rem solid var(--border-light);
        font-size:var(--fs-caption);
    }
    .usage-history-table tbody tr td:last-child { border-bottom:none; }
    .usage-history-table td[data-label]::before {
        content:attr(data-label);
        font-size:0.625rem;
        font-weight:600;
        color:var(--fg-secondary);
        text-transform:uppercase;
        letter-spacing:.04em;
        white-space:nowrap;
        flex-shrink:0;
        padding-top:0.125rem;
    }
}
/* Tablet (480–63.9375rem): allow scroll container */
@media (min-width:30rem) and (max-width: 63.9375rem) {
    .usage-history-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .usage-history-table { min-width:26.25rem; }
}

/* ============ #457 — API Keys header: prevent button overlapping subtitle on mobile ============ */
.apikeys-page-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--s-4);
    margin-bottom:var(--s-6);
    flex-wrap:wrap;
}
@media (max-width:37.5rem) {
    .apikeys-page-header { flex-direction:column; gap:var(--s-3); }
    .apikeys-page-header button { align-self:flex-start; }
}