/* NocTel Fiber System Dashboard Styles */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a2e;
  color: #eee;
  padding: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; flex-shrink: 0; }
.header .logo-group { display: flex; align-items: center; gap: 12px; }
.header .logo { height: 28px; }
.header .logo svg { height: 100%; width: auto; }
.header .tagline { font-size: 14px; color: #888; font-weight: 300; letter-spacing: 0.5px; }
.header .timestamp { color: #888; font-size: 11px; }
.header-stats { display: none; align-items: center; gap: 15px; cursor: pointer; padding: 4px 12px; border-radius: 6px; transition: background 0.2s; }
.header-stats:hover { background: rgba(255,255,255,0.05); }
.header-stat { font-size: 12px; color: #888; }
.header-stat.uptime { font-size: 18px; font-weight: bold; color: #4fc3f7; }
.header-stat.uptime.warning { color: #ff9800; }
.header-stat.uptime.offline { color: #f44336; }
.header-stat.online span { color: #4caf50; font-weight: bold; }
.header-stat.offline span { color: #f44336; font-weight: bold; }
.header-stat.total span { color: #4fc3f7; font-weight: bold; }
.summary-card { display: block; }
@media (min-width: 1200px) { .header-stats { display: flex; } .summary-card { display: none; } }

/* Status Indicator */
.status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.status-indicator.connected { background: #4caf50; }
.status-indicator.disconnected { background: #f44336; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Layout - 3 column when map is enabled, 2 column fallback */
.main-grid { display: grid; grid-template-columns: 1fr 230px; gap: 5px; flex: 1; min-height: 0; overflow: hidden; }
.main-grid.has-map { grid-template-columns: 250px 1fr 230px; }
.main-grid.no-right { grid-template-columns: 1fr; }
.main-grid.no-right.has-map { grid-template-columns: 250px 1fr; }
.main-grid.no-left { grid-template-columns: 1fr; }
.main-grid.no-left.has-map { grid-template-columns: 1fr 230px; }
.main-grid.no-left.no-right { grid-template-columns: 1fr; }
.main-grid.no-left.no-right.has-map { grid-template-columns: 1fr; }
.main-grid.summary-only.has-map { grid-template-columns: auto 1fr 230px; }
.main-grid.summary-only.no-right.has-map { grid-template-columns: auto 1fr; }
.left-panel { display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.summary-only .left-panel { width: auto; min-width: 0; }
.center-panel { display: flex; flex-direction: column; gap: 5px; overflow: hidden; min-height: 300px; height: 100%; }
.right-panel { display: flex; flex-direction: column; gap: 5px; overflow: auto; }
@media (min-width: 1000px) { .main-grid { grid-template-columns: 1fr 380px; } .main-grid.has-map { grid-template-columns: 280px 1fr 300px; } .main-grid.no-right.has-map { grid-template-columns: 280px 1fr; } .main-grid.no-left.has-map { grid-template-columns: 1fr 300px; } .main-grid.summary-only.has-map { grid-template-columns: auto 1fr 300px; } .main-grid.summary-only.no-right.has-map { grid-template-columns: auto 1fr; } }
@media (min-width: 1400px) { .main-grid.has-map { grid-template-columns: 320px 1fr 360px; } .main-grid.no-right.has-map { grid-template-columns: 320px 1fr; } .main-grid.no-left.has-map { grid-template-columns: 1fr 360px; } .main-grid.summary-only.has-map { grid-template-columns: auto 1fr 360px; } .main-grid.summary-only.no-right.has-map { grid-template-columns: auto 1fr; } }
@media (min-width: 1600px) { .main-grid { grid-template-columns: 1fr 500px; } .main-grid.has-map { grid-template-columns: 360px 1fr 420px; } .main-grid.no-right.has-map { grid-template-columns: 360px 1fr; } .main-grid.no-left.has-map { grid-template-columns: 1fr 420px; } .main-grid.summary-only.has-map { grid-template-columns: auto 1fr 420px; } .main-grid.summary-only.no-right.has-map { grid-template-columns: auto 1fr; } }

/* Constrained column layouts - use auto sizing when columns are limited */
.main-grid.has-map.left-cols-constrained { grid-template-columns: auto 1fr 200px; }
.main-grid.has-map.right-cols-constrained { grid-template-columns: 200px 1fr auto; }
.main-grid.has-map.left-cols-constrained.right-cols-constrained { grid-template-columns: auto 1fr auto; }
.main-grid.has-map.left-cols-constrained.no-right { grid-template-columns: auto 1fr; }
.main-grid.has-map.right-cols-constrained.no-left { grid-template-columns: 1fr auto; }
.left-cols-constrained .left-panel { min-width: 0; width: min-content; }
.left-cols-constrained .left-panel .card { width: fit-content; }
.right-cols-constrained .right-panel { min-width: 0; width: min-content; }
.right-cols-constrained .right-panel .card { width: fit-content; }

/* Cards */
.card { background: #16213e; border-radius: 8px; padding: 10px; }
.card h3 { color: #4fc3f7; font-size: 11px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.title-status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff; box-sizing: border-box; flex-shrink: 0; }
.title-status-dot.good { background: #4caf50; }
.title-status-dot.power-good { background: #2196f3; }
.title-status-dot.vehicle-good { background: #ffc107; }
.title-status-dot.bad { background: #f44336; }
.title-status-dot.warning { background: #ff9800; }
.header-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
}
.header-icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }

/* Summary Stats */
.summary-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.summary-stat { flex: 1 1 60px; min-width: 60px; text-align: center; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px; }
.summary-stat.clickable { cursor: pointer; transition: background 0.2s, transform 0.1s; }
.summary-stat.clickable:hover { background: rgba(255,255,255,0.1); transform: scale(1.02); }
.summary-stat .value { font-size: 18px; font-weight: bold; color: #4fc3f7; }
.summary-stat .value.online { color: #4caf50; }
.summary-stat .value.warning { color: #ff9800; }
.summary-stat .value.offline { color: #f44336; }
.summary-stat .label { font-size: 9px; color: #888; text-transform: uppercase; }
.summary-stat.uptime-stat { flex: 0 0 auto; }
.summary-stat.uptime-stat .value { font-size: 24px; }

/* OLT Grid */
.olt-grid { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; flex: 1; align-content: start; }
.olt-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 8px; border-left: 3px solid #4caf50; height: 72px; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; flex: 1 1 200px; min-width: 200px; }
.olt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.olt-card.warning { border-left-color: #ff9800; }
.olt-card.critical { border: 2px solid #f44336; box-shadow: 0 0 10px rgba(244,67,54,0.5); }
.olt-card.outage { border: 2px solid #f44336; box-shadow: 0 0 10px rgba(244,67,54,0.5); animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 10px rgba(244,67,54,0.5); } 50% { box-shadow: 0 0 20px rgba(244,67,54,0.8); } }
.olt-main { display: flex; justify-content: space-between; align-items: flex-start; flex: 1; }
.olt-left { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.olt-name { font-size: 11px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; display: flex; align-items: center; }
.olt-name .site-pill { top: 0; }
.olt-percent { font-size: 28px; font-weight: bold; flex: 1; display: flex; align-items: center; line-height: 1; margin-top: 2px; }
.olt-temp { font-size: 11px; font-weight: normal; color: #888; margin-left: 8px; }
.olt-temp.warning { color: #ff9800; }
.olt-temp.offline { color: #f44336; }
.olt-stats { font-size: 12px; text-align: right; line-height: 1.3; flex-shrink: 0; margin-left: 8px; }
.olt-stats .up { color: #4caf50; }
.olt-stats .down { color: #f44336; }
.olt-stats .total { color: #888; }
.olt-stats .mapped-count { color: #666; font-size: 10px; margin-left: 4px; cursor: help; }
.olt-bar { height: 3px; background: #333; border-radius: 2px; margin-top: auto; }
.olt-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }

/* Status Colors */
.online { color: #4caf50; }
.warning { color: #ff9800; }
.offline { color: #f44336; }

/* Battery Cards */
#batteryGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.battery-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 10px; flex: 1 1 140px; min-width: 140px; }
.battery-card.has-location { cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.battery-card.has-location:hover { background: rgba(255,255,255,0.06); }
.battery-card.outage { border: 2px solid #f44336; box-shadow: 0 0 10px rgba(244,67,54,0.5); animation: pulse-border 2s infinite; }
.battery-header { display: flex; align-items: center; margin-bottom: 6px; gap: 6px; }
.site-pill { background: #4fc3f7; color: #000; font-size: 9px; font-weight: bold; padding: 1px 4px; border-radius: 8px; flex-shrink: 0; margin-right: 6px; display: inline-block; vertical-align: middle; position: relative; top: -1px; }
.battery-name { font-size: 11px; font-weight: bold; flex: 1; }
.battery-soc { font-size: 11px; font-weight: bold; }
.battery-soc.online { color: #4caf50; }
.battery-soc.warning { color: #ff9800; }
.battery-soc.offline { color: #f44336; }
.battery-status-icon { font-size: 14px; }
.battery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 10px; }
.battery-item { display: flex; justify-content: space-between; }
.battery-label { color: #888; }
.battery-value { font-weight: bold; }

/* Bottom Panel / Switch Grid */
.bottom-panel { margin-top: 10px; flex-shrink: 0; }
.switch-grid-horizontal { display: flex; flex-wrap: wrap; gap: 6px; }
.switch-card { background: rgba(255,255,255,0.05); border-radius: 4px; padding: 5px 6px; flex: 1 1 120px; min-width: 120px; max-width: 200px; }
.switch-card.has-location { cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.switch-card.has-location:hover { background: rgba(255,255,255,0.08); }
.switch-card.error { border: 2px solid #f44336; box-shadow: 0 0 10px rgba(244,67,54,0.5); animation: pulse-border 2s infinite; }
.switch-card.disabled { opacity: 0.5; border: 1px dashed #666; }
.switch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.switch-name { font-size: 9px; font-weight: bold; color: #4fc3f7; }
.switch-temp { font-size: 8px; color: #888; margin-left: auto; margin-right: 8px; }
.switch-temp.warning { color: #ff9800; }
.switch-temp.offline { color: #f44336; }
.switch-status { font-size: 8px; color: #888; }
.switch-interfaces { display: flex; flex-direction: column; gap: 2px; }
.switch-interface { display: flex; align-items: center; gap: 3px; padding: 2px 4px; background: rgba(0,0,0,0.2); border-radius: 2px; font-size: 9px; }
.switch-interface.up { border-left: 2px solid #4caf50; }
.switch-interface.down { border-left: 2px solid #f44336; background: rgba(244,67,54,0.1); }
.switch-interface.unknown { border-left: 2px solid #666; }
.switch-interface.not-monitored { border-left: 2px solid #666; opacity: 0.6; }
.switch-interface .if-status.unknown { color: #666; }
.switch-interface .if-status.not-monitored { color: #888; }
.switch-interface .if-status { font-weight: bold; width: 8px; font-size: 8px; }
.switch-interface .if-status.up { color: #4caf50; }
.switch-interface .if-status.down { color: #f44336; }
.switch-interface .if-customer { color: #fff; flex: 1; }
.switch-interface .if-name { color: #666; font-family: monospace; font-size: 5px; }
.no-data { color: #666; font-style: italic; padding: 20px; text-align: center; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal { background: #16213e; border-radius: 10px; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden; }
.modal.wide { max-width: 800px; }
.modal.tall { max-height: 90vh; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #333; }
.modal-header h3 { color: #4fc3f7; margin: 0; font-size: 14px; }
.modal-close { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; padding: 0 5px; }
.modal-close:hover { color: #fff; }
.modal-tabs { display: flex; border-bottom: 1px solid #333; }
.modal-tab { flex: 1; padding: 10px; text-align: center; cursor: pointer; color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; border-bottom: 2px solid transparent; }
.modal-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.modal-tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.modal-tab .tab-count { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; background: rgba(255,255,255,0.1); border-radius: 9px; font-size: 10px; margin-left: 5px; padding: 0 4px; }
.modal-tab .tab-count.large { min-width: 28px; height: 20px; line-height: 20px; border-radius: 10px; font-size: 9px; }
.modal-tab.active .tab-count { background: #4fc3f7; color: #16213e; }
.modal-body { padding: 15px; max-height: 55vh; overflow-y: auto; }
.modal-body.tall { max-height: 75vh; }
.modal-filter { display: none; padding: 10px 15px; border-bottom: 1px solid #333; }
.modal-filter.active { display: flex; align-items: center; gap: 8px; }
.modal-filter input { flex: 1; background: rgba(255,255,255,0.1); border: 1px solid #444; border-radius: 4px; padding: 6px 10px; color: #fff; font-size: 12px; outline: none; }
.modal-filter input:focus { border-color: #4fc3f7; }
.modal-filter input::placeholder { color: #666; }
.modal-filter .filter-clear { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 2px 6px; }
.modal-filter .filter-clear:hover { color: #fff; }
.modal-filter .filter-hint { color: #666; font-size: 10px; }

/* Device Items */
.device-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; margin-bottom: 6px; border-left: 3px solid #f44336; transition: background 0.1s; }
.device-item:hover { background: rgba(255,255,255,0.08); }
.device-item.online { border-left-color: #4caf50; }
.device-item.sla-online { border-left-color: #4caf50; }
.device-item.excluded { border-left-color: #666; opacity: 0.8; }
.device-item.sla { border-left-color: #ff9800; }
.device-type-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-right: 6px; font-weight: normal; }
.device-type-badge.sla { background: #ff9800; color: #000; }
.device-info { flex: 1; min-width: 0; cursor: pointer; }
.device-name { font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-meta { font-size: 10px; color: #888; }
.device-olt { font-size: 9px; color: #4fc3f7; background: rgba(79,195,247,0.15); padding: 2px 6px; border-radius: 3px; display: inline-block; margin-top: 2px; }
.device-olt-inline { font-size: 10px; color: #4fc3f7; margin-right: 6px; }
.device-olt-inline:after { content: ' ›'; opacity: 0.5; }
.device-mac { font-family: monospace; font-size: 10px; color: #666; }
.device-actions { display: flex; gap: 5px; margin-left: 10px; }
.device-btn { padding: 4px 8px; border: none; border-radius: 4px; font-size: 10px; cursor: pointer; transition: all 0.2s; }
.device-btn.exclude { background: #ff9800; color: #000; }
.device-btn.exclude:hover { background: #ffa726; }
.device-btn.include { background: #4caf50; color: #fff; }
.device-btn.include:hover { background: #66bb6a; }

/* Offline Device */
.offline-device { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 6px; margin-bottom: 6px; border-left: 3px solid #f44336; cursor: pointer; transition: background 0.1s; }
.offline-device:hover { background: rgba(255,255,255,0.08); }
.offline-device.copied { border-left-color: #4caf50; }
.offline-device-name { font-size: 12px; font-weight: bold; color: #fff; }
.offline-device-info { font-size: 10px; color: #888; }
.offline-device-mac { font-family: monospace; font-size: 10px; color: #666; }

/* Critical Banner */
.critical-banner { display: none; background: linear-gradient(90deg, #d32f2f, #f44336); color: #fff; padding: 10px 15px; text-align: center; font-weight: bold; font-size: 13px; animation: criticalPulse 1s ease-in-out infinite; }
.critical-banner.active { display: block; }
@keyframes criticalPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.critical-banner .critical-items { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.critical-banner .critical-item { display: flex; align-items: center; gap: 5px; }

/* Toast Notifications */
.toast-container { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column-reverse; gap: 15px; }
.toast { background: #16213e; border-radius: 12px; padding: 28px 36px; box-shadow: 0 8px 40px rgba(0,0,0,0.8); border-left: 8px solid #4fc3f7; animation: slideUp 0.3s ease-out; min-width: 450px; }
.toast.connect { border-left-color: #4caf50; background: linear-gradient(90deg, #1a3a1a 0%, #16213e 40%); }
.toast.disconnect { border-left-color: #2196f3; background: linear-gradient(90deg, #1a2a3a 0%, #16213e 40%); }
.toast.interface { border-left-color: #ffeb3b; background: linear-gradient(90deg, #3a3a1a 0%, #16213e 40%); }
.toast.optical { border-left-color: #9c27b0; background: linear-gradient(90deg, #2a1a3a 0%, #16213e 40%); }
.toast.battery { border-left-color: #f44336; background: linear-gradient(90deg, #3a1a1a 0%, #16213e 40%); }
.toast.switch { border-left-color: #ff9800; background: linear-gradient(90deg, #3a2a1a 0%, #16213e 40%); }
.toast.outage { border-left-color: #f44336; background: linear-gradient(90deg, #4a1a1a 0%, #2a1a1a 60%); }
.toast.recovery { border-left-color: #4caf50; background: linear-gradient(90deg, #1a3a1a 0%, #16213e 60%); }
.toast.priority { border-left-color: #f44336; background: linear-gradient(90deg, #4a1a1a 0%, #2a1a1a 60%); border: 2px solid #f44336; box-shadow: 0 0 15px rgba(244,67,54,0.5); }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.toast.removing { animation: slideDown 0.3s ease-in forwards; }
.toast-main { font-size: 24px; font-weight: bold; color: #eee; }
.toast-detail { font-size: 18px; color: #888; margin-top: 8px; }
.toast-status { font-size: 18px; color: #aaa; margin-top: 6px; }
.toast-uptime { color: #888; }
.toast-content { font-size: 24px; color: #eee; }

/* Header Buttons */
.header-btn { background: rgba(255,255,255,0.1); border: none; color: #888; font-size: 14px; padding: 4px 8px; border-radius: 4px; cursor: pointer; margin-right: 8px; transition: all 0.2s; }
.header-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.header-pill { background: rgba(79,195,247,0.2); border: 1px solid rgba(79,195,247,0.4); color: #4fc3f7; font-size: 11px; padding: 4px 12px; border-radius: 12px; cursor: pointer; margin-right: 12px; transition: all 0.2s; font-weight: 500; }
.header-pill:hover { background: rgba(79,195,247,0.3); border-color: #4fc3f7; color: #fff; }
.summary-row.clickable { cursor: pointer; transition: background 0.2s; border-radius: 6px; margin: -4px; padding: 4px; }
.summary-row.clickable:hover { background: rgba(255,255,255,0.05); }

/* Events */
.event-list { display: flex; flex-direction: column; gap: 6px; }
.event-item { display: flex; align-items: flex-start; padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 4px; border-left: 3px solid #4fc3f7; font-size: 11px; gap: 12px; }
.event-item.connect { border-left-color: #4caf50; }
.event-item.disconnect { border-left-color: #f44336; }
.event-item.interface_change { border-left-color: #ffeb3b; }
.event-item.status_change { border-left-color: #ff9800; }
.event-item.optical_change { border-left-color: #9c27b0; }
.event-item.battery { border-left-color: #e91e63; }
.event-item.switch { border-left-color: #ff9800; }
.event-time { color: #888; font-family: monospace; font-size: 10px; min-width: 135px; flex-shrink: 0; }
.event-type { color: #4fc3f7; font-weight: bold; min-width: 100px; flex-shrink: 0; text-transform: uppercase; font-size: 9px; padding: 2px 0; }
.event-content { flex: 1; min-width: 0; }
.event-device { color: #fff; font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.event-device-name { cursor: pointer; transition: color 0.1s; }
.event-device-name:hover { color: #4fc3f7; }
.event-device-name.copied { color: #4caf50; }
.event-mac { cursor: pointer; font-family: monospace; transition: color 0.1s; }
.event-mac:hover { color: #4fc3f7; }
.event-mac.copied { color: #4caf50; }
.event-desc { color: #aaa; font-size: 11px; }
.event-meta { color: #666; font-size: 10px; margin-top: 2px; }
.event-olt { color: #4fc3f7; font-size: 9px; background: rgba(79,195,247,0.15); padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.filter-input { width: 100%; padding: 8px 12px; background: rgba(0,0,0,0.3); border: 1px solid #333; border-radius: 4px; color: #fff; font-size: 12px; margin-bottom: 10px; }
.filter-input:focus { outline: none; border-color: #4fc3f7; }

/* Map Card */
.map-card { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.map-legend { position: absolute; bottom: 8px; left: 8px; background: rgba(22,33,62,0.9); padding: 6px 10px; border-radius: 4px; font-size: 9px; z-index: 1; display: flex; gap: 12px; }
.map-legend-item { display: flex; align-items: center; gap: 4px; }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.map-legend-dot.online { background: #4caf50; }
.map-legend-dot.slow { background: #ff9800; }
.map-legend-dot.offline { background: #f44336; }
.map-legend-dot.filtered { background: #666; }
.map-legend-dot.battery { background: #2196f3; border: 1px solid #fff; box-sizing: border-box; }
.map-legend-dot.switch { background: #4caf50; border: 1px solid #fff; box-sizing: border-box; }

/* Map markers - size varies by zoom level */
.map-marker { width: 10px; height: 10px; border-radius: 50%; cursor: pointer; transition: width 0.2s ease, height 0.2s ease, transform 0.15s ease; }
.map-marker:hover { transform: scale(1.5); z-index: 10; }
.map-marker-lg { width: 14px; height: 14px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.map-marker-infra { background: transparent !important; border: 2px solid #fff; position: relative; }
.map-marker-vehicle { background: transparent !important; border: none !important; position: relative; width: 30px; height: 30px; transform-origin: center center; }
.map-marker-vehicle.moving .vehicle-marker-icon { filter: drop-shadow(0 0 6px rgba(255,193,7,0.8)); }
@keyframes vehicle-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,193,7,0.5)); } 50% { filter: drop-shadow(0 0 10px rgba(255,193,7,0.9)); } }
.map-marker-vehicle.moving .vehicle-marker-icon { animation: vehicle-pulse 1s ease-in-out infinite; }
/* Selection ring for vehicles based on status */
.map-marker-vehicle.selected::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid #2196f3; animation: selection-ring-pulse 1.5s ease-in-out infinite; pointer-events: none; }
.map-marker-vehicle.selected.moving::before { border-color: #4caf50; }
.map-marker-vehicle.selected.idle::before { border-color: #ffc107; }
.map-marker-vehicle.selected.offline::before { border-color: #f44336; }
@keyframes selection-ring-pulse { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } }
/* Selection ring for infrastructure markers (battery/switch) */
.map-marker-infra.selected::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 3px solid #2196f3; animation: selection-ring-pulse 1.5s ease-in-out infinite; pointer-events: none; z-index: -1; }
.map-marker-infra.selected.status-good::before { border-color: #4caf50; }
.map-marker-infra.selected.status-warning::before { border-color: #ffc107; }
.map-marker-infra.selected.status-bad::before { border-color: #f44336; }
/* Selection ring for ONU/device markers */
.map-marker.selected:not(.map-marker-vehicle):not(.map-marker-infra)::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4caf50; animation: selection-ring-pulse 1.5s ease-in-out infinite; pointer-events: none; z-index: -1; }
.map-marker.selected.status-good:not(.map-marker-vehicle):not(.map-marker-infra)::before { border-color: #4caf50; }
.map-marker.selected.status-warning:not(.map-marker-vehicle):not(.map-marker-infra)::before { border-color: #ffc107; }
.map-marker.selected.status-bad:not(.map-marker-vehicle):not(.map-marker-infra)::before { border-color: #f44336; }
.map-marker.selected.status-offline:not(.map-marker-vehicle):not(.map-marker-infra)::before { border-color: #f44336; }
.map-marker.filtered { opacity: 0.3; }
/* Count badge for grouped markers */
.marker-count { position: absolute; top: -8px; right: -8px; background: #16213e; color: #fff; font-size: 9px; font-weight: bold; min-width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 7px; border: 1px solid rgba(255,255,255,0.3); pointer-events: none; }
/* Status dot for battery/switch markers - fills the white ring */
.marker-status-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
/* Zoom-based marker sizes */
.map-zoom-far .map-marker { width: 4px; height: 4px; }
.map-zoom-far .map-marker-lg { width: 6px; height: 6px; border-width: 1px; }
.map-zoom-mid .map-marker { width: 6px; height: 6px; }
.map-zoom-mid .map-marker-lg { width: 10px; height: 10px; border-width: 1px; }
.map-zoom-close .map-marker { width: 10px; height: 10px; }
.map-zoom-close .map-marker-lg { width: 14px; height: 14px; }
.map-zoom-detail .map-marker { width: 12px; height: 12px; }
.map-zoom-detail .map-marker-lg { width: 16px; height: 16px; }

/* Mapbox overrides */
.mapboxgl-ctrl-logo { display: none !important; }
.mapboxgl-ctrl-attrib { font-size: 6px !important; line-height: 1 !important; padding: 1px 3px !important; }
.mapboxgl-ctrl-attrib a { font-size: 6px !important; }
/* Hide nav controls by default, show on map hover */
.map-card .mapboxgl-ctrl-group { opacity: 0.15; transition: opacity 0.3s ease; }
.map-card:hover .mapboxgl-ctrl-group { opacity: 1; }
.mapboxgl-popup-content { background: #16213e !important; color: #fff !important; padding: 12px 14px !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; min-width: 180px; max-width: 280px; }
.mapboxgl-popup-close-button { color: #888 !important; font-size: 18px !important; padding: 4px 6px !important; right: 0 !important; top: 0 !important; line-height: 1 !important; }
.mapboxgl-popup-close-button:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; border-radius: 0 8px 0 4px !important; }
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: #16213e !important; }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: #16213e !important; }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: #16213e !important; }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: #16213e !important; }
.popup-title { font-weight: bold; font-size: 13px; margin-bottom: 4px; padding-right: 20px; color: #fff !important; }
.popup-olt { color: #4fc3f7 !important; font-size: 10px; margin-bottom: 6px; }
.popup-status { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 4px; color: #fff !important; }
.popup-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.popup-status-dot.online { background: #4caf50 !important; }
.popup-status-dot.offline { background: #f44336 !important; }
.popup-status-dot.idle { background: #2196f3 !important; }
.popup-speeds { font-size: 10px; color: #aaa !important; margin: 4px 0; }
.popup-speeds .speed-slow { color: #f44336 !important; }
.popup-pon { font-size: 10px; color: #4fc3f7 !important; margin-bottom: 4px; }
/* Multi-device popup */
.popup-header { margin-bottom: 8px; padding-bottom: 8px; padding-right: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.popup-count { font-size: 11px; color: #aaa !important; }
.popup-count .online { color: #4caf50 !important; }
.popup-count .offline { color: #f44336 !important; }
.popup-device-list { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.popup-device-list::-webkit-scrollbar { width: 6px; }
.popup-device-list::-webkit-scrollbar-track { background: transparent; }
.popup-device-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.popup-device-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
.popup-device { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.popup-device:last-child { border-bottom: none; }
.popup-device .popup-title { font-size: 12px; margin-bottom: 2px; }
.popup-device .popup-status { font-size: 10px; margin-bottom: 2px; }
.popup-device .popup-mac { font-size: 9px; }
.popup-mac { font-family: monospace; font-size: 10px; color: #888 !important; cursor: pointer; }
.popup-mac:hover { color: #4fc3f7 !important; }
.popup-copyable { cursor: pointer; }
.popup-copyable:hover { color: #4fc3f7 !important; }
.popup-uptime { font-size: 10px; color: #888 !important; margin-top: 4px; }

/* OLT card filter state */
.olt-card.map-active { border: 2px solid #4fc3f7; box-shadow: 0 0 10px rgba(79,195,247,0.3); }
.olt-card.map-filtered { opacity: 0.5; }

/* PON Filter Dropdown */
.pon-dropdown {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(22,33,62,0.95);
  border-radius: 6px;
  z-index: 10;
  min-width: 120px;
  max-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  border: 1px solid rgba(79,195,247,0.3);
}
.pon-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 6px;
}
.pon-dropdown-toggle:hover { background: rgba(255,255,255,0.05); }
.pon-dropdown-label {
  font-size: 11px;
  color: #4fc3f7;
  font-weight: 500;
}
.pon-dropdown-arrow {
  font-size: 10px;
  color: #4fc3f7;
  transition: transform 0.2s;
  margin-left: 2px;
}
.pon-dropdown.open .pon-dropdown-arrow { transform: rotate(180deg); }
.pon-dropdown-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.1);
  max-height: 200px;
  overflow-y: auto;
}
.pon-dropdown.open .pon-dropdown-menu { display: flex; }
.pon-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #ccc;
  transition: background 0.15s;
}
.pon-menu-item:hover { background: rgba(255,255,255,0.08); }
.pon-menu-item:last-child { border-radius: 0 0 6px 6px; }
.pon-menu-item.active { color: #4fc3f7; background: rgba(79,195,247,0.1); }
.pon-menu-item .pon-check {
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
}
.pon-menu-item.active .pon-check {
  background: #4fc3f7;
  border-color: #4fc3f7;
  color: #16213e;
}
.pon-menu-item .pon-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pon-menu-item .pon-count {
  font-size: 9px;
  color: #666;
  background: rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 8px;
}
.pon-menu-item.active .pon-count { color: #4fc3f7; background: rgba(79,195,247,0.2); }
.pon-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 2px 0;
}
/* PON-filtered marker state */
.map-marker.pon-dimmed { opacity: 0.2; }

/* Settings Modal */
.settings-modal { max-width: 700px; }
.settings-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 0; }
.settings-tab { flex: 1; padding: 10px 16px; background: transparent; border: none; color: #888; font-size: 12px; cursor: pointer; transition: all 0.2s; border-bottom: 2px solid transparent; }
.settings-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.settings-tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }
.settings-section { margin-bottom: 20px; }
.settings-section h4 { color: #4fc3f7; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.settings-columns { display: flex; gap: 30px; }
.settings-column { flex: 1; min-width: 0; }
@media (max-width: 500px) { .settings-columns { flex-direction: column; gap: 0; } }
.settings-option { padding: 8px 0; }
.settings-option.settings-option-with-cols { display: flex; align-items: center; justify-content: space-between; }
.settings-option label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.settings-option input[type="checkbox"], .settings-option input[type="radio"] { width: 18px; height: 18px; accent-color: #4fc3f7; cursor: pointer; }
.cols-setting { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #888; }
.cols-setting input[type="number"] { width: 40px; padding: 2px 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; color: #fff; font-size: 11px; text-align: center; }
.cols-setting input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.settings-help { font-size: 11px; color: #888; margin-bottom: 12px; }
.settings-save-btn { background: rgba(79,195,247,0.2); border: 1px solid rgba(79,195,247,0.4); color: #4fc3f7; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.settings-save-btn:hover { background: rgba(79,195,247,0.3); }
.settings-reset-btn { background: rgba(244,67,54,0.2); border: 1px solid rgba(244,67,54,0.4); color: #f44336; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.settings-reset-btn:hover { background: rgba(244,67,54,0.3); color: #ff5252; }

/* Alert Settings - 2-column responsive layout */
.alert-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
@media (max-width: 600px) { .alert-settings-grid { grid-template-columns: 1fr; } }
.alert-setting-row { display: grid; grid-template-columns: 100px 24px 1fr 44px; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.alert-label { font-size: 11px; color: #ccc; white-space: nowrap; }
.alert-setting-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4fc3f7; cursor: pointer; }
.alert-setting-row select { background: #1a1a2e; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 3px 6px; border-radius: 4px; font-size: 10px; cursor: pointer; min-width: 80px; }
.sound-test-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #888; padding: 3px 6px; border-radius: 4px; font-size: 9px; cursor: pointer; transition: all 0.2s; }
.sound-test-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.alert-flyto-label { font-size: 10px; color: #888; white-space: nowrap; display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.alert-flyto-label input { width: 14px; height: 14px; accent-color: #4fc3f7; cursor: pointer; }

/* Panel visibility */
.panel-hidden { display: none !important; }

/* Vehicle Cards */
#vehicleGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 10px; flex: 1 1 180px; min-width: 180px; border-left: 3px solid #666; }
.vehicle-card.online { border-left-color: #4caf50; }
.vehicle-card.idle { border-left-color: #2196f3; }
.vehicle-card.offline { border-left-color: #f44336; }
.vehicle-card.has-location { cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.vehicle-card.has-location:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.vehicle-card.vehicle-selected { background: rgba(255,193,7,0.15); box-shadow: 0 0 0 2px #ffc107; }
.vehicle-card.vehicle-filtered { opacity: 0.4; }
.vehicle-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vehicle-icon { display: flex; align-items: center; color: #ffc107; }
.vehicle-icon.moving { color: #ffc107; filter: drop-shadow(0 0 4px rgba(255,193,7,0.6)); }
.vehicle-name { font-size: 12px; font-weight: bold; flex: 1; }
.vehicle-status { font-size: 10px; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.1); }
.vehicle-status.online { background: rgba(76,175,80,0.2); color: #4caf50; }
.vehicle-status.idle { background: rgba(33,150,243,0.2); color: #2196f3; }
.vehicle-status.offline { background: rgba(244,67,54,0.2); color: #f44336; }
.vehicle-details { display: flex; flex-direction: column; gap: 4px; }
.vehicle-row { display: flex; justify-content: space-between; font-size: 10px; }
.vehicle-label { color: #888; }
.vehicle-value { font-weight: bold; color: #ccc; }
.vehicle-value.warning { color: #ff9800; }
.vehicle-value.offline { color: #f44336; }

/* Animated vehicle icons */
@keyframes duck-bob {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.duck-icon { animation: duck-bob 0.5s ease-in-out infinite; }
.spin-icon { animation: spin 1s linear infinite; }
.bounce-icon { animation: bounce 0.3s ease-in-out infinite; }
.pulse-icon { animation: pulse-scale 0.8s ease-in-out infinite; }
@keyframes wobble {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.wobble-icon { animation: wobble 0.3s ease-in-out infinite; }
.flash-icon { animation: flash 0.2s ease-in-out infinite; }

/* Vehicle marker with icon inside */
.vehicle-marker-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffc107;
  pointer-events: none;
}
.vehicle-marker-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* Popup history link */
.popup-history-link {
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(255,193,7,0.15);
  border-radius: 4px;
  color: #ffc107;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.popup-history-link:hover { background: rgba(255,193,7,0.25); }

/* Vehicle History Modal */
.modal.history-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.modal.history-modal .modal-header {
  flex-shrink: 0;
}
.modal-body.history-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px;
  overflow: hidden;
  min-height: 0;
  max-height: none;
  height: 100%;
  position: relative;
}
.history-main-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.history-calendar-panel {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1a1a2e;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  margin-right: 12px;
  overflow-y: auto;
  contain: layout paint;
}
.calendar-month {
  display: flex;
  flex-direction: column;
}
.history-content-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
  contain: layout;
}
.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: bold;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 26px);
  gap: 2px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 9px;
  color: #888;
  flex-shrink: 0;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 26px);
  gap: 2px;
}
.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  width: 26px;
  height: 28px;
  overflow: hidden;
}
.calendar-day:hover { background: rgba(255,255,255,0.1); }
.calendar-day.other-month { opacity: 0.3; }
.calendar-day.out-of-range { opacity: 0.2; cursor: default; pointer-events: none; }
.calendar-day.today { border: 1px solid #4fc3f7; }
.calendar-day.selected { background: rgba(79,195,247,0.3); border: 1px solid #4fc3f7; }
.calendar-day.has-trips { background: rgba(76,175,80,0.15); }
.calendar-day-number {
  font-size: 10px;
  font-weight: bold;
}
.calendar-day-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
.calendar-day-icons svg {
  width: 10px;
  height: 10px;
}
.history-container {
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  contain: layout;
}
.history-map-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
#historyMap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
}
.history-stats-panel {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}
.history-load-btn {
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
}
.history-load-btn:hover { background: #1976d2; }
.history-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  flex-shrink: 0;
}
.timeline-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #4caf50;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-btn:hover { background: #45a049; }
.timeline-btn.playing { background: #f44336; }
#historySlider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  outline: none;
}
#historySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffc107;
  cursor: pointer;
}
#historyTimestamp {
  font-size: 12px;
  min-width: 120px;
  text-align: center;
  color: #fff;
}
.history-speed-label {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
}
#historySpeed {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 2px 4px;
  color: #fff;
  font-size: 11px;
}
.history-follow-label {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  cursor: pointer;
}
.history-follow-label input {
  cursor: pointer;
}
.history-vehicle-list {
  flex: 0 0 auto;
  max-height: 40%;
  overflow-y: auto;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 8px;
}
.history-vehicle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 12px;
}
.history-vehicle-item:hover { background: rgba(255,255,255,0.1); }
.history-vehicle-item.selected { background: rgba(255,193,7,0.2); }
.history-vehicle-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history-vehicle-icon svg {
  width: 20px;
  height: 20px;
}
.history-vehicle-name { flex: 1; }
.history-vehicle-points { color: #888; font-size: 10px; }
.history-current-stats {
  flex: 1;
  min-height: 0;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}
.history-stats-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.history-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
}
.history-stat-label { color: #888; }
.history-stat-value { font-weight: bold; }

/* History path line on map */
.history-path-line {
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .history-main-layout { flex-direction: column; }
  .history-calendar-panel {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    max-height: none;
    margin-right: 0;
    margin-bottom: 12px;
    justify-content: center;
    gap: 20px;
  }
  .calendar-month { flex: 0 0 auto; }
}

@media (max-width: 900px) {
  .history-container { flex-direction: column; }
  .history-stats-panel { width: 100%; flex-direction: row; max-height: 150px; }
  .history-vehicle-list { max-height: 150px; flex: 1; }
  .history-current-stats { flex: 1; }
}

/* Mobile hamburger menu */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #16213e;
  border-bottom: 1px solid #2a3f5f;
  z-index: 1000;
  flex-direction: column;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu-item {
  padding: 12px 16px;
  color: #fff;
  border-bottom: 1px solid #2a3f5f;
  cursor: pointer;
}

.mobile-menu-item:hover, .mobile-menu-item:active {
  background: #2a3f5f;
}

/* Mobile panel overlay */
.mobile-panel-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1001;
  overflow-y: auto;
  padding: 16px;
}

.mobile-panel-overlay.open {
  display: block;
}

.mobile-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mobile-panel-title {
  color: #4fc3f7;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.mobile-panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
}

.mobile-panel-content {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Left panel scrolling fix */
.left-panel .card:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-panel .card:last-child .olt-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Auth Overlay */
.auth-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 46, 0.98);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.auth-overlay.active {
  display: flex;
}

.auth-box {
  background: #16213e;
  border-radius: 12px;
  padding: 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(79,195,247,0.2);
}

.auth-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.auth-icon.spinning {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.auth-box h2 {
  color: #4fc3f7;
  font-size: 24px;
  margin-bottom: 10px;
}

.auth-desc {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.auth-form label {
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-form input {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 12px 16px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.auth-form input:focus {
  border-color: #4fc3f7;
}

.auth-form input::placeholder {
  color: #666;
}

.auth-btn {
  background: #4fc3f7;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  color: #16213e;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 8px;
}

.auth-btn:hover {
  background: #81d4fa;
}

.auth-btn:active {
  transform: scale(0.98);
}

.auth-info {
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-label {
  color: #888;
  font-size: 12px;
}

.auth-info code {
  color: #4fc3f7;
  font-family: monospace;
  font-size: 14px;
}

.auth-hint {
  color: #666;
  font-size: 12px;
  font-style: italic;
}

@media (max-width: 768px) {
  body:not(.force-desktop) .mobile-menu-btn { display: block; }
  body:not(.force-desktop) .tagline { display: none; }
  body:not(.force-desktop) .header-stats { display: none !important; }
  body:not(.force-desktop) .timestamp .header-pill { display: none; }
  body:not(.force-desktop) .header { position: relative; }

  body:not(.force-desktop) .main-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.force-desktop) .left-panel,
  body:not(.force-desktop) .right-panel {
    display: none;
  }

  body:not(.force-desktop) .main-grid.mobile-show-fiberhoods .left-panel { display: flex; }
  body:not(.force-desktop) .main-grid.mobile-show-power .right-panel { display: flex; }

  body:not(.force-desktop) .center-panel {
    min-height: calc(100vh - 60px);
  }

  body:not(.force-desktop) .bottom-panel {
    display: none !important;
  }
}