/* ARJUNA team identity and operator workspace. */
:root {
  --bg:#0d1113;
  --surface:#141a1e;
  --surface2:#1a2227;
  --line:#303a40;
  --soft:#263036;
  --text:#edf2f0;
  --muted:#a3aea9;
  --accent:#78c9a2;
  --green:#8dd4ac;
}
body { background:var(--bg); }
.sidebar { background:#111819; width:228px; padding:25px 18px; }
.workspace { margin-left:228px; }
.brand { display:block; letter-spacing:0; }
.brand img { display:block; width:100%; height:auto; }
.pack-emblem { object-fit:contain; border-radius:3px; }
.pack-id { font-size:14px; gap:12px; }
.workspace-label { margin-top:30px; }
.nav-label { margin-top:28px; }
.nav-item { border:0; border-left:3px solid transparent; border-radius:0; font-size:14px; padding:12px 10px; }
.nav-item > span:first-child { font:12px var(--mono); color:#7d8f86; }
.nav-item.active { background:#1d3028; border-left-color:var(--accent); color:#e8fff2; }
.nav-item.active > span:first-child { color:var(--accent); }
.source-box { border-radius:3px; background:transparent; }
.source-box p { line-height:1.6; }
.side-footer { gap:10px; letter-spacing:0; }
.side-footer > span { font-size:10px; }
.topbar { height:68px; }
.breadcrumb { font-size:14px; }
h1 { font-size:30px; letter-spacing:-.7px; font-weight:650; }
.page-heading p { font-size:14px; }
.eyebrow { letter-spacing:1px; font-size:12px; }
.button,select,input,.search { border-radius:4px; }
.button.primary { background:#275c43; border-color:#427b60; color:#f0fff6; }
.button.primary:hover { background:#31704f; }
.button { font-size:14px; }
.panel,.metric { border-radius:5px; background:var(--surface); box-shadow:none; }
.metric { padding:19px; }
.metric-label { font-size:12px; letter-spacing:.6px; }
.metric-value { font-size:35px; }
.metric-bottom { font-size:12px; }
.status-ribbon { border-radius:4px; padding:12px 14px; font-size:14px; }
.status-ribbon div span { font-size:12px; line-height:1.5; }
.sample-label { font-size:11px; }
.tag { border-radius:3px; padding:5px 8px; font-size:11px; }
.panel-title { font-size:17px; }
.panel-subtitle,.panel-note { font-size:12px; }
.cell { border-radius:3px; background:#1c2b26; border-color:#344d41; color:#d9eee1; }
.cell:hover { background:#304b3e; filter:none; }
.cell small { color:#b0bdb5; font-size:11px; opacity:1; }
.cell strong { font-size:13px; }
.cell-summary { gap:25px; }
.map-legend { font-size:12px; line-height:1.6; flex-wrap:wrap; }
.soc-panel { background:var(--surface); }
.soc-main { padding:0 23px 12px; }
.soc-main > strong { font:48px var(--mono); letter-spacing:-2px; }
.soc-main small { font-size:22px; letter-spacing:0; color:var(--muted); }
.soc-main p { font-size:12px; color:var(--muted); margin:9px 0 22px; }
.soc-bar { height:10px; background:#2c3539; overflow:hidden; margin-bottom:8px; }
.soc-bar span { display:block; height:100%; background:var(--accent); }
.detail-row,.check-row { font-size:14px; }
.detail-row b,.check-row b { font-size:13px; }
.thermal-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.module-card.fault { border-color:#b94f62; }
.module-card.warning { border-color:#947347; }
.module-range { display:flex; flex-wrap:wrap; gap:15px; padding:0 20px 18px; font-size:12px; color:var(--muted); }
.module-range b { display:block; color:var(--text); font:15px var(--mono); margin-top:6px; }
.thermal-channels { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; padding:0 18px 18px; }
.thermal-channels .temp-card { border:1px solid #35483e; border-radius:3px; padding:8px 2px; min-width:0; text-align:center; background:#1b2a23; }
.thermal-channels .temp-card span { font:11px var(--mono); }
.thermal-channels .temp-card strong { font:15px var(--mono); margin:7px 0 0; }
.thermal-channels .temp-card.unknown { background:#20272b; border-color:#354147; color:#9faeaa; }
.thermal-channels .temp-card.fault { background:#49272d; border-color:#945160; }
.thermal-channels .temp-card.warning { background:#403425; border-color:#8b7046; }
.notice { padding:15px 18px; border-left:3px solid #b99a60; background:#27241c; color:#e0cdab; font-size:14px; line-height:1.7; margin-bottom:18px; }
.logging-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:18px; }
.panel-body { padding:0 22px 22px; }
.panel-body p,.guide p,.guide li { font-size:15px; line-height:1.8; color:#c3cfca; }
.panel-body .hint { font-size:13px; line-height:1.8; color:var(--muted); }
.field { font-size:14px; }
.field select { display:block; width:100%; margin-top:10px; }
.field input { font-size:14px; }
.check-field { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.7; }
.check-field input { margin-top:6px; }
.record-actions { display:flex; gap:12px; flex-wrap:wrap; }
.logger-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }
.logger-stats span { display:block; font-size:12px; color:var(--muted); margin-bottom:9px; }
.logger-stats strong { font:28px var(--mono); }
.logger-stats small { font-size:12px; color:var(--muted); }
.session-controls { display:flex; gap:15px; align-items:end; }
.session-controls .field { margin:5px 0; min-width:0; flex:1; }
.session-controls .field:first-child { flex:3; }
.session-controls .field select { max-width:100%; text-overflow:ellipsis; }
.session-controls .button { margin-bottom:5px; }
.compact-field { max-width:280px; }
.record-ribbon { border:1px solid #41745b; border-left:4px solid var(--green); padding:12px 18px; background:#172c21; font-size:14px; margin-bottom:18px; }
.guide { max-width:1040px; }
.guide h3 { font-size:20px; font-weight:600; margin:28px 0 12px; }
.guide li { margin-bottom:8px; }
.guide code { background:#28312f; color:#dbece2; font:13px var(--mono); padding:2px 4px; }
.events { max-height:550px; overflow:auto; }
.events li { font-size:13px; }
footer { font-size:11px; line-height:1.6; }
dialog { border-radius:6px; }
@media(min-width:1600px) { .overview-grid,.bottom-grid { grid-template-columns:minmax(0,1fr) 320px; } }
@media(max-width:1200px) {
  .sidebar { width:190px; padding:22px 12px; }
  .workspace { margin-left:190px; }
  .nav-item { font-size:13px; }
  .thermal-channels { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .metric-value { font-size:28px; }
  .metric-label { font-size:11px; }
  .metric-bottom { font-size:11px; }
  .session-controls { flex-wrap:wrap; }
}
@media(max-width:900px) {
  .sidebar { width:70px; padding:20px 7px; }
  .workspace { margin-left:70px; }
  .brand { display:none; }
  .nav-item { font-size:0; width:52px; height:54px; padding:6px 0; flex-direction:column; gap:4px; }
  .nav-item::after { content:attr(data-short); font:10px 'Segoe UI',sans-serif; color:inherit; }
  .nav-item > span:first-child { font-size:14px; }
  .thermal-modules { grid-template-columns:1fr; }
  .thermal-channels { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .logging-grid { grid-template-columns:1fr; }
}
@media(max-width:700px) {
  .sidebar { width:auto; padding:0; height:64px; }
  .workspace { margin-left:0; }
  .nav-item { width:auto; height:48px; max-width:58px; border-left:0; border-bottom:2px solid transparent; }
  .nav-item.active { border-left:0; border-bottom-color:var(--accent); }
  .nav-item > span:first-child { font-size:14px; }
  .breadcrumb { font-size:12px; }
  .topbar { height:58px; }
  .button { font-size:12px; }
  .metric { padding:15px; }
  .metric-value { font-size:28px; }
  .metric-label { font-size:11px; }
  .status-ribbon div span { font-size:12px; }
  .soc-panel { display:block; }
  .soc-main { padding-top:6px; }
  .soc-detail { margin:0 22px 20px; }
  .soc-detail .detail-row,.soc-detail .detail-row b { font-size:13px; }
  .thermal-channels { grid-template-columns:repeat(6,minmax(0,1fr)); padding:0 13px 14px; }
  .thermal-channels .temp-card strong { font-size:14px; }
  .module-range { padding:0 16px 16px; }
  .cell strong { font-size:12px; }
  .cell-summary { gap:13px; }
  .session-controls { display:block; }
  .session-controls .field { margin:15px 0; }
  .session-controls .button { width:100%; }
  .panel-body { padding:0 17px 20px; }
  .panel-title { font-size:16px; }
  .logger-stats strong { font-size:24px; }
  .guide h3 { font-size:18px; }
}
