/* ============================================================
 * ECO-MED SIG — Theme Lizmap (carte)
 * ============================================================ */

/* --- IMPORT GOOGLE FONT --- */
@import url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- VARIABLES ECO-MED (map) --- */
:root {
  --header-color: #1a3c2a;
  --header-background-image: linear-gradient(135deg, #1a3c2a 0%, #2d5a3f 50%, #1a3c2a 100%);
  --color-background-primary: #f8f6f1ee;
  --color-background-primary-content: #ffffffee;
  --color-text-primary: #2c3e2d;
  --color-text-primary-content: #2c3e2d;
  --color-contrasted-elements: #3d7a54;
  --color-contrasted-elements-light: #d4e8d9;
  --color-contrasted-text: #ffffff;
  --color-dark-gray-elements: #2c3e2d;

  --ecomed-vert-foret: #1a3c2a;
  --ecomed-vert-sauge: #3d7a54;
  --ecomed-vert-clair: #5b9e6f;
  --ecomed-vert-pale: #d4e8d9;
  --ecomed-beige: #f8f6f1;
  --ecomed-terre: #8b6f47;
  --ecomed-accent: #e8a838;
  --ecomed-radius: 8px;
  --ecomed-shadow: 0 2px 12px rgba(26, 60, 42, 0.08);
  --ecomed-shadow-hover: 0 4px 20px rgba(26, 60, 42, 0.15);
  --ecomed-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- GLOBAL MAP FONT --- */
#map-content,
#dock,
#mini-dock,
#right-dock,
#bottom-dock,
#sub-dock,
#mapmenu,
#header {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- CHECKBOXES --- */
#dock .tree button.checkbox.checked,
#right-dock .tree button.checkbox.checked,
#bottom-dock .tree button.checkbox.checked,
#mini-dock .tree button.checkbox.checked,
#tmLayers .tree button.checkbox.checked {
  background-color: var(--ecomed-vert-sauge);
  border-radius: 3px;
}

/* --- HEADER CARTE --- */
#header {
  background-color: var(--ecomed-vert-foret);
  background-image: var(--header-background-image);
  background-repeat: repeat;
  background-size: cover;
  color: white;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Force transparent backgrounds on header children so gradient shows through */
#headermenu,
#headermenu .navbar-inner,
#headermenu .navbar,
#headermenu .nav,
#title {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#title h1 {
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#title h2 {
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* --- HEADER NAVBAR --- */
#headermenu .navbar-inner {
  min-height: unset !important;
  padding: 0 !important;
}

#headermenu .navbar-search .icon {
  background-color: transparent;
  background-position: -400px 0;
}

#header-clear {
  background-position: -875px 0 !important;
}

#headermenu .btn-locate-clear.icon {
  background-color: transparent;
  background-position: -875px 0;
  margin-top: 5px;
}

#headermenu .dropdown-menu {
  background-color: white;
  border: 1px solid var(--ecomed-vert-pale);
  border-radius: var(--ecomed-radius);
  box-shadow: var(--ecomed-shadow-hover);
}

#headermenu .dropdown-menu::after {
  border-bottom: 6px solid white;
}

#headermenu .dropdown-caret .caret-inner {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(255, 255, 255, 0.9);
}

#headermenu .dropdown-caret .caret-outer {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(0, 0, 0, 0.1);
}

#headermenu .dropdown-inner .items li > a,
#headermenu .dropdown-menu > li > a {
  color: var(--ecomed-vert-foret);
  font-family: 'Inter', sans-serif;
  padding: 8px 14px;
  border-radius: 4px;
  margin: 2px 6px;
  transition: var(--ecomed-transition);
}

#headermenu .dropdown-inner .items li > a:hover,
#headermenu .dropdown-menu > li > a:hover,
#headermenu .dropdown-inner .items li > a:focus,
#headermenu .dropdown-menu > li > a:focus {
  color: white;
  background-color: var(--ecomed-vert-sauge);
}

/* Search bar — high visibility on dark header */
#headermenu .navbar-search input,
#headermenu input[type=text],
#search-query {
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--ecomed-vert-foret) !important;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  transition: var(--ecomed-transition);
  min-width: 180px;
}

#headermenu .navbar-search input:focus,
#headermenu input[type=text]:focus,
#search-query:focus {
  background: white !important;
  border-color: var(--ecomed-accent) !important;
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.25) !important;
  color: var(--ecomed-vert-foret) !important;
}

