/* =====================================================================
   ux-quickwins.css — itens obrigatorios da PoC Mata de Sao Joao:
     (1) tema claro/escuro dinamico
     (2) widget de fixacao de escala (1:N)
   O portal NAO usa variaveis CSS; as cores sao literais. O tema escuro
   e', portanto, uma camada de override por PADRAO DE CLASSE sobre as
   superficies claras (paineis/modais/toolbars/forms/tabelas).
   ===================================================================== */

/* ------------------------ 1. TEMA ESCURO ------------------------ */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background:#0e1621; color:#dfe6ef; }
html[data-theme="dark"] #map { background:#0e1621; }

/* superficies: paineis, modais, toolbars, popups, menus, cards, controles OL */
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] [class*="modal"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="toolbar"],
html[data-theme="dark"] [class*="popup"],
html[data-theme="dark"] [class*="dropdown"],
html[data-theme="dark"] [class*="-menu"],
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] .ol-control,
html[data-theme="dark"] .ol-popup {
  background-color:#18222e !important;
  color:#dfe6ef !important;
  border-color:#2b3947 !important;
}

/* cabecalhos internos um tom acima */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] [class*="-header"] {
  background-color:#1f2b39 !important;
  color:#eaf1f8 !important;
  border-color:#2b3947 !important;
}

/* form controls */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color:#0f1a24 !important;
  color:#dfe6ef !important;
  border-color:#33414f !important;
}
html[data-theme="dark"] ::placeholder { color:#8aa0b5 !important; }

/* tabelas */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  background-color:#18222e !important;
  color:#dfe6ef !important;
  border-color:#2b3947 !important;
}
html[data-theme="dark"] th { background-color:#1f2b39 !important; }
html[data-theme="dark"] tr:nth-child(even) td { background-color:#151f2a !important; }

/* botoes de ferramenta / controles OL */
html[data-theme="dark"] .ol-control button { background-color:#243140 !important; color:#dfe6ef !important; }
html[data-theme="dark"] .ol-control button:hover { background-color:#2e3d4f !important; }
html[data-theme="dark"] .tool-btn,
html[data-theme="dark"] .compact-toolbar-btn { background-color:#243140 !important; border-color:#33414f !important; }

/* links e divisores */
html[data-theme="dark"] a { color:#7db4ff; }
html[data-theme="dark"] hr { border-color:#2b3947 !important; }

/* botao de alternar tema (header) */
#btnThemeToggle { font-size:15px; line-height:1; }

/* ------------------------ 2. WIDGET DE ESCALA ------------------------ */
/* "Logado como <user>" e' redundante (o usuario ja aparece no header) */
#loginStatus { display: none !important; }

/* alinhada com o minimapa/overview (left:8px, width:160px, logo acima) */
#scaleWidget {
  position:fixed; left:8px; bottom:40px; z-index:1100;
  width:160px; box-sizing:border-box;
  display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.94); border:1px solid #b9c4d0; border-radius:6px;
  padding:3px 6px; font:12px Arial,sans-serif; color:#1a2533;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#scaleWidget label { font-weight:700; flex:0 0 auto; }
#scaleWidget input {
  flex:1 1 auto; min-width:0; border:1px solid #c7c7c7; border-radius:4px; padding:2px 5px;
  font:12px Arial,sans-serif; text-align:right;
}
#scaleWidget button {
  border:1px solid #003b73; background:#003b73; color:#fff; border-radius:4px;
  padding:2px 9px; cursor:pointer; font-weight:700;
}
#scaleWidget button:hover { background:#0a4d8f; }
html[data-theme="dark"] #scaleWidget { background:#18222e; border-color:#2b3947; color:#dfe6ef; }
html[data-theme="dark"] #scaleWidget input { background:#0f1a24; color:#dfe6ef; border-color:#33414f; }

/* ------ sino + tema ao lado da estrela: MESMO estilo da estrela ------ */
/* sem contorno, sem fundo branco — fundo = azul da barra (transparente) */
.title_logo #starsToggle { margin-right: 4px; }
.title_logo #btnPDNotifs,
.title_logo #btnThemeToggle {
  background: transparent; border: none; box-shadow: none;
  padding: 0 3px; margin: 0; cursor: pointer;
  font-size: 14px; line-height: 1; vertical-align: middle; color: inherit;
}
.title_logo #btnPDNotifs:hover,
.title_logo #btnThemeToggle:hover { background: transparent; filter: brightness(1.2); }