/* =====================================================
   OPLIUM REFRESH v3 — Brand polish layer
   Aplica os tokens do design system às classes legacy
   ===================================================== */

/* Page header padronizado */
.page-header { text-align: left !important; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.page-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-hi) !important;
    letter-spacing: -.3px;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 6px !important;
}
.page-title::before {
    content: ''; display: inline-block;
    width: 4px; height: 22px;
    background: var(--grad-green);
    border-radius: 2px;
}
.page-subtitle { color: var(--text-low) !important; font-size: 13px !important; }

/* Stat cards — visual upgrade (covers both .stat-value and .stat-card-value patterns) */
.stat-card {
    background: var(--grad-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
    position: relative;
    overflow: hidden;
    transition: transform .2s, border-color .2s;
}
.stat-card::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 2px; background: var(--op-green);
    opacity: .7;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-mid) !important; }
.stat-card.danger::before  { background: var(--sev-critical); }
.stat-card.warning::before { background: var(--sev-medium); }
.stat-card.success::before { background: var(--op-green); }
.stat-card.primary::before { background: var(--op-green); }
.stat-card.purple::before  { background: var(--op-blue-soft); }
.stat-card.info::before    { background: var(--op-blue); }

.stat-value,
.stat-card-value {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-weight: 800 !important;
    color: var(--text-hi) !important;
    letter-spacing: -.4px;
}

/* Force monochromatic numbers — semantic color via accent bar, not via giant tinted digit */
.stat-card .stat-card-value[style*="color"],
.stat-card .stat-value[style*="color"] {
    /* Inline color overrides will fight, but most cases the bare class wins */
}

/* Reduce icon prominence — neutral container, semantic stroke color */
.stat-card-header { margin-bottom: 8px !important; }
.stat-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--border-soft);
}
.stat-icon-wrapper svg { width: 14px !important; height: 14px !important; opacity: .7; }

.stat-card-label,
.stat-label {
    font-size: 10.5px !important;
    color: var(--text-low) !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}

/* Panels */
.panel {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-md) !important;
}
.panel-title {
    color: var(--text-hi) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 13px !important;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px !important;
}
.panel-title::before {
    content: '';
    width: 3px; height: 14px;
    background: var(--op-green);
    border-radius: 2px;
}

/* Form inputs */
.filter-input,
input[type="text"]:not([class*="ct-"]):not([class*="sk-"]),
input[type="search"],
input[type="email"],
input[type="number"],
select:not(.select-v3):not([class*="ct-"]),
textarea {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-hi) !important;
    transition: border-color .15s, background .15s;
}
.filter-input:focus,
input[type="text"]:not([class*="ct-"]):focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:not(.select-v3):focus,
textarea:focus {
    outline: none !important;
    border-color: var(--op-green) !important;
    background: var(--surface-3) !important;
}

/* Quick filter chips */
.quick-filter {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 999px !important;
    color: var(--text-low) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    transition: all .15s;
}
.quick-filter:hover { color: var(--text-hi) !important; background: var(--surface-3) !important; }
.quick-filter.active {
    background: var(--op-green) !important;
    color: #000 !important;
    border-color: var(--op-green) !important;
}
.quick-filter.cti-btn {
    background: rgba(94,169,255,.10) !important;
    border-color: rgba(94,169,255,.30) !important;
    color: var(--op-blue-soft) !important;
}

/* Generic buttons */
.btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-mid) !important;
    font-weight: 600 !important;
    transition: all .15s;
}
.btn:hover { color: var(--text-hi) !important; background: var(--surface-3) !important; border-color: var(--border-mid) !important; }
.btn-primary {
    background: var(--grad-green) !important;
    color: #000 !important;
    border-color: transparent !important;
    font-weight: 700 !important;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Badges — semantic CTI mapping */
.badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 9px !important;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 5px;
}
.badge-danger {
    background: var(--sev-critical-bg) !important;
    color: var(--sev-critical) !important;
    border-color: rgba(255,59,59,.25) !important;
}
.badge-success {
    background: var(--sev-low-bg) !important;
    color: var(--op-green) !important;
    border-color: rgba(0,184,17,.25) !important;
}
.badge-warning {
    background: var(--sev-medium-bg) !important;
    color: var(--sev-medium) !important;
    border-color: rgba(245,180,0,.25) !important;
}
.badge-muted {
    background: rgba(255,255,255,.04) !important;
    color: var(--text-low) !important;
    border-color: var(--border-soft) !important;
}
.badge-purple {
    background: rgba(94,169,255,.12) !important;
    color: var(--op-blue-soft) !important;
    border-color: rgba(94,169,255,.25) !important;
}
.badge-info {
    background: var(--sev-info-bg) !important;
    color: var(--sev-info) !important;
    border-color: rgba(94,169,255,.25) !important;
}

