/* GAINMESH operations console: quiet, legible, enterprise-focused. */
:root {
  color-scheme: light;
  --canvas: #eef2f5;
  --surface: #f4f6f8;
  --panel: #ffffff;
  --panel-raised: #ffffff;
  --panel-muted: #f7f9fa;
  --nav: #111820;
  --nav-raised: #1a242e;
  --text: #26333d;
  --text-strong: #111a22;
  --muted: #65737e;
  --muted-strong: #45535e;
  --line: #d7dfe5;
  --line-strong: #c3cdd5;
  --accent: #0d7f73;
  --accent-strong: #09675e;
  --accent-soft: #e7f3f1;
  --cyan: #276ca8;
  --cyan-soft: #eaf2f8;
  --amber: #a96818;
  --danger: #bd3f49;
  --sidebar-width: 248px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body,
.app-shell,
.workspace {
  background: var(--surface);
  color: var(--text);
}

body {
  font-size: 14px;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #cce7e2;
  color: #10201e;
}

* {
  scrollbar-color: #aab6bf #eef2f5;
  scrollbar-width: thin;
}

a { color: var(--accent); }
p { color: var(--muted); }
code {
  border-color: var(--line);
  background: #f1f4f6;
  color: #385160;
}

.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid #27323c;
  background: var(--nav);
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 82px 0 auto;
  height: 1px;
  background: #26313b;
}

.sidebar-head { min-height: 82px; }
.brand { padding: 0 20px; }
.brand-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 1px solid #4c817b;
  border-radius: 4px;
  background: #18272a;
  color: #75d1c2;
  font-size: 16px;
}
.brand-copy strong {
  color: #f4f7f8;
  font-size: 13px;
  letter-spacing: 0;
}
.brand-copy small {
  color: #82909b;
  font-size: 10px;
  letter-spacing: 0;
}

.primary-nav {
  gap: 2px;
  border-top: 0;
  padding: 18px 12px 22px;
}

.nav-section {
  margin: 18px 12px 7px;
  color: #71808c;
  font-size: 10px;
  letter-spacing: 0;
}

.primary-nav a {
  min-height: 44px;
  grid-template-columns: 9px minmax(0, 1fr) 8px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 14px;
  color: #b4bec5;
  font-size: 14px;
  font-weight: 620;
}

.primary-nav a:hover {
  border-color: #33414c;
  background: #18222b;
  color: #f3f6f7;
}

.primary-nav a.active {
  border-color: #365f5b;
  background: #1b3333;
  color: #f2fffc;
}

.primary-nav a.active::before {
  inset: 8px auto 8px -1px;
  width: 2px;
  height: auto;
  border-radius: 0;
  background: #5bc4b3;
}

.nav-indicator {
  width: 6px;
  height: 6px;
  border: 1px solid #73818c;
  border-radius: 50%;
  background: transparent;
}

