/* ==========================================================================
   QUANTIX CORP — DESIGN SYSTEM TOKENS (Grafite & Âmbar / Marfim & Cobalto)
   ========================================================================== */

:root,
[data-theme="dark"] {
    color-scheme: dark;
    --qx-bg: #111216;
    --qx-surface: #1B1E25;
    --qx-surface-hover: #222630;
    --qx-surface-elevated: #232732;
    --qx-text: #F4F5F7;
    --qx-text-muted: #BBC1CA;
    --qx-text-subtle: #8A92A0;
    --qx-border: #333844;
    --qx-border-strong: #454C5C;

    /* Ação institucional principal: Âmbar com texto grafite */
    --qx-primary: #FFBF3F;
    --qx-primary-hover: #F2B02B;
    --qx-primary-text: #111216;

    /* Detalhes da marca */
    --qx-brand-blue: #6798FF;
    --qx-brand-amber: #FFBF3F;

    /* Acento padrão (herdado se produto não definido) */
    --qx-accent: #FFBF3F;
    --qx-accent-hover: #F2B02B;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(255, 191, 63, 0.14);

    /* Status operacionais */
    --qx-status-ok: #34D399;
    --qx-status-ok-bg: rgba(52, 211, 153, 0.12);
    --qx-status-warn: #FBBF24;
    --qx-status-warn-bg: rgba(251, 191, 36, 0.12);
    --qx-status-err: #F87171;
    --qx-status-err-bg: rgba(248, 113, 113, 0.12);
    --qx-status-info: #6798FF;
    --qx-status-info-bg: rgba(103, 152, 255, 0.12);

    /* Tipografia e geometria */
    --qx-font-sans: 'Geist', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --qx-font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    --qx-radius-sm: 6px;
    --qx-radius-md: 8px;
    --qx-radius-lg: 10px;
}

[data-theme="light"] {
    color-scheme: light;
    --qx-bg: #F3F1EA;
    --qx-surface: #FFFFFF;
    --qx-surface-hover: #F8F7F3;
    --qx-surface-elevated: #FAF9F5;
    --qx-text: #17233C;
    --qx-text-muted: #475569;
    --qx-text-subtle: #64748B;
    --qx-border: #CCD1D9;
    --qx-border-strong: #AEB5C0;

    /* Ação institucional principal no claro: Cobalto com texto branco */
    --qx-primary: #164BD9;
    --qx-primary-hover: #123EB5;
    --qx-primary-text: #FFFFFF;

    /* Detalhes da marca no claro */
    --qx-brand-blue: #164BD9;
    --qx-brand-amber: #D68918;

    --qx-accent: #164BD9;
    --qx-accent-hover: #123EB5;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(22, 75, 217, 0.10);

    --qx-status-ok: #15803D;
    --qx-status-ok-bg: rgba(21, 128, 61, 0.10);
    --qx-status-warn: #B45309;
    --qx-status-warn-bg: rgba(180, 83, 9, 0.10);
    --qx-status-err: #B91C1C;
    --qx-status-err-bg: rgba(185, 28, 28, 0.10);
    --qx-status-info: #164BD9;
    --qx-status-info-bg: rgba(22, 75, 217, 0.10);
}

/* ==========================================================================
   ACENTOS POR PRODUTO (Dark + derivados com contraste AA no Light)
   ========================================================================== */

[data-product="backup"] {
    --qx-accent: #6798FF;
    --qx-accent-hover: #5287FA;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(103, 152, 255, 0.14);
}
[data-theme="light"][data-product="backup"],
[data-theme="light"] [data-product="backup"] {
    --qx-accent: #164BD9;
    --qx-accent-hover: #123EB5;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(22, 75, 217, 0.10);
}

[data-product="remote"] {
    --qx-accent: #55D8CC;
    --qx-accent-hover: #40C9BC;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(85, 216, 204, 0.14);
}
[data-theme="light"][data-product="remote"],
[data-theme="light"] [data-product="remote"] {
    --qx-accent: #0F766E;
    --qx-accent-hover: #0D615B;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(15, 118, 110, 0.10);
}

[data-product="rmm"] {
    --qx-accent: #B5A0FF;
    --qx-accent-hover: #A289FC;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(181, 160, 255, 0.14);
}
[data-theme="light"][data-product="rmm"],
[data-theme="light"] [data-product="rmm"] {
    --qx-accent: #6D28D9;
    --qx-accent-hover: #5B21B6;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(109, 40, 217, 0.10);
}