#headermenu .navbar-search input::placeholder,
#search-query::placeholder {
  color: rgba(26, 60, 42, 0.5) !important;
}

/* Navbar icons */
.navbar .nav .metadata .icon { background-position: -125px 0; }
.navbar .nav .metadata a:hover .icon,
.navbar .nav .metadata.active a .icon { background-position: -100px 0; }

.navbar .nav .map .icon { background-position: -75px 0; }
.navbar .nav .map a:hover .icon,
.navbar .nav .map.active a .icon { background-position: -50px 0; }

.navbar .nav .legend .icon { background-position: -75px 0; }
.navbar .nav .legend a:hover .icon,
.navbar .nav .legend.active a .icon { background-position: -50px 0; }

.navbar .nav .locate .icon { background-position: -175px 0; }
.navbar .nav .locate a:hover .icon,
.navbar .nav .locate.active a .icon { background-position: -150px 0; }

.navbar .nav .print .icon { background-position: -375px 0; }
.navbar .nav .print a:hover .icon,
.navbar .nav .print.active a .icon { background-position: -350px 0; }

.navbar .nav .edition .icon { background-position: -475px 0; }
.navbar .nav .edition a:hover .icon,
.navbar .nav .edition.active a .icon { background-position: -450px 0; }

.navbar .nav .measure .icon { background-position: -275px 0; }
.navbar .nav .measure a:hover .icon,
.navbar .nav .measure.active a .icon { background-position: -250px 0; }

.navbar .nav .geolocation .icon { background-position: -325px 0; }
.navbar .nav .geolocation a:hover .icon,
.navbar .nav .geolocation.active a .icon { background-position: -300px 0; }

/* --- MENU LATERAL GAUCHE (mapmenu) --- */
#mapmenu {
  background: var(--ecomed-vert-foret);
  border-radius: 0 12px 12px 0;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  min-width: 46px;
  width: auto !important;
  overflow: visible !important;
}

#mapmenu .nav-list {
  width: 100%;
  overflow: visible !important;
}

#mapmenu .nav-list > li {
  width: 100%;
  overflow: visible !important;
}

#mapmenu .nav-list > li > a {
  border-radius: 6px;
  margin: 2px 3px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 28px;
  overflow: visible !important;
  transition: var(--ecomed-transition);
}

#mapmenu .nav-list > li > a .icon {
  display: block;
  min-width: 20px;
  min-height: 20px;
}

#mapmenu .nav-list > li > a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

#mapmenu .nav-list > li.active > a {
  background-color: var(--ecomed-vert-sauge);
}

#mapmenu .nav-list > li.edition.edition-pending:not(.active) #button-edition {
  background-color: var(--ecomed-vert-pale);
}

/* --- BOUTONS ZOOM / NAV MAP --- */
#navbar button.btn {
  background-color: white;
  color: var(--ecomed-vert-foret);
  border: none;
  border-radius: var(--ecomed-radius);
  box-shadow: var(--ecomed-shadow);
  margin: 2px 0;
  transition: var(--ecomed-transition);
}

#navbar button.btn:hover {
  background-color: var(--ecomed-vert-sauge);
  color: white;
  box-shadow: var(--ecomed-shadow-hover);
  transform: scale(1.05);
}

#navbar {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--ecomed-shadow);
}

/* --- DOCKS (PANNEAUX) --- */

/* Background panneaux */
#dock,
#mini-dock,
#bottom-dock,
#right-dock,
#sub-dock,
.lizmapPopup.olPopup,
#map-content .lizmapPopup {
  background-color: var(--ecomed-beige) !important;
  font-family: 'Inter', sans-serif;
}

/* Metadata panel */
#metadata {
  background-color: var(--color-background-primary-content) !important;
}

/* Content div avec fond blanc */
#toolbar div.menu-content,
#menu div.menu-content,
#dock div.menu-content,
#sub-dock div.menu-content,
#mini-dock div.menu-content,
#right-dock div.menu-content,
div.modal div.menu-content,
#bottom-dock div.bottom-content {
  background-color: var(--color-background-primary-content);
  border-radius: 6px;
}

/* Bordures panneaux */
#dock,
#mini-dock,
#sub-dock {
  border: none;
  border-radius: 0 12px 12px 0;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
}

#right-dock {
  border: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
}

