/* ================================================
   FlightHub Dispatch System v3.0
   SCADA / Air Traffic Control aesthetic
   Cold grey. No glow. No gradient. No AI.
   ================================================ */
:root{
    --bg:#101214;--panel:#181a1e;--panel-2:#1f2225;--panel-3:#282c30;
    --rule:#2a2e33;--rule-soft:#222529;
    --white:#e8eaed;--mid:#9aa0a6;--dim:#5f6368;--faint:#3c4043;
    --go:#34a853;--stop:#ea4335;--hold:#fbbc04;--sky:#4285f4;
    --p1:#34a853;--p2:#4285f4;--p3:#fbbc04;--p4:#f29900;--p5:#ea4335;
    --bar:40px;--drawer:300px;--right:370px;--slide:.22s ease;
    --mono:'SF Mono','Cascadia Mono','Menlo','Consolas',monospace;
    --sans:'Inter',-apple-system,'Segoe UI','Helvetica Neue',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--white);background:var(--bg);-webkit-font-smoothing:antialiased}
input,select,textarea,button{font:inherit;color:inherit}
a{color:var(--sky);text-decoration:none}
:focus-visible{outline:1px solid var(--sky);outline-offset:1px}
::placeholder{color:var(--faint)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}

/* TOPBAR */
.topbar{height:var(--bar);background:var(--panel);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:900;user-select:none}
.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-right{gap:4px}
.topbar-brand{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;letter-spacing:-.01em}
.topbar-nav{display:flex;gap:1px;background:var(--rule);border-radius:2px;padding:1px}
.topbar-nav-btn{display:flex;align-items:center;gap:5px;padding:4px 14px;background:transparent;border:none;border-radius:1px;color:var(--mid);cursor:pointer;font-size:11.5px;font-weight:500;transition:background .1s,color .1s}
.topbar-nav-btn:hover{color:var(--white);background:var(--panel-2)}
.topbar-nav-btn.active{color:var(--white);background:var(--panel-3)}
.topbar-nav-btn i{font-size:10px}
.topbar-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mid);padding:0 6px}
.status-indicator{width:6px;height:6px;border-radius:50%;background:var(--stop)}.status-indicator.online{background:var(--go)}
.topbar-clock{font-family:var(--mono);font-size:11px;color:var(--dim);min-width:56px;text-align:right}
.topbar-icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:2px;color:var(--dim);cursor:pointer;font-size:12px;transition:all .1s}
.topbar-icon-btn:hover{color:var(--white);background:var(--panel-2);border-color:var(--rule)}

/* APP BODY */
.app-body{display:flex;height:calc(100vh - var(--bar));overflow:hidden}

/* LEFT PANEL */
.panel-left{width:var(--drawer);min-width:var(--drawer);background:var(--panel);border-right:1px solid var(--rule);display:flex;overflow:hidden;z-index:10;transition:width var(--slide),min-width var(--slide)}
.panel-left.collapsed{width:0;min-width:0;border-right-color:transparent}
.panel-left.collapsed .panel-inner{opacity:0;pointer-events:none}
.panel-inner{flex:1;display:flex;flex-direction:column;overflow:hidden;transition:opacity .15s;min-width:var(--drawer)}

/* Drawer handle */
.drawer-handle{width:24px;flex-shrink:0;background:var(--panel-2);border-left:1px solid var(--rule);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dim);position:relative;transition:background .12s,color .12s}
.drawer-handle:hover{background:var(--panel-3);color:var(--white)}
.drawer-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:28px;border-radius:2px;background:var(--faint);transition:background .12s}
.drawer-handle:hover::after{background:var(--mid)}
.drawer-handle i{display:none}
.panel-left.collapsed .drawer-handle{position:fixed;left:0;top:var(--bar);bottom:0;width:24px;z-index:20;border-left:none;border-right:1px solid var(--rule)}

.panel-header{padding:12px 14px 8px;flex-shrink:0}
.panel-header h2{font-size:13px;font-weight:600;color:var(--white)}
.panel-body{flex:1;overflow-y:auto;padding:8px 14px 14px}