.primary-nav a:hover .nav-indicator { border-color: #b4c0c7; }
.primary-nav a.active .nav-indicator {
  border-color: #68cbbb;
  background: #68cbbb;
}

.nav-signal,
.live-dot {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  border-radius: 50%;
  background: #62c8b7;
  box-shadow: none;
  animation: console-blink 2.8s ease-in-out infinite;
}

@keyframes console-blink {
  0%, 72%, 100% { opacity: 1; }
  80% { opacity: .4; }
}

.sidebar-status {
  margin: auto 18px 18px;
  border-top-color: #2a3540;
  padding: 16px 2px 0;
}
.sidebar-status strong { color: #a5b0b8; font-size: 10px; letter-spacing: 0; }
.sidebar-status small { color: #8b98a2; font-size: 11px; }

.workspace { margin-left: var(--sidebar-width); }
.workspace-topbar {
  height: 58px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  padding: 0 30px;
  backdrop-filter: none;
}
.workspace-context > span {
  color: #84919a;
  font-size: 10px;
  letter-spacing: 0;
}
.workspace-context > strong { color: #34424d; font-size: 12px; }
.control-status {
  border-right-color: var(--line);
  color: #5d6b75;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
}
.control-status i {
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: none;
}
.account-menu { color: #5f6d77; font-family: inherit; font-size: 12px; }
.account-menu a { border-left-color: var(--line); color: #35434e; }
.page { max-width: 1660px; padding: 30px 34px 52px; }

.command-header {
  min-height: 92px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 20px;
}
.eyebrow,
.section-kicker {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.command-header h1 {
  margin-top: 8px;
  color: var(--text-strong);
  font-size: 28px;
  font-weight: 720;
}
.command-header p { margin-top: 7px; color: var(--muted); font-size: 12px; }

.posture {
  min-width: 270px;
  min-height: 60px;
  border-color: var(--line);
  border-left-width: 3px;
  background: #ffffff;
  padding: 11px 15px;
}
.posture small { color: #75828c; font-size: 10px; letter-spacing: 0; }
.posture strong { color: #273640; font-size: 13px; }
.posture-light { width: 8px; height: 8px; flex-basis: 8px; border-radius: 50%; box-shadow: none !important; }
.posture-ok { border-left-color: var(--accent); }
.posture-ok .posture-light { background: var(--accent); }
.posture-attention { border-left-color: var(--amber); }
.posture-attention .posture-light { background: var(--amber); }

.ops-metrics,
.account-overview,
.metrics {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
}
.ops-metrics > div,
.account-overview > div,
.metrics > div { background: transparent; }
.ops-metrics > div + div,
.account-overview > div + div,
.metrics > div + div { border-left-color: var(--line); }
.ops-metrics span,
.account-overview span,
.metrics span { color: #66747e; font-size: 12px; }
.ops-metrics strong,
.account-overview strong,
.metrics strong {
  color: #17222b;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.ops-metrics small,
.account-overview small { color: #6f7c85; font-size: 11px; }
.ops-metric-primary { background: #f3f9f8 !important; }
.ops-metric-primary::before { width: 3px; background: var(--accent); }

.control-section,
.panel,
.auth-panel {
  border-color: var(--line);
  border-radius: 5px;
  background: #ffffff;
}
.control-section > .section-heading,
.section-heading,
.account-control > .section-heading {
  border-bottom-color: var(--line);
  background: #ffffff;
}
.section-heading h2 { color: #1d2932; font-size: 16px; }
.section-heading p { color: #64727c; font-size: 12px; }
.section-legend { color: #65737d; }
.legend-dot.ok { background: var(--accent); }
.legend-dot.warn { background: var(--amber); }
.legend-dot.critical { background: var(--danger); }
.text-action { color: var(--accent-strong); }

.fleet-board-head,
.node-board-head,
.team-report-head,
th {
  border-bottom-color: var(--line);
  background: #f4f7f8;
  color: #596873;
}
.fleet-board-head span + span { border-left-color: var(--line); }
.fleet-row,
.node-row,
.team-report,
th,
td { border-bottom-color: #e1e6ea; }
.fleet-row::before { width: 3px; background: var(--accent); }
.fleet-row[data-status="warn"]::before,
.fleet-row[data-status="stale"]::before { background: var(--amber); }
.fleet-row[data-status="critical"]::before,
.fleet-row[data-status="monitor_error"]::before { background: var(--danger); }
.fleet-identity strong,
.node-row-identity strong { color: #1d2a34; }
.fleet-identity small,
.node-row-identity small { color: #65727c; font-size: 11px; }
.fleet-beacon {
  width: 8px;
  height: 8px;
  border-color: #55a99d;
  background: #dff2ef;
}
.probe-readout { border-left-color: var(--line); }
.probe-readout-head { color: #596973; font-size: 11px; }
.probe-readout > strong { color: #16222b; font-size: 20px; }
.probe-readout > strong small,
.probe-readout > span { color: #596974; font-size: 11px; }
.probe-readout time { color: #6f7c85; font-size: 10px; }
.probe-readout-head i { background: var(--accent); }
.probe-readout.warn .probe-readout-head i,
.probe-readout.stale .probe-readout-head i { background: var(--amber); }
.probe-readout.critical .probe-readout-head i,
.probe-readout.monitor_error .probe-readout-head i { background: var(--danger); }

.capacity-row { border-bottom-color: var(--line); }
.capacity-identity strong { color: #1e2b34; }
.capacity-identity small,
.capacity-meter small,
.node-capacity small,
.capacity-forecast small { color: #62717b; font-size: 11px; }
.node-monogram,
.team-domain-mark,
.identity-avatar,
.assignment-avatar {
  border-color: #a9d3cc;
  border-radius: 4px;
  background: #edf8f6;
  color: #15776d;
}
.capacity-meter > div span { color: #687680; }
.capacity-meter > div strong,
.node-capacity > div > strong { color: #22303a; }
.meter-track { background: #e3e9ed; }
.meter-track i { background: var(--accent); }
.capacity-forecast { border-left-color: var(--line); }
.capacity-forecast > strong { color: #33434e; }

.attribution-node-separated,
.data-disclosure,
.team-members,
.source-create-band { border-color: var(--line); }
.attribution-node-heading h3 { color: #1c2932; }
.attribution-node-heading span { color: #61707a; font-size: 11px; }
.attribution-strip {
  border-color: var(--line);
  background: #f7f9fa;
}
.attribution-strip > div + div { border-left-color: var(--line); }
.attribution-strip span { color: #5d6d77; font-size: 11px; }
.attribution-strip strong { color: #15212a; }
.attribution-strip small { color: #6d7a83; font-size: 11px; }
.attribution-note,
.audit-boundary {
  border-left-color: var(--accent);
  background: #edf7f5;
  color: #496b66;
}
.attribution-warning {
  border-left-color: var(--amber);
  background: #fff7e8;
  color: #805817;
}
.audit-boundary strong { color: #25564f; }
.data-disclosure > summary { color: #53636e; }
.data-disclosure[open] > summary { color: var(--accent-strong); }

.table-toolbar,
.account-control .table-toolbar,
.team-report-head,
.source-create-band {
  border-color: var(--line);
  background: #f7f9fa;
}
.account-search-form input { background: #ffffff; }
.team-report > summary:hover,
tbody tr:hover,
.node-row:hover,
.assignment-account:hover {
  background: #f1f8f7;
  box-shadow: inset 3px 0 0 var(--accent);
}
.team-report[open] > summary {
  background: #eef7f5;
  box-shadow: inset 3px 0 0 var(--accent);
}
.team-identity strong,
.identity-cell strong,
.role-label,
.traffic-value,
.login-time { color: #22303a; }
.team-identity small,
.team-stat small,
.team-stat em,
.team-toggle small,
.identity-cell small,
.cell-meta { color: #61707a; font-size: 11px; }
.team-stat strong { color: #263640; }
.team-members { background: #f6f8f9; }
.team-members .account-table {
  border-color: var(--line);
  background: #ffffff;
}
.resource-cell small { color: #61707a; font-size: 11px; }
.result-count { color: #65737d; }
.result-count strong { color: #36454f; }

.node-endpoint > strong { color: var(--cyan); }
.node-capacity { color: #65737e; }
.node-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.source-package-row { background: #fbfdfd; }
.source-package-row .node-monogram { border-color: #a8c9d2; background: #eef6f8; color: #376a78; }
.package-sync-state .package-sync-error { overflow: hidden; color: var(--danger); text-overflow: ellipsis; white-space: nowrap; }
.package-sync-action { min-height: 34px; border: 0; background: transparent; padding: 4px 0; }
.node-assignment strong { color: #26343e; }
.node-assignment small { color: #61707a; font-size: 11px; }
.node-disabled { opacity: .55; }
.source-create-band { border-bottom-color: var(--line); }

label { color: #35434e; }
label small,
legend,
.muted,
.audit-footnote { color: #62707a; font-size: 11px; }
fieldset { border-color: var(--line); }
input,
select,
textarea {
  border-color: #bdc8d0;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2b34;
}
input::placeholder,
textarea::placeholder { color: #8b969e; }
input:hover,
select:hover,
textarea:hover { border-color: #8797a2; }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 127, 115, .1);
}

button,
.button,
.qr-details summary {
  border-color: #b9c5cd;
  border-radius: 4px;
  background: #ffffff;
  color: #35434e;
}
button:hover,
.button:hover,
.qr-details summary:hover {
  border-color: #7d8e99;
  background: #f4f7f8;
  color: #17222b;
}
.primary {
  border-color: #0b7268;
  background: #0d7f73;
  color: #ffffff;
  box-shadow: none;
}
.primary:hover {
  border-color: #075f57;
  background: #096c63;
}
.danger-button { border-color: #dfb5b9; color: #ad3440; }

.status,
.traffic-status,
.tag {
  border-radius: 3px;
  background: #e5f4f1;
  color: #176f65;
}
.status.disabled,
.status.expiry-expired,
.traffic-status.critical,
.traffic-status.monitor_error {
  background: #fae8ea;
  color: #ad3440;
}
.status.expiry-permanent,
.traffic-status.stale { background: #eef1f3; color: #65737d; }
.status.expiry-today,
.traffic-status.warn { background: #fff2d9; color: #8d5a14; }
.tag { background: #e9f1f8; color: #27689d; }

.node-toggle,
.node-assignment-section,
.assignment-list,
.assignment-account,
.subscription-item,
.client-link-row,
.client-download-row,
.pagination { border-color: var(--line); }
.node-toggle strong,
.assignment-identity strong,
.subscription-main strong,
.client-download-info strong { color: #25333d; }
.assignment-badges em { border-radius: 3px; background: #e9f1f8; color: #27689d; }
.assignment-badges em.disabled { background: #fae8ea; color: #ad3440; }
.qr-panel {
  border-color: var(--line-strong);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(31, 43, 52, .14);
}

.flash {
  border-color: #ead2a8;
  border-left-color: var(--amber);
  background: #fff7e8;
  color: #795317;
}

.daily-summary-head {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(130px, .7fr));
  border: 1px solid var(--line);
  background: var(--panel-muted);
}
.daily-summary-head > div {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
}
.daily-summary-head > div + div { border-left: 1px solid var(--line); }
.daily-summary-head span,
.daily-summary-head small,
.daily-team-summary-row small { color: var(--muted); font-size: 11px; }
.daily-summary-head strong { color: var(--text-strong); font-family: var(--mono); font-size: 20px; }
.daily-team-summary-list { border: 1px solid var(--line); border-top: 0; }
.daily-team-summary-row {
  display: grid;
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
}
.daily-team-summary-row + .daily-team-summary-row { border-top: 1px solid var(--line); }
.daily-team-summary-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.daily-team-summary-row > span:nth-child(2) strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.daily-team-summary-row > strong { color: var(--text-strong); font-family: var(--mono); }

.daily-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 260px)) auto;
  align-items: end;
  gap: 12px;
}
.daily-filter-form label { display: grid; gap: 7px; }
.daily-filter-form button { min-height: 42px; }
.daily-report-note {
  margin-top: 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 15px;
  color: #4d625f;
  font-size: 12px;
  line-height: 1.65;
}
.daily-report-note strong { color: #245c55; }
.daily-report-list { border: 1px solid var(--line); }
.daily-traffic-day + .daily-traffic-day { border-top: 1px solid var(--line); }
.daily-traffic-day > summary,
.daily-traffic-team > summary {
  display: grid;
  cursor: pointer;
  list-style: none;
  align-items: center;
}
.daily-traffic-day > summary::-webkit-details-marker,
.daily-traffic-team > summary::-webkit-details-marker { display: none; }
.daily-traffic-day > summary {
  min-height: 78px;
  grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(120px, .7fr)) 20px;
  gap: 18px;
  padding: 12px 20px;
  background: #ffffff;
}
.daily-traffic-day[open] > summary { background: #f0f7f6; }
.daily-traffic-day > summary > span,
.daily-traffic-team > summary > span:not(.team-domain-mark) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.daily-traffic-day > summary strong,
.daily-traffic-team > summary strong { color: var(--text-strong); }
.daily-traffic-day > summary span:not(.daily-date) strong,
.daily-traffic-team > summary > span:nth-child(3) strong { font-family: var(--mono); }
.daily-traffic-day > summary small,
.daily-traffic-team > summary small { color: var(--muted); font-size: 11px; }
.daily-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid #6f7d86;
  border-bottom: 2px solid #6f7d86;
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.daily-traffic-day[open] > summary .daily-chevron,
.daily-traffic-team[open] > summary .daily-chevron { transform: rotate(225deg); }
.daily-team-list { border-top: 1px solid var(--line); background: #f6f8f9; padding: 12px; }
.daily-traffic-team { border: 1px solid var(--line); background: #ffffff; }
.daily-traffic-team + .daily-traffic-team { border-top: 0; }
.daily-traffic-team > summary {
  min-height: 66px;
  grid-template-columns: 38px minmax(180px, 1fr) minmax(150px, auto) 20px;
  gap: 14px;
  padding: 10px 16px;
}
.daily-traffic-team[open] > summary { border-bottom: 1px solid var(--line); background: #f6faf9; }
.daily-member-table td:first-child strong,
.daily-member-table td:first-child small { display: block; }
.daily-member-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.daily-member-table td:not(:first-child) { color: #263640; font-family: var(--mono); white-space: nowrap; }
.daily-empty-state { padding: 34px 20px; }

.guest-body { background: #eef2f5; }
.guest-header { border-bottom-color: var(--line); background: #ffffff; }
.guest-header .brand-copy strong { color: #14212a; }
.guest-header .brand-copy small { color: #60717b; }
.auth-panel { border-color: var(--line); background: #ffffff; box-shadow: 0 24px 60px rgba(31, 43, 52, .12); }
.auth-panel::before { background: var(--accent); }

@media (max-width: 1220px) {
  :root { --sidebar-width: 220px; }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 276px; }
  html,
  body { background: var(--surface); }
  .sidebar { width: var(--sidebar-width); }
  .sidebar::after { top: 68px; }
  .primary-nav a { grid-template-columns: 9px minmax(0, 1fr) 8px; }
  .sidebar-open {
    border-color: #c4ced5;
    background: #ffffff;
  }
  .sidebar-open::before,
  .sidebar-open::after,
  .sidebar-open span { background: #42515c; }
  .sidebar-close::before,
  .sidebar-close::after { background: #b7c1c8; }
  .sidebar-scrim { background: rgba(17, 24, 32, .5); }
  .workspace { margin-left: 0; }
  .workspace-topbar { background: #ffffff; }
  .page { padding: 20px 13px 36px; }
  .command-header { padding-bottom: 18px; }
  .command-header h1 { font-size: 24px; }
  .ops-metrics > div:nth-child(even) { border-left-color: var(--line); }
  .ops-metrics > div:nth-child(n+3) { border-top-color: var(--line); }
  .fleet-identity,
  .probe-readout,
  .capacity-forecast,
  .node-capacity { border-color: var(--line); }
  .attribution-strip > div:nth-child(3),
  .attribution-strip > div:nth-child(4) { border-top-color: var(--line); }
  .account-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .team-report-head { display: none; }
  .daily-summary-head { grid-template-columns: 1fr 1fr; }
  .daily-summary-head > div:first-child { grid-column: 1 / -1; }
  .daily-summary-head > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  .daily-summary-head > div:nth-child(3) { border-top: 1px solid var(--line); }
  .daily-filter-form { grid-template-columns: 1fr 1fr; }
  .daily-filter-form button { grid-column: 1 / -1; }
  .daily-traffic-day > summary {
    grid-template-columns: minmax(0, 1.2fr) minmax(100px, .8fr) 16px;
    gap: 10px;
    padding: 12px 14px;
  }
  .daily-traffic-day > summary > span:nth-child(3),
  .daily-traffic-day > summary > span:nth-child(4) { display: none; }
  .daily-team-list { padding: 8px; }
  .daily-traffic-team > summary {
    grid-template-columns: 34px minmax(0, 1fr) minmax(88px, auto) 16px;
    gap: 9px;
    padding: 9px 10px;
  }
  .daily-team-summary-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-signal,
  .live-dot { animation: none; }
}