/* Titre onglets panneaux */
#dock-tabs > li > a,
#right-dock-tabs > li > a,
#bottom-dock-tabs > li > a {
  color: var(--ecomed-vert-foret);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border-radius: 6px 6px 0 0;
  transition: var(--ecomed-transition);
}

#dock-tabs > li.active > a,
#right-dock-tabs > li.active > a,
#bottom-dock-tabs > li.active > a {
  border-bottom: 3px solid var(--ecomed-vert-sauge);
}

/* Separator sous les tabs */
#dock > div > ul.nav.nav-tabs,
#mini-dock > div > ul.nav.nav-tabs,
#right-dock > div > ul.nav.nav-tabs,
#bottom-dock > div > ul.nav.nav-tabs,
#mini-dock h3,
#sub-dock h3,
.dock-subtitle {
  border-bottom: 2px solid var(--ecomed-vert-pale);
}

/* Titres H3 dans les panneaux */
#toolbar h3,
#menu h3,
#dock h3,
#sub-dock h3,
#mini-dock h3,
#right-dock h3,
div.modal h3,
.dock-subtitle {
  color: var(--ecomed-vert-sauge);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

/* Icones glyphicons inverses dans les docks (pour theme clair) */
#dock .icon-white,
#mini-dock .icon-white,
#right-dock .icon-white,
#bottom-dock .icon-white {
  filter: invert(1);
}

/* Tab icons dark */
#nav-tab-switcher a::before { background-position: -50px 0; }
#nav-tab-metadata a::before { background-position: -100px 0; }
#nav-tab-edition a::before { background-position: -450px 0; }
#nav-tab-filter a::before { background-position: -400px 0; }

#mini-dock .locate .icon { background-position: -150px 0 !important; }
#mini-dock .btn.btn-locate-clear { background-position: -850px 0 !important; }
#dock .baselayer .icon { background-position: -700px 0 !important; }
#mini-dock .measure .icon { background-position: -250px 0 !important; }
#mini-dock .geolocation .icon { background-position: -300px 0 !important; }
#mini-dock .tooltip-layer .icon { background-position: -750px 0 !important; }
#mini-dock .print .icon { background-position: -350px 0 !important; }
#mini-dock .permaLink .icon { background-position: -650px 0 !important; }

#mini-dock #action div.action h3 span.icon { filter: invert(0); }
#sub-dock .sub-metadata h3 .icon { background-position: -100px 0; }

/* --- BOTTOM DOCK --- */
#bottom-dock {
  border-top: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
}

#bottom-dock div.bottom-content {
  border: none;
  border-top: 2px solid var(--ecomed-vert-pale) !important;
}

/* --- MENU CONTENT --- */
#menu {
  background: var(--ecomed-beige);
}

#menu .ui-icon-locate-open {
  background-position: -16px -16px;
}

#toolbar h3 .icon,
#menu h3 .icon {
  background-image: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/sprite_20_tools.png);
}

#toolbar .baselayer h3 .icon,
#menu .baselayer h3 .icon { background-position: -725px 0; }
#toolbar .switcher h3 .icon,
#menu .switcher h3 .icon { background-position: -75px 0; }
#toolbar .locate h3 .icon,
#menu .locate h3 .icon { background-position: -175px 0; }
#toolbar .geolocation h3 .icon,
#menu .geolocation h3 .icon { background-position: -325px 0; }
#toolbar .print h3 .icon,
#menu .print h3 .icon { background-position: -375px 0; }
#toolbar .measure h3 .icon,
#menu .measure h3 .icon { background-position: -275px 0; }
#toolbar .edition h3 .icon,
#menu .edition h3 .icon { background-position: -675px 0; }

/* Timemanager */
#toolbar #timemanager-menu h3 .icon,
#menu #timemanager-menu h3 .icon { background-image: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/sprite_timemanager.png); }

.navbar .navbar-inner .timemanager .icon { background-image: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/sprite_timemanager.png); }
.navbar .nav .timemanager .icon { background-position: 0 0; }
.navbar .nav .timemanager a:hover .icon,
.navbar .nav .timemanager.active a .icon { background-position: -20px 0; }
#toolbar .timemanager h3 .icon,
#menu .timemanager h3 .icon { background-position: -20px 0; }

#tmCurrentValue, #tmNextValue {
  font-size: 8pt;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
}

/* --- MAP CONTENT --- */
#map-content {
  background: var(--ecomed-beige);
}

#close-menu {
  border-bottom: solid 1px var(--ecomed-vert-pale);
}

