/* Rider Control Center PC admin polish — dashboard UI layer */

/* Base layout: keep the content pinned to the top instead of vertically centering it. */
main{margin:0 auto!important;align-self:start!important;padding:26px 30px 52px!important;max-width:1600px!important}
header{height:58px!important;padding:0 20px!important;background:#0d141c!important}
header b{font-size:18px!important;letter-spacing:.55px!important}
header span{font-size:10px!important;padding:4px 7px!important}
.layout{grid-template-columns:190px minmax(0,1fr)!important;min-height:calc(100vh - 58px)!important}
aside{padding:14px 8px!important;position:sticky;top:58px;height:calc(100vh - 58px);align-self:start;background:#0d141c!important}
.nav{padding:10px 11px!important;margin:2px 0!important;border-radius:9px!important;font-size:13px!important;transition:background .16s ease,color .16s ease,transform .16s ease}
.nav:hover{transform:translateX(2px)}
.nav.active{background:#172534!important;color:#fff!important;box-shadow:inset 3px 0 #58b4ff}
.serverOn{color:#70e4a3}.serverOff{color:#ff9f86}

/* Dashboard title + compact introduction. */
#dashboard>h2{font-size:25px;margin:2px 0 18px;letter-spacing:-.5px}
#dashboard>h2::after{content:'라이더 · 코스 · 계획 · 모바일 · 그룹 라이딩 상태를 한 화면에서 확인합니다.';display:block;margin-top:6px;color:#7f94a7;font-size:12.5px;font-weight:500;letter-spacing:0}

/* Main metric cards: six across on a normal PC monitor. */
#dashboard #cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 14px}
.dashboardMetric{min-width:0;min-height:112px;padding:14px 15px!important;position:relative;overflow:hidden;cursor:pointer;display:grid!important;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:11px;align-content:center;background:linear-gradient(145deg,#13202b,#0f1821)!important;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.dashboardMetric:hover{transform:translateY(-2px);border-color:#3d5d78!important;background:linear-gradient(145deg,#162532,#111c26)!important}
.metricIcon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#0c151e;border:1px solid #2b3c4c;font-size:18px;grid-row:1/3}
.metricValue{font-size:28px;font-weight:800;line-height:1;color:#f5f8fb;font-variant-numeric:tabular-nums}
.metricLabel{font-size:12px;color:#91a6b8;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metricHint{position:absolute;right:10px;top:9px;font-size:10px;color:#52697c;opacity:0;transition:opacity .16s ease}.dashboardMetric:hover .metricHint{opacity:1}

/* PC server panel. */
.pcServerPanel{padding:14px 15px!important;margin:0 0 12px!important;background:linear-gradient(180deg,#111b24,#101820)!important}
.pcServerPanel>h3{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:6px}
#pcHealthCards{grid-template-columns:1fr 1.25fr 1fr 1fr 1.05fr!important;gap:8px!important}
.pcHealthCard{min-width:0;min-height:72px;padding:10px 12px!important;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-content:center;background:#0d161e!important}
.pcHealthCard .healthIcon{grid-row:1/3;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#111f2a;border:1px solid #263948;font-size:13px}
.pcHealthCard b{font-size:14.5px!important;line-height:1.16;word-break:break-word;min-width:0}
.pcHealthCard small{font-size:10px;letter-spacing:.2px;margin-top:4px;text-transform:none!important}
.pcHealthCard.good{border-color:#2f7d57}.pcHealthCard.warn{border-color:#8a6a21}
#pcHealthDetail{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:9px 2px 2px!important;font-size:12px;color:#7f94a7}
.pcAddressItem{display:flex;gap:5px;align-items:center;min-width:0}.pcAddressItem b{color:#a9bdcd;font-weight:600;overflow-wrap:anywhere}
.pcQuickActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.pcQuickActions button{min-width:0!important;padding:8px 11px;font-size:12px;background:#152536}
.pcQuickActions button:hover{background:#1a3044}
.pcAdminSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.pcMini{background:#0c141c;border:1px solid #23323f;border-radius:9px;padding:9px 11px;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:7px;min-width:0}
.pcMini .miniIcon{grid-row:1/3;align-self:center;font-size:14px;opacity:.82}.pcMini b{font-size:16px;line-height:1.05}.pcMini span{font-size:10.5px;color:#7f94a7;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The alpha note stays, but behaves like a small footer note rather than a main card. */
.alphaNotePanel{padding:11px 14px!important;margin:0!important;background:#0e161e!important;border-style:dashed!important;opacity:.84}
.alphaNotePanel h3{font-size:12px;margin:0 0 5px;color:#9db0bf}.alphaNotePanel p{font-size:11.5px;color:#778c9e;margin:0;line-height:1.5}

/* Existing backup/admin UI. */
.backupRecommended{border-color:#2f7d57;background:linear-gradient(145deg,#12231c,#101821)}.backupRecommended h3{margin-top:0}.backupNote{padding:10px 12px;border:1px solid #2f7d57;border-radius:8px;background:#0f1d18;color:#ccefdc}.advancedBox{margin-top:14px;border:1px solid #594b2c;border-radius:10px;background:#121812}.advancedBox summary{cursor:pointer;padding:12px 14px;color:#ffc857;font-weight:700}.advancedBox>div{padding:0 14px 14px}.dangerNote{padding:10px 12px;border:1px solid #76542a;border-radius:8px;background:#21190f;color:#ffd98b}.statusPill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700;margin-right:5px}.statusPill.good{background:#173d32;color:#8df0b7}.statusPill.warn{background:#493a13;color:#ffd76a}.statusPill.bad{background:#4a241f;color:#ffb4a8}

@media(max-width:1250px){#dashboard #cards{grid-template-columns:repeat(3,minmax(0,1fr))}#pcHealthCards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:900px){.layout{grid-template-columns:1fr!important}.layout aside{position:static!important;height:auto!important;display:flex!important;overflow:auto!important;border-right:0!important;padding:8px!important}.nav{min-width:126px!important}main{padding:18px!important}#dashboard #cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pcAdminSummary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#dashboard #cards,#pcHealthCards{grid-template-columns:1fr!important}.pcAdminSummary{grid-template-columns:1fr}.dashboardMetric{min-height:92px}.pcQuickActions button{width:100%}}