/* Tables */
table { border-collapse: separate !important; border-spacing: 0; }
th {
    color: var(--text-faint) !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    border-bottom: 1px solid var(--border-mid) !important;
    background: rgba(255,255,255,.015);
    position: sticky; top: 0; z-index: 1;
}
td { border-bottom: 1px solid var(--border-soft) !important; color: var(--text-mid) !important; font-size: 12.5px !important; }
tr:hover td { background: rgba(255,255,255,.025) !important; }
.ad-name { color: var(--text-hi) !important; font-weight: 600 !important; }
.ad-id { color: var(--text-faint) !important; font-feature-settings: 'tnum'; }
.ad-thumbnail {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs) !important;
}

/* Action buttons */
.action-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--text-low) !important;
    transition: all .15s;
}
.action-btn:hover {
    background: rgba(0,184,17,.10) !important;
    color: var(--op-green) !important;
    border-color: rgba(0,184,17,.25) !important;
    transform: translateY(-1px);
}
.action-btn.danger:hover {
    background: var(--sev-critical-bg) !important;
    color: var(--sev-critical) !important;
    border-color: rgba(255,59,59,.25) !important;
}
.action-btn.warning:hover {
    background: var(--sev-medium-bg) !important;
    color: var(--sev-medium) !important;
    border-color: rgba(245,180,0,.25) !important;
}
.action-btn.success:hover {
    background: var(--sev-low-bg) !important;
    color: var(--op-green) !important;
    border-color: rgba(0,184,17,.25) !important;
}

/* Risk score bar */
.risk-bar { background: rgba(255,255,255,.05) !important; border-radius: 999px !important; }
.risk-fill.low    { background: var(--op-green) !important; }
.risk-fill.medium { background: var(--sev-medium) !important; }
.risk-fill.high   { background: var(--sev-critical) !important; }

/* Progress bar */
.progress-bar { background: rgba(255,255,255,.05) !important; border-radius: 999px !important; }
.progress-fill {
    background: var(--grad-green) !important;
    border-radius: 999px !important;
}
.progress-spinner {
    border: 2px solid rgba(0,184,17,.2) !important;
    border-top-color: var(--op-green) !important;
}

/* Status log code-style */
.status-log {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm) !important;
    color: var(--text-mid);
    font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace !important;
}

/* Excluded items */
.excluded-item {
    background: var(--surface-2) !important;
    border-color: var(--border-soft) !important;
    border-radius: var(--radius-sm) !important;
}

/* Stats grid responsive */
.stats-grid { gap: 14px !important; }

/* Section dividers */
hr { border: none; border-top: 1px solid var(--border-soft); margin: 20px 0; }

/* Modal/dialog improvements (when present) */
.modal,
.dialog,
.popup {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card);
}
.modal-overlay,
.dialog-overlay,
.popup-overlay {
    background: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(4px);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }

/* Selection */
::selection { background: rgba(0,184,17,.30); color: var(--text-hi); }

/* =====================================================
   PASS #4 — força precedência de .sev (chip de severidade)
   alguns projetos têm spans dentro de .threat-row que ganham
   por especificidade — garantimos pill consistente.
   ===================================================== */
.sev,
.threat-row .body-top .sev,
.threat-row .sev {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.sev::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    box-shadow: 0 0 8px currentColor !important;
    display: inline-block !important;
}
.sev-critical { color: var(--sev-critical) !important; background: var(--sev-critical-bg) !important; border-color: rgba(255,59,59,.25) !important; }
.sev-high     { color: var(--sev-high)     !important; background: var(--sev-high-bg)     !important; border-color: rgba(255,120,73,.25) !important; }
.sev-medium   { color: var(--sev-medium)   !important; background: var(--sev-medium-bg)   !important; border-color: rgba(245,180,0,.25) !important; }
.sev-low      { color: var(--sev-low)      !important; background: var(--sev-low-bg)      !important; border-color: rgba(0,184,17,.25) !important; }
.sev-info     { color: var(--sev-info)     !important; background: var(--sev-info-bg)     !important; border-color: rgba(94,169,255,.25) !important; }

/* =====================================================
   PASS #2 — Unificação de filter pills + button systems
   ===================================================== */

/* Quick filter (threat_hunting) → look do pill-filter */
.quick-filter {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 999px !important;
    color: var(--text-low) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 6px 14px !important;
    transition: all .15s !important;
}
.quick-filter:hover {
    color: var(--text-hi) !important;
    background: var(--surface-3) !important;
}
.quick-filter.active {
    background: var(--op-green) !important;
    color: #000 !important;
    border-color: var(--op-green) !important;
}
.quick-filter.cti-btn {
    background: rgba(94,169,255,.10) !important;
    border-color: rgba(94,169,255,.30) !important;
    color: var(--op-blue-soft) !important;
}
.quick-filter.cti-btn:hover {
    background: rgba(94,169,255,.18) !important;
}
.quick-filters {
    background: var(--surface-1);
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    display: inline-flex;
    gap: 2px !important;
    flex-wrap: wrap;
}
.divider {
    background: var(--border-mid) !important;
    height: 18px !important;
    margin: 0 6px !important;
}