[data-product="defense"] {
    --qx-accent: #FF9179;
    --qx-accent-hover: #FA7E63;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(255, 145, 121, 0.14);
}
[data-theme="light"][data-product="defense"],
[data-theme="light"] [data-product="defense"] {
    --qx-accent: #C2410C;
    --qx-accent-hover: #9A3412;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(194, 65, 12, 0.10);
}

[data-product="asset"] {
    --qx-accent: #C7DA7C;
    --qx-accent-hover: #B8CE65;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(199, 218, 124, 0.14);
}
[data-theme="light"][data-product="asset"],
[data-theme="light"] [data-product="asset"] {
    --qx-accent: #4D7C0F;
    --qx-accent-hover: #3F6212;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(77, 124, 15, 0.10);
}

[data-product="pdf"] {
    --qx-accent: #FFA4CE;
    --qx-accent-hover: #FA8BBF;
    --qx-accent-text: #111216;
    --qx-accent-soft: rgba(255, 164, 206, 0.14);
}
[data-theme="light"][data-product="pdf"],
[data-theme="light"] [data-product="pdf"] {
    --qx-accent: #BE185D;
    --qx-accent-hover: #9D174D;
    --qx-accent-text: #FFFFFF;
    --qx-accent-soft: rgba(190, 24, 93, 0.10);
}

/* Utilitários compartilhados */
.qx-mono,
code,
pre,
.mono {
    font-family: var(--qx-font-mono);
    font-variant-numeric: tabular-nums;
}

.qx-tabular {
    font-variant-numeric: tabular-nums;
}

.qx-focus:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--qx-accent);
    outline-offset: 2px;
}

/* =========================================================================
   Componentes Compartilhados Quantix (Topbar, Botões, Alertas, Feeds)
   ========================================================================= */

.gt-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--qx-surface);
    border-bottom: 1px solid var(--qx-border);
}

.gt-topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.gt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.gt-logo {
    height: 36px !important;
    width: auto;
    object-fit: contain;
}

.gt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.gt-nav::-webkit-scrollbar { display: none; }

.gt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--qx-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--qx-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gt-pill svg.qx-nav-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.82;
}

.gt-pill:hover {
    background: var(--qx-surface-hover);
    border-color: var(--qx-border);
    color: var(--qx-text);
}

.gt-pill.active {
    background: var(--qx-accent-soft);
    border-color: var(--qx-accent);
    color: var(--qx-accent);
    font-weight: 600;
}

.gt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .gt-topbar-inner {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 8px;
    }
    .gt-nav {
        order: 3;
        width: 100%;
        padding-top: 6px;
        border-top: 1px solid var(--qx-border);
    }
}

/* Padronização de Botões */
.btn,
.qx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: var(--qx-radius-sm);
    border: 1px solid var(--qx-border);
    background: var(--qx-surface-elevated);
    color: var(--qx-text);
    font-family: var(--qx-font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
.qx-btn:hover {
    background: var(--qx-surface-hover);
    border-color: var(--qx-border-strong);
}

.btn-sm,
.qx-btn-sm {
    min-height: 32px;
    padding: 5px 11px;
    font-size: 12px;
    border-radius: var(--qx-radius-xs);
}

.btn-primary,
.qx-btn-primary {
    background: var(--qx-accent) !important;
    border-color: var(--qx-accent) !important;
    color: var(--qx-accent-text) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.qx-btn-primary:hover {
    background: var(--qx-accent-hover) !important;
    border-color: var(--qx-accent-hover) !important;
}

.btn-danger,
.qx-btn-danger {
    background: var(--qx-status-err-soft) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: var(--qx-status-err) !important;
}

.btn-danger:hover,
.qx-btn-danger:hover {
    background: rgba(248, 113, 113, 0.22) !important;
    border-color: var(--qx-status-err) !important;
}

/* Padronização de Alertas e Feed de Relatórios */
.qx-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--qx-radius-sm);
    border: 1px solid var(--qx-border);
    background: var(--qx-surface-elevated);
    font-size: 13px;
    line-height: 1.45;
}

.qx-alert-ok {
    background: var(--qx-status-ok-soft);
    border-color: rgba(52, 211, 153, 0.35);
    color: var(--qx-status-ok);
}

.qx-alert-warn {
    background: var(--qx-status-warn-soft);
    border-color: rgba(251, 191, 36, 0.35);
    color: var(--qx-status-warn);
}

.qx-alert-err {
    background: var(--qx-status-err-soft);
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--qx-status-err);
}

.qx-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qx-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--qx-radius-sm);
    border: 1px solid var(--qx-border);
    background: var(--qx-bg);
}

.qx-feed-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.qx-feed-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}