/* ================================================================
   3DVerso — Stylesheet principal
   Tech-Creative Futuristic Design System
   Bootstrap 5 + custom
   ================================================================ */

/* ── Variáveis de marca ─────────────────────────────────────── */
:root {
    /* Paleta 3DVerso — refinada, Stripe/Linear/Vercel-inspired */
    --brand-primary:   #5B5BD6;   /* Índigo equilibrado */
    --brand-primary-h: #6B6BE6;   /* hover */
    --brand-secondary: #2EC5CE;   /* Teal/ciano suave */
    --brand-accent:    #FF8A3D;   /* Laranja quente — CTAs */
    --brand-accent-h:  #FFA15C;   /* hover laranja */

    /* Aliases de compatibilidade (código legado) */
    --color-primary:   #5B5BD6;
    --color-primary-h: #6B6BE6;
    --color-cyan:      #2EC5CE;
    --color-cyan-h:    #3FD5DE;
    --color-accent:    #FF8A3D;
    --color-accent-h:  #FFA15C;

    --font-main:   'Inter', system-ui, sans-serif;
    --font-heading:'Rajdhani', 'Inter', system-ui, sans-serif;
    --orange:      #FF8A3D;
    --orange-dark: #E6712E;
    --orange-light:#FFA15C;
    --dark-bg:     #0F1115;
    --dark-card:   #1D2330;
    --purple:      #5B5BD6;
    --teal:        #2EC5CE;
    --yellow:      #FFB300;
    --radius:      10px;
    --radius-lg:   16px;
    --transition:  .2s ease;

    /* Sombras sutis (sem neon) */
    --glow-purple: 0 10px 30px rgba(0,0,0,.25);
    --glow-cyan:   0 10px 30px rgba(0,0,0,.25);
    --glow-accent: 0 10px 30px rgba(0,0,0,.25);
}