/* Filter pill (relatorios) → look do pill-filter */
.filter-pill {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: var(--text-low) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 6px 14px !important;
    transition: all .15s !important;
}
.filter-pill:hover {
    color: var(--text-hi) !important;
    background: var(--surface-3) !important;
}
.filter-pill.active {
    background: var(--op-green) !important;
    color: #000 !important;
    border-color: var(--op-green) !important;
}
.filter-pills {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 2px !important;
    display: inline-flex !important;
}

/* Botões secundários — unificar */
.btn-secondary {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-mid) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}
.btn-secondary:hover {
    color: var(--text-hi) !important;
    background: var(--surface-3) !important;
    border-color: var(--border-mid) !important;
}

/* Btn ghost / cancel */
.btn-ghost,
.btn-cancel {
    background: transparent !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-low) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}
.btn-ghost:hover,
.btn-cancel:hover {
    color: var(--text-hi) !important;
    background: var(--surface-2) !important;
    border-color: var(--border-mid) !important;
}

/* Btn danger */
.btn-danger {
    background: var(--sev-critical-bg) !important;
    border: 1px solid rgba(255,59,59,.30) !important;
    color: var(--sev-critical) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
}
.btn-danger:hover {
    background: rgba(255,59,59,.18) !important;
    border-color: rgba(255,59,59,.45) !important;
}

/* Btn-sm */
.btn-sm { padding: 5px 10px !important; font-size: 11px !important; }

/* Btn-primary roxo (em settings/users) → forçar verde Oplium */
.btn-primary {
    background: var(--grad-green) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    transition: all .15s !important;
}
.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Custom badges — unificar com .sev/.status-pill look */
.admin-badge {
    background: var(--sev-low-bg) !important;
    color: var(--op-green) !important;
    border: 1px solid rgba(0,184,17,.25);
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 9px !important;
}
.groot-badge {
    background: var(--sev-medium-bg) !important;
    color: var(--sev-medium) !important;
    border: 1px solid rgba(245,180,0,.25);
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
}
.groot-badge.warn {
    background: var(--sev-critical-bg) !important;
    color: var(--sev-critical) !important;
    border-color: rgba(255,59,59,.25) !important;
}
.media-badge {
    background: rgba(0,0,0,.85) !important;
    color: var(--text-hi) !important;
    border-radius: var(--radius-xs) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.mfa-badge,
.status-badge,
.version-badge,
.pending-badge,
.tm-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    padding: 3px 9px !important;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.04);
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* agg-badge é um info BOX (multi-linha), não um chip — estilo card */
.agg-badge {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(245,180,0,.30) !important;
    background: var(--sev-medium-bg) !important;
    padding: 12px 14px !important;
    color: var(--text-mid) !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    display: block;
    line-height: 1.5;
    margin-top: 10px;
    overflow: hidden;
}
.agg-badge .agg-count { color: var(--sev-medium) !important; font-weight: 800 !important; font-size: 13px !important; }
.agg-badge .agg-row { margin-top: 6px !important; color: var(--text-mid) !important; }
.agg-badge .agg-row strong { color: var(--text-low) !important; font-weight: 600 !important; margin-right: 6px !important; text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; }
.mfa-badge.disabled,
.status-badge.disconnected {
    background: var(--sev-critical-bg) !important;
    color: var(--sev-critical) !important;
    border-color: rgba(255,59,59,.25) !important;
}

/* =====================================================
   PASS #3 — text colors hardcoded → tokens
   Sobrescreve cores antigas globalmente
   ===================================================== */
[style*="color: #8892B0"],
[style*="color:#8892B0"] { color: var(--text-low) !important; }
[style*="color: #E4E6EB"],
[style*="color:#E4E6EB"] { color: var(--text-hi) !important; }
[style*="color: #F8F8F8"],
[style*="color:#F8F8F8"] { color: var(--text-hi) !important; }
[style*="color: #6B7280"],
[style*="color:#6B7280"] { color: var(--text-faint) !important; }

/* Inputs com #8892B0 placeholder → token */
::placeholder { color: var(--text-faint); }
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; opacity: 1; }

/* Status-dot (várias páginas) */
.status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50%;
    background: var(--text-faint);
}
.status-dot.active,
.status-dot.connected,
.status-dot.online {
    background: var(--op-green) !important;
    box-shadow: 0 0 8px var(--op-green);
}
.status-dot.warning,
.status-dot.warn {
    background: var(--sev-medium) !important;
    box-shadow: 0 0 8px var(--sev-medium);
}
.status-dot.error,
.status-dot.disconnected,
.status-dot.offline {
    background: var(--sev-critical) !important;
    box-shadow: 0 0 8px var(--sev-critical);
}