/* Painel — estilos do layout (antes inline em layouts/app.blade.php).
   Tokens dinâmicos (cores do CMS) são definidos em :root no layout. */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --c-bg: #0d0f12;
    --c-sidebar: #0a0c0e;
    --c-card: #14171b;
    --c-card-2: #1a1e23;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-text: #e8eaed;
    --c-muted: #9aa3ad;
    --c-faint: #8a949f;
    --c-primary: #ff6a2b;
    --c-primary-rgb: 255 106 43;
    --c-accent: #ff6a2b;
    --c-on-primary: #1a0802;
    --c-btn: linear-gradient(90deg, #e23d08 0%, #f9642a 100%);
    --c-btn-text: #ffffff;
    --c-ok: #3ddc97;
    --c-warn: #f2c94c;
    --c-danger: #ff5d73;
    --c-info: #7cb8ff;
    --radius: 10px;
    --ring: 0 0 0 3px rgba(255, 106, 43, 0.35);
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
:root[data-theme="light"] {
    color-scheme: light;
    --c-bg: #f3f4f6;
    --c-sidebar: #ffffff;
    --c-card: #ffffff;
    --c-card-2: #f7f8fa;
    --c-border: rgba(15, 23, 32, 0.10);
    --c-text: #14171b;
    --c-muted: #4b5563;
    --c-faint: #6b7280;
    --c-primary: #c2410c;
    --c-primary-rgb: 194 65 12;
    --c-accent: #c2410c;
    --c-on-primary: #ffffff;
    --c-btn: linear-gradient(90deg, #b93a09 0%, #d4501a 100%);
    --c-btn-text: #ffffff;
    --c-ok: #0f7a4d;
    --c-warn: #8a6d00;
    --c-danger: #be123c;
    --c-info: #1d5fb8;
    --ring: 0 0 0 3px rgba(194, 65, 12, 0.30);
}
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    background-color: var(--c-bg);
    color: var(--c-text);
}
.kayros-page-wrap {
    min-height: 100vh;
    background-color: var(--c-bg);
}
.kayros-page-wrap::before {
    content: '';
    pointer-events: none;
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 45% at 100% -10%, rgba(0, 85, 212, 0.08), transparent 55%),
        radial-gradient(ellipse 50% 35% at 0% 100%, rgba(0, 45, 115, 0.06), transparent 50%);
    z-index: 0;
}
.sidebar-nav-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 40px;
    margin-bottom: 2px;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border-left: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-link .nav-icon { color: #64748b; transition: color 0.15s ease; }
.nav-link .nav-label { min-width: 0; flex: 1; line-height: 1.25; }
.nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #f1f5f9; }
.nav-link:hover .nav-icon { color: #e2e8f0; }
.nav-link:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-link-active {
    background: linear-gradient(90deg, rgba(51, 119, 221, 0.20), rgba(51, 119, 221, 0.03) 70%, transparent);
    border-left-color: var(--c-accent);
    color: #fff;
}
.nav-link-active .nav-icon { color: var(--c-accent); }
.nav-section {
    margin: 1.1rem 0.75rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #475569;
}
.nav-badge {
    flex-shrink: 0;
    border-radius: 0.25rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.15);
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #bfdbfe;
}
/* Ícones SVG soltos nas telas: tamanho/traço padrão quando só vem a classe .icon */
svg.icon { stroke-width: 1.75; }

/* Mobile: o menu cobre a tela. A página não fica espremida ao lado. */
@media (max-width: 768px) {
    .kayros-page-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    .sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        height: 100vh;
        height: 100dvh;
        width: min(100vw, 22rem) !important;
        max-width: 100vw !important;
        z-index: 1000 !important;
        transition: left 0.3s ease-in-out;
        overflow: hidden;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .sidebar.active {
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed !important;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.55);
        z-index: 999 !important;
    }
    
    .sidebar-overlay.active {
        display: block !important;
    }
    body.sidebar-open {
        overflow: hidden;
    }
    
    .mobile-header {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    
    .hamburger-btn span {
        width: 24px;
        height: 2px;
        background-color: white;
        transition: all 0.3s linear;
        border-radius: 2px;
    }
    
    .content-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .top-bar {
        padding: 1rem !important;
    }
    
    .content-padding {
        padding: 1rem !important;
    }
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Top bar: não forçar 100% de largura em botões/link da barra superior */
    .top-bar.flex > .mobile-header button,
    .top-bar.flex > .mobile-header a,
    .top-bar .top-bar-actions button,
    .top-bar .top-bar-actions form,
    .top-bar .top-bar-actions a {
        width: auto !important;
        max-width: none;
        margin-bottom: 0 !important;
    }
    .top-bar .top-bar-actions {
        flex-shrink: 0;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }
}

@media (min-width: 769px) {
    .hamburger-btn {
        display: none;
    }
    /* A tabela usa a largura da coluna, sem barra lateral dentro do card. */
    .overflow-x-auto > table,
    .card.overflow-x-auto > table {
        width: 100%;
        table-layout: fixed;
    }
    .overflow-x-auto > table th,
    .overflow-x-auto > table td,
    .card.overflow-x-auto > table th,
    .card.overflow-x-auto > table td {
        overflow-wrap: anywhere;
        white-space: normal !important;
    }
    .card.overflow-x-auto {
        overflow-x: hidden;
    }
}
nav[aria-label="Pagination Navigation"] {
    max-width: 100%;
    min-width: 0;
}
nav[aria-label="Pagination Navigation"] > div {
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.75rem;
}
nav[aria-label="Pagination Navigation"] .inline-flex {
    flex-wrap: wrap;
    max-width: 100%;
}
nav[aria-label="Pagination Navigation"] a,
nav[aria-label="Pagination Navigation"] span.relative {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
nav[aria-label="Pagination Navigation"] p {
    color: #94a3b8 !important;
}

/* Tabs Responsivas */
@media (max-width: 768px) {
    .border-b .flex {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .tab-button {
        white-space: nowrap;
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        margin-right: 0.5rem !important;
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Inputs responsivos */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea,
    .input-field {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    /* Color pickers */
    input[type="color"] {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Botão principal do formulário ocupa a linha. Ícone, menu e barra de cima não. */
    .btn-primary {
        min-height: 44px !important;
        font-size: 1rem !important;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .top-bar h1 {
        font-size: 1rem !important;
        line-height: 1.25rem !important;
    }
    .dev-act,
    .remove-backup,
    #addBackup,
    .hamburger-btn,
    .nav-link,
    .top-bar button,
    .user-actions-trigger,
    .partner-ping {
        width: auto !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
    }
    .dev-act,
    .user-actions-trigger {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-height: 2.75rem !important;
    }
    .hamburger-btn {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center;
    }
    .menu-row {
        min-height: 44px !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
    form .flex.gap-2 > .btn-primary,
    form .flex.gap-2 > a {
        width: auto !important;
        flex: 1 1 0;
        margin-bottom: 0 !important;
    }
    .top-bar .user-info > span.tabular-nums {
        display: inline !important;
    }
    .table-card-mobile td[colspan] {
        display: block;
        text-align: center;
    }
    .table-card-mobile td[colspan]::before {
        content: none;
    }
    .table-card-mobile td {
        align-items: flex-start;
        gap: 0.75rem;
        overflow-wrap: anywhere;
    }
    .table-card-mobile td::before {
        flex-shrink: 0;
        color: #94a3b8;
    }

    .backup-row {
        flex-direction: row !important;
        align-items: center !important;
    }
    .backup-row > * {
        width: auto !important;
        margin-bottom: 0 !important;
    }
    .backup-row input {
        width: 100% !important;
        flex: 1 1 auto;
    }
    
    /* Range sliders */
    input[type="range"] {
        min-height: 44px !important;
    }
    
    /* Grid de cores */
    .gap-6 {
        gap: 1rem !important;
    }
    
    /* Espaçamento dos cards */
    .space-y-6 > * {
        margin-top: 1rem !important;
    }
    
    /* Servidor API entries */
    .server-entry {
        padding: 0.75rem !important;
    }
    
    .server-entry .grid {
        gap: 0.75rem !important;
    }
    
    /* Labels */
    label {
        font-size: 0.875rem !important;
    }
    
    /* Toggle switches - aumentar área de toque */
    .toggle-switch {
        width: 60px !important;
        height: 34px !important;
    }
    
    .toggle-slider:before {
        height: 26px !important;
        width: 26px !important;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(26px) !important;
    }
}
.btn-primary {
    background: var(--c-btn);
    color: var(--c-btn-text);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 85, 212, 0.3);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 28px rgba(0, 85, 212, 0.4);
}
.sidebar {
    background-color: var(--c-sidebar);
    border-right: 1px solid var(--c-border);
    box-shadow: none;
}
.card {
    background-color: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.tab-active {
    color: var(--c-primary);
    border-bottom: 2px solid var(--c-primary);
}
.input-field {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 85, 212, 0.45);
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .3s;
    border-radius: 34px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background: var(--c-btn);
}
input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* ---------- Polimento global (aplica a todas as telas) ---------- */
.content-padding { max-width: 1480px; margin-inline: auto; width: 100%; }
.card { transition: border-color 0.15s ease; }

table { border-collapse: collapse; }
table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}
table tbody tr { transition: background 0.12s ease; }

.btn-primary { border-radius: 0.5rem; cursor: pointer; }
.btn-primary:focus-visible,
.input-field:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.input-field::placeholder { color: #64748b; }
select.input-field { color-scheme: dark; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* <details> como seção recolhível, sem o triângulo padrão */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* =====================================================================
   Identidade v2 — KAYROS: grafite, laranja-fogo da marca, Plex.
   Camada final: sobrepõe os utilitários Tailwind usados nas telas.
   ===================================================================== */
body { font-family: var(--font-sans); font-feature-settings: "tnum" 1, "cv11" 1; }
code, kbd, samp, .font-mono { font-family: var(--font-mono); }

/* Fundo: sem brilho decorativo */
.kayros-page-wrap::before { display: none; }

/* Superfícies: 1 borda, sem anel nem sombra pesada */
.card {
    background-color: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: none;
}
.sidebar { background-color: var(--c-sidebar); border-right: 1px solid var(--c-border); }

/* Botões */
.btn-primary {
    background: var(--c-btn);
    color: var(--c-btn-text);
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 600;
    border-radius: 8px;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: none; }
.btn-primary:active { transform: translateY(1px); }

/* Campos */
.input-field {
    background-color: var(--c-card-2);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: 8px;
}
.input-field:focus { border-color: var(--c-primary); box-shadow: var(--ring); }
select.input-field { color-scheme: inherit; }
:root[data-theme="dark"] { --ring: 0 0 0 3px rgba(255, 106, 43, 0.32); }

/* Navegação */
.nav-link { color: var(--c-muted); }
.nav-link .nav-icon { color: var(--c-faint); }
.nav-link:hover { background: rgba(127, 140, 150, 0.12); color: var(--c-text); }
.nav-link:hover .nav-icon { color: var(--c-text); }
.nav-link-active {
    background: rgba(var(--c-primary-rgb) / 0.12);
    border-left-color: var(--c-primary);
    color: var(--c-text);
}
.nav-link-active .nav-icon { color: var(--c-primary); }
.nav-section { color: var(--c-faint); }
.nav-badge { border-color: rgba(var(--c-primary-rgb) / 0.4); background: rgba(var(--c-primary-rgb) / 0.14); color: var(--c-primary); }

/* Selo (x-badge) */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.badge-ok { color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 14%, transparent); }
.badge-warn { color: var(--c-warn); background: color-mix(in srgb, var(--c-warn) 15%, transparent); }
.badge-danger { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 14%, transparent); }
.badge-info { color: var(--c-info); background: color-mix(in srgb, var(--c-info) 14%, transparent); }
.badge-neutral { color: var(--c-muted); background: rgba(127, 140, 150, 0.16); }
.badge-plain::before { display: none; }

/* Dashboard */
.kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.15rem; }
.kpi-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.kpi-value { font-size: 1.85rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--c-text); }
.attn-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem; border-top: 1px solid var(--c-border); transition: background 0.12s; }
.attn-row:first-child { border-top: 0; }
.attn-row:hover { background: rgba(127, 140, 150, 0.08); }
.page-lede { color: var(--c-muted); font-size: 0.9rem; }

/* Tema: botão e chip de saldo */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid var(--c-border); color: var(--c-muted); background: transparent; cursor: pointer;
}
.icon-btn:hover { color: var(--c-text); background: rgba(127, 140, 150, 0.12); }
.balance-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-card-2);
    font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text);
}

