/* ================================================================
   MFJ FINANCE — Design System v2.0
   Paleta: Preto premium + Gradiente MFJ (vermelho → laranja → ouro)
   Aplicado em: fluxo-caixa, projecao, custos-fixos, pos-venda
   ================================================================ */

:root {
    --red:      #E8401E;
    --orange:   #FF8C00;
    --gold:     #FFAA00;
    --grad:     linear-gradient(135deg, #E8401E 0%, #FF8C00 55%, #FFAA00 100%);
    --grad-h:   linear-gradient(135deg, #D43618 0%, #E87800 55%, #E09900 100%);

    /* surfaces */
    --bg:       #080808;
    --s1:       rgba(255,255,255,.025);
    --s2:       rgba(255,255,255,.04);
    --s3:       rgba(255,255,255,.065);

    /* borders */
    --b1:       rgba(255,255,255,.06);
    --b2:       rgba(255,255,255,.1);
    --b-brand:  rgba(232,64,30,.38);

    /* text */
    --t1:  #F0F0F0;
    --t2:  #909090;
    --t3:  #484848;

    /* legacy aliases (backward compat) */
    --mfj-orange-1: #E8401E;
    --mfj-orange-2: #FF8C00;
    --mfj-orange-3: #FF6B35;
    --mfj-bg:       #080808;
    --mfj-surface:  #0F0F0F;
    --mfj-surface-2:#141414;
    --mfj-border:   rgba(255,255,255,.07);
    --mfj-border-hover: rgba(232,64,30,.4);
    --mfj-text:     #F0F0F0;
    --mfj-muted:    #707070;
}

/* ── Reset base ────────────────────────────────────────────────── */
html {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Body / Background ─────────────────────────────────────────── */
body {
    background: #080808 !important;
    background-image:
        radial-gradient(ellipse 700px 500px at -5% -10%, rgba(232,64,30,.14) 0%, transparent 55%),
        radial-gradient(ellipse 600px 420px at 105% -8%, rgba(255,140,0,.10) 0%, transparent 55%) !important;
    color: var(--t1) !important;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* Noise grain overlay */
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9000;
    opacity: 0.45;
}

/* ── Header ────────────────────────────────────────────────────── */
header.sticky.top-0,
header.site-header {
    background: rgba(8,8,8,.90) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    box-shadow: 0 1px 0 rgba(232,64,30,.08) !important;
}

/* Gradient accent under header */
header.sticky.top-0::after,
header.site-header::after {
    content: '';
    display: block;
    height: 1.5px;
    background: linear-gradient(90deg, #E8401E, #FF8C00, #FFAA00, rgba(255,170,0,0) 65%);
}

/* ── Modais estáticos (hidden divs com bg-surface) ─────────────── */
/* Garante fundo escuro independente do Tailwind CDN gerar ou não  */
[id$="Modal"] > div,
[id*="Modal"] > div {
    background-color: #111111 !important;
}

/* ── Glass Cards ────────────────────────────────────────────────── */
.glass-card,
.menu-card {
    background: var(--s1) !important;
    border: 1px solid var(--b1) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.55) !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                border-color .35s, box-shadow .35s, background .35s !important;
}

.glass-card:hover,
.menu-card:hover:not(.disabled) {
    border-color: var(--b-brand) !important;
    background: var(--s2) !important;
    transform: translateY(-6px) !important;
    box-shadow:
        0 36px 72px rgba(0,0,0,.65),
        0 0 0 1px rgba(232,64,30,.1),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.menu-card.disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    border-style: dashed !important;
    border-color: rgba(255,255,255,.06) !important;
}
.menu-card.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ── Stat / KPI Cards ──────────────────────────────────────────── */
.stat-card,
[class*="stat-"] {
    background: var(--s1);
    border: 1px solid var(--b1);
    border-radius: 16px;
    transition: border-color .3s;
}
.stat-card:hover { border-color: rgba(232,64,30,.2); }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tab-button {
    color: var(--t3) !important;
    font-weight: 600;
    transition: color .25s;
}
.tab-button:hover { color: var(--t2) !important; }
.tab-button.active { color: #FF9060 !important; }
.tab-button.active::after {
    background: linear-gradient(90deg, var(--red), var(--orange)) !important;
    border-radius: 3px 3px 0 0;
}

/* Tabs container line */
.tab-container,
[class*="tab-bar"],
.tabs-header {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
    background: var(--grad) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 22px rgba(232,64,30,.32) !important;
    transition: filter .25s, transform .25s, box-shadow .25s !important;
}
.btn-primary:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 32px rgba(232,64,30,.42) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

.btn-secondary {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--b2) !important;
    color: var(--t2) !important;
    transition: background .25s, color .25s !important;
}
.btn-secondary:hover {
    background: rgba(255,255,255,.09) !important;
    color: var(--t1) !important;
}

.btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 6px 18px rgba(22,163,74,.3) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 6px 18px rgba(239,68,68,.3) !important;
}

/* ── Inputs / Selects ──────────────────────────────────────────── */
.input,
.select,
.textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 10px !important;
    color: var(--t1) !important;
    transition: border-color .25s, box-shadow .25s !important;
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(232,64,30,.65) !important;
    box-shadow: 0 0 0 3px rgba(232,64,30,.14) !important;
}

/* ── Select native dropdown options ────────────────────────────── */
option,
select option {
    background-color: #111111 !important;
    color: #F0F0F0 !important;
}
select optgroup {
    background-color: #0A0A0A !important;
    color: #888 !important;
}

/* ── Tables ────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
}
thead th {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    color: var(--t2) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
}
tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    transition: background .2s !important;
}
tbody tr:hover { background: rgba(255,255,255,.025) !important; }
td { color: var(--t1) !important; }

/* ── Company / Carousel Cards ──────────────────────────────────── */
.company-card-inner {
    background: var(--s1) !important;
    border: 1px solid var(--b1) !important;
    border-radius: 14px !important;
    transition: border-color .3s, box-shadow .3s !important;
}
#carouselTrack .company-card-inner:hover {
    border-color: rgba(232,64,30,.35) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
}

