@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');
:root{--bg:var(--bg);--panel:var(--panel);--panel2:var(--primary-soft);--line:var(--line);--text:var(--ink);--muted:var(--muted);--blue:var(--primary);--green:var(--success-ink);--amber:var(--warning-ink);--danger:var(--error-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#102946 0,transparent 36%),var(--bg)}button,input,textarea{font:inherit}.login-view{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);padding:38px;border:1px solid var(--line);border-radius:24px;background:rgba(14,26,41,.94);box-shadow:0 24px 80px #0008}.login-brand{width:230px;max-width:76%;filter:drop-shadow(0 10px 24px #0008)}.login-brand img,.brand-logo img{display:block;width:100%;height:auto}.brand-logo{width:132px;filter:drop-shadow(0 6px 16px #0008)}.eyebrow{margin:22px 0 7px;color:var(--blue);font-size:12px;letter-spacing:.14em;font-weight:800}.login-card h1,.hero h1{margin:0 0 8px;font-size:clamp(28px,5vw,42px)}.muted{color:var(--muted)}label{display:grid;gap:8px;margin-top:18px;color:var(--ink);font-size:14px;font-weight:650}input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--primary-soft)}button{border:0;border-radius:12px;padding:13px 18px;background:var(--blue);color:#03111e;font-weight:800;cursor:pointer}.login-card button{width:100%;margin-top:24px}.error{min-height:20px;color:var(--danger);font-size:14px}.topbar{height:70px;padding:0 max(22px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--panel);backdrop-filter:blur(18px);position:sticky;top:0;z-index:5}.brand,.top-actions{display:flex;align-items:center;gap:12px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px;letter-spacing:.08em;text-transform:uppercase}.pill{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}.pill.online{color:var(--green);border-color:var(--success-border);background:var(--success-soft)}.pill.offline{color:var(--danger);border-color:var(--error-border)}.ghost,.icon-button{background:transparent;color:var(--muted);border:1px solid var(--line)}main{width:min(1280px,calc(100% - 40px));margin:0 auto 50px}.hero{padding:45px 0 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.hero .eyebrow{margin-top:0}.hero p{margin-bottom:0}.secondary{background:var(--primary-soft);color:var(--ink);border:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stats article{padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel2),var(--panel2))}.stats span{display:block;color:var(--muted);font-size:13px}.stats strong{display:block;font-size:28px;margin-top:8px}.ok-text{color:var(--green)}.grid{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(460px,1.4fr);gap:16px}.panel{min-height:440px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(14,26,41,.94)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head .eyebrow{margin:0 0 5px}.panel h2{margin:0;font-size:21px}.icon-button{width:39px;height:39px;padding:0;font-size:22px}.empty{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);gap:7px}.empty strong{color:var(--ink)}.device-list{display:grid;gap:9px;margin-top:20px}.device{width:100%;padding:15px;text-align:left;color:var(--text);background:var(--panel2);border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:5px}.device:hover,.device.active{border-color:var(--primary);background:var(--primary-soft)}.device small{color:var(--muted)}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);display:inline-block;margin-right:7px}.status-dot.online{background:var(--green);box-shadow:0 0 12px #44d29b99}.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}.metrics div{padding:15px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}.metrics dt{color:var(--muted);font-size:12px}.metrics dd{margin:7px 0 0;font-weight:750}.chart-head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 8px}.chart-head span{color:var(--muted);font-size:12px}#battery-chart{width:100%;height:auto;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}.chart-grid{stroke:var(--line);stroke-width:1}.chart-line{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart-fill{fill:url(#chartGradient);opacity:.28}

/* Live drone video */
.live-video-panel{
  margin:22px 0 4px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel2)
}
.live-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}
.live-video-head .eyebrow{margin:0 0 4px}
.live-video-head h3{
  margin:0;
  font-family:Sora,Arial,sans-serif;
  font-size:16px
}
.operation-live-video-panel{margin:24px 0 18px}
.live-video-head-actions{display:flex;align-items:center;gap:10px}
.live-video-device-field{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--muted);
  font-size:12px
}
.live-video-device-field select{width:auto;min-width:170px;padding:7px 32px 7px 10px;font-size:12px}
.live-video-panel:not(.is-expanded) .live-video-stage{min-height:88px;aspect-ratio:auto}
.live-video-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:28px;
  padding:5px 10px;
  border:1px solid var(--error-border);
  border-radius:999px;
  background:var(--error-soft);
  color:var(--error-ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em
}
.live-video-badge.is-live{
  border-color:var(--success-ink);
  background:var(--success-soft);
  color:var(--success-ink);
  box-shadow:0 0 18px var(--success-soft)
}
.live-video-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg)
}
.live-video-stage video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000
}
.live-video-placeholder{
  display:grid;
  place-items:center;
  gap:7px;
  padding:28px;
  color:var(--muted);
  text-align:center
}
.live-video-placeholder strong{color:var(--ink)}
.live-video-placeholder span{
  max-width:440px;
  font-size:12px;
  line-height:1.45
}
.live-video-placeholder.is-error span{color:var(--error-ink)}
.live-video-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px
}
.live-video-controls button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.live-video-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:var(--muted);
  font-size:11px
}
.live-video-meta span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
body[data-theme="light"] .live-video-panel{
  border-color:#cfd8df;
  background:var(--panel2)
}
body[data-theme="light"] .live-video-head h3{color:var(--panel)}
body[data-theme="light"] .live-video-placeholder strong{color:#eef6ff}

@media(max-width:520px){
  .live-video-head{align-items:flex-start;flex-direction:column}
  .live-video-head-actions{width:100%;justify-content:space-between}
  .live-video-device-field{flex:1}
  .live-video-device-field select{min-width:0}
  .live-video-controls{display:grid;grid-template-columns:1fr 1fr}
  .live-video-controls button:first-child{grid-column:1/-1}
  .live-video-meta{align-items:flex-start;flex-direction:column}
}
.toast{position:fixed;right:22px;bottom:22px;padding:14px 18px;border-radius:12px;background:var(--primary-soft);border:1px solid var(--line);box-shadow:0 15px 40px #0007}.toast.error-toast{background:var(--error-soft);border-color:var(--error-border)}.app-view[hidden],.login-view[hidden],[hidden]{display:none!important}
@media(max-width:850px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.hero button{width:100%}}@media(max-width:520px){.dialog-actions{flex-direction:column-reverse}.dialog-actions button{width:100%}main{width:min(100% - 24px,1280px)}.topbar{padding:0 12px}.top-actions .pill{display:none}.stats{grid-template-columns:1fr 1fr;gap:8px}.stats article{padding:15px}.stats strong{font-size:22px}.panel{padding:16px}.metrics{grid-template-columns:1fr}.login-card{padding:26px}}

textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);outline:none;resize:vertical}textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--primary-soft)}select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);outline:none;font:inherit}select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--primary-soft)}.nav-button{padding:9px 12px}.nav-button.active{color:#fff;border-color:var(--primary);background:var(--primary-medium)}.admin-grid{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(500px,1.3fr);gap:16px;margin-bottom:16px}.compact-panel{min-height:0}.stack-form{display:grid;gap:2px;margin-top:8px}.stack-form button{margin-top:18px}.checkbox-field{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;font-weight:600}.checkbox-field input{width:18px;height:18px;margin:0;padding:0;accent-color:var(--blue)}.form-help{margin:8px 0 0;color:var(--muted);font-size:12px}.admin-user-list,.audit-list,.session-list{display:grid;gap:10px;margin-top:18px}.admin-user{padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);display:grid;grid-template-columns:1fr auto;gap:12px}.admin-user h3{margin:0 0 4px;font-size:16px}.admin-user p{margin:0;color:var(--muted);font-size:12px}.user-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:7px}.small-button{padding:8px 10px;font-size:12px}.danger-button{color:var(--error-ink);border-color:var(--error-border);background:var(--error-soft)}.role-badge{display:inline-block;margin-top:8px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:11px}.audit-event,.session-item{padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);display:flex;justify-content:space-between;gap:14px}.audit-event small,.session-item small{color:var(--muted)}.portal-dialog{width:min(520px,calc(100% - 32px));padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 30px 100px #000b}.portal-dialog::backdrop{background:#020810d9;backdrop-filter:blur(4px)}.portal-dialog h2{margin-top:0}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.dialog-actions button{min-width:130px}.portal-dialog button:disabled{opacity:.55;cursor:wait}.temporary-password{display:block;margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--link);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.audit-panel{margin-bottom:50px}
@media(max-width:1000px){.top-actions .nav-button{padding:8px}}
@media(max-width:850px){.admin-grid{grid-template-columns:1fr}.hero>button{width:100%}.topbar{height:auto;min-height:70px;padding-top:9px;padding-bottom:9px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.top-actions .pill{display:none}}

.operations-layout{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}.operation-list{display:grid;gap:10px;margin-top:18px}.operation-card{width:100%;padding:15px;text-align:left;color:var(--text);background:var(--panel2);border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.operation-card:hover,.operation-card.active{border-color:var(--primary);background:var(--primary-soft)}.operation-card strong,.operation-card small{display:block}.operation-card small{margin-top:5px;color:var(--muted)}.operation-card-side{text-align:right;min-width:130px}.operation-card-side .pill{display:inline-block}.operation-list-head{align-items:flex-end}.operation-list-head-actions{display:flex;align-items:center;gap:10px}.operation-list-head-actions #open-create-operation{white-space:nowrap}.operation-create-dialog{width:min(620px,calc(100% - 32px))}.operation-create-head{align-items:flex-end}.operation-create-intro{margin:10px 0 2px;line-height:1.5}.operation-create-dialog .stack-form{margin-top:10px}.operation-create-dialog .dialog-actions{margin-top:24px}.operation-detail-panel{min-height:0;margin-top:8px;margin-bottom:50px;border-top-width:2px}.operation-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.operation-actions .operation-notam-button,.operation-actions .operation-diagnostics-button{background:var(--panel2)}.operation-complete-button{margin-left:3px;border-color:var(--error-border);background:var(--error-soft);color:var(--error-ink)}.operation-metrics{grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 20px}.operation-metrics div{padding:11px 13px;border-radius:10px}.operation-metrics dt{font-size:11px;letter-spacing:.04em;text-transform:uppercase}.operation-metrics dd{margin-top:5px;font-size:17px;font-weight:800}.track-head{display:flex;align-items:center;justify-content:space-between;margin:24px 0 10px}.map-link{color:var(--link);text-decoration:none;font-size:13px}.map-link:hover{text-decoration:underline}#operation-track{width:100%;height:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}.track-background{fill:var(--panel2)}.track-line-shadow{fill:none;stroke:var(--bg);stroke-width:10;stroke-linejoin:round;stroke-linecap:round}.track-line{fill:none;stroke:url(#trackGradient);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}.track-start{fill:var(--green);stroke:#dffff2;stroke-width:2}.track-end{fill:var(--blue);stroke:#e5f6ff;stroke-width:2}.track-label{fill:var(--ink);font-size:13px;font-weight:700}.operation-events{display:grid;gap:9px;margin-top:22px}.operation-events h3{margin:0 0 2px;font-size:15px}.compact-empty{min-height:220px}
@media(max-width:1000px){.operation-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.operation-list-head{align-items:flex-start;flex-direction:column}.operation-list-head-actions{width:100%;justify-content:space-between}.operation-list-head-actions #open-create-operation{flex:1}.operation-card{grid-template-columns:1fr}.operation-card-side{text-align:left}.operation-metrics{grid-template-columns:1fr 1fr}.operation-actions{align-items:flex-end;flex-direction:column}.track-head{align-items:flex-start;gap:8px;flex-direction:column}}


/* Operational map workspace */
.map-sync-state{display:flex;align-items:center;gap:10px}.shared-map-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.55fr);gap:16px;margin-bottom:50px}.map-editor-panel{min-height:0;padding:0;overflow:hidden}.map-editor-toolbar{padding:16px 18px;border-bottom:1px solid var(--line);background:var(--panel2);display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}.tool-group{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.map-tool.active{background:var(--green);color:#041710;border-color:var(--green)}.inline-field{display:grid;gap:5px;margin:0;color:var(--muted);font-size:11px}.inline-field input{width:180px;padding:8px 10px;border-radius:9px}.inline-field.info-field input{width:min(280px,30vw)}.inline-field select{width:105px;padding:8px 10px;border-radius:9px}.file-button{display:inline-flex;align-items:center;min-height:34px;margin:0;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--primary-soft);color:var(--ink);font-size:12px;font-weight:800;cursor:pointer}.file-button:hover{border-color:var(--blue)}.shared-map{width:100%;height:clamp(460px,64vh,760px);background:var(--panel2)}.map-editor-help{min-height:45px;margin:0;padding:13px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.shared-elements-panel{align-self:start;max-height:calc(64vh + 128px);overflow:auto}.map-element-list{display:grid;gap:9px;margin-top:18px}.map-element-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.map-element-card:hover{border-color:var(--line)}.map-element-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.map-element-focus{width:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--text);display:grid;grid-template-columns:auto 1fr;gap:10px;text-align:left}.map-element-focus span:last-child{min-width:0}.map-element-focus strong,.map-element-focus small{display:block;overflow:hidden;text-overflow:ellipsis}.map-element-focus strong{font-size:15px;white-space:nowrap}.map-element-focus small{margin-top:6px;color:var(--muted);font-size:11px;white-space:normal}.map-element-focus .map-element-description{color:var(--ink);line-height:1.4}.map-marker-info{max-width:280px;color:#17212b;font:14px/1.45 Inter,ui-sans-serif,sans-serif}.map-marker-info strong{display:block;font-size:15px}.map-marker-info p{margin:7px 0 0;white-space:pre-wrap}.map-element-actions{display:flex;gap:6px;margin-top:11px}.map-element-actions button{flex:1}.map-color-dot{width:11px;height:11px;flex:0 0 auto;margin-top:3px;border-radius:50%;box-shadow:0 0 0 3px #ffffff12}.map-list-empty{padding:36px 12px;text-align:center;color:var(--muted);font-size:13px}.gm-style{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

@media(max-width:980px){.shared-map-layout{grid-template-columns:1fr}.shared-elements-panel{max-height:none}.shared-map{height:58vh}}
@media(max-width:650px){.map-sync-state{width:100%;justify-content:space-between}.map-editor-toolbar{align-items:stretch}.tool-group{width:100%}.tool-group .map-tool{flex:1}.inline-field{flex:1}.inline-field input,.inline-field select{width:100%}.file-button{flex:1;justify-content:center}.shared-map{height:52vh;min-height:390px}}


/* DJI wayline library */
.wayline-library-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.wayline-library-head .eyebrow{margin:0 0 5px}.wayline-library-help{margin:10px 0 14px;color:var(--muted);font-size:12px;line-height:1.5}.wayline-list{display:grid;gap:9px}.wayline-card{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.wayline-card strong,.wayline-card small{display:block}.wayline-card strong{font-size:14px}.wayline-card small{margin-top:5px;color:var(--muted);font-size:11px}.wayline-actions{display:flex;gap:6px;margin-top:11px}.wayline-actions button{flex:1}.wayline-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.wayline-field-grid{grid-template-columns:1fr}.map-element-actions{flex-wrap:wrap}.map-element-actions button{min-width:calc(50% - 4px)}}


/* Dennis Miller-inspired light DRNE interface */
:root{
  color-scheme:light;
  --bg:var(--bg);
  --panel:#ffffff;
  --panel2:var(--panel);
  --line:var(--line);
  --text:var(--ink);
  --muted:var(--muted);
  --blue:var(--primary);
  --green:var(--success-ink);
  --amber:var(--warning-ink);
  --danger:var(--error-ink);
  font-family:Archivo,Arial,sans-serif;
  color:var(--text);
  background:var(--bg)
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Archivo,Arial,sans-serif
}
h1,h2,h3,.brand,.top-actions,.stats strong,.panel-head strong{
  font-family:Sora,Arial,sans-serif
}
.login-view{
  position:relative;
  overflow:hidden;
  background:var(--bg)
}
.login-view::before{
  content:"";
  position:absolute;
  width:min(42vw,560px);
  aspect-ratio:1;
  left:-12vw;
  top:-16vw;
  border-radius:50%;
  background:var(--primary)
}
.login-card{
  position:relative;
  width:min(520px,100%);
  padding:52px;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--panel);
  box-shadow:none
}
.login-brand{
  width:248px;
  max-width:80%;
  filter:brightness(0) saturate(100%)
}
.brand-logo{
  width:150px;
  filter:brightness(0) saturate(100%)
}
.eyebrow{
  color:var(--primary);
  font-family:Sora,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase
}
.login-card h1,.hero h1{
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:clamp(38px,5vw,64px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  text-transform:uppercase
}
.login-card .muted{max-width:38ch}
.muted{color:var(--muted)}
label{color:var(--ink);font-weight:600}
input,textarea,select{
  border:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
  color:var(--ink)
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-soft)
}
button,.file-button{
  min-height:40px;
  border:1px solid var(--primary);
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-family:Sora,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.015em;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease
}
button:hover,.file-button:hover{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
button:active,.file-button:active{transform:translateY(1px)}
.ghost,.icon-button,.secondary,.small-button.secondary,.file-button{
  border-color:var(--ink);
  background:var(--panel);
  color:var(--ink)
}
.ghost:hover,.icon-button:hover,.secondary:hover,.small-button.secondary:hover,.file-button:hover{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
.topbar{
  height:92px;
  padding:0 max(30px,calc((100vw - 1380px)/2));
  border-bottom:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(16px)
}
.brand small{
  color:var(--muted);
  font-family:Archivo,Arial,sans-serif;
  font-size:10px;
  font-weight:600
}
.top-actions{gap:7px}
.nav-button{
  min-height:38px;
  padding:8px 14px;
  border-color:transparent;
  background:transparent;
  color:var(--ink);
  font-size:12px;
  text-transform:uppercase
}
.nav-button:hover,.nav-button.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
.pill{
  border-color:var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--muted)
}
.pill.online{
  border-color:var(--success-ink);
  background:var(--success-soft);
  color:var(--success-ink)
}
.pill.offline{
  border-color:var(--error-ink);
  background:var(--error-soft);
  color:var(--error-ink)
}
main{width:min(1380px,calc(100% - 64px));margin-bottom:72px}
.hero{
  min-height:220px;
  padding:72px 0 38px;
  align-items:flex-end;
  border-bottom:1px solid var(--ink)
}
.hero p{max-width:62ch}
.stats{
  gap:1px;
  margin:28px 0;
  background:var(--ink);
  border:1px solid var(--ink)
}
.stats article{
  padding:28px;
  border:0;
  border-radius:0;
  background:var(--panel)
}
.stats span{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em
}
.stats strong{font-size:36px;font-weight:600}
.ok-text{color:var(--success-ink)}
.grid,.admin-grid,.operations-layout,.shared-map-layout{gap:24px}
.panel{
  border:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
  box-shadow:none
}
.panel h2{
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:22px;
  font-weight:600;
  text-transform:uppercase
}
.empty{color:var(--muted)}
.empty strong{color:var(--ink)}
.device,.admin-user,.audit-event,.session-item,.operation-card,.map-element-card,.wayline-card{
  border-color:var(--line);
  border-radius:0;
  background:var(--panel2);
  color:var(--ink)
}
.device:hover,.device.active,.operation-card:hover,.operation-card.active,.map-element-card:hover{
  border-color:var(--primary);
  background:var(--panel)
}
.device small,.admin-user p,.audit-event small,.session-item small,.operation-card small,
.map-element-focus small,.wayline-card small,.wayline-library-help,.map-list-empty{color:var(--muted)}
.status-dot{background:var(--error-ink)}
.status-dot.online{background:var(--success-ink);box-shadow:none}
.metrics div{
  border-color:var(--line);
  border-radius:0;
  background:var(--panel2)
}
.metrics dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#battery-chart,#operation-track{
  border-color:var(--line);
  border-radius:0;
  background:var(--panel)
}
.chart-grid{stroke:var(--line)}
.chart-line{stroke:var(--primary)}
.track-background{fill:#fff}
.track-line-shadow{stroke:var(--line)}
.track-end{fill:var(--primary);stroke:#fff}
.track-label{fill:var(--ink)}
.map-link{color:var(--primary-hover);font-weight:600}
.role-badge{border-color:var(--line);color:var(--ink);background:var(--panel)}
.danger-button{
  border-color:var(--error-ink);
  background:var(--panel);
  color:var(--error-ink)
}
.danger-button:hover{background:var(--error-ink);color:#fff}
.portal-dialog{
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--panel);
  color:var(--ink);
  box-shadow:none
}
.portal-dialog::backdrop{background:rgba(5,5,5,.66);backdrop-filter:blur(3px)}
.temporary-password{
  border-color:var(--ink);
  border-radius:0;
  background:var(--bg);
  color:var(--ink)
}
.toast{
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--ink);
  color:#fff;
  box-shadow:none
}
.toast.error-toast{border-color:var(--error-ink);background:var(--error-ink)}
.map-editor-panel{border-color:var(--ink)}
.map-editor-toolbar{
  border-bottom-color:var(--line);
  background:var(--panel)
}
.map-tool.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
}
.inline-field{color:var(--muted)}
.inline-field input,.inline-field select{border-radius:0}
.shared-map{background:var(--line)}
.map-editor-help{
  border-top-color:var(--line);
  background:var(--panel);
  color:var(--muted)
}
.map-element-focus{color:var(--ink)}
.map-element-focus .map-element-description{color:var(--ink)}
.map-color-dot{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.map-marker-info{color:var(--ink);font-family:Archivo,Arial,sans-serif}
.gm-style{font-family:Archivo,Arial,sans-serif}
.gm-style button{
  min-height:0;
  border-radius:0;
  padding:0;
  background:transparent;
  color:inherit;
  font-family:Arial,sans-serif;
  letter-spacing:normal
}
.wayline-library-head{border-top-color:var(--line)}
.map-wrap{
  border-color:var(--line);
  border-radius:0;
  background:var(--line)
}
.map-empty{color:var(--muted);background:var(--panel2)}
.map-empty strong{color:var(--ink)}
.map-type{
  border-color:var(--ink);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink)
}
.map-type.active,.secondary.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
}
.map-footer{color:var(--muted)}
@media(max-width:850px){
  .topbar{height:auto;min-height:82px}
  main{width:min(100% - 32px,1380px)}
  .hero{min-height:0;padding:48px 0 28px}
}
@media(max-width:520px){
  .login-card{padding:32px 24px}
  .login-view::before{width:260px;left:-130px;top:-120px}
  main{width:min(100% - 22px,1380px)}
  .stats article{padding:20px 16px}
  .stats strong{font-size:28px}
  .panel{padding:18px}
}


/* Consolidated user administration */
.user-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:28px 0 24px;
  border:1px solid var(--ink);
  background:var(--ink)
}
.user-overview article{
  padding:22px 24px;
  background:var(--panel)
}
.user-overview span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.user-overview strong{
  display:block;
  margin-top:8px;
  font-family:Sora,Arial,sans-serif;
  font-size:30px;
  font-weight:600
}
.user-management-panel{margin-bottom:24px}
.user-management-head{align-items:flex-end}
.user-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(170px,220px) auto;
  gap:12px;
  align-items:end;
  margin:22px 0 16px
}
.user-toolbar label{margin:0}
.user-toolbar label>span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
.user-toolbar .pill{
  min-width:54px;
  text-align:center;
  align-self:end;
  margin-bottom:1px
}
.user-table-header,
.user-table-row{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) minmax(120px,.8fr) minmax(130px,.85fr) minmax(150px,1fr) 70px 52px;
  gap:16px;
  align-items:center
}
.user-table-header{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.admin-user-list{
  gap:0;
  margin-top:0;
  border-top:1px solid var(--line)
}
.admin-user.user-table-row{
  min-height:74px;
  padding:14px;
  border-width:0 0 1px;
  background:var(--panel)
}
.admin-user.user-table-row:hover{background:var(--panel2)}
.user-identity{min-width:0}
.user-identity strong,
.user-identity small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.user-identity strong{
  font-family:Sora,Arial,sans-serif;
  font-size:14px
}
.user-identity small{
  margin-top:4px;
  color:var(--muted);
  font-size:11px
}
.user-table-row .role-badge{
  margin:0;
  white-space:nowrap
}
.user-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700
}
.user-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%
}
.user-status.is-active{color:var(--success-ink)}
.user-status.is-active::before{background:var(--success-ink)}
.user-status.is-inactive{color:var(--error-border)}
.user-status.is-inactive::before{background:var(--error-ink)}
.password-change-note{
  display:block;
  margin-top:4px;
  color:var(--warning-ink);
  font-size:10px
}
.user-last-login,
.user-session-count{
  color:var(--muted);
  font-size:12px
}
.user-session-count{text-align:center}
.user-menu{
  position:relative;
  justify-self:end
}
.user-menu summary{
  display:grid;
  place-items:center;
  width:38px;
  height:34px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink);
  cursor:pointer;
  font-weight:800;
  list-style:none
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu[open] summary{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
.user-menu-popover{
  position:absolute;
  z-index:8;
  right:0;
  top:42px;
  width:210px;
  padding:6px;
  border:1px solid var(--ink);
  background:var(--panel);
  box-shadow:0 14px 36px rgba(0,0,0,.14)
}
.user-menu-popover button{
  width:100%;
  min-height:0;
  padding:10px 12px;
  border:0;
  border-radius:0;
  background:var(--panel);
  color:var(--ink);
  text-align:left;
  font-family:Archivo,Arial,sans-serif;
  font-size:12px
}
.user-menu-popover button:hover{
  background:var(--panel2);
  color:var(--ink)
}
.user-menu-popover .danger-menu-action{color:var(--error-ink)}
.user-list-empty{
  display:grid;
  place-items:center;
  min-height:180px;
  padding:24px;
  color:var(--muted);
  text-align:center
}
.user-list-empty strong{
  display:block;
  color:var(--ink);
  font-family:Sora,Arial,sans-serif
}
.user-list-empty span{margin-top:5px;font-size:12px}
.audit-panel .audit-list{margin-top:14px}
.audit-panel .audit-event{padding:10px 12px}
#create-user-dialog{width:min(560px,calc(100% - 32px))}

@media(max-width:1000px){
  .user-table-header{display:none}
  .user-table-row{
    grid-template-columns:minmax(0,1fr) auto auto 52px
  }
  .user-table-row>div:nth-child(4),
  .user-table-row>div:nth-child(5){display:none}
  .user-menu{grid-column:4}
}
@media(max-width:700px){
  .user-overview{grid-template-columns:1fr}
  .user-toolbar{grid-template-columns:1fr}
  .user-toolbar .pill{justify-self:start}
  .user-table-row{grid-template-columns:1fr auto}
  .user-table-row>div:nth-child(2){display:none}
  .user-table-row>div:nth-child(3){grid-column:1}
  .user-menu{grid-column:2;grid-row:1 / span 2}
}


/* Branded confirmation dialog */
.confirm-dialog{
  width:min(520px,calc(100% - 32px));
  padding:32px
}
.confirm-dialog .eyebrow{margin:0 0 12px}
.confirm-dialog h2{
  margin:0;
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:clamp(24px,4vw,34px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.025em;
  text-transform:uppercase
}
.confirm-dialog #confirm-dialog-message{
  margin:18px 0 28px;
  font-size:15px;
  line-height:1.6
}
.confirm-dialog .dialog-actions{
  margin-top:0;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.confirm-dialog .dialog-actions button{min-width:130px}
@media(max-width:520px){
  .confirm-dialog{padding:26px 22px}
  .confirm-dialog .dialog-actions{display:grid;grid-template-columns:1fr}
  .confirm-dialog .dialog-actions button{width:100%}
}


/* Cross-browser modal overlay */
.confirm-dialog-backdrop[hidden]{display:none}
.confirm-dialog-backdrop{
  position:fixed;
  z-index:10000;
  inset:0;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(5,5,5,.66);
  backdrop-filter:blur(3px)
}
.confirm-dialog-backdrop .confirm-dialog{
  position:relative;
  inset:auto;
  margin:0;
  max-height:calc(100vh - 32px);
  overflow:auto;
  transform:none
}
body.modal-open{overflow:hidden}


/* User administration refinements */
.user-overview-card{
  min-height:0;
  padding:22px 24px;
  border:0;
  border-radius:0;
  background:var(--panel);
  color:var(--ink);
  text-align:left;
  letter-spacing:normal
}
.user-overview-card:hover{
  border:0;
  background:var(--panel2);
  color:var(--ink)
}
.user-overview-card.active{
  background:var(--panel);
  color:var(--ink);
  box-shadow:inset 0 -4px 0 var(--primary)
}
.user-overview-card span{
  display:block;
  color:var(--muted);
  font-family:Archivo,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.user-overview-card strong{
  display:block;
  margin-top:8px;
  font-family:Sora,Arial,sans-serif;
  font-size:30px;
  font-weight:600
}
.user-overview-card small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-family:Archivo,Arial,sans-serif;
  font-size:10px;
  font-weight:600
}
.user-toolbar{
  grid-template-columns:minmax(260px,1fr) minmax(160px,210px) minmax(160px,210px) auto
}
.current-user-label{
  display:inline-block;
  margin-left:7px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-family:Archivo,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  vertical-align:2px;
  text-transform:uppercase
}
.user-menu-popover button:disabled{
  cursor:not-allowed;
  opacity:.42;
  background:var(--panel);
  color:var(--muted)
}
.user-menu-note{
  display:block;
  padding:7px 12px 5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35
}
@media(max-width:900px){
  .user-toolbar{grid-template-columns:1fr 1fr}
  .user-toolbar .user-search-field{grid-column:1 / -1}
  .user-toolbar .pill{justify-self:start}
}
@media(max-width:700px){
  .user-toolbar{grid-template-columns:1fr}
  .user-toolbar .user-search-field{grid-column:auto}
}


/* DRNE dark mode */
body[data-theme="dark"]{
  --bg:var(--bg);
  --panel:var(--panel);
  --panel2:var(--panel2);
  --line:var(--line);
  --text:var(--ink);
  --muted:var(--muted);
  --blue:var(--primary);
  --green:var(--success-ink);
  --amber:#ffbb00;
  --danger:var(--error-ink);
  background:var(--bg);
  color:var(--ink)
}
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3{color:var(--ink)}
body[data-theme="dark"] .login-view{
  background:radial-gradient(circle at 12% 15%,#173a58 0,transparent 34%),var(--bg)
}
body[data-theme="dark"] .login-view::before{
  width:min(40vw,520px);
  left:-15vw;
  top:-18vw;
  background:var(--primary);
  opacity:.82
}
body[data-theme="dark"] .login-card{
  border-color:var(--line);
  background:var(--panel);
  box-shadow:0 30px 100px rgba(0,0,0,.36)
}
body[data-theme="dark"] .login-brand,
body[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
body[data-theme="dark"] .login-card h1,
body[data-theme="dark"] .hero h1{color:var(--ink)}
body[data-theme="dark"] .eyebrow{color:var(--primary)}
body[data-theme="dark"] .muted{color:var(--muted)}
body[data-theme="dark"] label{color:var(--ink)}
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select{
  border-color:var(--line);
  background:var(--panel2);
  color:var(--ink)
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{color:var(--muted)}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft)
}
body[data-theme="dark"] button,
body[data-theme="dark"] .file-button{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
}
body[data-theme="dark"] button:hover,
body[data-theme="dark"] .file-button:hover{
  border-color:var(--primary-hover);
  background:var(--primary-hover);
  color:#fff
}
body[data-theme="dark"] .ghost,
body[data-theme="dark"] .icon-button,
body[data-theme="dark"] .secondary,
body[data-theme="dark"] .small-button.secondary,
body[data-theme="dark"] .file-button{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink)
}
body[data-theme="dark"] .ghost:hover,
body[data-theme="dark"] .icon-button:hover,
body[data-theme="dark"] .secondary:hover,
body[data-theme="dark"] .small-button.secondary:hover,
body[data-theme="dark"] .file-button:hover{
  border-color:var(--primary);
  background:var(--primary-medium);
  color:#fff
}
body[data-theme="dark"] .topbar{
  border-bottom-color:var(--line);
  background:var(--panel)
}
body[data-theme="dark"] .brand small{color:var(--muted)}
body[data-theme="dark"] .nav-button{
  border-color:transparent;
  background:transparent;
  color:var(--ink)
}
body[data-theme="dark"] .nav-button:hover,
body[data-theme="dark"] .nav-button.active{
  border-color:var(--primary);
  background:var(--primary-medium);
  color:#fff
}
body[data-theme="dark"] .theme-toggle{
  border-color:var(--line);
  color:var(--ink)
}
body[data-theme="dark"] .pill{
  border-color:var(--line);
  background:var(--panel2);
  color:var(--ink)
}
body[data-theme="dark"] .pill.online{
  border-color:var(--success-border);
  background:var(--success-soft);
  color:var(--success-ink)
}
body[data-theme="dark"] .pill.offline{
  border-color:var(--error-border);
  background:var(--error-soft);
  color:var(--error-ink)
}
body[data-theme="dark"] .hero{border-bottom-color:var(--line)}
body[data-theme="dark"] .stats{
  border-color:var(--line);
  background:var(--line)
}
body[data-theme="dark"] .stats article{background:var(--panel)}
body[data-theme="dark"] .stats span{color:var(--muted)}
body[data-theme="dark"] .stats strong{color:var(--ink)}
body[data-theme="dark"] .ok-text{color:var(--success-ink)}
body[data-theme="dark"] .panel{
  border-color:var(--line);
  background:var(--panel)
}
body[data-theme="dark"] .panel h2{color:var(--ink)}
body[data-theme="dark"] .empty{color:var(--muted)}
body[data-theme="dark"] .empty strong{color:var(--ink)}
body[data-theme="dark"] .device,
body[data-theme="dark"] .admin-user,
body[data-theme="dark"] .audit-event,
body[data-theme="dark"] .session-item,
body[data-theme="dark"] .operation-card,
body[data-theme="dark"] .map-element-card,
body[data-theme="dark"] .wayline-card{
  border-color:var(--line);
  background:var(--panel2);
  color:var(--ink)
}
body[data-theme="dark"] .device:hover,
body[data-theme="dark"] .device.active,
body[data-theme="dark"] .operation-card:hover,
body[data-theme="dark"] .operation-card.active,
body[data-theme="dark"] .map-element-card:hover{
  border-color:var(--primary);
  background:var(--primary-soft)
}
body[data-theme="dark"] .device small,
body[data-theme="dark"] .admin-user p,
body[data-theme="dark"] .audit-event small,
body[data-theme="dark"] .session-item small,
body[data-theme="dark"] .operation-card small,
body[data-theme="dark"] .map-element-focus small,
body[data-theme="dark"] .wayline-card small,
body[data-theme="dark"] .wayline-library-help,
body[data-theme="dark"] .map-list-empty{color:var(--muted)}
body[data-theme="dark"] .metrics div{
  border-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .metrics dt{color:var(--muted)}
body[data-theme="dark"] #battery-chart,
body[data-theme="dark"] #operation-track{
  border-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .chart-grid{stroke:var(--line)}
body[data-theme="dark"] .chart-line{stroke:var(--primary)}
body[data-theme="dark"] .track-background{fill:var(--panel2)}
body[data-theme="dark"] .track-line-shadow{stroke:var(--bg)}
body[data-theme="dark"] .track-end{fill:var(--primary);stroke:#e5f6ff}
body[data-theme="dark"] .track-label{fill:var(--ink)}
body[data-theme="dark"] .map-link{color:var(--link)}
body[data-theme="dark"] .role-badge{
  border-color:var(--line);
  color:var(--ink);
  background:var(--primary-soft)
}
body[data-theme="dark"] .danger-button{
  border-color:var(--error-border);
  background:var(--error-soft);
  color:var(--error-ink)
}
body[data-theme="dark"] .danger-button:hover{
  border-color:var(--error-ink);
  background:#7a2638;
  color:#fff
}
body[data-theme="dark"] .portal-dialog{
  border-color:var(--line);
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 30px 100px rgba(0,0,0,.5)
}
body[data-theme="dark"] .portal-dialog h2{color:var(--ink)}
body[data-theme="dark"] .portal-dialog::backdrop,
body[data-theme="dark"] .confirm-dialog-backdrop{background:rgba(2,8,16,.84)}
body[data-theme="dark"] .confirm-dialog .dialog-actions{border-top-color:var(--line)}
body[data-theme="dark"] .temporary-password{
  border-color:var(--line);
  background:var(--bg);
  color:var(--link)
}
body[data-theme="dark"] .toast{
  border-color:var(--line);
  background:var(--primary-soft);
  color:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.4)
}
body[data-theme="dark"] .toast.error-toast{
  border-color:var(--error-border);
  background:var(--error-soft)
}
body[data-theme="dark"] .map-editor-panel{border-color:var(--line)}
body[data-theme="dark"] .map-editor-toolbar{
  border-bottom-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .map-tool.active{
  border-color:var(--success-ink);
  background:var(--success-ink);
  color:#041710
}
body[data-theme="dark"] .inline-field{color:var(--muted)}
body[data-theme="dark"] .shared-map{background:var(--panel2)}
body[data-theme="dark"] .map-editor-help{
  border-top-color:var(--line);
  background:var(--panel2);
  color:var(--muted)
}
body[data-theme="dark"] .map-element-focus{color:var(--ink)}
body[data-theme="dark"] .map-element-focus .map-element-description{color:var(--ink)}
body[data-theme="dark"] .map-color-dot{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
body[data-theme="dark"] .wayline-library-head{border-top-color:var(--line)}
body[data-theme="dark"] .map-wrap{
  border-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .map-empty{
  color:var(--muted);
  background:var(--panel2)
}
body[data-theme="dark"] .map-empty strong{color:var(--ink)}
body[data-theme="dark"] .map-type{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink)
}
body[data-theme="dark"] .map-type.active,
body[data-theme="dark"] .secondary.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff
}
body[data-theme="dark"] .map-footer{color:var(--muted)}
body[data-theme="dark"] .user-overview{
  border-color:var(--line);
  background:var(--line)
}
body[data-theme="dark"] .user-overview article{background:var(--panel)}
body[data-theme="dark"] .user-overview span{color:var(--muted)}
body[data-theme="dark"] .user-overview strong{color:var(--ink)}
body[data-theme="dark"] .user-table-header{
  border-bottom-color:var(--line);
  color:var(--muted)
}
body[data-theme="dark"] .admin-user-list{border-top-color:var(--line)}
body[data-theme="dark"] .admin-user.user-table-row{
  border-color:var(--line);
  background:var(--panel)
}
body[data-theme="dark"] .admin-user.user-table-row:hover{background:var(--primary-soft)}
body[data-theme="dark"] .user-identity strong{color:var(--ink)}
body[data-theme="dark"] .user-identity small,
body[data-theme="dark"] .user-last-login,
body[data-theme="dark"] .user-session-count{color:var(--muted)}
body[data-theme="dark"] .user-menu summary{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink)
}
body[data-theme="dark"] .user-menu[open] summary{
  border-color:var(--primary);
  background:var(--primary-medium)
}
body[data-theme="dark"] .user-menu-popover{
  border-color:var(--line);
  background:var(--panel);
  box-shadow:0 14px 36px rgba(0,0,0,.42)
}
body[data-theme="dark"] .user-menu-popover button{
  background:var(--panel);
  color:var(--ink)
}
body[data-theme="dark"] .user-menu-popover button:hover{
  background:var(--primary-medium);
  color:#fff
}
body[data-theme="dark"] .user-list-empty{color:var(--muted)}
body[data-theme="dark"] .user-list-empty strong{color:var(--ink)}


/* User admin dark-mode refinements */
body[data-theme="dark"] .user-overview-card{
  background:var(--panel);
  color:var(--ink)
}
body[data-theme="dark"] .user-overview-card:hover{
  background:var(--primary-soft);
  color:#fff
}
body[data-theme="dark"] .user-overview-card.active{
  background:var(--panel);
  color:#fff;
  box-shadow:inset 0 -4px 0 var(--primary)
}
body[data-theme="dark"] .user-overview-card span,
body[data-theme="dark"] .user-overview-card small{color:var(--muted)}
body[data-theme="dark"] .user-overview-card strong{color:var(--ink)}
body[data-theme="dark"] .current-user-label{
  border-color:var(--line);
  color:var(--ink)
}
body[data-theme="dark"] .user-menu-popover button:disabled{
  background:var(--panel);
  color:var(--muted)
}
body[data-theme="dark"] .user-menu-note{color:var(--muted)}


/* Theme viewport background */
html,
body{min-height:100%}
html[data-theme="dark"]{background:var(--bg)}
html[data-theme="light"]{background:var(--bg)}


/* Drone vehicle telemetry */
.vehicle-panel{margin-bottom:24px}
.vehicle-panel-head{align-items:center}
.vehicle-overview{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(540px,2fr) auto;gap:22px;align-items:center}
.vehicle-identity{display:flex;align-items:center;gap:13px;min-width:0}
.vehicle-identity strong,.vehicle-identity small{display:block}
.vehicle-identity strong{font-family:Sora,Arial,sans-serif;font-size:17px}
.vehicle-identity small{margin-top:5px;color:var(--muted);font-size:11px}
.vehicle-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;color:var(--blue);background:var(--panel2);font-size:15px}
.vehicle-metrics{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:1px;margin:0;border:1px solid var(--line);background:var(--line)}
.vehicle-metrics div{min-width:0;padding:12px 14px;background:var(--panel2)}
.vehicle-metrics dt{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vehicle-metrics dd{margin:6px 0 0;overflow:hidden;color:var(--text);font-family:Sora,Arial,sans-serif;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#vehicle-show-map.active{border-color:var(--blue);background:var(--blue);color:#fff}
@media(max-width:1050px){.vehicle-overview{grid-template-columns:1fr auto}.vehicle-metrics{grid-column:1/-1;grid-row:2}}
@media(max-width:650px){.vehicle-overview{grid-template-columns:1fr}.vehicle-metrics{grid-column:auto;grid-template-columns:1fr 1fr}.vehicle-overview>button{width:100%}}


/* Device administration */
.device-overview{grid-template-columns:repeat(4,minmax(0,1fr))}
.device-refresh-actions{
  display:flex;
  align-items:flex-end;
  gap:14px
}
.device-refresh-actions>span{
  margin-bottom:11px;
  font-size:11px;
  white-space:nowrap
}
.device-management-panel{margin-bottom:32px}
.device-management-head{align-items:flex-end}
.device-admin-toolbar{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(170px,220px) minmax(170px,220px) auto;
  gap:12px;
  align-items:end;
  margin:22px 0 16px
}
.device-admin-toolbar label{margin:0}
.device-admin-toolbar label>span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
.device-filter-reset{
  min-height:47px;
  white-space:nowrap
}
.device-table-header,
.device-admin-row{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) minmax(170px,1fr) minmax(180px,1fr) minmax(120px,.65fr) minmax(155px,.8fr) minmax(125px,.7fr);
  gap:16px;
  align-items:center
}
.device-table-header{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.device-management-list{
  border-top:1px solid var(--line)
}
.device-admin-row{
  min-height:78px;
  padding:14px;
  border-bottom:1px solid var(--line);
  background:var(--panel)
}
.device-admin-row:hover{background:var(--panel2)}
.device-admin-row.is-editable{cursor:pointer}
.device-admin-row.is-editable:hover{box-shadow:inset 3px 0 0 var(--primary)}
.device-admin-identity{min-width:0}
.device-admin-identity strong,
.device-admin-identity small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.device-admin-identity strong{
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:14px
}
.device-admin-identity small{
  margin-top:4px;
  color:var(--muted);
  font-size:11px
}
.device-admin-model,
.device-admin-last-seen{
  color:var(--muted);
  font-size:12px
}
.device-admin-model{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width:0
}
.device-model-name{
  overflow:hidden;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap
}
.device-model-name.is-unknown{
  color:var(--warning-ink);
  font-weight:700
}
.device-type-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border:1px solid var(--muted);
  border-radius:999px;
  background:#eef4f8;
  color:#26445e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap
}
.device-type-aircraft{border-color:#6bbcf5;background:var(--primary-soft);color:var(--primary)}
.device-type-dock{border-color:var(--success-border);background:var(--success-soft);color:var(--success-ink)}
.device-type-controller{border-color:var(--warning-border);background:var(--warning-soft);color:var(--warning-ink)}
.device-type-payload{border-color:#c6a7e8;background:#f7efff;color:#65408e}
.device-type-simulator{border-color:#b9c1c9;background:#f1f3f5;color:#525c66}
.device-type-unknown{border-color:#c2c8ce;background:#f4f5f6;color:#687078}
.device-admin-serial-wrap{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0
}
.device-admin-serial{
  overflow:hidden;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.device-copy-serial,
.device-row-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:32px;
  min-height:0;
  flex:0 0 auto;
  padding:0
}
.device-copy-serial{
  border-color:transparent;
  background:transparent
}
.device-status-pill{
  min-height:28px;
  padding:5px 9px;
  border:1px solid currentColor;
  border-radius:999px;
  line-height:1
}
.device-status-pill::before{width:7px;height:7px}
.device-status-pill.is-inactive{
  color:var(--error-ink);
  border-color:var(--error-border);
  background:var(--error-soft)
}
.device-admin-actions{
  display:flex;
  justify-content:flex-end
}
.device-admin-actions button{
  white-space:nowrap
}
.device-list-empty{
  display:grid;
  place-items:center;
  min-height:180px;
  padding:24px;
  color:var(--muted);
  text-align:center
}
.device-list-empty strong{
  display:block;
  color:var(--ink);
  font-family:Sora,Arial,sans-serif
}
.device-list-empty span{margin-top:5px;font-size:12px}
#edit-device-dialog{width:min(580px,calc(100% - 32px))}
#edit-device-dialog input[readonly]{
  background:var(--panel2);
  color:var(--muted)
}
.device-dialog-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.device-dialog-summary label{min-width:0}
.device-technical-details{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
  overflow:hidden
}
.device-technical-details summary{
  padding:13px 15px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  user-select:none
}
.device-technical-details[open] summary{
  border-bottom:1px solid var(--line)
}
.device-technical-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:12px;
  padding:0 15px 15px
}
.device-technical-grid label{margin-top:15px}

body[data-theme="dark"] .device-table-header{
  border-bottom-color:var(--line);
  color:var(--muted)
}
body[data-theme="dark"] .device-management-list{border-top-color:var(--line)}
body[data-theme="dark"] .device-admin-row{
  border-bottom-color:var(--line);
  background:var(--panel)
}
body[data-theme="dark"] .device-admin-row:hover{background:var(--primary-soft)}
body[data-theme="dark"] .device-admin-identity strong{color:var(--ink)}
body[data-theme="dark"] .device-admin-identity small,
body[data-theme="dark"] .device-admin-model,
body[data-theme="dark"] .device-admin-last-seen{color:var(--muted)}
body[data-theme="dark"] .device-admin-serial{color:var(--muted)}
body[data-theme="dark"] .device-copy-serial{
  border-color:transparent;
  background:transparent;
  color:var(--muted)
}
body[data-theme="dark"] .device-copy-serial:hover{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink)
}
body[data-theme="dark"] .device-list-empty{color:var(--muted)}
body[data-theme="dark"] .device-list-empty strong{color:var(--ink)}
body[data-theme="dark"] #edit-device-dialog input[readonly]{
  border-color:var(--line);
  background:var(--panel2);
  color:var(--muted)
}
body[data-theme="dark"] .device-type-badge{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink)
}
body[data-theme="dark"] .device-type-aircraft{border-color:var(--primary);background:var(--primary-soft);color:var(--link)}
body[data-theme="dark"] .device-type-dock{border-color:var(--success-border);background:var(--success-soft);color:var(--success-ink)}
body[data-theme="dark"] .device-type-controller{border-color:var(--warning-border);background:var(--warning-soft);color:var(--warning-ink)}
body[data-theme="dark"] .device-type-payload{border-color:#654587;background:#241932;color:#c9a6ef}
body[data-theme="dark"] .device-type-simulator{border-color:#465463;background:#17212c;color:#abb9c7}
body[data-theme="dark"] .device-type-unknown{border-color:#3c4a58;background:#131e29;color:var(--muted)}
body[data-theme="dark"] .device-technical-details{
  border-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .device-technical-details summary{
  color:var(--ink)
}
body[data-theme="dark"] .device-technical-details[open] summary{
  border-bottom-color:var(--line)
}

@media(max-width:1050px){
  .device-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .device-admin-toolbar{grid-template-columns:minmax(220px,1fr) minmax(160px,.6fr) minmax(160px,.6fr) auto}
  .device-table-header{display:none}
  .device-admin-row{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
    gap:10px 16px
  }
  .device-admin-serial-wrap{grid-column:1 / 3}
  .device-admin-last-seen{display:none}
  .device-admin-actions{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:800px){
  .device-admin-toolbar{grid-template-columns:1fr 1fr}
  .device-admin-toolbar>label:first-child{grid-column:1 / -1}
  .device-filter-reset{justify-self:start}
}
@media(max-width:700px){
  .device-refresh-actions{
    width:100%;
    align-items:stretch;
    flex-direction:column-reverse;
    gap:7px
  }
  .device-refresh-actions>span{margin:0}
  .device-refresh-actions button{width:100%}
  .device-overview{grid-template-columns:1fr 1fr}
  .device-admin-toolbar{grid-template-columns:1fr}
  .device-admin-toolbar>label:first-child{grid-column:auto}
  .device-dialog-summary,
  .device-technical-grid{grid-template-columns:1fr}
  .device-admin-row{
    grid-template-columns:minmax(0,1fr) auto
  }
  .device-admin-model{grid-column:1}
  .device-admin-serial-wrap{grid-column:1}
  .device-admin-row>div:nth-child(4){grid-column:1}
  .device-admin-actions{grid-column:2;grid-row:1 / span 4}
}


/* Responsive login refinement */
.login-view{
  min-height:100dvh;
  padding:clamp(16px,4vw,48px);
  overflow:auto;
  isolation:isolate
}
.login-view::before,
body[data-theme="dark"] .login-view::before{
  width:clamp(250px,36vw,560px);
  aspect-ratio:1;
  left:clamp(-190px,-11vw,-72px);
  top:clamp(-190px,-11vw,-72px);
  border-radius:0;
  background:url('/assets/propeller-mark.svg?v=2') center/contain no-repeat;
  opacity:.9;
  pointer-events:none;
  z-index:0
}
.login-card,
body[data-theme="dark"] .login-card{
  z-index:1;
  width:min(680px,100%);
  max-width:100%;
  padding:clamp(30px,5vw,56px);
  margin:auto
}
.login-card>*{min-width:0}
.login-card h1,
body[data-theme="dark"] .login-card h1{
  max-width:100%;
  font-size:clamp(30px,5.25vw,54px);
  line-height:1;
  letter-spacing:-.045em;
  overflow-wrap:normal
}
.login-card .muted{line-height:1.5}
.login-card input,
.login-card button{max-width:100%}

@media(max-width:700px){
  .login-view{
    place-items:center;
    padding:clamp(14px,4vw,28px)
  }
  .login-view::before,
  body[data-theme="dark"] .login-view::before{
    width:clamp(230px,62vw,360px);
    left:clamp(-132px,-24vw,-72px);
    top:clamp(-126px,-22vw,-66px);
    opacity:.74
  }
  .login-card,
  body[data-theme="dark"] .login-card{
    width:100%;
    padding:clamp(26px,7vw,40px)
  }
  .login-brand{width:min(220px,72%)}
  .login-card h1,
  body[data-theme="dark"] .login-card h1{
    font-size:clamp(27px,7.4vw,42px)
  }
}

@media(max-width:390px){
  .login-view{padding:12px}
  .login-card,
  body[data-theme="dark"] .login-card{padding:26px 20px}
  .login-card h1,
  body[data-theme="dark"] .login-card h1{font-size:clamp(25px,7.8vw,31px)}
  .login-card .eyebrow{font-size:10px;letter-spacing:.12em}
}


/* Global vehicle map visibility */
.vehicle-map-controls{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  gap:12px;
  min-width:min(100%,340px)
}
.vehicle-map-toggle{
  min-width:230px;
  margin:0;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  background:var(--panel2);
  cursor:pointer
}
.vehicle-map-toggle-copy{display:grid;gap:3px;min-width:0}
.vehicle-map-toggle-copy strong{font-size:12px;color:var(--text)}
.vehicle-map-toggle-copy small{font-size:10px;line-height:1.3;color:var(--muted)}
.vehicle-map-toggle.is-disabled{cursor:default;opacity:.72}
.switch-control{position:relative;display:inline-flex;flex:0 0 auto}
.switch-control input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.switch-track{
  width:44px;
  height:24px;
  padding:2px;
  display:block;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--line);
  transition:background .18s ease,border-color .18s ease
}
.switch-track::after{
  content:"";
  width:18px;
  height:18px;
  display:block;
  border-radius:50%;
  background:var(--panel);
  box-shadow:0 2px 6px rgba(0,0,0,.32);
  transition:transform .18s ease
}
.switch-control input:checked+.switch-track{
  border-color:var(--green);
  background:var(--green)
}
.switch-control input:checked+.switch-track::after{transform:translateX(20px)}
.switch-control input:focus-visible+.switch-track{outline:3px solid rgba(73,179,255,.3);outline-offset:2px}
@media(max-width:760px){
  .vehicle-map-controls{width:100%;min-width:0;flex-direction:column}
  .vehicle-map-toggle{width:100%;min-width:0}
  .vehicle-map-controls #vehicle-show-map{width:100%}
}


/* Compact vehicle alias and Google Maps controls */
.vehicle-alias-form{display:grid;gap:5px;min-width:0;margin:0}
.vehicle-alias-form>label{margin:0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vehicle-alias-row{display:flex;align-items:stretch;gap:6px;min-width:0}
.vehicle-alias-row input{min-width:0;width:132px;padding:8px 9px;font-family:Sora,Arial,sans-serif;font-size:13px;font-weight:700}
.vehicle-alias-row button{min-height:34px;margin:0;padding:7px 10px}
.vehicle-alias-form>small{color:var(--muted);font-size:10px;line-height:1.35}
.map-layer-tools{gap:5px}
.map-layer-button{min-height:34px;padding:7px 11px}
.map-layer-button.active{border-color:var(--blue);background:var(--blue);color:#fff}
.gm-style button,.gm-style input,.gm-style label{all:revert}
.gm-style button{box-sizing:border-box;cursor:pointer}
.gm-style .gm-style-iw-c{max-width:260px!important;padding:0!important}
.gm-style .gm-style-iw-d{max-width:260px!important;overflow:auto!important}
.gm-style .map-marker-info{padding:16px 18px}
.gm-style .vehicle-marker-info{width:max-content;min-width:0;max-width:180px;padding:9px 11px}.gm-style .vehicle-marker-info strong{font-size:14px;line-height:1.15}.gm-style .vehicle-marker-info p{margin:4px 0 0;font-size:12px;line-height:1.25}.gm-style .gm-style-iw-c:has(.vehicle-marker-info){min-height:0!important}.gm-style .gm-style-iw-d:has(.vehicle-marker-info){overflow:hidden!important}
.gm-style .gm-ui-hover-effect{width:30px!important;height:30px!important;top:0!important;right:0!important}
@media(max-width:650px){
  .vehicle-alias-row input{width:100%}
  .vehicle-alias-form{width:100%}
  .map-layer-tools{order:-1}
  .map-layer-tools .map-layer-button{flex:1}
}

/* Compact theme and profile controls. */
.top-actions .header-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;cursor:pointer;list-style:none;flex-shrink:0}
.header-icon svg{display:block;pointer-events:none}
.profile-menu{position:relative;flex-shrink:0}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-menu summary::marker{content:""}
.header-icon:focus-visible,.profile-dropdown button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:180px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 12px 32px #0003;z-index:20}
.profile-dropdown button{display:block;width:100%;text-align:left;padding:12px 14px;border:0;border-radius:9px;font-size:14px}
.profile-dropdown button.active{background:var(--primary-medium);color:var(--link)}
.organization-menu{display:grid;gap:8px;padding:12px;border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:anywhere}
.organization-menu[hidden]{display:none}
.organization-menu label,.organization-menu form{display:grid;gap:8px}
.organization-menu select{width:100%;min-width:0;font:inherit;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:inherit}
.organization-menu p{margin:0;font-size:12px}
body[data-theme="dark"] .profile-dropdown{background:var(--panel);border-color:var(--line)}
body[data-theme="dark"] .profile-dropdown button.active{background:var(--primary-medium);color:#fff}

/* Vehicle administration follows the drone module's header and row layout. */
.vehicle-management-panel .vehicle-overview{grid-template-columns:minmax(230px,1fr) minmax(420px,2fr);gap:20px;margin-top:20px;padding:18px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vehicle-management-panel .vehicle-map-controls{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:16px}
.vehicle-management-panel .vehicle-map-toggle{flex:1;max-width:420px;margin:0}
.vehicle-management-panel .vehicle-metrics{grid-column:auto;grid-row:auto}
.vehicle-management-panel .vehicle-icon{display:none}
@media(max-width:850px){
 .vehicle-management-panel .vehicle-overview{grid-template-columns:1fr}
 .vehicle-management-panel .vehicle-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vehicle-management-panel .vehicle-map-controls{flex-wrap:wrap}
 .vehicle-management-panel .vehicle-map-toggle{min-width:0;width:100%;flex-basis:100%}
}

/* System status is an indicator, visually distinct from navigation buttons. */
.system-status-icon{display:flex;align-items:center;justify-content:center;width:36px;height:44px;cursor:pointer;list-style:none;color:var(--warning-ink);border:0;background:transparent}
.system-status-icon[data-status="ready"]{color:var(--success-ink)}
.system-status-icon[data-status="error"]{color:var(--error-ink)}
body[data-theme="dark"] .system-status-icon{color:var(--warning-ink)}
body[data-theme="dark"] .system-status-icon[data-status="ready"]{color:var(--success-ink)}
body[data-theme="dark"] .system-status-icon[data-status="error"]{color:var(--error-ink)}
.system-status-icon:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
.system-status-icon:hover svg{filter:drop-shadow(0 0 4px currentColor)}
.system-status-popover{width:min(290px,calc(100vw - 32px));padding:16px;font-size:13px;color:var(--text)}
.system-status-popover strong{display:block;font-size:14px}
.system-status-popover p{margin:8px 0 0;line-height:1.5;color:var(--muted)}
@media(max-width:520px){.system-status-popover{position:fixed;right:16px;top:auto;margin-top:10px}}

.system-status-section{margin-bottom:24px}
.system-check-list{margin-top:18px}
.system-check-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.system-check-row h3{font-size:15px;margin:0 0 6px}
.system-check-row p{font-size:13px;margin:0;line-height:1.5;color:var(--muted)}
.system-check-row small{display:block;margin-top:6px;color:var(--muted);overflow-wrap:anywhere}
.system-check-badge{white-space:nowrap;border:1px solid currentColor;border-radius:20px;padding:5px 10px;font-size:12px;color:var(--muted)}
.system-check-badge[data-status="ready"]{color:var(--success-ink)}
.system-check-badge[data-status="warning"]{color:var(--warning-ink)}
.system-check-badge[data-status="error"]{color:var(--error-ink)}
body[data-theme="dark"] .system-check-badge{color:var(--muted)}
body[data-theme="dark"] .system-check-badge[data-status="ready"]{color:var(--success-ink)}
body[data-theme="dark"] .system-check-badge[data-status="warning"]{color:var(--warning-ink)}
body[data-theme="dark"] .system-check-badge[data-status="error"]{color:var(--error-ink)}
#nav-status{margin-top:12px}
@media(max-width:520px){.system-check-row{flex-wrap:wrap;gap:10px}}

/* DRNE palette: New Light Mode / Dark Mode reference. */
body[data-theme="light"]{
 --bg:#f0f2f5;--panel:#fafafa;--panel2:#fff;--line:#e8e8e8;
 --ink:rgba(0,0,0,.87);--text:var(--ink);--muted:rgba(0,0,0,.60);--tertiary:rgba(0,0,0,.38);
 --primary:#2673dd;--primary-hover:#1d62c0;--primary-medium:rgba(38,115,221,.20);--primary-soft:rgba(38,115,221,.05);--link:#2167c8;
 --success:#44cc77;--success-ink:#17713a;--success-soft:rgba(68,204,119,.09);--success-border:rgba(68,204,119,.30);
 --error:#ee2c4a;--error-ink:#c51c38;--error-soft:rgba(238,44,74,.05);--error-border:rgba(238,44,74,.20);
 --warning:#ffbb00;--warning-ink:#805e00;--warning-soft:rgba(255,187,0,.09);--warning-border:rgba(255,187,0,.30);
 --blue:var(--primary);--green:var(--success-ink);--amber:var(--warning);--danger:var(--error-ink);
 background:var(--bg);color:var(--text)
}
body[data-theme="dark"]{
 --bg:#121212;--panel:#222;--panel2:#1e1e1e;--line:rgba(255,255,255,.09);
 --ink:rgba(255,255,255,.87);--text:var(--ink);--muted:rgba(255,255,255,.60);--tertiary:rgba(255,255,255,.38);
 --primary:#2673dd;--primary-hover:#3180eb;--primary-medium:rgba(38,115,221,.30);--primary-soft:rgba(38,115,221,.14);--link:#82b3f7;
 --success:#309053;--success-ink:#73d595;--success-soft:rgba(48,144,83,.14);--success-border:rgba(48,144,83,.30);
 --error:#ab2830;--error-ink:#ff8594;--error-soft:rgba(171,40,48,.14);--error-border:rgba(171,40,48,.30);
 --warning:#b28400;--warning-ink:#edc752;--warning-soft:rgba(178,132,0,.14);--warning-border:rgba(178,132,0,.30);
 --blue:var(--primary);--green:var(--success-ink);--amber:var(--warning);--danger:var(--error-ink);
 background:var(--bg);color:var(--text)
}
body[data-theme="light"] .login-view{background:radial-gradient(circle at 12% 15%,var(--primary-soft) 0,transparent 40%),var(--bg)}
body[data-theme] .topbar{background:var(--panel);border-color:var(--line)}
body[data-theme] :is(.profile-dropdown,.user-menu-popover,.portal-dialog,.confirm-dialog){background:var(--panel);color:var(--ink);border-color:var(--line)}
body[data-theme] :is(input,textarea,select){color:var(--ink);background:var(--panel2);border-color:var(--line)}
body[data-theme] :is(input,textarea)::placeholder{color:var(--muted)}
body[data-theme] :is(button,.file-button){background:var(--primary);border-color:var(--primary);color:#fff}
body[data-theme] :is(button,.file-button):hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
body[data-theme] :is(.ghost,.secondary,.icon-button,.file-button,.map-type){background:var(--panel2);border-color:var(--line);color:var(--ink)}
body[data-theme] :is(.ghost,.secondary,.icon-button,.file-button,.map-type):hover{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
body[data-theme] :is(.nav-button,.map-element-focus){background:transparent;border-color:transparent;color:var(--ink)}
body[data-theme] :is(.nav-button.active,.map-type.active,.secondary.active,.profile-dropdown button.active){background:var(--primary-medium);border-color:var(--primary);color:var(--ink)}
body[data-theme] .profile-dropdown button{background:transparent;color:var(--ink)}
body[data-theme] .profile-dropdown button:hover{background:var(--primary-soft)}
body[data-theme] .danger-button{background:var(--error-soft);border-color:var(--error-border);color:var(--error-ink)}
body[data-theme] .danger-button:hover{background:var(--error);border-color:var(--error);color:#fff}
body[data-theme] .pill{background:var(--panel2);border-color:var(--line);color:var(--muted)}
body[data-theme] .pill.online{background:var(--success-soft);border-color:var(--success-border);color:var(--success-ink)}
body[data-theme] .pill.offline{background:var(--error-soft);border-color:var(--error-border);color:var(--error-ink)}
body[data-theme] :is(.system-status-icon,.system-check-badge)[data-status="ready"]{color:var(--success-ink)}
body[data-theme] :is(.system-status-icon,.system-check-badge)[data-status="error"]{color:var(--error-ink)}
body[data-theme] :is(.system-status-icon,.system-check-badge)[data-status="warning"],body[data-theme] .system-status-icon[data-status="loading"]{color:var(--warning-ink)}
body[data-theme] button:disabled{color:var(--tertiary);border-color:var(--line);background:var(--panel2);cursor:not-allowed}
body[data-theme] .eyebrow{color:var(--link)}
body[data-theme] :is(button,input,summary,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:3px}
body[data-theme] .panel{border-color:var(--line);background:var(--panel)}

/* Compact page headings leave more room for working content. */
main .hero{min-height:0;padding:26px 0 20px;gap:16px}
main .hero h1{font-size:clamp(25px,2.6vw,36px);line-height:1.15;letter-spacing:-.025em}
main .hero .eyebrow{font-size:10px;margin-bottom:6px}
main .hero p{font-size:14px;line-height:1.45;margin-top:8px}
@media(max-width:650px){main .hero{padding:20px 0 16px;gap:12px}}

.vehicle-name-display{display:flex;align-items:center;gap:8px;min-height:36px}
.vehicle-name-display strong{font-size:17px;overflow-wrap:anywhere}
body[data-theme] .vehicle-name-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;min-height:34px;padding:6px;border-radius:8px;font-size:22px}
.vehicle-alias-row[hidden],.vehicle-name-display[hidden],.vehicle-name-icon[hidden]{display:none!important}

/* Keep map visibility alongside the vehicle details on wide screens. */
.vehicle-management-panel .vehicle-overview{grid-template-columns:minmax(190px,.85fr) minmax(360px,2fr) 220px;gap:16px;align-items:center}
.vehicle-management-panel .vehicle-map-controls{grid-column:auto;min-width:0;border-top:0;padding-top:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.vehicle-management-panel .vehicle-map-toggle{width:100%;min-width:0;max-width:none;flex:auto;padding:8px 10px;gap:10px}
.vehicle-management-panel .vehicle-map-controls #vehicle-show-map{font-size:12px;padding:8px 10px;min-height:34px}
@media(max-width:1050px){
 .vehicle-management-panel .vehicle-overview{grid-template-columns:minmax(0,1fr) 220px}
 .vehicle-management-panel .vehicle-map-controls{grid-column:2;grid-row:1}
 .vehicle-management-panel .vehicle-metrics{grid-column:1/-1;grid-row:2}
}
@media(max-width:600px){
 .vehicle-management-panel .vehicle-overview{grid-template-columns:1fr}
 .vehicle-management-panel .vehicle-map-controls{grid-column:1;grid-row:3}
 .vehicle-management-panel .vehicle-map-toggle{flex-basis:auto}
}

.vehicle-management-panel .vehicle-map-controls #vehicle-show-map{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:7px;border-radius:9px}
@media(pointer:coarse){.vehicle-management-panel .vehicle-map-controls #vehicle-show-map{width:44px;height:44px;min-height:44px;flex-basis:44px}}


/* Operation detail workspace refinement */
.operation-card.active{
  border-color:var(--primary);
  background:var(--panel);
  box-shadow:inset 4px 0 0 var(--primary)
}
.operation-card.active:hover{background:var(--panel)}
.operation-subpanel{
  margin-top:20px;
  padding:18px;
  border:1px solid var(--line);
  background:var(--panel2)
}
.operation-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px
}
.operation-section-head .eyebrow{margin:0 0 5px}
.operation-section-head h3{
  margin:0;
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:18px;
  font-weight:600;
  text-transform:uppercase
}
.operation-section-help{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.operation-compact-empty,
.operation-list-empty{
  display:grid;
  place-items:center;
  min-height:108px;
  padding:20px;
  color:var(--muted);
  text-align:center
}
.operation-compact-empty strong{
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:14px
}
.operation-compact-empty span{
  margin-top:5px;
  max-width:56ch;
  font-size:12px
}
.operation-track-section #operation-track{
  display:block;
  width:100%;
  height:auto;
  margin-top:14px
}
.operation-track-section #operation-track[hidden]{display:none}
.operation-track-section .operation-compact-empty{margin-top:10px}
.operation-photo-form{
  display:grid;
  grid-template-columns:minmax(240px,1.2fr) minmax(220px,1fr) minmax(180px,.8fr) auto;
  gap:12px;
  align-items:end;
  margin-top:16px
}
.operation-photo-form label{margin:0}
.operation-photo-form button{
  min-height:47px;
  white-space:nowrap
}
.operation-photo-status{
  min-height:18px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px
}
.operation-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px
}
.operation-photo-grid.is-empty{
  grid-template-columns:1fr;
  margin-top:6px
}
.operation-photo-grid.is-empty .operation-list-empty{
  min-height:48px;
  padding:8px 0;
  place-items:start;
  text-align:left
}
.operation-photo-card{
  min-width:0;
  border:1px solid var(--line);
  background:var(--panel)
}
.operation-photo-preview{
  display:grid;
  place-items:center;
  width:100%;
  min-height:0;
  aspect-ratio:4 / 3;
  padding:0;
  overflow:hidden;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--bg);
  color:var(--muted)
}
.operation-photo-preview:hover{
  border-color:var(--line);
  background:var(--bg);
  color:var(--ink)
}
.operation-photo-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.operation-photo-preview span{
  padding:14px;
  font-family:Archivo,Arial,sans-serif;
  font-size:11px;
  font-weight:600
}
.operation-photo-copy{padding:12px}
.operation-photo-copy strong,
.operation-photo-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis
}
.operation-photo-copy strong{
  color:var(--ink);
  font-size:13px;
  white-space:nowrap
}
.operation-photo-copy small{
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4
}
.operation-photo-actions{
  display:flex;
  align-items:center;
  margin-top:10px
}
.operation-photo-map-button{
  min-height:34px;
  padding:7px 12px;
  font-size:11px
}
.map-photo-info{
  display:grid;
  gap:6px;
  min-width:180px;
  color:#182430;
  font-family:Archivo,Arial,sans-serif
}
.map-photo-info img{
  display:block;
  width:100%;
  max-height:150px;
  margin-bottom:4px;
  border-radius:6px;
  object-fit:cover
}
.map-photo-info strong{font-size:14px}
.map-photo-info small{
  display:block;
  color:#526272;
  font-size:11px
}
.operation-pilot-columns,
.operation-pilot-row{
  display:grid;
  grid-template-columns:minmax(180px,1.2fr) minmax(200px,1.15fr) minmax(120px,.65fr) minmax(170px,.8fr);
  gap:16px;
  align-items:center
}
.operation-pilot-columns{
  margin-top:14px;
  padding:0 14px 8px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.operation-pilot-list{
  display:grid;
  gap:0;
  margin-top:0
}
.operation-pilot-row{
  min-height:66px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:var(--panel)
}
.operation-pilot-row:last-child{border-bottom:0}
.operation-pilot-cell{min-width:0}
.operation-pilot-cell strong{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.operation-pilot-cell code{
  color:var(--muted);
  font-size:10px
}
.operation-pilot-time{
  color:var(--muted);
  font-size:11px
}
.operation-pilot-mobile-label{display:none}
.operation-events-section{padding:0}
.operation-events-section>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none
}
.operation-events-section>summary::-webkit-details-marker{display:none}
.operation-events-section>summary::after{
  content:"▾";
  order:3;
  color:var(--muted);
  font-size:13px;
  transition:transform .15s ease
}
.operation-events-section:not([open])>summary::after{transform:rotate(-90deg)}
.operation-events-section>summary .eyebrow{
  display:block;
  margin:0 0 4px
}
.operation-events-section>summary strong{
  color:var(--ink);
  font-family:Sora,Arial,sans-serif;
  font-size:17px;
  text-transform:uppercase
}
.operation-events{
  display:grid;
  gap:8px;
  margin:0;
  padding:0 18px 12px
}
.operation-events .audit-event{
  margin:0;
  padding:11px 12px
}
.operation-events-toggle{
  margin:0 18px 18px;
  min-width:130px
}
body[data-theme="dark"] .operation-card.active{
  border-color:var(--primary);
  background:var(--panel);
  box-shadow:inset 4px 0 0 var(--primary)
}
body[data-theme="dark"] .operation-card.active:hover{background:var(--panel)}
body[data-theme="dark"] .operation-subpanel,
body[data-theme="dark"] .operation-photo-card,
body[data-theme="dark"] .operation-pilot-row{
  border-color:var(--line);
  background:var(--panel2)
}
body[data-theme="dark"] .operation-photo-preview{
  border-color:var(--line);
  background:var(--bg);
  color:var(--muted)
}
@media(max-width:1100px){
  .operation-photo-form{grid-template-columns:1fr 1fr}
  .operation-photo-form button{justify-self:start}
  .operation-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .operation-photo-form{grid-template-columns:1fr}
  .operation-photo-form button{width:100%}
  .operation-photo-grid{grid-template-columns:1fr}
  .operation-pilot-columns{display:none}
  .operation-pilot-row{
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    padding:14px
  }
  .operation-pilot-mobile-label{
    display:block;
    margin-bottom:5px;
    color:var(--muted);
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
  }
  .operation-section-head{align-items:flex-start}
}

@media(max-width:480px){
  .operation-pilot-row{grid-template-columns:1fr}
}


/* Make selected operation unmistakable without a strong hover state. */
.operation-list .operation-card:not(.active):hover,
body[data-theme="dark"] .operation-list .operation-card:not(.active):hover{
  border-color:var(--line);
  background:var(--panel);
  color:var(--ink)
}
.operation-list .operation-card.active,
body[data-theme="dark"] .operation-list .operation-card.active{
  border-color:var(--primary);
  background:var(--panel);
  color:var(--ink);
  box-shadow:inset 4px 0 0 var(--primary)
}
.operation-list .operation-card.active:hover,
body[data-theme="dark"] .operation-list .operation-card.active:hover{
  border-color:var(--primary);
  background:var(--panel);
  color:var(--ink)
}


/* Selected operation state and photo actions */
.operation-card-badges{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px
}
.operation-selected-pill{
  border-color:var(--primary)!important;
  background:var(--primary-medium)!important;
  color:var(--link)!important
}
.operation-list .operation-card:not(.active):hover,
body[data-theme="dark"] .operation-list .operation-card:not(.active):hover{
  border-color:var(--line);
  background:var(--panel);
  color:var(--ink)
}
.operation-list .operation-card.active,
body[data-theme="dark"] .operation-list .operation-card.active{
  border-color:var(--primary);
  background:var(--panel);
  color:var(--ink);
  box-shadow:inset 4px 0 0 var(--primary)
}
.operation-list .operation-card.active:hover,
body[data-theme="dark"] .operation-list .operation-card.active:hover{
  border-color:var(--primary);
  background:var(--panel);
  color:var(--ink)
}
.operation-photo-copy-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.operation-photo-copy-head strong{min-width:0;flex:1}
.operation-photo-delete{
  display:grid;
  place-items:center;
  width:32px;
  height:30px;
  min-height:0;
  flex:0 0 auto;
  padding:0;
  border-radius:8px
}
@media(max-width:600px){
  .operation-card-badges{justify-content:flex-start}
}


/* Smooth transition from the operation selector into the selected workspace. */
.operations-layout{
  gap:0;
  margin-bottom:0
}
.operation-list-panel{
  padding:18px 20px 16px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0
}
.operation-list-head{align-items:center}
.operation-list-head h2{font-size:19px}
.operation-list-head-actions{
  display:flex;
  align-items:center;
  gap:8px
}
body[data-theme] .operation-refresh-button{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  min-height:38px;
  padding:0;
  border-radius:10px
}
.operation-list{
  gap:6px;
  margin-top:12px
}
body[data-theme] .operation-list .operation-card{
  min-height:64px;
  padding:12px 14px;
  border-color:var(--line);
  border-radius:10px;
  background:var(--panel2);
  color:var(--ink)
}
body[data-theme] .operation-list .operation-card:not(.active):hover{
  border-color:var(--line)!important;
  background:var(--primary-soft)!important;
  color:var(--ink)!important
}
body[data-theme] .operation-list .operation-card.active,
body[data-theme] .operation-list .operation-card.active:hover{
  border-color:var(--primary)!important;
  background:var(--panel)!important;
  color:var(--ink)!important;
  box-shadow:inset 4px 0 0 var(--primary)
}
.operation-card strong{font-size:14px}
.operation-card small{
  margin-top:4px;
  font-size:11px
}
.operation-card-side{min-width:150px}
.operation-card-badges .pill{
  padding:5px 8px;
  font-size:11px
}
.operation-detail-panel{
  min-height:0;
  margin-top:-1px;
  margin-bottom:50px;
  padding:16px 22px 28px;
  border-top-color:transparent;
  border-top-left-radius:0;
  border-top-right-radius:0
}
#operation-detail>.panel-head{
  align-items:center;
  margin:0
}
#operation-detail-title{
  font-size:20px;
  letter-spacing:-.01em
}
#operation-detail-meta{
  margin:4px 0 13px;
  font-size:12px;
  line-height:1.45
}
.operation-actions{gap:8px}
.operation-actions .small-button{
  min-height:34px;
  padding:7px 10px
}
.operation-metrics{
  gap:1px;
  margin:13px 0 18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--line)
}
.operation-metrics div{
  padding:12px 14px;
  border:0;
  border-radius:0;
  background:var(--panel2)
}
.operation-metrics dt{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
.operation-metrics dd{
  margin-top:6px;
  font-size:15px
}
.operation-subpanel{margin-top:16px}
@media(max-width:600px){
  .operation-list-panel{
    padding:16px;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0
  }
  .operation-detail-panel{
    padding:16px 16px 26px;
    border-top-left-radius:0;
    border-top-right-radius:0
  }
  .operation-list-head-actions{width:auto}
  body[data-theme] .operation-refresh-button{
    width:40px;
    height:40px;
    min-height:40px
  }
  .operation-card-side{min-width:0}
  #operation-detail>.panel-head{
    align-items:flex-start;
    gap:10px
  }
}


/* Direct operation row actions and tighter operation workspace. */
#operations-page>.hero{
  min-height:0;
  padding:32px 0 20px
}
.operation-row{
  position:relative;
  min-width:0
}
.operation-row .operation-card{
  padding-right:56px
}
.operation-row .operation-card-side{
  margin-right:34px
}
body[data-theme] .operation-row-edit{
  position:absolute;
  z-index:2;
  right:10px;
  top:50%;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border-color:transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  opacity:.58;
  transform:translateY(-50%)
}
body[data-theme] .operation-row:hover .operation-row-edit,
body[data-theme] .operation-row.active .operation-row-edit,
body[data-theme] .operation-row-edit:hover,
body[data-theme] .operation-row-edit:focus-visible{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--ink);
  opacity:1
}
body[data-theme] .operation-row-edit:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px
}
body[data-theme] .operation-complete-button{
  border-color:var(--error-border);
  background:var(--error-soft);
  color:var(--error-ink)
}
body[data-theme] .operation-complete-button:hover{
  border-color:var(--error-ink);
  background:var(--error-soft);
  color:var(--error-ink)
}
@media(max-width:600px){
  #operations-page>.hero{padding:26px 0 16px}
  .operation-row .operation-card{
    padding-right:52px
  }
  .operation-row .operation-card-side{
    margin-right:30px
  }
  body[data-theme] .operation-row-edit{
    right:8px;
    width:36px;
    height:36px;
    min-height:36px;
    opacity:1
  }
}


/* Final polish for operation refresh controls and NOTAM action. */
body[data-theme] .operation-refresh-button{
  border-color:var(--line);
  background:var(--panel2);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)
}
body[data-theme] .operation-refresh-button svg{
  width:20px;
  height:20px;
  stroke-width:2.2;
  transition:transform .16s ease,color .16s ease
}
body[data-theme] .operation-refresh-button:hover{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--primary)
}
body[data-theme] .operation-refresh-button:hover svg{
  transform:rotate(18deg)
}
body[data-theme] .operation-refresh-button:active svg{
  transform:rotate(70deg)
}
body[data-theme] #operation-notam.operation-notam-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--primary-soft);
  color:var(--ink);
  font-weight:700;
  line-height:1;
  text-decoration:none
}
body[data-theme] #operation-notam.operation-notam-button:hover{
  border-color:var(--primary);
  background:var(--primary-medium);
  color:#fff;
  text-decoration:none
}
body[data-theme] #operation-notam.operation-notam-button svg{
  flex:0 0 auto
}


