/* Unified workspace presentation inspired by Ant Design Pro. */
:root { --ink:#1f2e40; --muted:#60728a; --line:#e5ebf2; --teal:#1677ff; --surface:#fff; }
body { background:#f3f6fa; color:var(--ink); }
.app-header { background:#fff; color:#192a40; border-bottom:1px solid #e8edf3; box-shadow:0 2px 10px #122f4e08; }
.header-inner { min-height:76px; max-width:none; padding:12px 32px; }
.brand h1 { color:#172c45; }
.brand-kicker { color:#6b8198; }
.brand-mark { border-radius:12px; box-shadow:0 3px 12px #173d6424; }
.header-tag { color:#315e96; background:#edf5ff; border:1px solid #d9eaff; border-radius:7px; font-weight:650; }
.workspace { max-width:none; grid-template-columns:230px minmax(0,1fr); gap:28px; padding:24px 32px 48px; }
.workspace-sidebar { top:16px; max-height:calc(100vh - 32px); background:#fff; border:1px solid #e7edf4; border-radius:12px; padding:14px 10px; box-shadow:0 4px 18px #1b3c5d0a; }
.sidebar-heading { display:block; color:#243b55; font-size:1.12rem; font-weight:750; padding:8px 12px 12px; }
.workspace-nav { gap:3px; }
.nav-group { font-size:1rem; color:#52677f; margin:12px 0 4px; padding:8px 12px; border:0; }
.workspace-nav a, .workspace-nav a:not(:has(svg)) { min-height:48px; margin:0; padding:10px 12px; color:#40536a; border-radius:7px; font-weight:600; }
.workspace-nav a:not(:has(svg))::before { content:''; width:8px; height:8px; margin:0 8px; border:1.8px solid currentColor; border-radius:50%; flex:none; opacity:.7; }
.workspace-nav a svg { width:22px; height:22px; }
.workspace-nav a:hover { background:#f3f7fd; color:#1677d2; }
.workspace-nav a[aria-current="page"] { color:#1262bd; background:#e8f3ff; box-shadow:inset 3px 0 #1677ff; }
.sidebar-logout { border-top:1px solid #edf0f4; margin-top:14px; padding:14px 12px 4px; }
.overview { background:#fff; border:1px solid #e7edf4; border-radius:12px; padding:20px 24px; margin-bottom:18px; align-items:center; box-shadow:0 4px 16px #1b3c5d08; }
.overview h2 { font-size:clamp(30px,2.5vw,40px); letter-spacing:0; line-height:1.25; margin:0; }
.overview p { color:#6b7e93; margin-top:6px; }
.connection-card { background:#f7faff; border:1px solid #e7edf5; padding:12px 16px; border-radius:9px; }
.connection-line { font-size:1rem; }
.connection-time { margin-top:4px; }
.notice { border-radius:8px; padding:12px 16px; margin-bottom:18px; }
.overview-layout { gap:18px; grid-template-columns:minmax(0,1.75fr) minmax(330px,1fr); }
.overview-aside { gap:18px; }
.summary-grid { gap:12px; border:0; background:transparent; border-radius:0; overflow:visible; box-shadow:none; margin-bottom:18px; }
.overview-primary .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.summary-grid .metric, .summary-grid .metric-risk { grid-row:auto; min-height:120px; padding:18px 20px; border:1px solid #e7edf4; border-radius:10px; background:#fff; box-shadow:0 4px 16px #1b3c5d09; }
.summary-grid .metric-risk { grid-column:span 4; min-height:126px; background:linear-gradient(110deg,#16365c,#225b91); border:0; }
.summary-grid .metric-risk .metric-value { font-size:2.25rem; margin:3px 0; }
.summary-grid .metric:not(.metric-risk) .metric-value { font-size:1.8rem; margin-top:8px; }
.summary-grid .metric:not(.metric-risk) .metric-value-text { font-size:1.2rem; }
.metric-label { color:#62758a; font-weight:600; }
.panel, .live-measurements .panel, .review-layout .panel { border:1px solid #e7edf4; border-radius:12px; box-shadow:0 4px 18px #1b3c5d0a; padding:22px 24px; }
.panel-head { padding-bottom:15px; margin-bottom:17px; border-bottom:1px solid #edf1f5; }
.panel-head h2 { font-size:1.35rem; font-weight:750; }
.panel-meta { background:#f2f6fb; border:0; border-radius:6px; padding:6px 10px; color:#53708e; }
.measurement-toolbar .panel-description { background:#f5f8fc; border:0; }
.measurement-filter { border-radius:7px; }
.table-wrap { border:1px solid #edf1f5; border-radius:8px; }
table { border-collapse:collapse; }
th { background:#f6f8fb; color:#496179; }
tbody tr:nth-child(even) { background:#fff; }
tbody tr:hover { background:#f5f9ff; }
th, td { border-bottom:1px solid #edf1f5; }
.empty-state { background:#fafbfd; border:1px dashed #dbe5f0; border-radius:8px; padding:36px 18px; color:#718398; }
.archive-toolbar, .record-actions { background:#f6f8fb; border:1px solid #edf1f6; }
.history-row { border-radius:8px; }
.button { border-radius:7px; }
.button-primary { background:#1677df; border-color:#1677df; color:#fff; box-shadow:none; }
.button-primary:hover:not(:disabled) { background:#095dbf; }
.button-secondary { background:#fff; border-color:#d5dfeb; color:#34516f; }
.button-secondary:hover:not(:disabled) { border-color:#78aeed; color:#1262bd; background:#f5f9ff; }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #91caff; outline-offset:2px; }
.location-map { height:280px; border-radius:8px; }
.activity-entry { background:#f8fafc; border-color:#edf1f5; }
.login-card { border-radius:14px; box-shadow:0 18px 50px #153b6520; }
@media(max-width:1310px) { .overview-layout { grid-template-columns:minmax(0,1fr); } .overview-aside { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } }
@media(max-width:960px) { .workspace { display:block; padding:16px; } .workspace-sidebar { position:static; max-height:none; padding:12px; margin-bottom:16px; } .sidebar-heading { display:none; } .workspace-nav { display:flex; flex-wrap:wrap; } .nav-group { display:none; } .workspace-nav a, .workspace-nav a:not(:has(svg)) { padding:8px 12px; } .overview-aside { grid-template-columns:1fr; } }
@media(max-width:600px) { .header-inner { padding:12px 16px; } .header-tag { display:none; } .overview { padding:16px; } .overview-primary .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .summary-grid .metric-risk { grid-column:1/-1; } .summary-grid .metric { min-height:100px; padding:15px; } .panel, .live-measurements .panel, .review-layout .panel { padding:16px; } }