/* ── Body base ──────────────────────────────────────────────── */
body {
    font-family: var(--font-main);
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

/* Dot grid sutil no modo escuro */
body.theme-dark {
    background-image: radial-gradient(circle, rgba(47,55,71,.45) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Tipografia Rajdhani para títulos ───────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .font-heading {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* ── Utilitários ────────────────────────────────────────────── */
.fw-600  { font-weight: 600 !important; }
.fw-700  { font-weight: 700 !important; }
.fw-800  { font-weight: 800 !important; }
.text-orange       { color: var(--orange) !important; }
.text-orange-light { color: var(--orange-light) !important; }
.text-purple       { color: var(--color-primary) !important; }
.text-cyan         { color: var(--color-cyan) !important; }
.text-teal         { color: var(--teal) !important; }
.text-yellow       { color: var(--yellow) !important; }
.text-white-75     { color: rgba(255,255,255,.75) !important; }
.text-white-50     { color: rgba(255,255,255,.5)  !important; }
.letter-spacing    { letter-spacing: .08em; }
.min-vh-70         { min-height: 70vh; }
.min-vh-80         { min-height: 80vh; }
.py-6              { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.text-clamp-2      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3      { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.object-fit-cover  { object-fit: cover; }
.hover-orange:hover { color: var(--orange) !important; }
.bg-light-gray     { background-color: var(--theme-bg-alt) !important; }
.bg-orange-soft    { background-color: rgba(255,138,61,.12) !important; }
.bg-success-soft   { background-color: rgba(16,185,129,.12) !important; }
.text-success      { color: #00C896 !important; }
.bg-info-soft      { background-color: rgba(46,197,206,.12) !important; }
.bg-purple-soft    { background-color: rgba(91,91,214,.12) !important; }
.bg-cyan-soft      { background-color: rgba(46,197,206,.1) !important; }

/* ── Gradiente título ───────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-warm {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Botões customizados ────────────────────────────────────── */

/* Botão primário — Roxo Galáctico */
.btn-primary-brand,
.btn-orange {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .04em;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary-brand:hover, .btn-primary-brand:focus,
.btn-orange:hover, .btn-orange:focus {
    background-color: var(--color-primary-h);
    border-color: var(--color-primary-h);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(91,91,214,.35);
}

/* Botão CTA — Laranja Filamento */
.btn-cta {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .04em;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-cta:hover, .btn-cta:focus {
    background-color: var(--color-accent-h);
    border-color: var(--color-accent-h);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,138,61,.35);
}

/* Botão outline ciano */
.btn-outline-orange {
    border: 2px solid var(--color-cyan);
    color: var(--color-cyan);
    font-family: var(--font-heading);
    font-weight: 600;
    background: transparent;
    transition: all var(--transition);
}
.btn-outline-orange:hover {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: #0F1115;
    box-shadow: 0 6px 20px rgba(46,197,206,.3);
}
.btn-outline-white {
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    font-weight: 600;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.8);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.bg-dark-custom {
    background: #161A22 !important;
    border-bottom: 1px solid #2F3747;
    backdrop-filter: blur(12px);
}
.navbar-brand { font-family: var(--font-heading); font-size: 1.35rem; }
.navbar-brand span { color: #fff; }
.nav-link { color: rgba(255,255,255,.75) !important; font-family: var(--font-heading); font-size: .95rem; letter-spacing: .04em; transition: color var(--transition); }
.nav-link:hover { color: var(--color-cyan) !important; }
.nav-link.active { color: var(--color-cyan) !important; }

/* Busca no navbar */
.search-form { max-width: 380px; width: 100%; }
.search-input {
    background: rgba(255,255,255,.06);
    border: 1px solid #2F3747;
    color: #fff;
    border-radius: var(--radius) 0 0 var(--radius);
}
.search-input::placeholder { color: rgba(255,255,255,.35); }
.search-input:focus {
    background: rgba(255,255,255,.09);
    border-color: var(--color-cyan);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(46,197,206,.12);
}

/* Dropdown */
.dropdown-menu {
    border-radius: var(--radius);
    border: 1px solid #2F3747;
    background-color: #161A22;
}
.dropdown-item { color: rgba(255,255,255,.8); transition: all var(--transition); }
.dropdown-item:hover { background: rgba(91,91,214,.12); color: var(--color-cyan); }

/* Avatar */
.user-avatar-sm {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .85rem;
}

/* ── Brand icon / logo ──────────────────────────────────────── */
.brand-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(91,91,214,.3);
}
.brand-icon-sm { width: 32px; height: 32px; font-size: .95rem; border-radius: 8px; }
.brand-logo-img { height: 36px; width: auto; }
.brand-logo-img-sm { height: 28px; width: auto; }

/* ── Hero section ───────────────────────────────────────────── */
.hero-section { background: var(--theme-surface); padding: 0; }
.hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shape {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .10;
}
.shape-1 {
    width: 520px; height: 520px;
    background: var(--color-primary);
    top: -120px; right: -100px;
}
.shape-2 {
    width: 320px; height: 320px;
    background: var(--color-cyan);
    bottom: -80px; left: 8%;
}

/* Hero floating cards */
.hero-illustration {
    position: relative;
    width: 380px; height: 340px;
}
.print-card-float {
    position: absolute;
    background: var(--theme-surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    min-width: 140px;
    animation: float 3s ease-in-out infinite;
}
.card-1 { top: 0;   left: 0;   animation-delay: 0s; }
.card-2 { top: 80px;right: 0;  animation-delay: .8s; }
.card-3 { bottom: 0;left: 30%; animation-delay: 1.6s; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ── Como funciona ──────────────────────────────────────────── */
.how-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--theme-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    height: 100%;
}
.how-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
    border-color: #5B5BD6;
}
.how-card-featured { background: var(--dark-bg); }
.step-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
}
.step-number { font-size: 2.5rem; font-weight: 800; color: var(--color-cyan) !important; opacity: .8; line-height: 1; }

/* ── Cards de projetos ──────────────────────────────────────── */
.card-projeto {
    background: var(--theme-surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--theme-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-projeto:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-color: #5B5BD6;
}
.card-projeto-img {
    position: relative;
    height: 200px;
    background: var(--theme-bg-alt);
    overflow: hidden;
}
.card-projeto-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.badge-material {
    position: absolute;
    bottom: .5rem; left: .5rem;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 6px;
    padding: .2rem .5rem;
}
.placeholder-img { background: var(--theme-bg-alt); }

/* Avatares */
.fornecedor-avatar-xs {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .7rem;
    flex-shrink: 0;
}
.forn-avatar {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(91,91,214,.25);
}
.forn-avatar-lg {
    width: 88px; height: 88px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-cyan));
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(91,91,214,.3);
}
.forn-logo { width: 88px; height: 88px; object-fit: contain; border-radius: var(--radius); }
.forn-logo-lg { width: 100px; height: 100px; object-fit: contain; border-radius: var(--radius-lg); }

/* ── Cards de fornecedores ──────────────────────────────────── */
.fornecedor-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--theme-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column;
}
.fornecedor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-color: #5B5BD6;
}
.fornecedor-card-header { display: flex; align-items: center; gap: 1rem; }

/* ── Tecnologias ────────────────────────────────────────────── */
.tech-card {
    background: var(--theme-surface);
    border-radius: var(--radius);
    border: 1px solid var(--theme-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tech-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    border-color: #2EC5CE;
}

/* ── CTA Fornecedores ───────────────────────────────────────── */
.cta-section { background: var(--dark-bg); }
.cta-shapes  { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta-shape-1 {
    position: absolute; top: -80px; right: -80px;
    width: 440px; height: 440px; border-radius: 50%;
    background: radial-gradient(circle, rgba(91,91,214,.2), transparent);
}
.cta-shape-2 {
    position: absolute; bottom: -80px; left: -80px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,197,206,.12), transparent);
}
.benefit-card { border-radius: var(--radius); }

/* ── Perfil de fornecedor ───────────────────────────────────── */
.stat-pill { display: flex; align-items: center; gap: .25rem; font-size: .875rem; }

/* ── Pedidos ────────────────────────────────────────────────── */
.pedido-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--theme-border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column;
}
.pedido-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-color: #5B5BD6;
}
.pedido-row {
    padding: .625rem .75rem;
    border-radius: var(--radius);
    background: var(--theme-bg-alt);
    transition: background var(--transition);
}
.pedido-row:hover { background: rgba(91,91,214,.07); }
.detail-chip {
    background: var(--theme-bg-alt);
    border-radius: var(--radius);
    padding: .75rem;
    text-align: center;
}

/* ── Upload ─────────────────────────────────────────────────── */
.upload-area {
    border: 2px dashed var(--theme-border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.upload-area:hover,
.upload-area-hover  { border-color: var(--color-cyan); background: rgba(46,197,206,.05); box-shadow: 0 0 0 3px rgba(46,197,206,.1); }
.upload-area-active { border-color: var(--color-cyan); background: rgba(46,197,206,.07); box-shadow: 0 0 0 3px rgba(46,197,206,.12); }

/* ── Auth card ──────────────────────────────────────────────── */
.auth-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 440px;
}

/* ── Seletor de tipo de conta ───────────────────────────────── */
.account-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.type-btn {
    border: 2px solid var(--theme-border);
    border-radius: var(--radius);
    padding: .875rem;
    background: var(--theme-surface);
    cursor: pointer;
    text-align: center;
    font-size: .875rem;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    color: var(--theme-text);
}
.type-btn:hover  { border-color: var(--color-primary); background: rgba(91,91,214,.06); }
.type-btn.active { border-color: var(--color-primary); background: rgba(91,91,214,.08); }

/* ── Dashboard ──────────────────────────────────────────────── */
.stat-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--theme-border);
    display: flex; flex-direction: column; gap: .5rem;
}
.stat-card-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.stat-card-value { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.stat-card-label { font-size: .8rem; color: var(--theme-text-muted); font-weight: 500; }
.stat-card-action { padding: 0; border: 2px dashed rgba(255,107,53,.3); }

/* ── Perfil do fornecedor (header) ──────────────────────────── */
.fornecedor-perfil-header {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--theme-card-shadow);
    border: 1px solid var(--theme-border);
}

/* ── Pricing card ───────────────────────────────────────────── */
.pricing-card {
    background: var(--theme-surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 400px;
    border: 2px solid rgba(91,91,214,.35);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    position: relative;
}
.pricing-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
    color: #fff;
    font-family: var(--font-heading);
    font-size: .75rem; font-weight: 700;
    padding: .25rem 1rem; border-radius: 20px;
}
.pricing-price { font-size: 3rem; font-weight: 800; line-height: 1; margin: 1rem 0; }
.pricing-price .currency { font-size: 1.5rem; font-weight: 700; vertical-align: top; margin-top: .5rem; }
.pricing-price .period   { font-size: 1rem; color: var(--theme-text-muted); font-weight: 400; }
.pricing-features li { padding: .4rem 0; font-size: .9rem; color: var(--theme-text); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer-dark  {
    background: #0C0E12;
    border-top: 1px solid #2F3747;
}
.footer-dark .text-muted { color: #9AA4B2 !important; }
.footer-link  { color: #9AA4B2; text-decoration: none; transition: color var(--transition); display: block; }
.footer-link:hover { color: var(--color-cyan); }

/* ── Scrollbar fina ─────────────────────────────────────────── */
html { scrollbar-width: auto; scrollbar-color: var(--brand-secondary) var(--dark-card); }
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dark-card); }
::-webkit-scrollbar-thumb { background: var(--brand-secondary); border-radius: 6px; border: 2px solid var(--dark-card); }
::-webkit-scrollbar-thumb:hover { background: var(--color-cyan-h); }

/* ── Responsividade ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-section    { text-align: center; }
    .d-flex.gap-4.mb-4 { justify-content: center; }
    .search-form     { max-width: 100%; margin: .75rem 0; }
    .auth-card       { margin: 1rem; }
}

/* Anti-FOUC: aplicado no <html> antes do body existir */
html.theme-dark-pre,
html.theme-dark-pre body {
    background-color: #0F1115 !important;
    color: #E6EAF0 !important;
}
html.theme-light-pre,
html.theme-light-pre body {
    background-color: #F8F9FF !important;
    color: #0D1117 !important;
}

/* ================================================================
   Dark / Light theme — variáveis de cor adaptáveis
   ================================================================ */

/* Valores base (modo claro) */
:root {
    --theme-bg:          #F8F9FF;
    --theme-bg-alt:      #EEF0FA;
    --theme-surface:     #ffffff;
    --theme-border:      #DDE0F0;
    --theme-text:        #0D1117;
    --theme-text-muted:  #6B6F88;
    --theme-input-bg:    #ffffff;
    --theme-card-shadow: 0 2px 16px rgba(91,91,214,.06);
}

/* Modo escuro — Deep Space equilibrado */
body.theme-dark {
    --theme-bg:          #0F1115;
    --theme-bg-alt:      #161A22;
    --theme-surface:     #1D2330;
    --theme-border:      #2F3747;
    --theme-text:        #E6EAF0;
    --theme-text-muted:  #9AA4B2;
    --theme-input-bg:    #242B3A;
    --theme-card-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Modo claro explícito */
body.theme-light {
    --theme-bg:          #F8F9FF;
    --theme-bg-alt:      #EEF0FA;
    --theme-surface:     #ffffff;
    --theme-border:      #DDE0F0;
    --theme-text:        #0D1117;
    --theme-text-muted:  #6B6F88;
    --theme-input-bg:    #ffffff;
    --theme-card-shadow: 0 2px 16px rgba(91,91,214,.06);
}

/* Transição suave ao trocar tema */
body {
    transition: background-color .25s ease, color .25s ease;
}

/* Aplica variáveis em elementos genéricos */
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

.bg-light-gray {
    background-color: var(--theme-bg-alt) !important;
}

/* Cards — projetos, fornecedores, pedidos (cor de texto em dark) */
.card-projeto .card-projeto-body h6,
.fornecedor-card .fw-700,
.pedido-card h6 {
    color: var(--theme-text);
}

/* Formulários */
.form-control,
.form-select {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--theme-input-bg);
    color: var(--theme-text);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91,91,214,.14);
}
.form-control::placeholder { color: var(--theme-text-muted); }

/* Input group */
.input-group-text {
    background-color: var(--theme-input-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-muted);
}

/* Dropdown do Bootstrap */
body.theme-dark .dropdown-menu {
    background-color: #161A22;
    border-color: #2F3747;
}
body.theme-dark .dropdown-item {
    color: var(--theme-text);
}
body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
    background-color: rgba(91,91,214,.1);
    color: var(--color-cyan);
}
body.theme-dark .dropdown-divider {
    border-color: var(--theme-border);
}