/* Optical centering for the refresh control in the map workspace. */
#refresh-map-elements svg{
  display:block;
  position:relative;
  left:-1px;
  top:-1px
}

/* Compact operation media, controller aliases and fly-track controls. */
.operation-photo-head-actions{
  display:flex;
  align-items:center;
  gap:8px
}
.operation-storage-note{
  width:max-content;
  max-width:100%;
  margin-top:8px;
  color:var(--muted);
  font-size:11px
}
.operation-storage-note summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:700
}
.operation-storage-note p{
  max-width:62ch;
  margin:7px 0 0;
  line-height:1.45
}
.operation-photo-form{
  margin-top:14px
}
.operation-photo-form[hidden]{display:none!important}
.operation-photo-status:empty{display:none}
.operation-controller-name{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}
body[data-theme] .map-track-toggle{
  min-height:34px;
  padding:7px 10px;
  border-color:var(--line);
  background:var(--panel2);
  color:var(--ink);
  font-size:11px
}
body[data-theme] .map-track-toggle[aria-pressed="true"]{
  border-color:var(--primary);
  background:var(--primary-medium);
  color:var(--ink)
}
body[data-theme] .map-track-toggle:hover{
  border-color:var(--primary);
  background:var(--primary-soft);
  color:var(--ink)
}
@media(max-width:760px){
  .operation-photo-head-actions{
    flex-wrap:wrap;
    justify-content:flex-end
  }
  body[data-theme] .map-track-toggle{
    min-height:38px
  }
}


