/*
===================================================
NICHOLAS 26/09/2025

movendo estilo para arquivo main.css
===================================================
*/

/* 
===================================================
MILLENIO IDENTITY VARIABLES & UTILITIES 
===================================================
*/
:root {
  /* Brand Colors */
  --millenio-green: #00623e;
  --millenio-green-hover: #004d30;
  --millenio-danger: #d9534f;
  --millenio-danger-hover: #c9302c;

  /* Neutral Colors */
  --millenio-white: #ffffff;
  --millenio-black: #000000;
  --millenio-gray-light: #f9f9f9;
  --millenio-gray-border: #e0e0e0;

  /* Text & Gray Shades */
  --millenio-text-dark: #333;
  --millenio-text-muted: #555;
  --millenio-gray-lighter: #eee;
  --millenio-gray-medium: #ccc;

  /* Font Sizes */
  --millenio-font-xs: 12px;
  --millenio-font-sm: 14px;
  --millenio-font-md: 16px;
  --millenio-font-lg: 18px;
  --millenio-font-xl: 20px;
  --millenio-font-2xl: 24px;

  /* Fonts */
  --millenio-font-family: "Open Sans", sans-serif;
}

/* Background Utilities */
.bg-millenio {
  background-color: var(--millenio-green);
  color: var(--millenio-white);
}

.bg-millenio-hover:hover {
  background-color: var(--millenio-green-hover);
}

/* Text Utilities */
.text-millenio {
  color: var(--millenio-green);
}

.text-millenio-hover:hover {
  color: var(--millenio-green-hover);
}

/* Border Utilities */
.border-millenio {
  border-color: var(--millenio-green);
}

/* 
===================================================
GLOBAL COMPONENT STYLES 
===================================================
*/

/* 1. BUTTONS (.btn-millenio) */
.btn-millenio {
  background-color: var(--millenio-green);
  border-color: var(--millenio-green);
  color: var(--millenio-white);
  transition: all 0.3s ease;
}

.btn-millenio:hover,
.btn-millenio:focus,
.btn-millenio:active,
.btn-millenio.active,
.open > .dropdown-toggle.btn-millenio {
  background-color: var(--millenio-green-hover);
  border-color: var(--millenio-green-hover);
  color: var(--millenio-white);
}

/* Force icon colors inside buttons to be white */
.btn-millenio i,
.btn-millenio span {
  color: var(--millenio-white);
}

/* Danger Button Variant */
.btn-millenio-danger {
  background-color: var(--millenio-danger);
  border-color: var(--millenio-danger);
  color: var(--millenio-white);
}

.btn-millenio-danger:hover,
.btn-millenio-danger:focus {
  background-color: var(--millenio-danger-hover);
  border-color: var(--millenio-danger-hover);
  color: var(--millenio-white);
}

/* 2. PANELS & ACCORDIONS (Sidebar Items) */
/* Overriding standard Bootstrap .panel-default / .panel-heading */

/* .panel-group .panel-heading,
.accordion-toggle {
       We purposely don't force background on ALL panels, only specific ones if needed.
       But users often want the 'active' headers to be highlighted. 
       For now, let's target the sidebar layers specifically if possible, 
       or use a generic utility class we will apply to HTML. 
       
       However, based on previous session, the user wanted specific headers to be green.

} 
*/

/* Target specific ID for Layer Panel headers if known, or generic override */
#lstCardLayers .panel-heading {
  background-color: var(--millenio-green);
  color: var(--millenio-white);
  border-color: var(--millenio-green);
}

#lstCardLayers .panel-title,
#lstCardLayers .panel-title > a {
  color: var(--millenio-white);
}

/* 3. TABS (Nav-Tabs) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--millenio-green);
  border-top: 3px solid var(--millenio-green);
  /* Keeps background white usually */
}

/* 4. MODAL HEADERS (Generic) */
.modal-header {
  border-bottom: 2px solid var(--millenio-green);
}

/* 5. WIZARD STEPS (Thematic Map) */
.wizard-steps li.active span {
  border-color: var(--millenio-green);
  color: var(--millenio-green);
}

.wizard-steps li.completed span {
  border-color: var(--millenio-green);
  background-color: var(--millenio-green);
  color: var(--millenio-white);
}

.wizard-steps li.completed:after,
.wizard-steps li.active:after {
  background-color: var(--millenio-green);
}

/* 6. SWITCHERY (Toggle Switch) */
.switchery {
  border: 1px solid #dfdfdf;
  /* Fallback/Default border */
}