/* ── Badges / Tags ─────────────────────────────────────────────── */
.badge-success,
[class*="badge-green"] {
    background: rgba(22,163,74,.12) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(22,163,74,.2) !important;
}
.badge-danger,
[class*="badge-red"] {
    background: rgba(239,68,68,.1) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239,68,68,.2) !important;
}
.badge-warning,
[class*="badge-yellow"] {
    background: rgba(255,170,0,.1) !important;
    color: #FFCC44 !important;
    border: 1px solid rgba(255,170,0,.2) !important;
}
.badge-brand {
    background: rgba(232,64,30,.12) !important;
    color: #FF8040 !important;
    border: 1px solid rgba(232,64,30,.22) !important;
}

/* ── Modals ────────────────────────────────────────────────────── */
.modal-backdrop,
[class*="modal-overlay"] {
    background: rgba(0,0,0,.75) !important;
    backdrop-filter: blur(6px) !important;
}
.modal-box,
[class*="modal-content"],
.modal {
    background: #0E0E0E !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.8) !important;
}

/* ── Modais dinâmicos (modals.js) — garantir fundo escuro ──────── */
/* O Tailwind CDN não escaneia HTML gerado via innerHTML           */
#modalSystem > div {
    background: rgba(0,0,0,.82) !important;
    backdrop-filter: blur(6px) !important;
}
/* Inner card de todos os modais do modalSystem */
#modalSystem > div > div,
#loadingModal > div,
#successModal > div,
#errorModal > div,
#confirmModal > div,
#customModal > div,
#promptModal > div,
#infoModal > div {
    background: #111111 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #F0F0F0 !important;
}
/* Textos dentro dos modais dinâmicos */
#modalSystem p,
#modalSystem h3,
#modalSystem label,
#modalSystem span {
    color: inherit !important;
}
#modalSystem .text-gray-300,
#modalSystem .text-gray-400 { color: #909090 !important; }
#modalSystem .text-white { color: #F0F0F0 !important; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #080808; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.08);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(232,64,30,.28); }

/* ── Color utilities ───────────────────────────────────────────── */
.text-brand    { color: var(--orange) !important; }
.text-brand-2  { color: var(--red)    !important; }
.bg-brand      { background: var(--grad) !important; }

.text-gray-400,
.text-gray-500 { color: var(--t2) !important; }
.text-white    { color: var(--t1) !important; }