/* Compact operation event log: recent activity first, full history on demand. */
.operation-events-section>summary{
  padding:13px 16px
}
.operation-events-section>summary strong{
  font-size:15px
}
.operation-events{
  gap:0;
  padding:0 16px 8px
}
.operation-events .audit-event{
  align-items:center;
  margin:0;
  padding:8px 4px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent
}
.operation-events .audit-event:last-child{
  border-bottom:0
}
.operation-events .audit-event strong{
  font-size:12px;
  line-height:1.25
}
.operation-events .audit-event small{
  font-size:10px;
  line-height:1.3
}
.operation-events-toggle{
  min-width:0;
  margin:3px 16px 13px;
  padding:7px 9px
}


/* Active operations and collapsible completed-operation archive. */
.operation-list-section{display:grid;gap:10px}
.operation-list-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}
.operation-list-section-head h3{margin:0;font-size:14px;letter-spacing:.02em}
.operation-list-items{display:grid;gap:8px}
.operation-section-empty{display:grid;gap:4px;padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);background:var(--panel2)}
.operation-section-empty strong{color:var(--ink);font-size:14px}
.operation-section-empty span{font-size:12px}
.operation-archive{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.operation-archive>summary{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:9px 2px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer;list-style:none}
.operation-archive>summary:hover{background:var(--primary-soft)}
.operation-archive>summary::-webkit-details-marker{display:none}
.operation-archive>summary::marker{content:''}
.operation-archive>summary>span:first-child{display:grid;gap:3px}
.operation-archive>summary>.pill{margin-left:auto}
.operation-archive>summary strong{font-size:14px}
.operation-archive>summary small{color:var(--muted);font-size:11px;font-weight:500}
.operation-archive>summary::after{content:'›';order:3;color:var(--muted);font-size:23px;line-height:1;transform:rotate(90deg);transition:transform .15s ease}
.operation-archive[open]>summary::after{transform:rotate(-90deg)}
.operation-archive-body{display:grid;gap:9px;padding-top:12px}
.operation-archive-search{width:100%;min-height:40px;margin:0}
.operation-archive-result-meta{margin:0 2px;color:var(--muted);font-size:11px}
.operation-card-completed{white-space:nowrap}
.operation-archive-more{justify-self:center;margin-top:3px}
@media(max-width:600px){
  .operation-archive>summary{align-items:flex-start}
  .operation-card-completed{white-space:normal}
}


/* Temporary, administrator-only camera telemetry diagnostics. */
.operation-diagnostics-button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.camera-diagnostics-dialog{width:min(920px,calc(100% - 32px));max-height:min(88dvh,900px);overflow:auto}
.camera-diagnostics-head{align-items:flex-start}
body[data-theme] .camera-diagnostics-close{display:grid;place-items:center;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:9px;font-size:25px;line-height:1}
.camera-diagnostics-intro{margin:10px 0 18px;line-height:1.5}
.camera-diagnostics-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:180px;color:var(--muted)}
.camera-diagnostics-spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:camera-diagnostics-spin .8s linear infinite}
@keyframes camera-diagnostics-spin{to{transform:rotate(360deg)}}
.camera-diagnostics-status-line{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.camera-diagnostics-status[data-status="ready"]{border-color:var(--success-border);background:var(--success-soft);color:var(--success-ink)}
.camera-diagnostics-status[data-status="partial"]{border-color:#8a6a20;background:#5b431d;color:#ffe08a}
.camera-diagnostics-status[data-status="missing"]{border-color:var(--error-border);background:var(--error-soft);color:var(--error-ink)}
.camera-diagnostics-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
.camera-diagnostics-message,.camera-diagnostics-missing{margin:10px 0;color:var(--muted);font-size:12px;line-height:1.5}
.camera-diagnostics-field-list{display:grid;gap:8px;max-height:360px;margin-top:14px;overflow:auto}
.camera-diagnostics-field{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(260px,1.5fr);gap:8px 16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.camera-diagnostics-field>div{display:grid;gap:3px;min-width:0}
.camera-diagnostics-field strong{color:var(--ink);font-size:13px}
.camera-diagnostics-field small{color:var(--muted);font-size:10px}
.camera-diagnostics-field code{min-width:0;overflow-wrap:anywhere;color:var(--link);font-size:11px}
.camera-diagnostics-field-meta{grid-column:1 / -1;color:var(--muted);font-size:11px}
.camera-diagnostics-dialog .dialog-actions{position:sticky;bottom:-1px;margin-top:18px;padding-top:14px;background:var(--panel)}
@media(max-width:760px){
  .camera-diagnostics-status-line{align-items:flex-start;flex-direction:column}
  .camera-diagnostics-metrics{grid-template-columns:1fr 1fr}
  .camera-diagnostics-field{grid-template-columns:1fr}
  .camera-diagnostics-field-meta{grid-column:auto}
}
.camera-view-toggle[aria-pressed="true"]{background:#0f766e;color:#fff;border-color:#5eead4}.camera-view-status{max-width:210px;color:var(--muted);font-size:12px;line-height:1.25}.camera-view-status:not([hidden]){display:inline-block}

.organization-overview-content{overflow-x:auto;min-height:0}
.organization-overview-content table{width:100%;min-width:30rem;border-collapse:collapse;text-align:left}
.organization-overview-content th,.organization-overview-content td{padding:14px 12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;max-width:32rem}
.organization-overview-content th{color:var(--muted);font-size:13px}

.organization-overview-content th:last-child,.organization-overview-content td:last-child{white-space:nowrap}

.organization-operation-detail{min-height:0;margin-top:20px}
.organization-operation-open{text-align:left;white-space:normal}
.organization-operation-fields{display:grid;grid-template-columns:minmax(5rem,auto) minmax(0,1fr);gap:12px 24px}
.organization-operation-fields dt{color:var(--muted)}
.organization-operation-fields dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* Area suggestions in the organization-scoped operation position picker. */
.operation-place-suggestions { border: 1px solid currentColor; border-radius: 12px; overflow: hidden; margin-block: 8px; }
.operation-place-suggestions [role="option"] { padding: 10px 14px; cursor: pointer; }
.operation-place-suggestions [role="option"]:hover,
.operation-place-suggestions [aria-selected="true"] { background: #245fa4; color: white; }

/* Photo list: filename followed by capture time and source drone. */
.operation-photo-grid{grid-template-columns:minmax(0,1fr)}
.operation-photo-card{display:grid;grid-template-columns:110px minmax(140px,1fr) minmax(155px,.55fr) minmax(160px,.65fr);align-items:center}
.operation-photo-detail{min-width:0;padding:12px;overflow-wrap:anywhere;font-size:13px}
.operation-photo-detail small{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
@media(max-width:760px){
 .operation-photo-card{grid-template-columns:85px minmax(0,1fr)}
 .operation-photo-detail{grid-column:2;padding-top:0}
}

.organization-photo-list{list-style:none;padding:0;overflow-x:auto}
.organization-photo-row{display:grid;grid-template-columns:minmax(240px,1.7fr) minmax(160px,1fr) minmax(180px,1fr) minmax(100px,.6fr);gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);min-width:740px}
.organization-photo-row>div{min-width:0}.organization-photo-row button{max-width:100%;overflow-wrap:anywhere}
.organization-photo-header{font-size:13px;color:var(--muted)}
/* Multi-drone operation assignment and compact identity summaries. */
.operation-device-picker{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:10px}
.operation-device-picker legend{font-weight:700;padding:0 5px}
.operation-device-options{display:grid;gap:6px;max-height:220px;overflow:auto;padding:2px}
.operation-device-option{display:flex!important;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer}
.operation-device-option:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.operation-device-option input{width:auto;margin:0}.operation-device-option span,.operation-device-option strong,.operation-device-option small{display:block}
.operation-device-option small,.operation-device-help{color:var(--muted)}
.operation-device-help{margin:0;font-size:12px}
.operation-device-chips,.operation-device-summary{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:6px}
.operation-device-summary{justify-content:flex-start;margin:8px 0 14px}
.operation-device-chip{display:inline-flex;align-items:baseline;gap:5px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);max-width:230px}
.operation-device-chip.online{color:var(--success-ink);border-color:var(--success-border);background:var(--success-soft)}
.operation-device-chip.offline{color:var(--error-ink);border-color:var(--error-border);background:var(--error-soft)}
.operation-device-chip strong,.operation-device-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.operation-device-chip small{color:var(--muted)}
@media(max-width:600px){.operation-device-chips{justify-content:flex-start}}
.operation-track-legend{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.operation-track-legend-item{display:flex!important;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer}
.operation-track-legend-item input{width:auto;margin:0}.operation-track-legend-item span:not(.operation-track-swatch),.operation-track-legend-item strong,.operation-track-legend-item small{display:block}
.operation-track-legend-item small{color:var(--muted)}
.operation-track-swatch{width:13px;height:13px;border-radius:50%;background:var(--track-color);box-shadow:0 0 0 2px #fff}
.operation-photo-filename{opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Stronger visual hierarchy for the selected operation detail. */
.operation-detail-panel{
  margin-top:18px;
  padding-top:26px;
  border-top:2px solid var(--primary);
  box-shadow:0 -1px 0 var(--primary-soft)
}
#operation-detail>.panel-head{
  align-items:flex-start;
  padding-bottom:16px;
  margin-bottom:0;
  border-bottom:1px solid var(--line)
}
#operation-detail-title{
  font-size:26px;
  letter-spacing:.01em
}
#operation-detail-meta{
  margin:9px 0 0;
  font-size:13px
}
.operation-device-summary{
  margin:12px 0 18px
}
.operation-metrics{
  gap:12px;
  margin:0 0 24px
}
.operation-metrics div{
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--panel2),var(--panel))
}
.operation-metrics dt{
  font-size:10px;
  letter-spacing:.08em
}
.operation-metrics dd{
  margin-top:6px;
  font-size:20px;
  line-height:1.1
}
.operation-actions{
  gap:8px
}
.operation-actions .operation-notam-button,
.operation-actions .operation-diagnostics-button{
  border-color:var(--line)
}
.operation-actions .operation-complete-button{
  margin-left:8px;
  padding-left:13px;
  padding-right:13px
}
.operation-archive>summary{
  padding-top:7px;
  padding-bottom:7px
}
.operation-archive>summary strong{
  font-size:13px
}
.operation-archive>summary small{
  opacity:.8
}
@media(max-width:1000px){
  #operation-detail>.panel-head{gap:16px}
  .operation-actions{max-width:60%}
}
@media(max-width:600px){
  .operation-detail-panel{margin-top:12px;padding-top:20px}
  #operation-detail>.panel-head{padding-bottom:14px}
  #operation-detail-title{font-size:22px}
  .operation-actions{max-width:none;width:100%;align-items:stretch}
  .operation-actions .operation-complete-button{margin-left:0}
  .operation-metrics dd{font-size:18px}
}


/* Simplify selected-operation actions. */
#operation-detail-status{display:none}
.operation-actions .operation-complete-button{
  border-color:var(--error-border)!important;
  background:var(--error-soft)!important;
  color:var(--error-ink)!important
}
.operation-actions .operation-complete-button:hover{
  border-color:var(--error-ink)!important;
  background:color-mix(in srgb,var(--error-soft) 82%,var(--error-ink) 18%)!important
}


/* Dashboard fleet polish. */
.devices-panel .device-list{gap:9px}
.devices-panel .device{
  position:relative;
  padding:14px 15px;
  border-color:var(--line);
  background:var(--panel);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}
.devices-panel .device:hover{
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line));
  background:color-mix(in srgb,var(--panel) 90%,var(--primary-soft) 10%)
}
.devices-panel .device.active{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--panel) 84%,var(--primary-soft) 16%);
  box-shadow:inset 3px 0 0 var(--primary)
}
.devices-panel .device-title{
  display:flex;
  align-items:center;
  min-width:0
}
.devices-panel .device-title strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px
}
.devices-panel .device-serial,
.devices-panel .device-last-seen{
  color:var(--muted);
  font-size:11px;
  opacity:.82
}
.devices-panel .device-status{
  font-size:11px;
  font-weight:750
}
.devices-panel .device-status.online{color:var(--success-ink)}
.devices-panel .device-status.offline{color:var(--error-ink)}
.devices-panel .status-dot{
  flex:0 0 auto;
  width:8px;
  height:8px
}
.detail-panel .panel-head{
  align-items:flex-start;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line)
}
.detail-panel .metrics{
  gap:10px;
  margin:0 0 20px
}
.detail-panel .metrics div{
  padding:14px 15px;
  border-radius:10px;
  background:linear-gradient(180deg,var(--panel2),var(--panel))
}
.detail-panel .metrics dt{
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase
}
.detail-panel .metrics dd{
  margin-top:6px;
  font-size:18px;
  font-weight:800
}
.dashboard-map{
  margin-bottom:4px
}
.map-panel{
  margin-bottom:16px
}


/* Dark-theme override for dashboard fleet buttons. */
body[data-theme="dark"] .devices-panel .device{
  border-color:var(--line);
  background:var(--panel);
  color:var(--ink)
}
body[data-theme="dark"] .devices-panel .device:hover{
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line));
  background:color-mix(in srgb,var(--panel) 90%,var(--primary-soft) 10%);
  color:var(--ink)
}
body[data-theme="dark"] .devices-panel .device.active{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--panel) 84%,var(--primary-soft) 16%);
  color:var(--ink);
  box-shadow:inset 3px 0 0 var(--primary)
}