/* Tabela: cabeçalho legível e linha com respiro */
table thead th { color: var(--c-muted); font-weight: 600; }
table tbody tr:hover { background: rgba(127, 140, 150, 0.07); }

/* ---------- Tema claro: remapeia os utilitários Tailwind escritos para fundo escuro ---------- */
[data-theme="light"] body { background-color: var(--c-bg); color: var(--c-text); }
[data-theme="light"] .text-white { color: #14171b; }
[data-theme="light"] .btn-primary.text-white, [data-theme="light"] .bg-primary.text-white { color: #fff; }
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 { color: #14171b; }
[data-theme="light"] .text-slate-300 { color: #2b333b; }
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 { color: #4b5563; }
[data-theme="light"] .text-slate-500 { color: #5b6573; }
[data-theme="light"] .text-slate-600,
[data-theme="light"] .text-gray-600 { color: #6b7280; }
[data-theme="light"] .text-blue-100, [data-theme="light"] .text-blue-200, [data-theme="light"] .text-blue-300 { color: #1d5fb8; }
[data-theme="light"] .text-red-100, [data-theme="light"] .text-red-200, [data-theme="light"] .text-red-300,
[data-theme="light"] .text-red-400, [data-theme="light"] .text-red-500 { color: #c0262d; }
[data-theme="light"] .text-emerald-100, [data-theme="light"] .text-emerald-300, [data-theme="light"] .text-emerald-400 { color: #0f7a4d; }
[data-theme="light"] .text-amber-100, [data-theme="light"] .text-amber-200, [data-theme="light"] .text-amber-300 { color: #9a5b00; }
[data-theme="light"] .text-violet-200 { color: #5b3fb8; }
[data-theme="light"] .text-cyan-200, [data-theme="light"] .text-cyan-400, [data-theme="light"] .text-sky-400 { color: #0b6d8a; }
[data-theme="light"] .border-white\/5, [data-theme="light"] .border-white\/10, [data-theme="light"] .border-white\/15, [data-theme="light"] .border-white\/20,
[data-theme="light"] .divide-white\/5 > :not([hidden]) ~ :not([hidden]),
[data-theme="light"] .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border); }
[data-theme="light"] .bg-white\/5, [data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/\[0\.02\], [data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(15, 23, 32, 0.045); }
[data-theme="light"] .hover\:bg-white\/5:hover, [data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 32, 0.07); }
[data-theme="light"] .bg-black\/20, [data-theme="light"] .bg-black\/30 { background-color: rgba(15, 23, 32, 0.05); }
[data-theme="light"] .placeholder-slate-600::placeholder, [data-theme="light"] .input-field::placeholder { color: #8a93a0; }
[data-theme="light"] dialog { background: #fff !important; color: #14171b; }
[data-theme="light"] .top-bar { background-color: rgba(255, 255, 255, 0.9) !important; }
[data-theme="light"] .sidebar .text-white { color: #14171b; }


/* Avisos */
.flash { border: 1px solid var(--c-border); }
.flash-ok { background: rgba(var(--c-primary-rgb) / 0.10); border-color: rgba(var(--c-primary-rgb) / 0.35); color: var(--c-text); }
.flash-err { background: color-mix(in srgb, var(--c-danger) 10%, transparent); border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); color: var(--c-text); }

/* Azuis herdados dos utilitários antigos viram "info"/acento, nos dois temas */
html .text-blue-100, html .text-blue-200, html .text-blue-300, html .text-blue-500, html .text-blue-200\/85 { color: var(--c-info); }
html .bg-blue-500\/10, html .bg-blue-500\/15, html .bg-blue-500\/20 { background-color: color-mix(in srgb, var(--c-info) 15%, transparent); }
html .border-blue-400, html .border-blue-500\/30, html .border-blue-500\/35, html .border-blue-500\/40 { border-color: color-mix(in srgb, var(--c-info) 40%, transparent); }
html .bg-blue-500 { background-color: var(--c-primary); }
html .ring-blue-500\/20, html .ring-blue-500\/25, html .ring-blue-500\/40 { --tw-ring-color: rgba(var(--c-primary-rgb) / 0.3); }
html .hover\:text-blue-300:hover { color: var(--c-text); }

/* Contraste no escuro: os cinzas antigos (slate-500/600) ficavam abaixo de 4,5:1 sobre o card */
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-gray-600 { color: var(--c-faint); }
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-gray-400 { color: var(--c-muted); }

/* Botões secundário e de perigo */
.btn-ghost { border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text); background: transparent; font-weight: 500; cursor: pointer; }
.btn-ghost:hover { background: rgba(127, 140, 150, 0.12); }
.btn-primary.btn-danger { background: var(--c-danger); color: #fff; }

/* Diálogo de confirmação */
.confirm-dialog {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.5rem; border-radius: 14px;
    border: 1px solid var(--c-border); background: var(--c-card); color: var(--c-text);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
.confirm-dialog[open] { animation: dlg-in 0.16s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Toast de sucesso */
.toast {
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 1100;
    display: flex; align-items: center; gap: 0.75rem;
    width: min(24rem, calc(100vw - 2rem)); padding: 0.75rem 0.85rem;
    border-radius: 12px; border: 1px solid rgba(var(--c-primary-rgb) / 0.35);
    background: var(--c-card); color: var(--c-text); font-size: 0.875rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.25s, transform 0.25s;
}
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-icon { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: rgba(var(--c-primary-rgb) / 0.18); color: var(--c-primary); }
.toast-close { display: inline-flex; padding: 0.35rem; border-radius: 6px; color: var(--c-muted); background: transparent; border: 0; cursor: pointer; }
.toast-close:hover { color: var(--c-text); background: rgba(127, 140, 150, 0.12); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Parceiros: uma linha rica por servidor */
.partner-list-head { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) 6rem; gap: 1.25rem; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.partner-row { display: grid; gap: 0.85rem; border-top: 1px solid var(--c-border); align-items: center; }
.partner-row:first-of-type { border-top: 0; }
.partner-row:hover { background: rgba(127, 140, 150, 0.05); }
@media (min-width: 1024px) {
    .partner-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) 6rem; gap: 1.25rem; }
}
.usage-bar { margin-top: 0.4rem; height: 6px; border-radius: 999px; background: rgba(127, 140, 150, 0.18); overflow: hidden; }
.usage-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); }
.usage-bar.is-high > span { background: var(--c-warn); }
.usage-bar.is-full > span { background: var(--c-danger); }
.partner-ping { justify-content: flex-start; min-width: 0; }
.partner-ping-meta { display: none; }

/* Marca: a logo é prata/laranja sobre preto — o bloco da marca fica escuro nos dois temas */
.brand-block { background: #08090b; }
.brand-block .brand-sub { color: #8a949f; }

/* Botão Limpar cache: estados */
#clearCacheBtn.is-busy .icon { animation: spin 0.8s linear infinite; }
#clearCacheBtn.is-done { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
#clearCacheBtn.is-error { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Monitoramento */
.mon-row { display: grid; gap: 0.9rem; border-top: 1px solid var(--c-border); align-items: center; }
.mon-row:first-child { border-top: 0; }
@media (min-width: 1100px) { .mon-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.5fr); gap: 1.5rem; } .mon-more { grid-column: 1 / -1; } }
.mon-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.mon-num { display: block; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text); }
.mon-cap { display: block; font-size: 0.68rem; color: var(--c-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.mon-strip { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 1px; height: 26px; }
.mon-strip > i, .mon-key, .mon-dot { display: block; border-radius: 2px; background: rgba(127, 140, 150, 0.22); }
.mon-key { width: 10px; height: 10px; }
.mon-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
[data-s="up"] { background: var(--c-ok) !important; opacity: 0.85; }
[data-s="partial"] { background: var(--c-warn) !important; }
[data-s="down"] { background: var(--c-danger) !important; }