/* ============================================================
   GeoNEX brand theme — override layer sobre Bootstrap 5.3.
   ------------------------------------------------------------
   Paleta e tipografia extraídas de https://geonex.digital/pt
   (Tailwind build oficial). Este arquivo é carregado DEPOIS de
   bootstrap.min.css + v2.css nos templates base para reescrever
   variáveis --bs-* sem tocar o CDN pré-compilado do Bootstrap.

   Opção A do UI_REBRAND_PLAN.md: um único arquivo, override via
   CSS variables, componentes Bootstrap que não propagam
   --bs-primary automaticamente (btn, alert, badge, form-check)
   recebem override explícito abaixo.
   ============================================================ */

/* ─────────── Brand tokens ─────────── */
:root {
    --geonex-navy:        #0f2e45;
    --geonex-navy-deep:   #0b1f2e;
    --geonex-navy-surface:#112a3c;
    --geonex-teal:        #1e6f7e;   /* primary — botões, links, ativos */
    --geonex-teal-light:  #2a93a6;
    --geonex-teal-bright: #36a7bd;
    --geonex-teal-dark:   #1a6b7c;
    --geonex-gold:        #c8a24a;
    --geonex-gold-light:  #e3c56a;
    --geonex-gold-deep:   #a9772c;
    --geonex-danger:      #ff6568;
    --geonex-success:     #198754;
    --geonex-body-bg:     #f7f7f4;
    --geonex-surface:     #ffffff;
    --geonex-line:        #e2e7ec;
    --geonex-muted:       #5b6b78;
    --geonex-fg:          #0f2e45;

    --geonex-radius-sm:   6px;
    --geonex-radius-md:   8px;
    --geonex-radius-lg:   12px;
    --geonex-transition:  .15s cubic-bezier(.4, 0, .2, 1);

    /* ─────────── Bootstrap 5.3 var overrides ─────────── */
    --bs-primary:            var(--geonex-teal);
    --bs-primary-rgb:        30, 111, 126;                 /* #1e6f7e */
    --bs-link-color:         var(--geonex-teal);
    --bs-link-color-rgb:     30, 111, 126;
    --bs-link-hover-color:   var(--geonex-teal-light);
    --bs-link-hover-color-rgb: 42, 147, 166;
    --bs-body-bg:            var(--geonex-body-bg);
    --bs-body-color:         var(--geonex-fg);
    --bs-body-color-rgb:     15, 46, 69;
    --bs-border-color:       var(--geonex-line);
    --bs-secondary-color:    var(--geonex-muted);
    --bs-font-sans-serif:    "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Ponte com tokens legados do v2.css (v2.css também é editado, mas
       esta ponte protege contra caches antigos e includes fora de ordem). */
    --osp-primary: var(--geonex-navy);
    --osp-accent:  var(--geonex-teal);
}

/* ─────────── Tipografia ─────────── */
body {
    font-family: var(--bs-font-sans-serif);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.osp-page-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: "Space Grotesk", "Space Grotesk Fallback", var(--bs-font-sans-serif);
    letter-spacing: -0.005em;
}

/* ─────────── Componentes Bootstrap que NÃO propagam --bs-primary ─────────── */

/* Botões primários */
.btn-primary {
    --bs-btn-bg:                    var(--geonex-teal);
    --bs-btn-border-color:          var(--geonex-teal);
    --bs-btn-hover-bg:              var(--geonex-teal-dark);
    --bs-btn-hover-border-color:    var(--geonex-teal-dark);
    --bs-btn-active-bg:             var(--geonex-teal-dark);
    --bs-btn-active-border-color:   var(--geonex-teal-dark);
    --bs-btn-disabled-bg:           var(--geonex-teal);
    --bs-btn-disabled-border-color: var(--geonex-teal);
    --bs-btn-focus-shadow-rgb:      30, 111, 126;
}
.btn-outline-primary {
    --bs-btn-color:                 var(--geonex-teal);
    --bs-btn-border-color:          var(--geonex-teal);
    --bs-btn-hover-bg:              var(--geonex-teal);
    --bs-btn-hover-border-color:    var(--geonex-teal);
    --bs-btn-hover-color:           #fff;
    --bs-btn-active-bg:             var(--geonex-teal-dark);
    --bs-btn-active-border-color:   var(--geonex-teal-dark);
    --bs-btn-focus-shadow-rgb:      30, 111, 126;
}

/* Backgrounds / text utilities */
.bg-primary          { background-color: var(--geonex-teal) !important; }
.text-primary        { color: var(--geonex-teal) !important; }
.border-primary      { border-color: var(--geonex-teal) !important; }
.link-primary,
a.link-primary       { color: var(--geonex-teal) !important; }
.link-primary:hover,
a.link-primary:hover { color: var(--geonex-teal-light) !important; }