/* Override coloring for checked state usually handled by JS, 
   but we can force it via CSS if the JS sets a specific class or we target specific elements 
*/

/* 7. RANGE SLIDER (noUiSlider) */
.noUi-connect {
  background: var(--millenio-green);
}

.noUi-handle {
  border: 1px solid var(--millenio-green);
  box-shadow: none;
}

/* 8. MAGIC CHECKBOXES & RADIOS */

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
  border-color: var(--millenio-green);
}

.magic-radio:checked + label:after {
  background: var(--millenio-green);
}

.magic-checkbox:checked + label:after {
  background: var(--millenio-green);
  border-color: var(--millenio-green);
}

/* 9. TREEVIEW ICONS (Sidebar Layers) */
.jstree-default .jstree-clicked {
  background: var(--millenio-green-hover);
  border-radius: 2px;
  box-shadow: inset 0 0 1px #999;
}

/* 
===================================================
EXISTING STYLES (PRESERVED)
===================================================
*/

#map {
  width: 100%;
  /* FIX: Restored to 100% as this was the fix for whitespace */
  height: 100%;
}

.demo-set {
  background-color: var(--millenio-white);
  color: #5e5e5e;
  display: block;
  position: fixed;
  left: 150px;
  right: 150px;
  top: 150px;
  z-index: 99999;
  margin: 0 auto;
  width: auto;
  max-width: 1660px;
}

.demo-set-body.in {
  max-height: 600px;
  z-index: 20;
  box-shadow: 0 0 5px 1px rgb(0 0 0 / 15%);
}

.demo-set-body > .demo-set-content {
  padding: 10px 10px 20px;
  border-bottom: 5px solid #3b4146;
}

.leaflet-toolbar-icon .fa {
  color: var(--millenio-black);
}

.leaflet-color-swatch {
  background-color: var(--millenio-white);
}

.leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  background-color: var(--millenio-white);
}

/*
#myeasybar {
            position: fixed;
            z-index: 1000;
            top: 0px;
            left: 50px;
            
        }
*/

#myeasybar button {
  width: 35px;
  height: 30px;
  font-family: arial;
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  border-radius: 1px;
  border: 1px solid #e7e7e7;
}

#wrap {
  float: left;
  position: relative;
  left: 50%;
}

#content {
  float: left;
  position: relative;
  left: -50%;
  /* -» [Strictly for demo purposes].begin «- */
  /*background: #def;*/
  line-height: 25px;
  font-size: 15px;
  /* -» [Strictly for demo purposes].end «- */
}

#buttonPainel {
  color: var(--millenio-black);
}

/* 
===================================================
WEB SEARCH STYLES (Millenio Identity)
===================================================
*/

/* Dropdown Selected/Active Items */
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
  background-color: var(--millenio-green) !important;
  color: var(--millenio-white) !important;
}

/* Dropdown Focus State */
.bootstrap-select .dropdown-toggle:focus {
  outline: thin dotted var(--millenio-green) !important;
  outline: 5px auto var(--millenio-green) !important;
}

/* Search Input Focus */
.searchbox input.form-control:focus {
  border-color: var(--millenio-green);
  box-shadow: 0 0 0 1px var(--millenio-green);
}

/* Search Button Hover/Focus */
.searchbox .input-group-btn button:hover,
.searchbox .input-group-btn button:focus {
  color: var(--millenio-green);
}

/* Checkmark Color in Dropdowns */
.bootstrap-select .dropdown-menu li.selected a span.check-mark {
  color: var(--millenio-white) !important;
}

/* Dropdown Item Hover (Refinement) */
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
  background-color: var(--millenio-green) !important;
  color: var(--millenio-white) !important;
}

/* Dropdown Header 'Pesquisa:' (Refinement) */
.bootstrap-select .dropdown-menu .popover-title,
.bootstrap-select .dropdown-header {
  color: var(--millenio-green-hover) !important;
}

/* FORCE Text and Icon White on Hover */
.bootstrap-select .dropdown-menu li a:hover span.text,
.bootstrap-select .dropdown-menu li a:focus span.text,
.bootstrap-select .dropdown-menu li a:hover span,
.bootstrap-select .dropdown-menu li a:focus span,
.bootstrap-select .dropdown-menu li a:hover i,
.bootstrap-select .dropdown-menu li a:focus i {
  color: var(--millenio-white) !important;
}

/* 
===================================================
LAYERS SIDEBAR REFINEMENTS (Final Polish)
===================================================
*/