#content.mobile #toolbar {
  background: var(--ecomed-beige);
}

/* --- ICONS & SPRITES --- */
#content .ui-icon {
  background-image: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/sprite_menu.png);
}

#content .ui-icon-open-menu {
  background-position: -16px -80px;
  background-color: var(--ecomed-beige);
}

#content .ui-icon-close-menu {
  background-position: 0 -96px;
}

/* --- TOOLBAR --- */
#toolbar .title .btn, #menu .title .btn {
  background: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/sprite_menu_tools.png) no-repeat right;
}

#toolbar .title .btn.btn-error {
  background: none;
  color: var(--ecomed-danger, #c0392b);
}

#toolbar .title .btn.btn-locate-clear { background-position: 0 0; }
#toolbar .title .btn.btn-locate-clear:hover { background-position: -20px 0; }
#toolbar .title .btn.btn-print-clear { background-position: -20px -100px; }
#toolbar .title .btn.btn-print-clear:hover { background-position: 0 -100px; }
#toolbar .title .btn.btn-stop { background-position: 0 -20px; }
#toolbar .title .btn.btn-stop:hover { background-position: -20px -20px; }

#toolbar .menu-content .btn.btn-success {
  background-color: var(--ecomed-vert-clair);
  background-image: none;
  border-radius: var(--ecomed-radius);
}

/* Selects */
#baselayer-menu div.baselayer-select,
#switcher div.baselayer-select,
#locate div.locate-layer {
  border: 1px solid var(--ecomed-vert-pale);
  border-radius: 6px;
  background: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/123_click.png) no-repeat right;
}

#baselayer-menu div.baselayer-select select,
#locate div.locate-layer select {
  background: transparent;
  color: var(--ecomed-vert-foret);
  font-family: 'Inter', sans-serif;
}

#locate div.locate-layer .custom-combobox-toggle {
  background: url(/index.php/view/media/getMedia?repository=montpellier&project=events&path=media%2Fthemes%2Fdefault%2Fcss%2F/images/123_click.png) no-repeat right -5px;
}

#locate div.locate-layer .custom-combobox-input {
  background: none;
  color: var(--ecomed-vert-foret);
}

.ui-autocomplete.ui-menu .ui-menu-item a {
  background: none;
  color: var(--ecomed-vert-foret);
  font-family: 'Inter', sans-serif;
  padding: 6px 12px;
}

.ui-autocomplete.ui-menu .ui-menu-item a:hover {
  background-color: var(--ecomed-vert-pale);
}

/* --- POPUP --- */
.lizmapPopup {
  border-radius: 10px !important;
  box-shadow: var(--ecomed-shadow-hover) !important;
  border: none !important;
}

.lizmapPopup .olPopupCloseBox {
  border-radius: 50%;
  transition: var(--ecomed-transition);
}

.lizmapPopup .lizmapPopupTitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ecomed-vert-foret);
}

.lizmapPopup .lizmapPopupDiv table {
  font-family: 'Inter', sans-serif;
}

/* --- OVERVIEW BOX --- */
#overview-box {
  border-radius: var(--ecomed-radius);
  box-shadow: var(--ecomed-shadow);
  overflow: hidden;
}

/* --- ECHELLE --- */
.olControlScaleLine {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
}

/* --- LOADING SPINNER --- */
#loading {
  background-color: rgba(248, 246, 241, 0.8);
}

/* --- BOUTONS CARTE (edition, etc.) --- */
button.btn,
a.btn,
input.btn,
label.btn {
  border-radius: var(--ecomed-radius);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: var(--ecomed-transition);
}

/* --- TABLES ATTRIBUTAIRES --- */
.dataTables_wrapper {
  font-family: 'Inter', sans-serif;
}

.dataTables_wrapper table.dataTable thead th {
  background: var(--ecomed-vert-foret);
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: var(--ecomed-vert-pale) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ecomed-vert-sauge) !important;
  color: white !important;
  border: none !important;
}

/* --- EDITION PANEL --- */
#edition-modal .modal-header,
.edition-form-container h3 {
  background: var(--ecomed-vert-foret);
  color: white;
}

/* --- TOOLTIP --- */
.tooltip-inner {
  background: var(--ecomed-vert-foret);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  padding: 6px 10px;
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--ecomed-vert-foret);
}

/* --- SMOOTH TRANSITIONS GLOBALES --- */
#dock,
#mini-dock,
#right-dock,
#bottom-dock,
#sub-dock {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}