/* ==========================================================================
   OPS · 运行中心 / 管制中心
   Appended after app.css so it can also smooth over older responsive rules.
   ========================================================================== */

.panel{min-width:0}
.tbl-wrap{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.responsive-table{min-width:720px}

/* ---------- KPI strip ---------- */
.ops-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ops-kpi{
  padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--panel);min-width:0;position:relative;overflow:hidden;
}
.ops-kpi .k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.ops-kpi .v{font-family:var(--mono);font-size:30px;line-height:1.05;font-weight:700;letter-spacing:-.05em;margin-top:7px}
.ops-kpi .v small{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0;color:var(--text-3);margin-left:4px}
.ops-kpi .s{font-size:11px;color:var(--text-3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-kpi .dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);display:inline-block}
.ops-kpi .dot.ok{background:var(--text)}
.ops-kpi .dot.bad{background:transparent;border:1.5px solid var(--text)}

/* ---------- tabs ---------- */
.ops-tabs{display:flex;gap:4px;padding:3px;border:1.5px solid var(--line);border-radius:11px;background:var(--panel);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.ops-tabs::-webkit-scrollbar{display:none}
.ops-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;
  border-radius:8px;color:var(--text-3);font-size:12px;font-weight:650;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.ops-tab:hover{color:var(--text-2)}
.ops-tab.on{background:var(--text);color:var(--bg)}
.ops-pane{display:none}
.ops-pane.on{display:block}

/* ---------- overview layout ---------- */
.ops-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr);gap:12px;margin-bottom:12px}
.ops-grid-2{grid-template-columns:1fr 1fr}
.ops-grid .panel{margin:0}
.ops-map-card{padding:0;overflow:hidden;position:relative}
.ops-map-head{position:absolute;left:14px;right:14px;top:12px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.ops-map-head .badge,.ops-map-head button{pointer-events:auto}
.ops-map-shell{position:relative;width:100%;height:480px;background:var(--panel-2);overflow:hidden}
#ops-map{width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
#ops-map.dragging{cursor:grabbing}
.ops-map-legend{position:absolute;left:14px;bottom:12px;z-index:4;display:flex;align-items:center;gap:12px;padding:6px 9px;border:1px solid var(--line-2);border-radius:7px;background:var(--panel);font-size:10px;color:var(--text-3)}
.ops-map-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text);margin-right:5px;vertical-align:middle}
.ops-map-legend i.ring{width:9px;height:9px;background:transparent;border:1px dashed var(--text-3);border-radius:50%}

/* ---------- positions ---------- */
.pos-list{display:grid;gap:2px;margin-top:4px}
.pos-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.pos-row:last-child{border-bottom:0}
.pos-dot{width:7px;height:7px;border-radius:50%;background:var(--line-3)}
.pos-row.on .pos-dot{background:var(--text);box-shadow:0 0 0 3px var(--panel-2)}
.pos-main{min-width:0}
.pos-main b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-main span{display:block;font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-freq{font-family:var(--mono);font-size:11.5px;color:var(--text-2);text-align:right}
.pos-freq small{display:block;font-size:9px;color:var(--text-3);letter-spacing:.06em}
.pos-empty{padding:22px 4px;color:var(--text-3);font-size:12px;text-align:center}

/* ---------- ATIS ---------- */
.atis-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atis-card{border:1.5px solid var(--line);border-radius:13px;background:var(--panel);padding:13px;min-width:0}
.atis-card header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.atis-card header b{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.atis-card .meta{font-size:10.5px;color:var(--text-3);display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.atis-card pre{
  margin:0;padding:9px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text-2);
  max-height:116px;overflow:auto;
}
.atis-card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.atis-card .foot span{font-size:9.5px;color:var(--text-3);font-family:var(--mono);letter-spacing:.04em}
.atis-editor textarea{min-height:150px;font-family:var(--mono);font-size:12px;line-height:1.55}

/* ---------- strips ---------- */
.strip-status{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:5px;padding:3px 6px;color:var(--text-2);white-space:nowrap}
.strip-status::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--text-3)}
.strip-status[data-s="tower"]::before,.strip-status[data-s="approach"]::before{background:var(--text)}
.strip-status[data-s="landed"]{opacity:.62}
.strip-status[data-s="closed"]{opacity:.45}
.strip-row{cursor:pointer}
.strip-row:hover{background:var(--panel-2)}
.strip-online{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--text-3)}
.strip-online i{width:5px;height:5px;border-radius:50%;background:var(--line-3)}
.strip-online.on i{background:var(--text)}
.strip-filters{display:flex;gap:4px;flex-wrap:wrap}
.strip-filters button{font-size:10.5px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--text-3)}
.strip-filters button.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- weather ---------- */
.weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wx-card{border:1.5px solid var(--line);border-radius:13px;background:var(--panel);padding:14px;min-width:0}
.wx-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.wx-card header b{font-family:var(--mono);font-size:15px;letter-spacing:.03em}
.wx-card header span{font-size:10px;color:var(--text-3);text-align:right;line-height:1.35}
.wx-card .wx-cat{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;margin-bottom:8px}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:7px 0 9px}
.wx-grid div{min-width:0}
.wx-grid span{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);font-family:var(--mono)}
.wx-grid b{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-card pre{margin:0;padding:8px 9px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--mono);font-size:10px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text-3);max-height:90px;overflow:auto}
.wx-card details{margin-top:7px}
.wx-card summary{cursor:pointer;font-size:10px;color:var(--text-3);list-style:none}
.wx-card summary::-webkit-details-marker{display:none}
.wx-card details pre{margin-top:6px;max-height:150px}