/* 1. Top Level Group Headers */
.dd-handle {
  background-color: var(--millenio-green) !important;
  color: var(--millenio-white) !important;
  border: 1px solid var(--millenio-green-hover) !important;
}

.dd-handle:hover {
  background-color: var(--millenio-green-hover) !important;
}

/* 2. Expand/Collapse Buttons (+ / -) */
/* Top Level (Green Layer): White Button, Green Icon */
.dd-item > button {
  background-color: var(--millenio-white) !important;
  color: var(--millenio-green) !important;
  border-radius: 4px;
  width: 20px !important;
  height: 18px !important;
  margin: 5px 5px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Top Level Icons */
.dd-item > button:before {
  color: var(--millenio-green) !important;
  display: block;
  width: 100%;
}

/* 3. Subgroups (Nested Lists - White Layer) */
/* User Request: Background Green, Icon White */
.dd-list .dd-list .dd-item > button {
  background-color: var(--millenio-green) !important;
  color: var(--millenio-white) !important;
}

.dd-list .dd-list .dd-item > button:before {
  color: var(--millenio-white) !important;
}

/* 4. Subgroup Handles */
.dd-list .dd-list .dd-handle {
  background-color: var(--millenio-white) !important;
  color: var(--millenio-green) !important;
  border: none !important;
  /* TEST: Remove border */
}

.dd-list .dd-list .dd-handle:hover {
  background-color: #f9f9f9 !important;
  color: var(--millenio-green-hover) !important;
}

/* 5. Global Sidebar Text Overrides */
.layer-toggle-text {
  color: var(--millenio-green-hover) !important;
}

.layer-back-to-top {
  background-color: var(--millenio-green) !important;
}

.layer-back-to-top:hover {
  background-color: var(--millenio-green-hover) !important;
}

/* 6. Switchery (Toggle Switches) & "Expand All" */
/* 6. Switchery (Toggle Switches) & "Expand All" */

/* Active State (Checked): Green Background & Border */
input:checked + .switchery {
  background-color: var(--millenio-green) !important;
  border: 1px solid var(--millenio-green) !important;
  box-shadow: none !important;
}

/* Inactive/Default State (Unchecked): */
/* User Request: 'Tire totalmente a borda' (Remove border completely) */
/* We add a light background so it's not invisible, but NO border */
.switchery {
  background-color: #e6e6e6 !important; /* Light Gray Track */
  border: none !important;
  box-shadow: none !important;
}

/* Ensure the knob (small) is white and has HIGH contrast (Shadow) */
/* User Request: 'aumente o contraste do bot�o em circulo' */
.switchery > small {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; /* Strong Shadow */
}



/* 
===================================================
SIDEBAR & CATEGORY REFINEMENTS (Millenio Green)
===================================================
*/

/* 1. Navigation Tabs (Active State) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--millenio-green) !important;
    color: var(--millenio-white) !important;
    border-color: var(--millenio-green) !important;
}

/* 2. Accordion/Panel Headers (Finance/Planning groups) */
.panel-heading,
.panel-info > .panel-heading,
.panel-primary > .panel-heading {
    background-color: var(--millenio-green) !important;
    border-color: var(--millenio-green) !important;
    color: var(--millenio-white) !important;
}

.panel-heading .panel-title,
.panel-heading .panel-title a {
    color: var(--millenio-white) !important;
}

/* 3. Main Navigation Menu Headers (with custom margin) */
#mainnav-menu > li > a {
    background-color: var(--millenio-green) !important;
    color: var(--millenio-white) !important;
    margin-right: 12px !important;
    border-radius: 0 4px 4px 0 !important;
}

#mainnav-menu > li > a i,
#mainnav-menu > li > a .menu-title {
    color: var(--millenio-white) !important;
}

#mainnav-menu > li.active > a,
#mainnav-menu > li.active-sub > a,
#mainnav-menu > li > a:hover {
    background-color: var(--millenio-green-hover) !important;
}

/* 4. Opacity Bar (Safe Method) */
input[type=range] {
  accent-color: var(--millenio-green) !important;
}

.custom-range::-webkit-slider-thumb {
  background-color: var(--millenio-green) !important;
}

.custom-range::-moz-range-thumb {
  background-color: var(--millenio-green) !important;
}

.custom-range::-ms-thumb {
  background-color: var(--millenio-green) !important;
}

/* 5. Switchery (Layer toggles) */
.switchery {
    border-color: var(--millenio-green) !important;
}

.switchery > small {
    background-color: var(--millenio-white) !important;
}