/* nzipl_theme.css */
/* Uses CSS variables defined in nzipl_theme.R (:root { --nz-... }) */

/* ===== PAGE BACKGROUND ===== */
body,
.container-fluid,
.main-container,
.bslib-page-container {
    background-color: var(--nz-page-bg);
    color: #111111;
}

/* Try to eliminate surprise grey panels some modules introduce */
.tab-content,
.tab-pane,
.bslib-grid,
.bslib-gap-spacing,
.shiny-output-error,
.html-fill-container {
    background-color: transparent !important;
}

/* ===== NAVBAR ===== */
.navbar .container,
.navbar .container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.navbar-brand {
    margin-right: 1rem !important;
}

.navbar-brand img {
    max-height: var(--nz-logo-max-height) !important;
    width: auto !important;
    height: auto !important;
}

.navbar,
.navbar-default,
.navbar-dark,
.navbar-static-top,
.navbar-fixed-top,
.navbar .container-fluid {
    background-color: var(--nz-nav-bg) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: var(--nz-navbar-height) !important;
}

.bslib-layout-sidebar {
    align-items: flex-start !important;
}

.navbar {
    display: flex !important;
    align-items: center !important;
}

/* 1) Navbar container height: single source of truth */
.navbar,
.navbar .container,
.navbar .container-fluid {
    min-height: var(--nz-navbar-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2) Vertically center items without forcing their height */
.navbar-brand,
.navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    color: var(--nz-nav-fg) !important;
    background-color: transparent !important;
}

/* Optional: control how “tall” the click area is.
   If you want it to match the navbar height, keep this.
   If you want a slimmer feel, delete this block. */
.navbar-nav .nav-link {
    min-height: var(--nz-navbar-height) !important;
}

/* 3) Brand typography + spacing */
.navbar-brand {
    font-weight: 700;
    font-size: 20px;
    margin-right: 0.75rem !important;
    /* 2rem is excessive */
    color: var(--nz-nav-fg) !important;
}

/* 4) Logo size: independent knob (DO NOT tie to navbar height) */
.navbar-brand img {
    max-height: var(--nz-logo-max-height) !important;
    height: auto !important;
    width: auto !important;
    margin-right: 0.75rem;
}

.navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    border-bottom: 4px solid transparent;
    margin: 0 0.25rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    border-bottom: 4px solid var(--nz-accent);
    color: var(--nz-nav-hover-fg) !important;
    background-color: var(--nz-nav-hover-bg) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    font-weight: 700;
    border-bottom: 4px solid var(--nz-accent);
    color: var(--nz-nav-active-fg) !important;
    background-color: var(--nz-nav-active-bg) !important;
}

/* Dropdowns in navbar */
.navbar .dropdown-menu {
    background-color: var(--nz-dropdown-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
}

.navbar .dropdown-item {
    color: var(--nz-dropdown-fg) !important;
    background-color: transparent !important;
    font-weight: 500;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--nz-dropdown-hover-fg) !important;
    background-color: var(--nz-dropdown-hover-bg) !important;
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    color: var(--nz-dropdown-active-fg) !important;
    background-color: var(--nz-dropdown-active-bg) !important;
}

/* ===== CARDS (GLOBAL) ===== */
.card,
.panel,
.well,
.bslib-card {
    background-color: var(--nz-card-bg);
    border-radius: 10px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bslib-card-body {
    background-color: var(--nz-card-bg);
}

.card-header,
.bslib-card-header {
    background-color: var(--nz-filter-bg);
    color: var(--nz-on-dark-fg);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-weight: 650;
}

/* ===== FILTER PANELS / SIDEBARS ===== */
.bslib-sidebar,
.bslib-sidebar-layout .bslib-sidebar,
.nz-sidebar,
.nz-sidebar .card,
.nz-sidebar .panel,
.nz-sidebar .well {
    background-color: var(--nz-filter-bg) !important;
    color: var(--nz-on-dark-fg) !important;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18);
    padding: 16px 18px;
}

/* The “white text” from your screenshots */
.bslib-sidebar,
.bslib-sidebar *,
.nz-sidebar,
.nz-sidebar * {
    color: var(--nz-on-dark-fg);
}

.bslib-sidebar .help-block,
.bslib-sidebar .form-text,
.nz-sidebar .help-block,
.nz-sidebar .form-text {
    color: var(--nz-on-dark-fg-muted) !important;
}

