/* =============================================================================
   EOMAR — custom.css
   Stili statici dell'applicazione.
   I colori dinamici (sidebar, header, card) sono iniettati inline da ui.R
   perché dipendono da config_base$theme$sidebar_color a runtime.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. LAYOUT BASE
   ----------------------------------------------------------------------------- */

.content-wrapper {
  background-color: white !important;
}


/* -----------------------------------------------------------------------------
   2. DARK MODE — Tabelle DataTables
   ----------------------------------------------------------------------------- */

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: #ffffff !important;
}

body.dark-mode table.dataTable tbody tr {
  background-color: #343a40 !important;
  color: #ffffff !important;
}

body.dark-mode table.dataTable thead th {
  color: #ffffff !important;
  border-bottom-color: #6c757d !important;
}

body.dark-mode .dataTables_wrapper input,
body.dark-mode .dataTables_wrapper select {
  background-color: #343a40 !important;
  color: white !important;
  border-color: #6c757d !important;
}


/* -----------------------------------------------------------------------------
   3. DARK MODE — Pulsanti DT
   ----------------------------------------------------------------------------- */

body.dark-mode .dt-button {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border: 1px solid #adb5bd !important;
}

body.dark-mode .dt-button:hover {
  background-color: #5a6268 !important;
}


/* -----------------------------------------------------------------------------
   4. DARK MODE — Testi tab Info/Help
   ----------------------------------------------------------------------------- */

body.dark-mode .tab-pane {
  color: #ffffff !important;
  background-color: #343a40 !important;
  padding: 15px;
  border-radius: 5px;
}

body.dark-mode .tab-pane h3,
body.dark-mode .tab-pane h4,
body.dark-mode .tab-pane h5,
body.dark-mode .tab-pane p,
body.dark-mode .tab-pane ul,
body.dark-mode .tab-pane ol,
body.dark-mode .tab-pane li {
  color: #ffffff !important;
}

body.dark-mode .tab-pane a {
  color: #63bef0 !important;
  text-decoration: underline;
}


/* -----------------------------------------------------------------------------
   6. TOOLTIP ICONA INFO (Layers loaded)
   ----------------------------------------------------------------------------- */

.eomar-info-icon {
  display: inline-block;
  margin-left: 6px;
  color: #17a2b8;
  font-size: 0.95em;
  cursor: help;
  vertical-align: middle;
  position: relative;
}

/* Tooltip nativo via attributo title — visibile su hover */
.eomar-info-icon:hover {
  color: #117a8b;
}


/* -----------------------------------------------------------------------------
   7. SPINNER E MASCHERA DI CARICAMENTO
   ----------------------------------------------------------------------------- */

.loading-mask {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #333333 !important;
}

.loading-mask .spinner-border {
  border-color: #007bff !important;
  border-right-color: transparent !important;
}

body.dark-mode .loading-mask {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: #e9ecef !important;
}

body.dark-mode .loading-mask h4 {
  color: #e9ecef !important;
}

body.dark-mode .loading-mask .spinner-border {
  border-color: #e9ecef !important;
  border-right-color: transparent !important;
}