/* ============================================================================
// ATMOSVDI - FRONTEND | CSS - COMPONENTS.CSS
// Arquivo : /home/aofilhoc/add-idigital/dev/flo/css/components.css
// Versão App : 6.65.2
// Versão : 1.0.0
// Data : 17/07/2026 - 23:25:00
// Foco : Componentes Dinâmicos e Módulos extraídos do JS
// ============================================================================ */

/* --- Extraído de app.js (injectGlobalUIStyles) --- */
#panel-left, #panel-right { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 1000 !important; }
.map-control-btn, .floating-btn { z-index: 800 !important; }
#panel-left { padding: 15px 7.5px !important; background: #FFFFFF !important; border-right: 1px solid var(--sys-color-border) !important; }
#panel-right { padding: 15px !important; background: #FFFFFF !important; border-left: 1px solid var(--sys-color-border) !important; }
.panel-toggle, .btn-lock-panel { background: var(--sys-color-primary) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--sys-color-primary) !important; color: #FFFFFF !important; }
.panel-toggle:hover, .btn-lock-panel:hover { filter: brightness(0.9) !important; }
#station-list-container, #analytics-content-container { padding: 0 !important; margin: 0 !important; }
.modules-grid { display: flex !important; flex-wrap: wrap !important; justify-content: space-around !important; gap: 10px !important; }
.module-btn { flex: 1 1 30%; min-width: 80px; text-align: center; }
:disabled, [disabled], .disabled, .is-inactive { color: #999999 !important; border-color: #999999 !important; }
:disabled i, [disabled] i, .disabled i, .is-inactive i { color: #999999 !important; }
.panel-analitico .fa-arrow, #analytics-content-container .fa-arrow, [title*="Analítico"] .fa-arrow { color: transparent !important; }
.panel-analitico .fa-arrow::before, #analytics-content-container .fa-arrow::before, [title*="Analítico"] .fa-arrow::before { content: "\f011" !important; color: #999999 !important; }
.sys-ticker-bar { position: fixed; top: 0; left: 0; width: 100%; height: 32px; background: var(--sys-color-bg_panel); color: var(--sys-color-border); z-index: 9999; display: flex; align-items: center; overflow: hidden; font-family: var(--sys-font-main_label-fontFamily, 'Sofia Sans Extra Condensed'), sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; transform: translateY(-100%); transition: transform 0.3s ease-in-out; border-bottom: 2px solid var(--sys-color-primary); cursor: grab; }
.sys-ticker-bar.active { transform: translateY(0); }
.sys-ticker-content { white-space: nowrap; animation: marquee 25s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
.sys-config-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999 !important; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.sys-config-modal-content { width: 90%; max-width: 1200px; max-height: 90vh; overflow-y: auto; border-radius: 8px; }
#panel-left .accordion-item, #panel-right .accordion-item, #panel-left .accordion-header, #panel-right .accordion-header, #panel-left .accordion-button, #panel-right .accordion-button, #panel-left .accordion-body, #panel-right .accordion-body, #panel-left .panel-header, #panel-right .panel-header, #panel-left .title, #panel-right .title, #panel-left .station-list-item, #panel-right .station-list-item, #panel-left .module-btn, #panel-right .module-btn { opacity: 1 !important; filter: none !important; }
.cfg-panel { background: var(--sys-color-surface, #FFFFFF); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 20px; margin: 20px; display: flex; flex-direction: column; gap: 15px; }
.cfg-panel h3 { margin-top: 0; margin-bottom: 5px; color: var(--color-primary); font-family: var(--font-title); text-transform: uppercase; font-size: 16px; border-bottom: 2px solid var(--color-border); padding-bottom: 10px; }
.cfg-map-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; width: 100%; }
.cfg-global-footer { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 10px; border-top: 1px solid var(--color-border); padding-top: 15px; gap: 15px; }
#btn-save-poi-cfg, #btn-save-dark-cfg { font-family: Arial, sans-serif !important; font-size: 12px !important; padding: 6px 12px !important; width: 180px !important; height: 30px !important; text-transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; border: none !important; cursor: pointer !important; transition: opacity 0.2s !important; margin: 0 !important; }
#btn-save-poi-cfg:hover, #btn-save-dark-cfg:hover { opacity: 0.9 !important; }
.color-picker-wrapper { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(0,0,0,0.03); border-radius: 6px; border: 1px solid var(--color-border); }
.color-picker-input { width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; padding: 0; background: transparent; overflow: hidden; flex-shrink: 0; }
.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 50%; }

/* --- Extraído de telemetryViewer.js --- */
.monochrome-mode div { color: #999999 !important; } 
.tool-icon { background: transparent; border: none; cursor: pointer; color: #999999; transition: all 0.2s; padding: 0; font-size: 15px; outline: none; display: flex; align-items: center; justify-content: center; }
.tool-icon.active { color: var(--sys-color-primary); }
.tool-icon.is-inactive { color: #999999 !important; opacity: 0.4; }
.tool-icon.is-warning { color: var(--sys-color-warning) !important; }
.tool-icon:hover:not(.is-inactive) { filter: brightness(1.2); }
.btn-term-copy:hover { color: var(--sys-color-primary) !important; }
.meteo-filter-btn { background: transparent; border: 1px solid var(--sys-color-border); color: var(--sys-color-text_main); padding: 4px 12px; font-family: var(--sys-font-main_label-fontFamily); font-size: 14px; font-weight: 700; border-radius: 20px; cursor: pointer; transition: 0.2s; outline: none; }
.meteo-filter-btn:hover { border-color: var(--sys-color-primary); }
.meteo-filter-btn.active { background: var(--sys-color-primary); color: #FFF; border-color: var(--sys-color-primary); }
.meteo-cards-container::-webkit-scrollbar { height: 6px; }
.meteo-cards-container::-webkit-scrollbar-track { background: transparent; }
.meteo-cards-container::-webkit-scrollbar-thumb { background: var(--sys-color-border); border-radius: 10px; }
.meteo-cards-container::-webkit-scrollbar-thumb:hover { background: var(--sys-color-primary); }

/* --- Extraído de mapController.js --- */
.radar-plume { fill: #90EE90 !important; fill-opacity: 0.15 !important; stroke: var(--sys-color-success) !important; stroke-width: 3px !important; stroke-dasharray: 5, 5 !important; }
.mock-icon { display: flex; align-items: center; justify-content: center; }
.poi-input { width: 100%; border: none; border-bottom: 1px solid var(--sys-color-primary); font-weight: 700; color: var(--sys-color-primary); outline: none; background: transparent; padding: 2px 0; margin-bottom: 6px; }
.poi-desc { width: 100%; border: 1px solid var(--sys-color-border); padding: 4px; border-radius: 4px; outline: none; resize: vertical; min-height: 50px; }
.custom-cluster { color: #fff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: bold !important; border: 2px solid rgba(255,255,255,0.9) !important; }
@keyframes target-pulse-anim { 0% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(229, 62, 62, 0.8)); } 70% { box-shadow: 0 0 0 24px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pulsing-marker div { border-radius: 50%; animation: target-pulse-anim 2s infinite !important; }
.custom-station-marker, .cluster-icon, .custom-cluster { transition: transform 0.2s ease; transform: scale(var(--dynamic-map-scale, 1)); }
.custom-probe-icon { background: transparent; border: none; }
.atmos-infobox { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(30, 41, 59, 0.95); color: #fff; padding: 10px 14px; border-radius: 8px; font-family: 'Sofia Sans', sans-serif; font-size: 14px; font-weight: 400; box-shadow: 0 6px 16px rgba(0,0,0,0.5); white-space: nowrap; border: 1px solid rgba(255,255,255,0.1); pointer-events: none; backdrop-filter: blur(4px); transition: opacity 0.2s ease; min-width: 170px; }
.atmos-infobox.fetching { opacity: 0.7; }
.atmos-infobox::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-width: 9px 9px 0; border-style: solid; border-color: rgba(30, 41, 59, 0.95) transparent transparent transparent; display: block; width: 0; }
.probe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-items: center; }
.probe-item { display:flex; align-items:center; gap:8px; color:#fff; justify-content: flex-start; }
.probe-item.right { justify-content: flex-end; }
.probe-item i { width: 16px; text-align: center; color: #93c5fd; }
.probe-loader { border: 2px solid rgba(255,255,255,0.2); border-top: 2px solid #fff; border-radius: 50%; width: 14px; height: 14px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.map-draggable-btn { cursor: grab !important; transition: opacity 0.2s, transform 0.2s; } 
.map-draggable-btn:active { cursor: grabbing !important; } 
.map-draggable-btn.dragging { opacity: 0.5; transform: scale(0.9); } 
.map-draggable-btn.drag-over { border-left: 4px solid var(--sys-color-primary) !important; margin-left: 2px; }

/* --- Extraído de layerManager.js --- */
.atmos-toolbar-container { position: absolute !important; right: calc(var(--panel-offset, 20px) + 55px) !important; top: 50% !important; transform: translateY(-50%) translateX(20px) !important; z-index: 1000 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-end !important; opacity: 0 !important; visibility: hidden !important; transition: right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease, transform 0.3s ease !important; pointer-events: none !important; left: auto !important; bottom: auto !important; }
.atmos-icon-btn { height: 38px; max-width: 38px; border-radius: 20px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; cursor: pointer; position: relative; pointer-events: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: max-width 0.4s ease, background 0.3s ease, padding 0.3s ease; overflow: hidden; white-space: nowrap; }
.atmos-icon-btn:hover, .atmos-icon-btn.active { max-width: 220px; padding-left: 12px; padding-right: 12px; background: rgba(255, 255, 255, 0.85); }
.atmos-icon-btn .icon-wrapper { min-width: 38px; display: flex; justify-content: center; align-items: center; }
.atmos-icon-btn i { font-size: 16px; color: #999999; transition: color 0.3s ease; }
.atmos-icon-btn.active i { color: #354964; }
.atmos-icon-btn.clear-map i { color: #ff8f00 !important; }
.atmos-tooltip { font-family: 'Sofia Sans Extra Condensed', sans-serif; font-size: 14px; font-weight: bold; color: #354964; opacity: 0; transition: opacity 0.3s ease 0.1s; margin-right: 6px; }
.atmos-icon-btn:hover .atmos-tooltip, .atmos-icon-btn.active .atmos-tooltip { opacity: 1; }
.atmos-divider { width: 24px; height: 1px; background: rgba(0,0,0,0.1); margin: 2px 7px; pointer-events: none; }