/* ===== INPUTS (base) ===== */
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input,
.form-control,
.shiny-input-container input,
.shiny-input-container select {
    background-color: var(--nz-input-bg);
    border-color: var(--nz-nav-bg);
    border-radius: 6px;
    color: #111111;
}

/* ===== SELECTIZE (multi tags) ===== */
.selectize-control.multi .selectize-input>div.item {
    background: var(--nz-tag-bg) !important;
    color: var(--nz-tag-fg) !important;
    border: 1px solid var(--nz-tag-border) !important;
    border-radius: 6px !important;
    font-weight: 600;
}

.selectize-control.multi .selectize-input>div.item:hover {
    background: var(--nz-tag-hover-bg) !important;
    color: var(--nz-tag-hover-fg) !important;
    border-color: var(--nz-tag-hover-bg) !important;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
    background: var(--nz-input-bg) !important;
    border: 1px solid var(--nz-nav-bg) !important;
}

.selectize-dropdown .active {
    background: var(--nz-tag-hover-bg) !important;
    color: var(--nz-tag-hover-fg) !important;
}

/* ===== CHECKBOX / RADIO selected + hover ===== */
.form-check-input,
input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--nz-accent);
}

.form-check-input:checked {
    background-color: var(--nz-accent) !important;
    border-color: var(--nz-accent) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(230, 147, 92, 0.35) !important;
    border-color: var(--nz-accent) !important;
}

/* ===== SLIDERS (Shiny ionRangeSlider) ===== */
.irs--shiny .irs-line {
    background: var(--nz-slider-track) !important;
    border: none !important;
    height: 8px !important;
    border-radius: 999px !important;
    opacity: 1 !important;
}

.irs--shiny .irs-bar {
    background: var(--nz-slider-fill) !important;
    height: 8px !important;
    border: none !important;
    border-radius: 999px !important;
}

.irs--shiny .irs-handle>i:first-child {
    background: var(--nz-slider-handle-bg) !important;
    border: 2px solid var(--nz-slider-handle-border) !important;
    width: 18px !important;
    height: 18px !important;
    top: 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.irs--shiny .irs-from,
.irs--shiny .irs-to,
.irs--shiny .irs-single {
    background: var(--nz-slider-label-bg) !important;
    color: var(--nz-slider-label-fg) !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.irs--shiny .irs-min,
.irs--shiny .irs-max {
    background: transparent !important;
    color: var(--nz-slider-tick-fg) !important;
    font-weight: 650 !important;
}

.irs--shiny .irs-grid-text {
    color: var(--nz-slider-tick-fg) !important;
    /* years / ticks */
    font-weight: 650 !important;
}

.irs--shiny .irs-grid-pol {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* ===== DATA TABLES ===== */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: var(--nz-table-odd);
}

table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--nz-table-header);
    color: var(--nz-on-dark-fg);
    border-bottom: 2px solid var(--nz-accent);
}

/* ===== LINKS & BUTTONS ===== */
a,
a:visited {
    color: var(--nz-accent);
}

a:hover,
a:focus {
    color: var(--nz-accent);
}

.btn-primary {
    background-color: var(--nz-accent);
    border-color: var(--nz-accent);
    color: #0E2B18;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #EB9D53;
    border-color: #EB9D53;
    color: #0E2B18;
}

/* ===== STAT CARDS (side mini-panels) ===== */
.card.nz-stat-card,
.nz-stat-card.card {
    background-color: var(--nz-stat-card-bg);
    border-radius: 1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.card.nz-stat-card .card-body,
.nz-stat-card .card-body {
    background-color: var(--nz-stat-card-inner-bg);
    border-radius: 0.75rem;
}

/* --- Fix selectize single-select text color --- */

/* Selected value (single select) */
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
    color: #2b2b2b !important;
    /* dark grey */
}

/* Placeholder text */
.selectize-control.single .selectize-input input::placeholder {
    color: #666666 !important;
}

/* Dropdown options */
.selectize-dropdown,
.selectize-dropdown .option {
    color: #2b2b2b;
}

/* --- Selectize single: selected value text --- */
.selectize-control.single .selectize-input .item,
.selectize-control.single .selectize-input>div.item {
    color: #2b2b2b !important;
    /* dark grey */
}

/* If the control is disabled/read-only, keep it dark too */
.selectize-control.single .selectize-input.disabled .item {
    color: #2b2b2b !important;
}