@import url('/staffing-board.css');
#dashboard {
  margin: -1.6rem -2vw;
  min-height: calc(100vh - 64px);
  padding: 1.45rem 2vw 1rem;
  color: #eef8ff;
  background:
    linear-gradient(rgba(32, 124, 174, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 124, 174, .06) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, #0e4969 0, #071e31 40%, #041522 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

#dashboard .board-head h2,
#dashboard .clock b { color: #fff; }
#dashboard .board-head .eyebrow { color: #51c9ed; }
#dashboard .clock span { color: #8fb4c8; }
.dashboard-head-right { display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:.6rem; }
#dashboard-hidden{display:flex;align-items:center;gap:.45rem;white-space:nowrap}
#dashboard-hidden .hidden-visits{margin:0}
.hidden-visits-label{color:#9bbccc;font-size:.72rem;white-space:nowrap}
@media(max-width:900px){.dashboard-head-right{flex-wrap:wrap}.dashboard-head-right .clock{order:0}#dashboard-hidden{order:1;flex-wrap:wrap;justify-content:flex-end}}
.hidden-visits { display:flex; align-items:center; gap:.4rem; padding:.35rem .45rem; border:1px solid #315b70; border-radius:7px; background:#0a293d; }
.hidden-visits b { color:#9bbccc; font-size:.72rem; }
.hidden-visits button,.hide-visit { padding:.35rem .55rem; border:1px solid #397493; background:#123c53; color:#dff5ff; font-size:.68rem; }
.dashboard-restore-button { padding:.7rem 1rem; border:0; border-radius:8px; background:#2f6eaf; color:#fff; font-size:.8rem; font-weight:800; white-space:nowrap; }
.dashboard-restore-button:hover { background:#3e82c6; }
.dashboard-load-error { grid-column:1/-1; margin:1rem; padding:1.25rem; border:1px solid #e45a55; border-left:6px solid #e45a55; border-radius:10px; background:#fff3f2; color:#6f2925; }
.dashboard-load-error h3 { margin:0 0 .35rem; }
.dashboard-load-error p { margin:.2rem 0 1rem; }
.hidden-visits button.active { border-color:#66d8ff; background:#24698d; color:#fff; }
#dashboard .visit-board { min-height: calc(100vh - 245px); align-items: stretch; }

.aero-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #2a708f;
  border-top: 3px solid #4db7df;
  border-radius: 4px 18px 4px 18px;
  color: #f5fbff;
  background: linear-gradient(145deg, rgba(11, 43, 65, .96), rgba(4, 22, 36, .98));
  box-shadow: inset 0 0 35px rgba(52, 167, 217, .05), 0 18px 40px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.aero-card.late { border-color: #df5656; }
.aero-card.ahead { border-color: #65b872; }
.aero-card .aero-card-head { display:flex; justify-content:space-between; align-items:flex-start; padding:.2rem .25rem .9rem; border-bottom:1px solid #31546a; }
.aero-card .tail { color:#fff; font-size:clamp(1.45rem,2vw,2rem); letter-spacing:.04em; }
.phase-badge { display:inline-block; margin-top:.35rem; padding:.25rem .7rem; color:#fff; background:#176487; font-weight:900; font-style:italic; transform:skew(-8deg); }
.phase-actions { display:flex; align-items:center; gap:.55rem; }
.phase-actions .hide-visit { margin-top:.35rem; }
.late .phase-badge { background:#b93439; }
.ahead .phase-badge { background:#5b8f37; }
.aero-leader { text-align:right; }
.aero-leader small { display:block; color:#ff9f2f; font-size:.66rem; font-weight:900; letter-spacing:.09em; }
.aero-leader b { display:block; margin-top:.25rem; color:#fff; font-size:1.6rem; }

.aero-card-main { display:grid; grid-template-columns:minmax(145px,.85fr) minmax(190px,1.15fr); gap:.85rem; align-items:center; flex:1; padding:1rem 0; }
.aero-gauge { position:relative; width:min(210px,100%); aspect-ratio:1; margin:auto; display:grid; place-items:center; border-radius:50%; background:conic-gradient(from 225deg, currentColor 0 72%, #294454 72% 90%, transparent 90%); color:#57caee; box-shadow:inset 0 0 0 10px #071e30, inset 0 0 0 12px #43677a; }
.aero-gauge::before { content:""; position:absolute; inset:11%; border-radius:50%; background:#071c2c; box-shadow:inset 0 0 25px #0009; }
.late .aero-gauge { color:#f05252; }
.ahead .aero-gauge { color:#81c85a; }
.aero-gauge>div { position:relative; z-index:1; text-align:center; }
.aero-gauge small { display:block; font-weight:900; letter-spacing:.08em; color:currentColor; }
.aero-gauge strong { display:block; margin:.2rem 0; padding:0 .3rem; font-size:clamp(1.65rem,2.35vw,2.55rem); color:currentColor; line-height:1; white-space:nowrap; letter-spacing:-.04em; }
.aero-gauge span { font-size:1.5rem; }
.aero-data { display:grid; gap:.55rem; }
.aero-kpi { padding:.65rem .75rem; border:1px solid #365a6f; border-radius:7px; background:#0a263a; }
.aero-kpi small,.aero-kpi span { display:block; color:#91adbc; font-size:.66rem; letter-spacing:.05em; }
.aero-kpi b { display:block; margin:.12rem 0; font-size:clamp(1rem,1.5vw,1.35rem); }
.aero-kpi.staffing b { font-size:1rem; }
.staffing.shortage { border-color:#d84b4b; box-shadow:inset -4px 0 #d84b4b; }
.staffing.shortage b { color:#ff6262; }
.staffing.sufficient { border-color:#62ac54; box-shadow:inset -4px 0 #62ac54; }
.staffing.sufficient b,.staffing.available b { color:#83d466; }
.staffing.available { border-color:#3e9bc2; box-shadow:inset -4px 0 #3e9bc2; }

.aero-progress { padding:.65rem 0; border-top:1px solid #31546a; font-size:.65rem; color:#9bb6c5; }
.aero-progress>span:nth-child(2) { float:right; }
.aero-progress i { position:relative; display:block; height:8px; margin-top:.45rem; background:#233e4d; border-radius:8px; }
.aero-progress em { display:block; height:100%; background:linear-gradient(90deg,#228bb7,#53d3e8); border-radius:8px; }
.aero-progress mark { position:absolute; top:-4px; width:2px; height:16px; padding:0; background:#fff; }
.aero-team { padding-top:.7rem; border-top:1px solid #31546a; }
.aero-team>b { font-size:.7rem; letter-spacing:.06em; color:#9bb6c5; }
.aero-team>div { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.45rem; }
.aero-team span { min-width:38px; padding:.28rem .45rem; text-align:center; border:1px solid #398caf; border-radius:4px; color:#eaf8ff; font-size:.7rem; font-weight:800; }
.aero-team span.removable { cursor:pointer; transition:.15s ease; }
.aero-team span.removable:hover { border-color:#ff7070; background:#5a2730; color:#fff; transform:translateY(-1px); }

@media(max-width:1100px){
  #dashboard .visit-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px){
  #dashboard { margin:-1rem; padding:1rem; }
  #dashboard .visit-board { grid-template-columns:1fr; }
  .aero-card-main { grid-template-columns:1fr; }
  .aero-gauge { width:180px; }
}