/* ---------- events ---------- */
.event-list{display:grid;gap:0}
.event-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:start;padding:9px 2px;border-bottom:1px solid var(--line)}
.event-row:last-child{border-bottom:0}
.event-dot{width:6px;height:6px;border-radius:50%;background:var(--line-3);margin-top:6px}
.event-dot.atc_connect,.event-dot.pilot_connect{background:var(--text)}
.event-dot.broadcast{background:transparent;border:1.5px solid var(--text)}
.event-main{min-width:0}
.event-main b{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-main span{display:block;font-size:9.5px;color:var(--text-3);font-family:var(--mono);letter-spacing:.02em;margin-top:1px}
.event-time{font-size:9.5px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;padding-top:2px}

/* ---------- bookings ---------- */
.booking-list{display:grid;gap:7px}
.booking-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.booking-row:last-child{border-bottom:0}
.booking-row b{display:block;font-family:var(--mono);font-size:11.5px}
.booking-row span{display:block;font-size:10px;color:var(--text-3);margin-top:1px}
.booking-row .who{font-size:9.5px;color:var(--text-3);font-family:var(--mono)}
.booking-form .row{flex-wrap:wrap}
.booking-form input[type="datetime-local"]{min-width:0}
.booking-empty{padding:20px 0;text-align:center;color:var(--text-3);font-size:12px}

/* ---------- home ops cards ---------- */
.home-ops-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
.home-ops-grid .panel{padding:16px;margin:0;min-width:0}
.home-ops-grid h3{font-size:13px;letter-spacing:-.02em}
.home-ops-grid .panel-head{padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.home-health{display:grid;gap:7px}
.home-health .r{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-2)}
.home-health .r span{display:flex;align-items:center;gap:6px;color:var(--text-3)}
.home-health .r i{width:6px;height:6px;border-radius:50%;background:var(--line-3)}
.home-health .r i.ok{background:var(--text)}
.home-health .r i.bad{background:transparent;border:1.5px solid var(--text)}
.home-health .r b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--text-2)}
.home-list{display:grid;gap:2px}
.home-list .r{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:11px}
.home-list .r:last-child{border-bottom:0}
.home-list .r span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.home-list .r b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--text-3);white-space:nowrap}