/* Badges — .badge.bg-primary e .text-bg-primary usam classes utilitárias */
.badge.bg-primary,
.text-bg-primary { background-color: var(--geonex-teal) !important; color: #fff !important; }

/* Alerts */
.alert-primary {
    --bs-alert-bg:            color-mix(in srgb, var(--geonex-teal) 12%, #fff);
    --bs-alert-border-color:  color-mix(in srgb, var(--geonex-teal) 30%, #fff);
    --bs-alert-color:         var(--geonex-navy);
    --bs-alert-link-color:    var(--geonex-teal-dark);
}

/* Form controls */
.form-check-input:checked {
    background-color: var(--geonex-teal);
    border-color:     var(--geonex-teal);
}
.form-check-input:focus {
    border-color: var(--geonex-teal-light);
    box-shadow:   0 0 0 .25rem color-mix(in srgb, var(--geonex-teal) 25%, transparent);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--geonex-teal-light);
    box-shadow:   0 0 0 .25rem color-mix(in srgb, var(--geonex-teal) 20%, transparent);
}

/* Nav pills / links ativos */
.nav-link {
    color: var(--geonex-teal);
}
.nav-link:hover,
.nav-link:focus {
    color: var(--geonex-teal-dark);
}
.nav-link.active,
.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--geonex-teal);
}
.page-item.active .page-link {
    background-color: var(--geonex-teal);
    border-color:     var(--geonex-teal);
}
.page-link {
    color: var(--geonex-teal);
}
.page-link:hover {
    color: var(--geonex-teal-dark);
}

/* Progress bar cor default */
.progress-bar { background-color: var(--geonex-teal); }

/* Navbar principal — teal oficial GeoNEX (era navy escuro). Contraste com botão
   .active branco no --osp-accent, mantido pelo bloco .osp-navbar do v2.css. */
.osp-navbar {
    background: var(--geonex-teal) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--geonex-teal-dark) 60%, transparent);
}
.osp-navbar .navbar-brand,
.osp-navbar .nav-link,
.osp-navbar .btn {
    color: #ffffff;
}
.osp-navbar .nav-link.active,
.osp-navbar .nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

/* Body: garante que o novo body-bg vença o v2.css legado */
body.osp-body { background: var(--geonex-body-bg); color: var(--geonex-fg); }

/* ─────────── Dark mode ─────────── */
/* Ativado via [data-theme="dark"] no <html> (persistido em localStorage).
   Sem data-theme: aplica preferência do SO via prefers-color-scheme. */

:root[data-theme="dark"] {
    --geonex-body-bg:  #0b1f2e;
    --geonex-surface:  #112a3c;
    --geonex-line:     #1e3a52;
    --geonex-fg:       #e8eef4;
    --geonex-muted:    #8ea3b8;

    --bs-body-bg:      var(--geonex-body-bg);
    --bs-body-color:   var(--geonex-fg);
    --bs-body-color-rgb: 232, 238, 244;
    --bs-border-color: var(--geonex-line);
    --bs-secondary-color: var(--geonex-muted);
    --bs-tertiary-bg:  var(--geonex-surface);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --geonex-body-bg:  #0b1f2e;
        --geonex-surface:  #112a3c;
        --geonex-line:     #1e3a52;
        --geonex-fg:       #e8eef4;
        --geonex-muted:    #8ea3b8;

        --bs-body-bg:      var(--geonex-body-bg);
        --bs-body-color:   var(--geonex-fg);
        --bs-body-color-rgb: 232, 238, 244;
        --bs-border-color: var(--geonex-line);
        --bs-secondary-color: var(--geonex-muted);
        --bs-tertiary-bg:  var(--geonex-surface);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] body.osp-body {
    background: var(--geonex-body-bg);
    color: var(--geonex-fg);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.osp-body {
        background: var(--geonex-body-bg);
        color: var(--geonex-fg);
    }
}

/* Cards e superfícies no dark */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .osp-card {
    background-color: var(--geonex-surface);
    color: var(--geonex-fg);
    border-color: var(--geonex-line);
}
:root[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--geonex-fg);
    --bs-table-border-color: var(--geonex-line);
    --bs-table-striped-bg: color-mix(in srgb, var(--geonex-surface) 60%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--geonex-teal) 12%, transparent);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text {
    background-color: var(--geonex-navy-surface);
    color: var(--geonex-fg);
    border-color: var(--geonex-line);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--geonex-muted); }
:root[data-theme="dark"] .text-muted { color: var(--geonex-muted) !important; }
:root[data-theme="dark"] hr { border-color: var(--geonex-line); }

/* Botão toggle de tema no navbar */
.osp-theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    padding: .25rem .55rem;
    border-radius: var(--geonex-radius-sm);
    line-height: 1;
    transition: background var(--geonex-transition), border-color var(--geonex-transition);
}
.osp-theme-toggle:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
}
.osp-theme-toggle .bi { font-size: 1rem; vertical-align: -0.125em; }
/* Mostra ícone sun/moon conforme tema efetivo — CSS decide, JS só troca [data-theme] */
.osp-theme-toggle .icon-sun  { display: none; }
.osp-theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .osp-theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .osp-theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .osp-theme-toggle .icon-sun  { display: inline-block; }
    :root:not([data-theme="light"]) .osp-theme-toggle .icon-moon { display: none; }
}