/* FIELDS */
.field-group{margin-bottom:12px}
.field-label{display:block;font-size:10.5px;font-weight:600;color:var(--mid);margin-bottom:5px;letter-spacing:.02em}
.field-label-sm{display:block;font-size:10.5px;font-weight:500;color:var(--dim);margin-bottom:3px}
input[type="text"],input[type="number"],input[type="tel"],input[type="password"],textarea,select{width:100%;padding:6px 8px;background:var(--bg);border:1px solid var(--rule);border-radius:2px;font-size:12.5px;transition:border-color .1s;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--sky)}
textarea{resize:vertical;min-height:54px}
select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f6368'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
.coord-display{background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:6px 8px;font-family:var(--mono);font-size:12px;color:var(--white);cursor:pointer;min-height:30px;display:flex;align-items:center;transition:border-color .1s}
.coord-display:hover{border-color:var(--dim)}
.coord-placeholder{color:var(--faint);font-family:var(--sans)}.coord-value{color:var(--go)}
.coord-inputs{margin-top:5px}.coord-row{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.coord-field{position:relative}
.coord-prefix{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:9px;font-weight:700;color:var(--dim);pointer-events:none}
.coord-field input{padding-left:30px;font-family:var(--mono);font-size:11.5px}
.search-input-wrap{display:flex}.search-input-wrap input{border-radius:2px 0 0 2px;border-right:none}
.btn-search{width:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--rule);border-radius:0 2px 2px 0;color:var(--dim);cursor:pointer;transition:all .1s}
.btn-search:hover{background:var(--sky);color:#fff;border-color:var(--sky)}
.priority-bar{display:flex;gap:3px}
.priority-chip{flex:1;cursor:pointer}.priority-chip input{display:none}
.priority-chip span{display:flex;align-items:center;justify-content:center;width:100%;height:26px;border-radius:2px;background:var(--bg);border:1px solid var(--rule);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--faint);transition:all .1s}
.priority-chip:hover span{border-color:var(--dim);color:var(--dim)}
.priority-chip input:checked+span{color:#fff;border-color:transparent}
.priority-chip.p1 input:checked+span{background:var(--p1)}.priority-chip.p2 input:checked+span{background:var(--p2)}.priority-chip.p3 input:checked+span{background:var(--p3)}.priority-chip.p4 input:checked+span{background:var(--p4)}.priority-chip.p5 input:checked+span{background:var(--p5)}
.priority-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-top:2px;padding:0 1px}
.optional-section{border:none}.optional-toggle{cursor:pointer;list-style:none;color:var(--dim);font-size:10.5px;font-weight:500;padding:5px 0;border-top:1px solid var(--rule-soft);margin-top:2px}
.optional-toggle::before{content:"+ "}details[open] .optional-toggle::before{content:"− "}
.optional-toggle::-webkit-details-marker{display:none}.optional-fields{padding-top:6px}
.btn-dispatch{width:100%;height:36px;background:var(--go);border:none;border-radius:2px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .1s;margin-top:4px}
.btn-dispatch:hover{background:#2d9248}.btn-dispatch:active{transform:scale(.995)}.btn-dispatch:disabled{opacity:.4;cursor:not-allowed}
.btn-link{background:none;border:none;color:var(--sky);cursor:pointer;font-size:10.5px;padding:3px 0}.btn-link:hover{text-decoration:underline}
.btn-primary{padding:7px 16px;background:var(--sky);border:none;border-radius:2px;color:#fff;font-weight:600;cursor:pointer;font-size:12px;transition:background .1s}.btn-primary:hover{background:#3b78e7}
.btn-secondary{padding:7px 16px;background:var(--panel-3);border:1px solid var(--rule);border-radius:2px;color:var(--white);font-weight:500;cursor:pointer;font-size:12px;transition:all .1s}.btn-secondary:hover{background:var(--panel-2);border-color:var(--dim)}

/* MAP */
.map-container{flex:1;position:relative;overflow:hidden}
#map{width:100%;height:100%;z-index:1}
.leaflet-control-zoom{display:none!important}
.leaflet-control-attribution{font-size:9px!important;background:rgba(16,18,20,.75)!important;color:var(--faint)!important;padding:1px 5px!important}
.leaflet-control-attribution a{color:var(--faint)!important}
.map-overlay-stats{position:absolute;bottom:10px;left:10px;display:flex;gap:4px;z-index:500}
.stat-chip{background:rgba(24,26,30,.92);border:1px solid var(--rule);border-radius:2px;padding:3px 8px;display:flex;align-items:center;gap:5px}
.stat-chip-label{font-size:9.5px;color:var(--dim);font-weight:500}.stat-chip-value{font-family:var(--mono);font-size:11px;color:var(--white);font-weight:600}
.map-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;z-index:500}
.map-ctrl-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(24,26,30,.92);border:1px solid var(--rule);color:var(--mid);cursor:pointer;font-size:11px;transition:all .1s}
.map-ctrl-btn:first-child{border-radius:2px 2px 0 0}.map-ctrl-btn:last-child{border-radius:0 0 2px 2px}
.map-ctrl-btn:hover{color:var(--white);background:var(--panel-3)}
.map-ctrl-divider{height:0;border-top:1px solid var(--rule)}
.dock-label{background:rgba(24,26,30,.92)!important;border:1px solid var(--rule)!important;color:var(--white)!important;font-size:10px!important;font-family:var(--sans)!important;padding:2px 6px!important;border-radius:2px!important;box-shadow:none!important;white-space:nowrap!important}
.dock-label::before{border-top-color:var(--rule)!important}
.dock-status-badge{display:inline-block;padding:1px 4px;border-radius:1px;font-size:9px;font-weight:700;margin-left:4px}
.dock-status-badge.ready{background:rgba(52,168,83,.18);color:var(--go)}.dock-status-badge.on-duty{background:rgba(251,188,4,.15);color:var(--hold)}.dock-status-badge.charging{background:rgba(66,133,244,.15);color:var(--sky)}.dock-status-badge.offline{background:rgba(95,99,104,.15);color:var(--dim)}