/* ---------- config generator ---------- */
.cfg-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.cfg-tabs button{font-size:11px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;color:var(--text-3)}
.cfg-tabs button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.cfg-preview{
  margin:0;padding:13px;border:1.5px solid var(--line);border-radius:11px;background:var(--panel-2);
  font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  color:var(--text-2);max-height:260px;overflow:auto;
}
.cfg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .ops-grid{grid-template-columns:1fr}
  .ops-map-shell{height:420px}
  .home-ops-grid{grid-template-columns:1fr 1fr}
  .home-ops-grid .panel:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .ops-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .ops-kpi{padding:11px 12px}
  .ops-kpi .v{font-size:24px}
  .ops-tabs{margin-left:-2px;margin-right:-2px}
  .ops-tab{padding:0 11px;font-size:11px}
  .ops-grid,.ops-grid-2{grid-template-columns:1fr}
  .ops-map-shell{height:290px}
  .atis-list,.weather-grid{grid-template-columns:1fr}
  .home-ops-grid{grid-template-columns:1fr}
  .home-ops-grid .panel:last-child{grid-column:auto}

  /* 手机端表格改成卡片，避免 720px 横向溢出 */
  .responsive-table{display:block;min-width:0;width:100%}
  .responsive-table thead{display:none}
  .responsive-table tbody{display:block}
  .responsive-table tr{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .responsive-table tr:last-child{border-bottom:0}
  .responsive-table td{display:block;padding:0;border:0;white-space:normal;min-width:0;overflow-wrap:anywhere}
  .responsive-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px}
  .responsive-table td:first-child{grid-column:1/-1;font-size:15px;margin-bottom:2px}
  .responsive-table td:first-child::before{display:none}
  .responsive-table td[colspan]{grid-column:1/-1;text-align:center}
  .responsive-table td[colspan]::before{display:none}
  .responsive-table .empty{padding:26px 0}
}
@media(max-width:420px){
  .ops-kpi .v{font-size:21px}
  .ops-tab{padding:0 9px;font-size:10.5px}
}
/* small additions */
.map-filter{cursor:pointer;opacity:.58;transition:opacity .2s,background .2s,color .2s}
.map-filter.on{opacity:1;background:var(--text);color:var(--bg);border-color:var(--text)}
.home-list-empty{padding:14px 0;text-align:center;color:var(--text-3);font-size:11px}
.wx-card header b{margin-right:6px}
.wx-card header div{min-width:0}
.map-legend .ring{width:9px;height:9px;border:1px dashed currentColor;background:transparent;border-radius:50%}
.map-tools button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
#ops-overlay.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- motion / health colours / native dropdown polish ---------- */
.ops-tab{transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.ops-tab:hover{transform:translateY(-1px)}
.ops-tab:active{transform:translateY(0) scale(.98)}
.ops-tab.on{box-shadow:0 6px 18px rgba(0,0,0,.16)}
.ops-pane.on{animation:opsPaneIn .32s var(--ease)}
@keyframes opsPaneIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ops-kpi,.ops-map-card,.ops-grid .panel,.home-ops-grid .panel{transition:border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)}
.ops-kpi:hover{transform:translateY(-2px);border-color:var(--line-2)}
.ops-pane .btn,.ops-pane .strip-filters button,.cfg-tabs button{transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.ops-pane .btn:hover,.ops-pane .strip-filters button:hover,.cfg-tabs button:hover{transform:translateY(-1px)}
.ops-pane .btn:active,.ops-pane .strip-filters button:active,.cfg-tabs button:active{transform:translateY(0) scale(.98)}
.atis-card,.wx-card,.booking-row,.event-row{transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.atis-card:hover,.wx-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.home-health .r i.ok{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.home-health .r i.bad{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
.home-health .r b.ok{color:#22c55e}
.home-health .r b.bad{color:#ef4444}
.badge.ok{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
.badge.bad{color:#ef4444;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
#home-health-badge.ok,#ops-health-badge.ok{color:#22c55e;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
#home-health-badge.bad,#ops-health-badge.bad{color:#ef4444;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
.badge.ok .dot{background:#22c55e}
.badge.bad .dot{background:#ef4444}

/* custom select for OPS: native popups render badly over translucent panels */
.cselect{position:relative;width:100%;min-width:0}
.cselect > select{display:none!important}
.cselect-btn{
  width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--panel);color:var(--text);
  font-size:15px;text-align:left;cursor:pointer;
  transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.cselect-btn:hover{border-color:var(--line-3)}
.cselect-btn:focus-visible{outline:none;border-color:var(--text);box-shadow:var(--focus)}
.cselect-btn b{font-weight:500;color:var(--text-3);font-size:13px;transition:transform .25s var(--ease)}
.cselect.open .cselect-btn{border-color:var(--text);background:var(--panel)}
.cselect.open .cselect-btn b{transform:rotate(180deg)}
.cselect-menu{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:130;padding:5px;
  border:1.5px solid var(--line-2);border-radius:11px;background:var(--panel);box-shadow:0 18px 45px rgba(0,0,0,.25);
  max-height:240px;overflow:auto;opacity:0;transform:translateY(-5px) scale(.99);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.cselect.open .cselect-menu{opacity:1;transform:none;pointer-events:auto}
.cselect-option{
  display:block;width:100%;padding:10px 11px;border:0;border-radius:7px;background:transparent;
  color:var(--text-2);font-size:14px;text-align:left;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.cselect-option:hover,.cselect-option.on{background:var(--panel-2);color:var(--text)}
.ops-pane .panel{overflow:visible}
.cselect-menu{background:var(--bg)}
.cselect-option:hover,.cselect-option.on{background:var(--text);color:var(--bg)}
@media(max-width:760px){
  .cselect-menu{top:auto;bottom:calc(100% + 5px);transform:translateY(5px) scale(.99);max-height:min(240px,42vh)}
  .cselect.open .cselect-menu{transform:none}
}
@media(hover:none){
  .ops-tab:hover,.ops-kpi:hover,.atis-card:hover,.wx-card:hover,.ops-pane .btn:hover,.ops-pane .strip-filters button:hover,.cfg-tabs button:hover{transform:none}
}