.bg-surface,
.bg-surface\/80,
.bg-surface\/90 { background: rgba(10,10,10,.95) !important; }

.border-primary,
.border-primary\/50 { border-color: rgba(255,255,255,.07) !important; }

/* ── Green / Red income-expense indicators ─────────────────────── */
.text-green-400,
.text-green-500 { color: #4ade80 !important; }
.text-red-400,
.text-red-500   { color: #f87171 !important; }

/* ── Chart.js canvas ───────────────────────────────────────────── */
canvas { border-radius: 12px; }

/* ── Icon containers ───────────────────────────────────────────── */
.icon-box {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: rgba(232,64,30,.1);
    border: 1px solid rgba(232,64,30,.18);
    display: flex; align-items: center; justify-content: center;
    color: #FF6B35;
    font-size: 18px;
    transition: all .3s;
}
.icon-box:hover,
.group:hover .icon-box {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(232,64,30,.38);
}

/* ── Back button premium ───────────────────────────────────────── */
.mfj-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    color: #666;
    font-size: 13px;
    text-decoration: none;
    transition: background .22s, border-color .22s, color .22s;
    flex-shrink: 0;
}
.mfj-back-btn:hover {
    background: rgba(232,64,30,.15);
    border-color: rgba(232,64,30,.32);
    color: #FF6B35;
}

/* ── Section titles ────────────────────────────────────────────── */
.section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -.3px;
}
.section-sub {
    font-size: 13px;
    color: var(--t3);
}

/* ── Page main margin fix ──────────────────────────────────────── */
main { margin-top: 0 !important; }
@media (max-width: 768px) { main { margin-top: 0 !important; } }

/* ── Footer override ───────────────────────────────────────────── */
footer.bg-surface {
    background: rgba(8,8,8,.98) !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
    margin-bottom: 0 !important;
    padding-bottom: 24px !important;
}
footer .text-brand { color: #FF7040 !important; }
footer .text-gray-500 { color: #444 !important; }

/* Legacy layout compatibility for older modules */
:root {
    --primary: #080808 !important;
    --surface: #111111 !important;
    --surface-light: #171717 !important;
    --accent: #202020 !important;
    --brand: #FF6B35 !important;
    --brand-dark: #E8401E !important;
    --text: #F0F0F0 !important;
    --text-muted: #8A8A8A !important;
}

.header-bar,
.topbar,
.header,
.navbar {
    background: rgba(8,8,8,.9) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 1px 0 rgba(232,64,30,.1) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
}

.sidebar,
.sidebar-right,
.left-panel,
.right-panel {
    background: linear-gradient(180deg, rgba(14,14,14,.98), rgba(10,10,10,.98)) !important;
    border-color: rgba(255,255,255,.06) !important;
}

.btn-dashboard,
.btn-brand {
    background: rgba(232,64,30,.1) !important;
    border: 1px solid rgba(232,64,30,.3) !important;
    color: #FF8C00 !important;
}

.btn-dashboard:hover,
.btn-brand:hover {
    background: var(--grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.logo-section {
    background: var(--grad) !important;
}

/* Remove legacy version bubbles/badges globally */
.version-badge,
[class*="version-badge"],
[id*="version-badge"] {
    display: none !important;
}

/* Normalize common container width to the same visual rhythm as financeiro */
.max-w-7xl {
    max-width: 1320px !important;
}

/* Keep inner header content aligned with financeiro spacing */
.site-header .max-w-7xl {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

@media (max-width: 768px) {
    .site-header .max-w-7xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Remove green-ish legacy tones in Suporte */
.training-card {
    background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
}
.training-card:hover {
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
    border-color: rgba(232,64,30,.36) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(232,64,30,.1) !important;
}

/* Remove green-ish legacy tones in Hubs */
.control-section,
.distance-tool,
.stat-card,
.layer-toggle {
    background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.control-section:hover,
.layer-toggle:hover,
.stat-card:hover {
    border-color: rgba(232,64,30,.34) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(232,64,30,.08) !important;
}

/* Keep toggles and little pills neutral on dark */
.toggle-switch {
    background: #2d3441 !important;
}
input:checked + .toggle-switch {
    background: #3d4554 !important;
}