/* RIGHT PANEL */
.panel-right{width:var(--right);min-width:var(--right);background:var(--panel);border-left:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;z-index:10}
.panel-right-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule);flex-shrink:0}
.panel-right-header h2{font-size:13px;font-weight:600}.panel-right-controls{display:flex;gap:3px}
.stream-container{width:100%;aspect-ratio:16/9;background:#000;position:relative;flex-shrink:0;overflow:hidden}
.stream-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--faint)}
.stream-placeholder i{font-size:24px;margin-bottom:6px;opacity:.35}.stream-placeholder p{font-size:12px;margin-bottom:2px}.stream-placeholder span{font-size:9.5px;opacity:.4}
#videoPlayer{width:100%;height:100%;object-fit:contain}
.telemetry-strip{display:flex;border-bottom:1px solid var(--rule);flex-shrink:0}
.telem-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 3px;border-right:1px solid var(--rule)}.telem-item:last-child{border-right:none}
.telem-label{font-size:8.5px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.telem-value{font-family:var(--mono);font-size:11.5px;color:var(--white);font-weight:500;margin-top:1px}
.telem-status{font-family:var(--sans)!important;font-size:10.5px!important;font-weight:600!important}
.telem-status.charging{color:var(--sky)}.telem-status.ready{color:var(--go)}.telem-status.on-duty{color:var(--hold)}.telem-status.rth{color:var(--stop)}
.media-section{flex:1;overflow-y:auto;padding:8px 12px}
.media-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.media-header h3{font-size:10.5px;font-weight:600;color:var(--mid)}
.outputs-list{display:flex;flex-direction:column;gap:6px}
.output-mission{background:var(--bg);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.output-mission-header{padding:7px 9px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .1s}
.output-mission-header:hover{background:var(--panel-2)}
.output-mission-name{font-size:11.5px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:5px}
.output-mission-name i{color:var(--dim);font-size:10px}
.output-mission-time{font-size:10px;color:var(--faint);font-family:var(--mono)}
.output-mission-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:4px 6px 6px}
.output-mission-gallery.collapsed{display:none}
.media-thumb{aspect-ratio:4/3;background:var(--panel-2);border:1px solid var(--rule);border-radius:1px;overflow:hidden;cursor:pointer;transition:border-color .1s}
.media-thumb:hover{border-color:var(--mid)}.media-thumb img{width:100%;height:100%;object-fit:cover}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal-box{width:480px;max-height:80vh;background:var(--panel);border:1px solid var(--rule);border-radius:2px;display:flex;flex-direction:column;overflow:hidden}
.modal-box-lg{width:540px}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-bottom:1px solid var(--rule);flex-shrink:0;min-height:40px}
.modal-tabs{display:flex;gap:0}
.modal-tab{padding:10px 14px;background:none;border:none;border-bottom:2px solid transparent;color:var(--mid);cursor:pointer;font-size:11.5px;font-weight:600;transition:all .1s}
.modal-tab:hover{color:var(--white)}.modal-tab.active{color:var(--white);border-bottom-color:var(--white)}
.modal-close{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--dim);cursor:pointer;border-radius:2px;transition:all .1s}
.modal-close:hover{background:var(--panel-3);color:var(--white)}
.modal-body{overflow-y:auto;padding:14px 16px}
.modal-tab-content{display:none}.modal-tab-content.active{display:block}
.settings-section{margin-bottom:16px}
.settings-section h3{font-size:10.5px;font-weight:600;color:var(--mid);margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--rule-soft)}
.modal-body input,.modal-body select,.modal-body textarea{font-size:11.5px;padding:5px 7px}
.modal-body .field-label{font-size:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:6px;padding-top:10px;border-top:1px solid var(--rule-soft);margin-top:6px}
.secret-input-wrap{display:flex}.secret-input-wrap input{border-radius:2px 0 0 2px;border-right:none}
.btn-reveal{width:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--rule);border-radius:0 2px 2px 0;color:var(--dim);cursor:pointer;font-size:11px;transition:all .1s}
.btn-reveal:hover{color:var(--white);background:var(--panel-3)}
.layer-upload-zone{border:1px dashed var(--rule);border-radius:2px;padding:16px;text-align:center;color:var(--dim);cursor:pointer;transition:border-color .1s}
.layer-upload-zone:hover{border-color:var(--mid);color:var(--mid)}
.layer-upload-zone i{font-size:18px;margin-bottom:4px;display:block}.layer-upload-zone p{font-size:11px;margin-bottom:1px}.layer-upload-zone span{font-size:9.5px}
.layer-list{margin-top:6px}
.layer-item{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;background:var(--bg);border:1px solid var(--rule);border-radius:2px;margin-bottom:3px;font-size:11.5px}
.layer-item-name{color:var(--white);display:flex;align-items:center;gap:5px}.layer-item-name i{color:var(--dim);font-size:10px}
.layer-item-actions{display:flex;gap:3px}
.layer-item-actions button{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--faint);cursor:pointer;font-size:10px;border-radius:2px}
.layer-item-actions button:hover{color:var(--white);background:var(--panel-2)}
.basemap-options{display:flex;gap:4px}
.basemap-option{flex:1;cursor:pointer}.basemap-option input{display:none}
.basemap-option span{display:flex;align-items:center;justify-content:center;width:100%;height:28px;background:var(--bg);border:1px solid var(--rule);border-radius:2px;font-size:11px;font-weight:500;color:var(--dim);transition:all .1s}
.basemap-option:hover span{color:var(--mid);border-color:var(--dim)}
.basemap-option input:checked+span{background:var(--panel-3);color:var(--white);border-color:var(--dim)}
.history-search{margin-bottom:6px}.history-filters-row{display:flex;gap:4px;margin-bottom:8px}.history-filters-row select{flex:1;padding:4px 6px;font-size:11px}
.history-list{display:flex;flex-direction:column;gap:4px;max-height:380px;overflow-y:auto}
.history-card{background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:8px 10px;cursor:pointer;transition:border-color .1s}.history-card:hover{border-color:var(--dim)}
.history-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.history-card-id{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--white)}
.badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:1px;font-size:9.5px;font-weight:700}
.badge-success{background:rgba(52,168,83,.12);color:var(--go)}.badge-fail{background:rgba(234,67,53,.12);color:var(--stop)}
.badge-pri{font-family:var(--mono);font-size:9.5px;padding:1px 5px;border-radius:1px;color:#fff}
.badge-p1{background:var(--p1)}.badge-p2{background:var(--p2)}.badge-p3{background:var(--p3)}.badge-p4{background:var(--p4)}.badge-p5{background:var(--p5)}
.history-card-mission{font-size:11px;font-weight:600;color:var(--white);margin-bottom:3px}
.history-card-detail{font-size:10.5px;color:var(--dim);line-height:1.45}.history-card-detail strong{color:var(--mid)}
.history-card-time{font-size:9.5px;color:var(--faint);margin-top:4px;font-family:var(--mono)}
.history-card-api{font-size:9.5px;color:var(--faint);margin-top:3px;padding:3px 5px;background:var(--panel-2);border-radius:1px;font-family:var(--mono);word-break:break-all}

/* TOAST */
.toast{position:fixed;bottom:14px;right:14px;padding:7px 12px;border-radius:2px;font-size:11.5px;font-weight:500;z-index:3000;transform:translateY(60px);opacity:0;transition:all .2s ease;max-width:340px;background:var(--panel);border:1px solid var(--rule);color:var(--white)}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-left:3px solid var(--go);color:var(--go)}.toast.error{border-left:3px solid var(--stop);color:var(--stop)}.toast.warning{border-left:3px solid var(--hold);color:var(--hold)}.toast.info{border-left:3px solid var(--sky);color:var(--sky)}