/* bg-light genérico (caixas, cards) no dark mode */
body.theme-dark .bg-light {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Badges de conteúdo */
body.theme-dark .badge.bg-light {
    background-color: var(--theme-bg-alt) !important;
    color: var(--theme-text-muted) !important;
}
body.theme-dark .text-dark { color: var(--theme-text) !important; }
body.theme-dark .text-muted { color: var(--theme-text-muted) !important; }
body.theme-dark .border        { border-color: var(--theme-border) !important; }
body.theme-dark .border-bottom { border-color: var(--theme-border) !important; }
body.theme-dark .border-top    { border-color: var(--theme-border) !important; }
body.theme-dark .border-start  { border-color: var(--theme-border) !important; }
body.theme-dark .border-end    { border-color: var(--theme-border) !important; }

/* Toggle lista / mapa */
.view-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--theme-border);
}

.view-map-container {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-card-shadow);
}

/* ── Botão de tema flutuante (navbar) ───────────────────────── */
.theme-toggle-btn {
    color: rgba(255,255,255,.7) !important;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none !important;
    transition: color var(--transition);
}
.theme-toggle-btn:hover { color: #fff !important; }
.theme-dropdown { min-width: 150px; }

/* ── Bootstrap overrides para dark mode ─────────────────────── */

/* btn-outline-dark invertido */
body.theme-dark .btn-outline-dark {
    color: var(--theme-text);
    border-color: var(--theme-border);
}
body.theme-dark .btn-outline-dark:hover,
body.theme-dark .btn-outline-dark:focus {
    background-color: var(--theme-bg-alt);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

/* Separador vertical (stats hero) */
body.theme-dark .vr {
    background-color: var(--theme-border);
    opacity: 1;
}

/* print-card-float — cor do texto */
body.theme-dark .print-card-float .fw-600,
body.theme-dark .print-card-float .text-muted {
    color: var(--theme-text-muted) !important;
}

/* how-card — borda sutil */
body.theme-dark .how-card {
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Formulário: label e texto auxiliar */
body.theme-dark .form-label,
body.theme-dark label {
    color: var(--theme-text);
}
body.theme-dark .form-text {
    color: var(--theme-text-muted);
}

/* Upload area */
body.theme-dark .upload-area {
    border-color: var(--theme-border);
    background: var(--theme-bg-alt);
    color: var(--theme-text);
}

/* Botões ghost / outline no tema escuro */
body.theme-dark .btn-outline-secondary {
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}
body.theme-dark .btn-outline-secondary:hover {
    background: var(--theme-bg-alt);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

/* Alertas */
body.theme-dark .alert-info {
    background-color: rgba(46,197,206,.1);
    border-color: rgba(46,197,206,.25);
    color: #2EC5CE;
}

/* Scrollbar no dark mode */
body.theme-dark ::-webkit-scrollbar-track { background: #0F1115; }
body.theme-dark ::-webkit-scrollbar-thumb { background: rgba(91,91,214,.4); }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); }

/* bg-white — boxes e painéis do dashboard */
body.theme-dark .bg-white {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Alertas coloridos no dark mode */
body.theme-dark .alert-success {
    background-color: rgba(46,197,206,.1);
    border-color: rgba(46,197,206,.25);
    color: #2EC5CE;
}
body.theme-dark .alert-warning {
    background-color: rgba(255,176,0,.1);
    border-color: rgba(255,176,0,.25);
    color: #FFB300;
}
body.theme-dark .alert-success .alert-link,
body.theme-dark .alert-warning .alert-link {
    color: inherit;
    opacity: .85;
}

/* Bootstrap .card no dark mode (blog / artigos) */
body.theme-dark .card {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-dark .card-footer {
    border-color: var(--theme-border);
}

/* Input group */
body.theme-dark .input-group-text {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-muted);
}

/* ── Animações de entrada (fade-in em cards) ────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeInUp .4s ease both;
}
.card-projeto, .fornecedor-card, .pedido-card, .stat-card, .how-card {
    animation: fadeInUp .35s ease both;
}

/* ── Marcadores de mapa 3DVerso ─────────────────────────────── */
.leaflet-marker-fornecedor { filter: hue-rotate(140deg) saturate(2); }  /* ciano */
.leaflet-marker-pedido     { filter: hue-rotate(0deg) saturate(1.5); }  /* laranja */

/* ── Blog / tech magazine ───────────────────────────────────── */
.blog-card {
    border: 1px solid var(--theme-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--theme-surface);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-color: #2EC5CE;
}
.blog-category-badge {
    background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
    color: #fff;
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .65rem;
    border-radius: 4px;
    display: inline-block;
}

/* ── Modal modernizado ──────────────────────────────────────── */
body.theme-dark .modal-content {
    background-color: var(--theme-surface);
    border-color: #2F3747;
    color: var(--theme-text);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer {
    border-color: var(--theme-border);
}
.modal-content {
    border-radius: var(--radius-lg);
}

/* ── Home page — container centralizado com respiro visual ── */
.home-page .container {
    max-width: 1200px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
@media (max-width: 991.98px) {
    .home-page .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 767.98px) {
    .home-page .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ── Busca — modo Lista + Mapa ─────────────────────────────── */
.mode-both {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mode-both .view-both-map {
    width: 100%;
    height: 480px !important;
    min-height: 260px;
}
.mode-both .view-both-list {
    width: 100%;
    max-height: 480px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
    .mode-both .view-both-map {
        height: 320px !important;
    }
    .mode-both .view-both-list {
        max-height: 350px;
    }
}

/* ── Destaque de fornecedor sincronizado com mapa ─────────── */
.map-highlight {
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 0 2px var(--color-cyan), 0 4px 16px rgba(46,197,206,.2) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* ── Rodapé — seletor de tema ──────────────────────────────── */
.footer-theme-row {
    border-top: 1px solid #2F3747;
    padding-top: 0.75rem;
}
.footer-theme-btn {
    font-size: .75rem;
    padding: .25rem .6rem;
    border-color: #2F3747;
    color: #8899AA;
}
.footer-theme-btn.active,
.footer-theme-btn.btn-secondary {
    background: rgba(46,197,206,.15) !important;
    border-color: var(--color-cyan) !important;
    color: var(--color-cyan) !important;
}

/* ── Badges de status ───────────────────────────────────────── */
.badge-status-ativo   { background: rgba(46,197,206,.15); color: var(--color-cyan); border: 1px solid rgba(46,197,206,.3); }
.badge-status-inativo { background: rgba(255,138,61,.1); color: var(--color-accent); border: 1px solid rgba(255,138,61,.25); }
.badge-status-pendente{ background: rgba(255,176,0,.12); color: var(--yellow); border: 1px solid rgba(255,176,0,.25); }

/* ── Utilitários de destaque ─────────────────────────────────────── */
.shadow-glow-purple { box-shadow: 0 6px 20px rgba(91,91,214,.25); }
.shadow-glow-cyan   { box-shadow: 0 6px 20px rgba(46,197,206,.2); }
.shadow-glow-accent { box-shadow: 0 6px 20px rgba(255,138,61,.25); }
.border-purple      { border-color: rgba(91,91,214,.4) !important; }
.border-cyan        { border-color: rgba(46,197,206,.4) !important; }

/* Botões ghost / outline no tema escuro */
body.theme-dark .btn-outline-secondary {
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}
body.theme-dark .btn-outline-secondary:hover {
    background: var(--theme-bg-alt);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

/* Alertas */
body.theme-dark .alert-info {
    background-color: rgba(6,182,212,.12);
    border-color: rgba(6,182,212,.25);
    color: #67E8F9;
}

/* Scrollbar no dark mode */
body.theme-dark ::-webkit-scrollbar-track { background: #0F1115; }
body.theme-dark ::-webkit-scrollbar-thumb { background: rgba(91,91,214,.4); }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); }

/* bg-white — boxes e painéis do dashboard */
body.theme-dark .bg-white {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

/* Alertas coloridos no dark mode */
body.theme-dark .alert-success {
    background-color: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
    color: #6EE7B7;
}
body.theme-dark .alert-warning {
    background-color: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.25);
    color: #FCD34D;
}
body.theme-dark .alert-success .alert-link,
body.theme-dark .alert-warning .alert-link {
    color: inherit;
    opacity: .85;
}

/* Bootstrap .card no dark mode (blog / artigos) */
body.theme-dark .card {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-dark .card-footer {
    border-color: var(--theme-border);
}

/* Input group — icons ficam no tema correto mesmo com bg-light / bg-white */
body.theme-dark .input-group-text {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-muted);
}