/* LOADING */
.loading-overlay{position:fixed;inset:0;background:rgba(16,18,20,.9);display:none;align-items:center;justify-content:center;z-index:4000}
.loading-overlay.show{display:flex}.loading-content{text-align:center}
.loading-spinner-ring{width:32px;height:32px;border:2px solid var(--rule);border-top-color:var(--white);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 8px}
@keyframes spin{to{transform:rotate(360deg)}}.loading-content p{font-size:12px;color:var(--mid)}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.lightbox-img{position:relative;max-width:90vw;max-height:90vh;object-fit:contain;z-index:1}
.lightbox-close{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:2px;color:#fff;cursor:pointer;font-size:14px}
.empty-state,.empty-state-sm{text-align:center;padding:20px 14px;color:var(--faint);font-size:11.5px}.empty-state-sm{padding:10px 6px;font-size:10.5px}

/* LEAFLET POPUP */
.leaflet-popup-content-wrapper{background:var(--panel)!important;color:var(--white)!important;border-radius:2px!important;border:1px solid var(--rule)!important;box-shadow:0 2px 12px rgba(0,0,0,.4)!important;padding:0!important}
.leaflet-popup-content{margin:8px 10px!important;font-size:11.5px!important}
.leaflet-popup-tip{background:var(--panel)!important;border:1px solid var(--rule)!important}
.leaflet-popup-close-button{color:var(--dim)!important;font-size:16px!important}.leaflet-popup-close-button:hover{color:var(--white)!important}
.drone-popup-title{font-weight:600;font-size:12px;margin-bottom:5px;display:flex;align-items:center;gap:5px}.drone-popup-title i{color:var(--mid)}
.drone-popup-row{display:flex;justify-content:space-between;padding:2px 0;font-size:10.5px}.drone-popup-row .dp-label{color:var(--dim)}.drone-popup-row .dp-value{font-family:var(--mono);color:var(--white);font-weight:500}
.target-popup{text-align:center}.target-popup .tp-title{font-weight:600;font-size:11.5px;color:var(--stop);margin-bottom:3px}.target-popup .tp-coords{font-family:var(--mono);font-size:10.5px;color:var(--mid)}

@media(max-width:900px){:root{--drawer:260px;--right:300px}}
@media(max-width:640px){.panel-left{position:absolute;top:var(--bar);left:0;bottom:0;z-index:20;width:100vw;min-width:0}.panel-left .panel-inner{min-width:0}.panel-right{position:absolute;top:var(--bar);right:0;bottom:0;z-index:20;width:100vw;min-width:0}.topbar-nav-btn span{display:none}}