/* =========================
   Theme presets (switch by <html data-theme="...">)
   ========================= */

/* Default (acts like Utility unless a data-theme is set) */
:root {
  --primary:   #2B5D82;   /* Deep Utility Blue */
  --accent:    #F2C94C;   /* Safety Yellow */
  --nav-bg:    #1F3B4D;   /* Navy-Gray for Nav */
  --nav-hover: #2E5066;   /* Lighter Navy */
  --light-bg:  #F8FAFC;   /* App background */
  --card-bg:   #F8FAFC;   /* Panels/cards */
  --text:      #1A1A1A;   /* Base text */
  --text-hover: #F8FAFC;   /* Safety Yellow */
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;
  --control-bg: #FFFFFF;
  --control-border: #CBD5E1;
  --control-text: #1A1A1A;

  /* Table vars (default theme) */
  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

.work-mobile-body {
  margin: 0;
  background: var(--page-bg, #f4f6f8);
}

.work-mobile {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
}

.work-mobile__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 1rem;
}

.work-mobile__header h1 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.25rem, 5vw, 1.8rem);
}

.work-mobile__eyebrow,
.work-mobile__summary span,
.work-mobile__details dt {
  color: var(--muted-text, #64748b);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-status-chip {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color, #2563eb) 14%, transparent);
  color: var(--primary-color, #1d4ed8);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.work-mobile__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.work-mobile__summary > div,
.work-mobile__card {
  border: 1px solid var(--border-color, #dbe2ea);
  border-radius: 14px;
  background: var(--card-bg, #fff);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.06);
}

.work-mobile__summary > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.work-mobile__card {
  margin-bottom: 1rem;
  padding: 1rem;
}

.work-mobile__card h2 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
}

.outage-lifecycle {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border-color, #dbe2ea));
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg, #fff));
}

.outage-lifecycle__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.outage-lifecycle__heading h2 {
  margin: 0.2rem 0 0;
}

.outage-lifecycle__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.outage-lifecycle__action {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 12rem);
}

.outage-lifecycle__action .btn {
  min-height: 44px;
  justify-content: center;
}

.outage-lifecycle__action small,
.outage-lifecycle__message {
  color: var(--muted-text, #64748b);
  line-height: 1.4;
}

.outage-lifecycle__message {
  margin: 0.9rem 0 0;
}

/* Network Operations */
.network-operations {
  display: grid;
  gap: 1rem;
}

.network-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card-bg)), var(--card-bg));
}

.network-hero h2,
.network-section-heading h3 {
  margin: 0.2rem 0 0;
}

.network-hero p {
  max-width: 54rem;
  margin: 0.55rem 0 0;
  color: var(--muted);
}

.network-model-badge {
  display: grid;
  flex: 0 0 auto;
  gap: 0.2rem;
  min-width: 13rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--card-bg));
}

.network-model-badge span,
.network-metrics span,
.network-trace-metrics span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.network-model-badge small { color: var(--muted); }

.network-metrics,
.network-trace-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.network-metrics > div,
.network-trace-metrics > div {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}

.network-metrics strong,
.network-trace-metrics strong { font-size: 1.35rem; }

.network-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.network-catalog-filters {
  display: grid;
  grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(10rem, 0.8fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.network-catalog-filters label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.network-catalog-filters :is(input, select) {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--control-text);
  font: inherit;
}

.network-catalog-table-wrap { max-height: 28rem; }
.network-catalog-table tbody tr { cursor: pointer; }
.network-catalog-table tbody tr.is-selected {
  background: var(--table-selected-bg);
  color: var(--table-selected-text);
}
.network-catalog-table td small {
  display: block;
  margin-top: 0.2rem;
  opacity: 0.75;
}

.network-state {
  display: inline-flex;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  font-size: 0.78rem;
  font-weight: 750;
}
.network-state--closed { background: rgb(22 163 74 / 0.14); color: #15803d; }
.network-state--open { background: rgb(217 119 6 / 0.14); color: #b45309; }
.network-state--offline { background: rgb(220 38 38 / 0.12); color: #b91c1c; }

.network-equipment-details {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
}
.network-equipment-details > div {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.network-equipment-details dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.network-equipment-details dd {
  overflow-wrap: anywhere;
  margin: 0.3rem 0 0;
  font-weight: 650;
}

.network-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.network-path {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
}
.network-path__node,
.network-chip {
  flex: 0 0 auto;
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  font-size: 0.82rem;
}
.network-path__node.is-selected {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--text-hover);
  font-weight: 750;
}
.network-path__arrow { color: var(--muted); }

.network-trace-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.network-trace-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.network-trace-columns h4 { margin: 0 0 0.6rem; }
.network-chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.network-chip-list--scroll { max-height: 12rem; overflow: auto; align-content: flex-start; }

@media (max-width: 900px) {
  .network-catalog-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-equipment-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .network-hero { flex-direction: column; }
  .network-model-badge { width: 100%; box-sizing: border-box; }
  .network-catalog-filters,
  .network-equipment-details,
  .network-trace-metrics,
  .network-trace-columns { grid-template-columns: 1fr; }
}

/* Security and Production Readiness */
.security-operations { display: grid; gap: 1rem; }
.security-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card-bg)), var(--card-bg));
}
.security-hero h2 { margin: .2rem 0 0; }
.security-hero p { max-width: 58rem; margin: .55rem 0 0; color: var(--muted); }
.security-readiness { min-width: 12rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.security-readiness span, .security-readiness small { display: block; color: var(--muted); }
.security-readiness strong { display: block; margin: .15rem 0; font-size: 1.35rem; }
.security-readiness--pass strong { color: #18864b; }
.security-readiness--warning strong { color: #a56800; }
.security-readiness--blocker strong { color: #b52a34; }
.security-readiness--unchecked strong { color: #5b6577; }
.security-metrics, .security-mini-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.security-metrics > div, .security-mini-metrics > div { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.security-metrics span, .security-mini-metrics span { color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.security-metrics strong, .security-mini-metrics strong { font-size: 1.35rem; }
.security-tabs { display: flex; gap: .35rem; overflow-x: auto; margin: 0 -.25rem 1rem; padding: .25rem; border-bottom: 1px solid var(--border); }
.security-tabs button { flex: 0 0 auto; padding: .7rem .85rem; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 700; }
.security-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 11%, var(--card-bg)); color: var(--primary); box-shadow: inset 0 -3px var(--primary); }
.security-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1rem 0 .8rem; }
.security-section-heading h3 { margin: 0; }
.security-section-heading p { margin: .35rem 0 0; color: var(--muted); }
.security-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.security-check { position: relative; padding: 1rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: 11px; background: var(--card-bg); }
.security-check--pass { border-left-color: #18864b; }.security-check--warning { border-left-color: #c1810c; }.security-check--blocker { border-left-color: #c73741; }
.security-check > span { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.security-check h4 { margin: .35rem 0; }.security-check p { margin: 0; padding-right: 4rem; color: var(--muted); line-height: 1.4; }
.security-check > strong { position: absolute; right: .8rem; top: .8rem; font-size: .74rem; text-transform: uppercase; }
.security-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.security-policy-grid article { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.security-policy-grid h4 { margin: .3rem 0 .8rem; }.security-policy-grid dl { display: grid; gap: .5rem; margin: 0 0 1rem; }
.security-policy-grid dl > div { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem; }.security-policy-grid dt { color: var(--muted); }.security-policy-grid dd { margin: 0; overflow-wrap: anywhere; }
.security-search { display: grid; gap: .4rem; margin-bottom: 1rem; }.security-search > label { color: var(--muted); font-size: .8rem; font-weight: 750; }
.security-search > div { display: grid; grid-template-columns: minmax(18rem, 1fr) auto auto; gap: .6rem; }.security-search input { min-height: 44px; box-sizing: border-box; padding: .65rem .75rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--control-bg); color: var(--control-text); font: inherit; }
.security-console .table-wrapper { max-height: 34rem; }.security-console .ami-grid td { vertical-align: top; }.security-console .ami-grid td small { display: block; margin-top: .25rem; color: var(--muted); }
.security-mono { max-width: 20rem; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.security-reauth-state { padding: .4rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); color: var(--primary); font-size: .78rem; font-weight: 700; }
@media (max-width: 900px) { .security-hero { flex-direction: column; }.security-metrics, .security-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.security-policy-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .security-metrics, .security-mini-metrics, .security-check-grid, .security-search > div { grid-template-columns: 1fr; }.security-readiness { width: 100%; box-sizing: border-box; }.security-section-heading { flex-direction: column; } }

/* Integration Operations */
.ops-operations { display: grid; gap: 1rem; }
.ops-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card-bg)), var(--card-bg)); }
.ops-hero h2 { margin: .2rem 0 0; }.ops-hero p { max-width: 58rem; margin: .55rem 0 0; color: var(--muted); }
.ops-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }.ops-metrics > div { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }.ops-metrics span { color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }.ops-metrics strong { font-size: 1.35rem; }
.ops-search { display: grid; gap: .4rem; margin-bottom: 1rem; }.ops-search > label { color: var(--muted); font-size: .8rem; font-weight: 750; }.ops-search > div { display: grid; grid-template-columns: minmax(18rem, 1fr) auto auto auto; gap: .6rem; }.ops-search input, .ops-search select { min-height: 44px; box-sizing: border-box; padding: .65rem .75rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--control-bg); color: var(--control-text); font: inherit; }.ops-console .table-wrapper { max-height: 36rem; }.ops-console .ami-grid td { vertical-align: top; }.ops-console .ami-grid td small { display: block; margin-top: .2rem; color: var(--muted); }
.admin-users .ops-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }  /* Users & Access: six counts */
@media (max-width: 900px) { .ops-hero { flex-direction: column; }.ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ops-search > div { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .ops-metrics, .ops-search > div { grid-template-columns: 1fr; } }

.integration-operations {
  display: grid;
  gap: 1rem;
}

.integration-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card-bg)), var(--card-bg));
}
.integration-hero h2 { margin: 0.2rem 0 0; }
.integration-hero p { max-width: 58rem; margin: 0.55rem 0 0; color: var(--muted); }
.integration-hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.integration-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.integration-metrics > div {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}
.integration-metrics span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.integration-metrics strong { font-size: 1.35rem; }

.integration-search {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.integration-search > label { color: var(--muted); font-size: 0.8rem; font-weight: 750; }
.integration-search > div { display: grid; grid-template-columns: minmax(18rem, 1fr) auto auto; gap: 0.6rem; }
.integration-search input,
.integration-panel-heading select {
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--control-text);
  font: inherit;
}

.integration-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  margin: 0 -0.25rem 1rem;
  padding: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.integration-tabs button {
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.integration-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary) 11%, var(--card-bg));
  color: var(--primary);
  box-shadow: inset 0 -3px var(--primary);
}

.integration-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.integration-panel-heading h3 { margin: 0; }
.integration-panel-heading select { min-width: 12rem; }
.integration-console .table-wrapper { max-height: 34rem; }
.integration-console .ami-grid td { vertical-align: top; }
.integration-console .ami-grid td small {
  display: block;
  max-width: 26rem;
  margin-top: 0.25rem;
  color: var(--muted);
  line-height: 1.35;
  white-space: normal;
}
.integration-correlation {
  max-width: 18rem;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
.integration-status {
  display: inline-flex;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

#integration-rejected-payload {
  min-height: 18rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .integration-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-hero { flex-direction: column; }
}

@media (max-width: 620px) {
  .integration-metrics,
  .integration-search > div { grid-template-columns: 1fr; }
  .integration-panel-heading { align-items: stretch; flex-direction: column; }
  .integration-panel-heading select { width: 100%; }
}

.work-mobile__form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.work-mobile__form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.work-mobile__form input,
.work-mobile__form select,
.work-mobile__form textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 10px;
  background: var(--input-bg, #fff);
  color: inherit;
  font: inherit;
}

.work-mobile__form textarea {
  min-height: 96px;
}

.work-mobile .btn-block {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.work-safety-callout {
  margin-top: 0.85rem;
  padding: 0.85rem;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  background: rgb(245 158 11 / 0.12);
}

.work-mobile__details {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
}

.work-mobile__details dd {
  margin: 0;
}

.work-evidence-list,
.work-history {
  margin: 0;
  padding-left: 1.2rem;
}

.work-history li {
  margin-bottom: 0.8rem;
}

.work-history li span {
  display: block;
  color: var(--muted-text, #64748b);
  font-size: 0.82rem;
}

@media (max-width: 520px) {
  .work-mobile__header {
    grid-template-columns: auto 1fr;
  }

  .work-status-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .work-mobile__summary {
    grid-template-columns: 1fr;
  }
}

/* Utility Blue + Safety Yellow (explicit) */
:root[data-theme="utility"] {
  --primary:   #2B5D82;
  --accent:    #F2C94C;
  --nav-bg:    #1F3B4D;
  --nav-hover: #2E5066;
  --light-bg:  #F8FAFC;
  --card-bg:   #F8FAFC;
  --text:      #1A1A1A;
  --text-hover: #F8FAFC;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  /* Table vars */
  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Green Mesh + Signal Orange */
:root[data-theme="mesh"] {
  --primary:   #2F855A;   /* Grid Green */
  --accent:    #E76F51;   /* Signal Orange */
  --nav-bg:    #26413C;   /* Dark Forest Green */
  --nav-hover: #356C57;   /* Mid Green Hover */
  --light-bg:  #F1F5F2;   /* Soft neutral */
  --card-bg:   #F8FAFC;
  --text:      #1A1A1A;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  /* Table vars */
  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Slate + Electric Teal (SaaS-y) */
:root[data-theme="slate"] {
  --primary:   #009FB7;   /* Electric Teal */
  --accent:    #FF6B6B;   /* Coral Red */
  --nav-bg:    #1E293B;   /* Dark Slate */
  --nav-hover: #334155;   /* Mid Slate */
  --light-bg:  #F5F6FA;   /* Cool bg */
  --card-bg:   #F8FAFC;
  --text:      #1F2937;   /* Slate text */
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  /* Table vars */
  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* =========================
   Theme presets (switch by <html data-theme="...">)
   ========================= */

/* Default … */
/* Utility … */
/* Mesh … */
/* Slate … (your existing ones stay unchanged) */

/* Calm Blue + Mint */
:root[data-theme="calm"] {
  --primary:   #4A90E2;
  --accent:    #50E3C2;
  --nav-bg:    #2C3E50;
  --nav-hover: #3D566E;
  --light-bg:  #F5F9FC;
  --card-bg:   #F8FAFC;
  --text:      #1A1A1A;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Warm Sunset */
:root[data-theme="sunset"] {
  --primary:   #FF6B6B;
  --accent:    #FFD93D;
  --nav-bg:    #3D1F1F;
  --nav-hover: #5C2A2A;
  --light-bg:  #FFF8F0;
  --card-bg:   #F8FAFC;
  --text:      #2D2D2D;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Forest & Sage */
:root[data-theme="forest"] {
  --primary:   #2C6E49;
  --accent:    #A3B18A;
  --nav-bg:    #1B4332;
  --nav-hover: #2D6A4F;
  --light-bg:  #F1F7F3;
  --card-bg:   #F8FAFC;
  --text:      #1A1A1A;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Lavender & Slate */
:root[data-theme="lavender"] {
  --primary:   #6C63FF;
  --accent:    #FFB6B9;
  --nav-bg:    #2F2E41;
  --nav-hover: #3E3C57;
  --light-bg:  #FAF9FF;
  --card-bg:   #F8FAFC;
  --text:      #1A1A1A;
  --border:    rgba(0,0,0,.08);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: color-mix(in srgb, var(--text) 85%, black);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Tech Neon */
:root[data-theme="neon"] {
  --primary:   #00F5D4;
  --accent:    #F15BB5;
  --nav-bg:    #1A1A1A;
  --nav-hover: #2D2D2D;
  --light-bg:  #121212;
  --card-bg:   #1F1F1F;
  --text:      #EAEAEA;
  --border:    rgba(255,255,255,.1);
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  --shadow: none;
  --control-bg: color-mix(in srgb, var(--card-bg) 65%, black 35%);
  --control-border: color-mix(in srgb, var(--text) 30%, transparent);
  --control-text: var(--text);

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
  --table-header-text: var(--text);
  --table-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 75%, var(--primary) 25%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* Midnight Indigo */
:root[data-theme="midnight"] {
  --primary:   #6366F1;
  --accent:    #38BDF8;
  --nav-bg:    #0B1220;
  --nav-hover: #151F33;
  --light-bg:  #0E1829;
  --card-bg:   #141E33;
  --text:      #E6ECFF;
  --border:    rgba(99,102,241,.25);
  --muted: color-mix(in srgb, var(--text) 60%, transparent);
  --shadow: none;
  --control-bg: color-mix(in srgb, var(--card-bg) 65%, black 35%);
  --control-border: color-mix(in srgb, var(--text) 30%, transparent);
  --control-text: var(--text);

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 12%, var(--card-bg));
  --table-header-text: var(--text);
  --table-hover-bg: color-mix(in srgb, var(--primary) 16%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 55%, var(--primary) 45%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 90%, black);
}

/* Ember Glow */
:root[data-theme="ember"] {
  --primary:   #F97316;
  --accent:    #FACC15;
  --nav-bg:    #1C120B;
  --nav-hover: #25160E;
  --light-bg:  #14100C;
  --card-bg:   #1B130D;
  --text:      #FCEFE6;
  --border:    rgba(249,115,22,.28);
  --muted: color-mix(in srgb, var(--text) 58%, transparent);
  --shadow: none;
  --control-bg: color-mix(in srgb, var(--card-bg) 65%, black 35%);
  --control-border: color-mix(in srgb, var(--text) 28%, transparent);
  --control-text: var(--text);

  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 10%, var(--card-bg));
  --table-header-text: var(--text);
  --table-hover-bg: color-mix(in srgb, var(--primary) 18%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 60%, var(--primary) 40%);
  --table-selected-text: #1F1309;
  --table-zebra: color-mix(in srgb, var(--card-bg) 92%, black);
}

/* =========================
   Appearance overlay: dark mode keeping theme brand colors
   (applies on top of any data-theme when html has class 'appearance-dark')
   ========================= */
:root.appearance-dark {
  /* Keep --primary / --accent from theme; darken surfaces & adjust text */
  --light-bg:  color-mix(in srgb, var(--nav-bg) 35%, #0b0f1a);
  --card-bg:   color-mix(in srgb, var(--nav-bg) 25%, #111827);
  --text:      color-mix(in srgb, white 92%, var(--card-bg));
  --border:    color-mix(in srgb, var(--text) 12%, transparent);
  --control-bg: color-mix(in srgb, var(--card-bg) 65%, black 35%);
  --control-border: color-mix(in srgb, var(--text) 32%, transparent);
  --control-text: var(--text);
  --table-border: var(--border);
  --table-header-bg: color-mix(in srgb, var(--nav-bg) 20%, var(--card-bg));
  --table-header-text: var(--text);
  --table-hover-bg: color-mix(in srgb, var(--primary) 18%, transparent);
  --table-hover-text: var(--text);
  --table-selected-bg: color-mix(in srgb, var(--accent) 65%, var(--primary) 35%);
  --table-selected-text: #fff;
  --table-zebra: color-mix(in srgb, var(--card-bg) 88%, black);
}

html, body {
  background: var(--light-bg);
  color: var(--text);
}

/* =========================
   Theme selector swatches
   ========================= */
/* Fixed-color swatches for each option (so you see the *target* palette) */
.swatch-utility .primary  { background:#2B5D82; }
.swatch-utility .accent   { background:#F2C94C; }
.swatch-utility .nav      { background:#1F3B4D; }
.swatch-utility .navhover { background:#2E5066; }
.swatch-utility .card     { background:#F8FAFC; }

.swatch-mesh .primary     { background:#2F855A; }
.swatch-mesh .accent      { background:#E76F51; }
.swatch-mesh .nav         { background:#26413C; }
.swatch-mesh .navhover    { background:#356C57; }
.swatch-mesh .card        { background:#F8FAFC; }

.swatch-slate .primary    { background:#009FB7; }
.swatch-slate .accent     { background:#FF6B6B; }
.swatch-slate .nav        { background:#1E293B; }
.swatch-slate .navhover   { background:#334155; }
.swatch-slate .card       { background:#F8FAFC; }

.swatch-calm .primary   { background:#4A90E2; }
.swatch-calm .accent    { background:#50E3C2; }
.swatch-calm .nav       { background:#2C3E50; }
.swatch-calm .navhover  { background:#3D566E; }
.swatch-calm .card      { background:#F8FAFC; }

.swatch-sunset .primary { background:#FF6B6B; }
.swatch-sunset .accent  { background:#FFD93D; }
.swatch-sunset .nav     { background:#3D1F1F; }
.swatch-sunset .navhover{ background:#5C2A2A; }
.swatch-sunset .card    { background:#F8FAFC; }

.swatch-forest .primary { background:#2C6E49; }
.swatch-forest .accent  { background:#A3B18A; }
.swatch-forest .nav     { background:#1B4332; }
.swatch-forest .navhover{ background:#2D6A4F; }
.swatch-forest .card    { background:#F8FAFC; }

.swatch-lavender .primary { background:#6C63FF; }
.swatch-lavender .accent  { background:#FFB6B9; }
.swatch-lavender .nav     { background:#2F2E41; }
.swatch-lavender .navhover{ background:#3E3C57; }
.swatch-lavender .card    { background:#F8FAFC; }

.swatch-neon .primary  { background:#00F5D4; }
.swatch-neon .accent   { background:#F15BB5; }
.swatch-neon .nav      { background:#1A1A1A; }
.swatch-neon .navhover { background:#2D2D2D; }
.swatch-neon .card     { background:#1F1F1F; }

.swatch-midnight .primary  { background:#6366F1; }
.swatch-midnight .accent   { background:#38BDF8; }
.swatch-midnight .nav      { background:#0B1220; }
.swatch-midnight .navhover { background:#151F33; }
.swatch-midnight .card     { background:#141E33; }

.swatch-ember .primary  { background:#F97316; }
.swatch-ember .accent   { background:#FACC15; }
.swatch-ember .nav      { background:#1C120B; }
.swatch-ember .navhover { background:#25160E; }
.swatch-ember .card     { background:#1B130D; }

/* =========================
   Theme Integration - Add these sections to your hub.css
   (Add after your existing theme definitions but before Base Layout)
   ========================= */

/* Additional theme variables for utility classes */
:root {
  /* Add these to your existing :root */
  --radius: 12px;
  --shadow: none;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --muted: color-mix(in srgb, var(--text) 65%, transparent);
  /* Approximate main nav height used by sticky sub-navs */
  --nav-h: 56px;
  /* Adjustable gap between main nav and settings nav */
  --settings-gap: 12px;

  /* Responsive type scale */
  --font-base: 16px;
  --font-scale-1: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
  --font-scale-2: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  --font-scale-3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --font-scale-4: clamp(1.5rem, 1.3rem + 1vw, 1.85rem);
  --font-scale-5: clamp(1.85rem, 1.6rem + 1.4vw, 2.25rem);
}

/* Removed per-theme duplicates of --muted/--shadow; :root provides defaults */

/* =========================
   Layout Utilities (from theme.css)
   ========================= */

/* Container and layout helpers */
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding-inline: var(--space-4);
  padding-block: var(--space-4);
}

.grid { 
  display: grid; 
  gap: var(--space-4); 
}

.grid.two { 
  grid-template-columns: 1fr 1fr; 
}

.grid.three { 
  grid-template-columns: repeat(3, 1fr); 
}

.grid.four { 
  grid-template-columns: repeat(4, 1fr); 
}

.stack { 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-4); 
}

.row { 
  display: flex; 
  gap: var(--space-4); 
  align-items: center; 
}

/* Spacing utilities */
.space-1 { gap: var(--space-1) !important; }
.space-2 { gap: var(--space-2) !important; }
.space-3 { gap: var(--space-3) !important; }
.space-4 { gap: var(--space-4) !important; }

.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }

.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }

/* Logical spacing utilities */
.pi-1 { padding-inline: var(--space-1) !important; }
.pi-2 { padding-inline: var(--space-2) !important; }
.pi-3 { padding-inline: var(--space-3) !important; }
.pi-4 { padding-inline: var(--space-4) !important; }
.pb-1 { padding-block: var(--space-1) !important; }
.pb-2 { padding-block: var(--space-2) !important; }
.pb-3 { padding-block: var(--space-3) !important; }
.pb-4 { padding-block: var(--space-4) !important; }
.mi-1 { margin-inline: var(--space-1) !important; }
.mi-2 { margin-inline: var(--space-2) !important; }
.mi-3 { margin-inline: var(--space-3) !important; }
.mi-4 { margin-inline: var(--space-4) !important; }
.mb-1 { margin-block: var(--space-1) !important; }
.mb-2 { margin-block: var(--space-2) !important; }
.mb-3 { margin-block: var(--space-3) !important; }
.mb-4 { margin-block: var(--space-4) !important; }

/* =========================
   Enhanced Button System (from theme.css)
   ========================= */

.btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: .5ch;
  padding: .45rem .75rem; 
  border-radius: var(--radius); 
  border: 1px solid var(--border);
  background: var(--card-bg); 
  color: var(--text); 
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { 
  box-shadow: none; 
  transform: none;
}

/* Visible keyboard focus */
.btn:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 75%, #fff);
  outline-offset: 1px;
}

.btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.primary { 
  background: var(--primary); 
  border-color: var(--primary); 
  color: #fff; 
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
  border-color: color-mix(in srgb, var(--primary) 85%, black);
}

.btn.secondary { 
  background: transparent; 
  border-color: var(--primary);
  color: var(--primary); 
}

.btn.secondary:hover {
  background: var(--primary);
  color: #fff;
}

.btn.ghost { 
  background: transparent; 
  border-color: transparent;
  color: var(--text); 
}

.btn.ghost:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.btn.danger { 
  background: #dc3545; 
  border-color: #dc3545; 
  color: #fff; 
}

.btn.danger:hover {
  background: #c82333;
  border-color: #c82333;
}

/* Button sizes */
.btn.small {
  padding: .25rem .5rem;
  font-size: 0.8rem;
}

.btn.large {
  padding: .65rem 1rem;
  font-size: 1rem;
}

/* Canonical action hierarchy. Supports both existing naming conventions. */
.btn.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 650;
}

.btn.btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
  border-color: color-mix(in srgb, var(--primary) 85%, black);
}

.btn.btn-secondary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
}

.btn.btn-danger {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
  font-weight: 650;
}

.btn.btn-danger:hover {
  background: #912018;
  border-color: #912018;
}

.btn.btn-small {
  min-height: 2.25rem;
  padding: .4rem .7rem;
  font-size: .84rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

/* =========================
   Shared management tables
   ========================= */
.table-wrapper {
  position: relative;
}

.table-wrapper :is(.dataTables_scrollHead, thead) {
  position: sticky;
  top: 0;
  z-index: 3;
}

.table-wrapper thead th {
  background: var(--card-bg);
  box-shadow: inset 0 -1px 0 var(--border);
}

.table-wrapper tbody td {
  padding-block: .7rem;
  vertical-align: middle;
}

.table-state-region {
  align-items: center;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--primary));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 10px;
  color: var(--text-muted, #64748b);
  display: flex;
  font-size: .86rem;
  gap: .6rem;
  margin-block-end: .75rem;
  min-height: 2.5rem;
  padding: .55rem .8rem;
}

.table-state-region--loading::before {
  animation: table-state-spin .8s linear infinite;
  border: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 50%;
  border-top-color: var(--primary);
  content: "";
  height: .9rem;
  width: .9rem;
}

.table-state-region--error {
  background: color-mix(in srgb, #b42318 8%, var(--card-bg));
  border-color: color-mix(in srgb, #b42318 38%, var(--border));
  color: #b42318;
}

.table-state-region--empty {
  justify-content: center;
  min-height: 4rem;
}

.table-row-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
}

@keyframes table-state-spin {
  to { transform: rotate(360deg); }
}

/* =========================
   Shared selected-record workspace
   ========================= */
.record-workspace {
  background: color-mix(in srgb, var(--card-bg) 97%, var(--primary));
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  box-shadow: 0 10px 30px color-mix(in srgb, #0f172a 7%, transparent);
  margin-block: 1.5rem;
  overflow: hidden;
}

.record-workspace__empty {
  align-items: center;
  color: var(--text-muted, #64748b);
  display: flex;
  gap: 1rem;
  justify-content: center;
  min-height: 10rem;
  padding: 2rem;
  text-align: left;
}

.record-workspace__empty h3,
.record-workspace__empty p {
  margin: 0;
}

.record-workspace__empty p {
  margin-block-start: .35rem;
  max-width: 42rem;
}

.record-workspace__empty-icon {
  align-items: center;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 14px;
  color: var(--primary);
  display: flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}

.record-workspace__header {
  align-items: center;
  background: color-mix(in srgb, var(--primary) 6%, var(--card-bg));
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}

.record-workspace__eyebrow {
  color: var(--primary);
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-block-end: .25rem;
  text-transform: uppercase;
}

.record-workspace__title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.record-workspace__title-row h3 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem);
  margin: 0;
}

.record-workspace__meta {
  color: var(--text-muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .4rem 1rem;
  margin-block-start: .35rem;
}

.record-workspace__notice {
  align-items: center;
  background: color-mix(in srgb, #f59e0b 12%, var(--card-bg));
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 32%, var(--border));
  color: color-mix(in srgb, #92400e 85%, var(--text));
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .75rem 1.5rem;
}

.record-workspace__metrics {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.record-workspace__metrics > div {
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.25rem;
}

.record-workspace__metrics span {
  color: var(--text-muted, #64748b);
  font-size: .76rem;
  font-weight: 650;
}

.record-workspace__metrics strong {
  font-size: 1.35rem;
}

.record-workspace__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  padding: 1rem;
}

.record-workspace__panel,
.record-workspace__panel.card,
.record-workspace__panel .card {
  margin: 0;
  min-width: 0;
}

.record-workspace__activity {
  grid-column: 1 / -1;
}

.record-workspace__activity-list {
  display: grid;
  gap: .65rem;
}

.record-workspace__activity-item {
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: grid;
  gap: .25rem 1rem;
  grid-template-columns: minmax(8rem, .7fr) minmax(0, 2fr) auto;
  padding-block: .75rem;
}

.record-workspace__activity-item:first-child {
  border-top: 0;
}

.record-workspace__activity-action {
  font-weight: 700;
  text-transform: capitalize;
}

.record-workspace__activity-detail,
.record-workspace__activity-time {
  color: var(--text-muted, #64748b);
  font-size: .82rem;
}

.entity-record-workspace .record-workspace__header h3 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.7rem);
  margin: 0;
}

.entity-record-workspace .record-workspace__metrics {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.entity-record-workspace .record-workspace__metrics strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.entity-record-workspace .record-workspace__activity {
  padding: 1rem 1.5rem 1.25rem;
}

.record-workspace__additional {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

.record-workspace__additional .entity-workspace__additional-card,
.record-workspace__additional .entity-workspace__additional-card.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
}

.record-workspace__additional .entity-workspace__additional-card > .card-body {
  padding: 0;
}

.record-workspace__additional .summary-columns {
  margin: 0;
}

.record-workspace__workflow {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

.record-workspace__workflow-actions {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.record-workspace__workflow-action {
  display: grid;
  gap: .3rem;
  max-width: 22rem;
}

.record-workspace__workflow-action small,
.record-workspace__workflow-message {
  color: var(--text-muted, #64748b);
  font-size: .8rem;
}

.record-workspace__workflow-message {
  margin: .75rem 0 0;
}

.record-workspace__section-heading {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: .35rem;
}

.record-workspace__section-heading h4 {
  margin: 0;
}

.entity-record-workspace .record-workspace__activity-item {
  align-items: start;
  display: grid;
  gap: .75rem;
  grid-template-columns: .65rem minmax(0, 1fr);
  padding-block: .7rem;
}

.record-workspace__activity-marker {
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
  height: .5rem;
  margin-block-start: .35rem;
  width: .5rem;
}

.entity-record-workspace .record-workspace__activity-item div {
  display: grid;
  gap: .15rem;
}

.entity-record-workspace .record-workspace__activity-item strong {
  text-transform: capitalize;
}

.entity-record-workspace .record-workspace__activity-item span,
.entity-record-workspace .record-workspace__activity-item small,
.record-workspace__activity-empty {
  color: var(--text-muted, #64748b);
  font-size: .82rem;
  margin: 0;
}

.customer-workspace__details > .customer-workspace__wide {
  grid-column: span 2;
}

.customer-workspace__account .btn {
  align-self: flex-start;
  margin-block-start: .35rem;
}

.customer-workspace__body {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem 1.5rem 1.25rem;
}

.customer-workspace__body .record-workspace__activity {
  margin: 0;
  min-width: 0;
  padding: 0;
}

.entity-record-workspace > [data-workspace-selected] > .record-workspace__relationships {
  margin: 1rem 1.5rem 0;
  width: auto;
}

.record-workspace__grid > .record-workspace__relationships {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 860px) {
  .customer-workspace__details > .customer-workspace__wide {
    grid-column: auto;
  }

  .customer-workspace__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .record-workspace__header,
  .record-workspace__notice {
    align-items: stretch;
    flex-direction: column;
  }

  .record-workspace__actions .btn {
    width: 100%;
  }

  .record-workspace__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-workspace__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-workspace__activity-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================
   Enhanced Card System (merge with existing)
   ========================= */

/* Add these properties to your existing .card rules */
.card {
  /* Keep existing styles, add: */
  box-shadow: none;
}

.card:hover {
  box-shadow: none;
  transform: none;
}

/* =========================
   Utility Classes
   ========================= */

/* Text utilities */
.text-white { color: #fff !important; }
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-small { font-size: 0.875rem !important; }
.text-large { font-size: 1.125rem !important; }

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex utilities */
.flex-center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.flex-between { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.flex-start { 
  display: flex; 
  align-items: flex-start; 
}
.flex-end { 
  display: flex; 
  align-items: flex-end; 
}
.flex-column { 
  flex-direction: column; 
}
.flex-wrap { 
  flex-wrap: wrap; 
}
.flex-1 { 
  flex: 1; 
}

/* Border utilities */
.border { border: 1px solid var(--border) !important; }
.border-0 { border: none !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-sm { border-radius: calc(var(--radius) / 2) !important; }
.rounded-lg { border-radius: calc(var(--radius) * 1.5) !important; }

/* Background utilities */
.bg-primary { background: var(--primary) !important; color: #fff !important; }
.bg-card { background: var(--card-bg) !important; }
.bg-muted { background: color-mix(in srgb, var(--border) 50%, transparent) !important; }

/* Shadow utilities */
.shadow { box-shadow: none !important; }
.shadow-lg { box-shadow: none !important; }
.shadow-none { box-shadow: none !important; }

/* =========================
   Enhanced Messages (merge with existing)
   ========================= */

.warning, .notice, .loader, .alert {
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.warning { 
  color: #721c24; 
  background: #f8d7da;
  border-color: #f5c6cb;
}

.notice { 
  color: #0c5460; 
  background: #d1ecf1;
  border-color: #bee5eb;
}

.loader { 
  color: var(--muted); 
  background: var(--card-bg);
  text-align: center;
}

.alert.success,
.alert.alert-success {
  color: #155724;
  background: #d4edda;
  border-color: #c3e6cb;
}

.alert.error,
.alert.alert-error {
  color: #721c24;
  background: #f8d7da;
  border-color: #f5c6cb;
}

.alert.info,
.alert.alert-info {
  color: #0c5460;
  background: #d1ecf1;
  border-color: #bee5eb;
}

/* Something to double-check rather than an error, e.g. the service point location check. */
.alert.caution {
  color: #6b4a00;
  background: #fff4d6;
  border-color: #f1d78a;
}

/* =========================
   Responsive Design Helpers
   ========================= */

@media (max-width: 768px) {
  .container { 
    padding: var(--space-2); 
  }
  
  .grid.two,
  .grid.three,
  .grid.four { 
    grid-template-columns: 1fr; 
  }
  
  .row { 
    flex-direction: column; 
    align-items: stretch; 
  }
  
  .btn {
    padding: .55rem .85rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  :root {
    --space-4: 0.75rem;
  }
  
  .container { 
    padding: var(--space-1); 
  }
}

/* =========================
   Base Layout & Typography
   ========================= */
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-base);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--light-bg);
  color: var(--text);
}

/* Type scale */
h1 { font-size: var(--font-scale-5); line-height: 1.15; margin-block: .25em .35em; }
h2 { font-size: var(--font-scale-4); line-height: 1.2;  margin-block: .35em .45em; }
h1[data-focus-heading]:focus-visible,
h2[data-focus-heading]:focus-visible,
[role="heading"][data-focus-heading]:focus-visible {
  outline: none;
  box-shadow: none;
}
h3 { font-size: var(--font-scale-3); line-height: 1.25; margin-block: .5em .5em; }
h4 { font-size: var(--font-scale-2); line-height: 1.3;  margin-block: .6em .5em; }
p  { font-size: var(--font-scale-2); line-height: 1.55; }
small { font-size: var(--font-scale-1); }

.card-title,
.section-title {
  font-size: var(--font-scale-2);
  line-height: 1.3;
  font-weight: 700;
  margin-block: 0.35em 0.45em;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}

/* One spacing between stacked cards, on every page: cards that follow one another in the page's column, a Settings / Admin
   section or a Maintain App Data tab sit --card-gap apart (pages that lay cards out in a grid or flex row set their own gap). */
:root { --card-gap: 1rem; }
:is(#main-panel, .settings-section, #maintain-data-content, #settings-content) > :is(.card, .settings-card, .settings-section, .simulator-pair):not(:last-child) {
  margin-bottom: var(--card-gap);
}

.card--padded {
  padding: 1.35rem 1.5rem;
}

.card--padded > :first-child {
  margin-top: 0;
}

.card--padded > :last-child {
  margin-bottom: 0;
}

.last-run-note {
  font-size: .9rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.last-run-note__label {
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  font-size: .8rem;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

.last-run-note__value {
  color: color-mix(in srgb, var(--text) 78%, black);
}

.last-run-note--compact {
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 768px) {
  .last-run-note--compact {
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================
   Top Navigation (flat)
   ========================= */
nav {
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  padding: 0.5em 1em;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: none;
  flex-shrink: 0;
}

nav .btn {
  margin-right: 0.5rem;
}

nav .btn:last-child {
  margin-right: 0;
}

nav img { height: 48px; margin-left: auto; }

/* =========================
   Table Controls
   ========================= */
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5em 0;
  gap: 1em;
}

#table-buttons, .table-buttons { flex-shrink: 0; }
#table-search,  .table-search  { flex-shrink: 0; margin-left: auto; }

/* Table search (table_search.js): prominent box, highlighted while filtering, with "Clear search". */
.dataTables_filter.table-search-box { display: flex; align-items: center; gap: var(--space-2, .5rem); }
.dataTables_filter.table-search-box label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.dataTables_filter.table-search-box input {
  min-width: min(26rem, 70vw);
  padding: .5rem .75rem;
  font-size: 1rem;
  border: 2px solid var(--border, #c9ced6);
  border-radius: var(--radius, 6px);
  margin-left: 0 !important;
}
.dataTables_filter.table-search-box input:focus { outline: none; border-color: var(--accent, #2f6fdf); }
.dataTables_filter.table-search-box--active input { border-color: var(--accent, #2f6fdf); background: var(--accent-soft, #eef4ff); }
.table-search-clear[hidden] { display: none; }

.table-view-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.table-view-mode label {
  font-weight: 600;
  color: var(--muted);
}

.table-view-mode select {
  min-width: 140px;
  font-size: 0.9rem;
}

.table-view-mode .cluster-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.table-view-mode .cluster-count {
  font-size: 0.8rem;
  color: var(--muted);
}

.table-common-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.45rem 0 0.6rem;
}

.table-common-filters__title {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.table-common-filters__input {
  min-width: 180px;
  max-width: 280px;
}

/* Bottom row specific tweaks */
.table-controls-bottom {
  margin-top: 0.5em;
  padding-top: 0.25em;
}
.table-controls-bottom .table-info {
  margin-right: auto; /* push info left */
}
.table-controls-bottom .table-paging {
  margin-left: auto;  /* push paging right */
  padding-left: .05em;
}

.table-wrapper[data-table-pending] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.table-wrapper[data-table-ready] {
  opacity: 1;
  max-height: none;
  overflow: visible;
  transition: opacity 0.2s ease-in;
}

.table-wrapper {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: 0.65rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.table-wrapper .dataTables_scrollBody {
  max-height: 11rem;
  overflow-y: auto;
  transition: max-height 180ms ease;
}

.table-wrapper.table-wrapper--compact .dataTables_scrollBody {
  max-height: 5.25rem;
}

/* Keep your ColVis button styling */
button.buttons-colvis {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
button.buttons-colvis:hover {
  background: var(--primary);
  color: #fff;
}

/* =========================
   Main Panel + DataTable
   ========================= */
#main-content-wrapper {
  display: flex;
  flex-direction: column;
  /* Fill remaining viewport height without assuming nav size */
  flex: 1 1 auto;
  min-height: 0; /* allow children to scroll */
  overflow: hidden;
}

#main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--light-bg);
  overflow: auto;
  padding: 0.75em 2em 1.5em; /* reduce top padding for tighter layout */
  position: relative; /* create a stacking context for children */
}

/* Density toggle: compact mode for data-dense views */
:is(html.compact, body.compact) #main-panel .dataTable th,
:is(html.compact, body.compact) #main-panel .dataTable td,
:is(html.compact, body.compact) table.dataTable tbody th,
:is(html.compact, body.compact) table.dataTable tbody td {
  padding: 0.25em 0.45em;
}

/* DataTable sizing & structure (auto layout for natural widths) */
#event-table,
#sp-table,
#main-panel .dataTable {
  width: 100% !important;
  max-width: 100%;
  table-layout: auto;        /* ✅ changed from fixed to auto */
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--table-border);
  box-sizing: border-box;
}

/* For the timeline table, prefer fixed layout to keep header/body in lockstep */
#sp-table {
  table-layout: fixed !important;
}

#main-panel .dataTable th,
#main-panel .dataTable td {
  /* Use content-box for DataTables alignment (header/body width calc) */
  box-sizing: content-box;
  padding: 0.35em 0.55em;
  font-size: 0.82em;
  white-space: nowrap;       /* ✅ keep all content on one line */
  overflow: hidden;          /* ✅ clip overflow */
  text-overflow: ellipsis;   /* ✅ add … for long text */
  text-align: left;
}

/* Header */
table.dataTable thead th,
table.dataTable thead td {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  border-bottom: 1px solid var(--table-border);
  padding: 0.4em 0.6em;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

/* Body cells */
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 0.35em 0.55em;
  border-top: 1px solid var(--table-border);
  white-space: nowrap;
  color: var(--text);
  font-size: 0.82em;
}

/* =========================
   Rounded corners for tables
   ========================= */
/* Apply soft radius directly on the DataTable and ensure contents clip */
#event-table,
#sp-table,
#main-panel .dataTable {
  border-radius: var(--radius);
  overflow: hidden;
}

/* When DataTables uses scrolling head/body, round the outer wrapper and
   let it own the border so edges look seamless. */
#event-table_wrapper,
#sp-table_wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--table-border);
  box-shadow: none;
  background: var(--card-bg);
  /* Soft inner padding so content doesn't touch the border */
  padding: 0.35rem;
}

/* Avoid double borders when wrapper owns the border */
#event-table_wrapper #event-table,
#sp-table_wrapper #sp-table {
  border: none;
}

/* Add horizontal breathing room inside scroll head/body (when present) */
#event-table_wrapper .dataTables_scrollHead,
#event-table_wrapper .dataTables_scrollBody,
#sp-table_wrapper .dataTables_scrollHead,
#sp-table_wrapper .dataTables_scrollBody {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}

/* Force strict alignment for timeline table: remove wrapper padding so
   header/body widths are identical when a vertical scrollbar appears. */
#sp-timeline #sp-table_wrapper .dataTables_scrollHead,
#sp-timeline #sp-table_wrapper .dataTables_scrollBody {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Timeline table should remain scrollable vertically while preserving scrollX. */
#sp-timeline #sp-table_wrapper .dataTables_scrollBody {
  max-height: 42vh !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

/* Ensure DataTables default sizing model for accurate column width calc */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td {
  box-sizing: content-box !important;
}

/* Zebra striping */
table.dataTable.stripe tbody tr:nth-child(odd) > * {
  background: var(--table-zebra);
}

/* Hover (only when not selected) */
table.dataTable tbody tr:hover:not(.selected):not(.custom-selected) > * {
  background: var(--table-hover-bg) !important;
  color: var(--table-hover-text) !important;
}

/* Selection state (covers DataTables .selected and your .custom-selected) */
table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.custom-selected > * {
  background: var(--table-selected-bg) !important;
  color: var(--table-selected-text) !important;
  fill: var(--table-selected-text) !important;
}

/* Keep links/icons readable inside selected rows */
table.dataTable tbody tr.selected a,
table.dataTable tbody tr.custom-selected a,
table.dataTable tbody tr.selected .dt-link,
table.dataTable tbody tr.custom-selected .dt-link,
table.dataTable tbody tr.selected svg,
table.dataTable tbody tr.custom-selected svg {
  color: var(--table-selected-text) !important;
  fill: var(--table-selected-text) !important;
}

.dataTables_wrapper { color: var(--text); }
.dataTables_wrapper .dt-buttons { margin-bottom: 0.5em; }

/* Buttons (ColVis, export, etc.) */
.dataTables_wrapper .dt-buttons .dt-button,
button.buttons-colvis {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.3em 0.7em;
  border-radius: 6px;
  font-size: 0.78em;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dataTables_wrapper .dt-buttons .dt-button:hover,
button.buttons-colvis:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Length + search controls */
.dataTables_length label,
.dataTables_filter label {
  color: var(--text);
  font-size: 0.9em;
}
.dataTables_length select,
.dataTables_filter input {
  background: var(--light-bg);
  color: var(--text);
  border: 1px solid var(--table-border);
  border-radius: 8px;
  padding: 0.35em 0.5em;
  outline: none;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 1px;
}

.settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.settings-section select,
.settings-section textarea {
  background: var(--light-bg);
  color: var(--text);
  border: 1px solid var(--table-border);
  border-radius: 8px;
  padding: 0.35em 0.5em;
  outline: none;
  width: min(100%, 24rem);
  box-sizing: border-box;
}

.settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.settings-section select:focus,
.settings-section textarea:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 1px;
}

.settings-section textarea {
  min-height: 4.5rem;
  width: min(100%, 32rem);
}

.settings-section label.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text) 92%, black);
  width: min(100%, 32rem);
}

.settings-section label.field span:first-child {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--text) 85%, black);
}

.settings-section label.field small {
  font-size: 0.8rem;
  color: var(--muted);
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.account-access-card__header {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.account-access-card__header p {
  margin: 0;
}

.account-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem 1.2rem;
  margin: 0;
}

.account-access-grid > div {
  display: grid;
  gap: .2rem;
}

.account-access-grid dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-access-grid dd {
  margin: 0;
  color: color-mix(in srgb, var(--text) 92%, black);
}

.job-inline-status {
  margin-top: 1.25rem;
}

.job-inline-card {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 88%, white);
  padding: .9rem 1rem;
  display: grid;
  gap: .45rem;
}

.job-inline-card.success {
  border-color: color-mix(in srgb, #4CAF50 45%, var(--border));
}

.job-inline-card.error {
  border-color: color-mix(in srgb, #E57373 55%, var(--border));
}

.job-inline-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-weight: 600;
}

.job-inline-meta {
  font-size: .88rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.pipeline-tips {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .55rem;
  color: color-mix(in srgb, var(--text) 86%, black);
  font-size: .95rem;
}

.pipeline-tips li {
  line-height: 1.45;
}

/* Info + pagination */
.dataTables_info {
  color: color-mix(in srgb, var(--text) 80%, black);
  font-size: 0.85em;
}
.dataTables_paginate .paginate_button {
  background: transparent;
  border: 1px solid var(--table-border);
  color: var(--text) !important;
  padding: 0.25em 0.55em;
  margin-left: 0.25em;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dataTables_paginate .paginate_button:hover { background: var(--table-hover-bg); }
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* =========================
   Timeline table spacing (sp-table)
   Add breathing room around length, search, and pagination controls
   without affecting the main events tables which use custom wrappers
   ========================= */
#sp-table_wrapper .dataTables_length,
#sp-table_wrapper .dataTables_filter {
  margin: 0 .75rem .5rem .75rem;
}
#sp-table_wrapper .dataTables_info,
#sp-table_wrapper .dataTables_paginate {
  margin: .5rem .75rem 0 .75rem;
}
#sp-table_wrapper .dataTables_paginate .paginate_button {
  margin-left: .35em;
}

/* Column reorder/resize & Select plug-in tweaks (if used) */
table.dataTable tbody tr > .select-checkbox:before,
table.dataTable tbody tr > .select-checkbox:after {
  border-color: var(--primary) !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none; /* room for custom indicators later */
}

/* Ensure our theme overrides beat CDN defaults */
table.dataTable,
table.dataTable * {
  --dt-row-selected: var(--table-selected-bg);
  --dt-row-hover: var(--table-hover-bg);
}

/* Limit the event table’s scroll body height */
#event-table_wrapper .dataTables_scrollBody {
  max-height: 20vh !important; /* 20% of the viewport height */
  overflow-y: auto !important;
}

/* When a primary event-table pane is compacted after selection, override the
   generic event-table viewport height so it matches the other collapsed tables. */
.table-wrapper.table-wrapper--compact #event-table_wrapper .dataTables_scrollBody,
.table-wrapper.table-wrapper--compact #event-table_wrapper.dataTables_wrapper .dataTables_scrollBody {
  max-height: 5.25rem !important;
}

/* Service point detail table (compact) */
#sp-table th,
#sp-table td { padding: 0.25em 0.4em; font-size: 0.8em; }

/* Wrapper: let children use their own intrinsic heights */
#map-and-detail-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;   /* 👈 was implicit stretch */
  gap: 1em;
  margin-top: 1em;
  width: 100%;
  position: relative;
  transition: all 0.3s ease-in-out;
}

/* Width split without forcing equal heights */
#event-map-container  { flex: 1 1 40%; }
#footprint-card       { flex: 1 1 50%; }
#event-detail-wrapper { flex: 1 1 60%; }
.service-contract-hub-view #event-map-container { flex: 1 1 60%; }
.service-contract-hub-view #event-detail-wrapper { flex: 1 1 40%; }
#event-map-container  { flex: 1 1 40%; }
#footprint-card       { flex: 1 1 50%; }
#event-detail-wrapper { flex: 1 1 60%; }

/* Panels: height based on content */
#event-map-container,
#event-detail-wrapper,
#diagnosis-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;          /* keeps headers pinned if content scrolls inside */
  position: relative;
  background: color-mix(in srgb, var(--card-bg) 97%, white);
  transition: all 0.3s ease-in-out;
  height: auto;              /* 👈 ensure intrinsic height */
}

#event-map-header,
#event-detail-header,
#diagnosis-header {
  display: flex;
  justify-content: space-between;   /* the panel's title on the left, "⤢ Expand" / "✕ Close" on the right */
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 96%, var(--nav-bg) 4%);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  user-select: none;
}
#event-map-header:hover,
#event-detail-header:hover,
#diagnosis-header:hover,
#event-map-header:focus-visible,
#event-detail-header:focus-visible,
#diagnosis-header:focus-visible { color: var(--text); }
#diagnosis-panel { flex: 0 0 auto; overflow: auto; padding: 0.75rem 0.85rem; min-height: 0; }
#diagnosis-panel > .card { margin-top: 0 !important; }

/* Don’t force inner areas to stretch the parent; let content set height */
#event-map,
#event-detail-panel {
  flex: 0 0 auto;            /* 👈 was flex: 1; remove stretch */
  overflow: auto;            /* gets scrollbars only if content exceeds panel */
  padding: 0.75rem 0.85rem;
  min-height: 0;             /* harmless guard in flex contexts */
}

#event-detail-panel .service-order-create-card {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 97%, white);
}

#event-detail-panel .service-order-create-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.95rem 1rem 1rem;
}

/* Map image should size to content naturally */
#event-map-canvas {
  display: block;
  width: 100%;
  min-height: 520px;
  border-radius: 4px;
}

/* GIS Diagnostics → View Map */
.gis-map-dialog .gis-map-card { margin: 0; border: 0; box-shadow: none; }
.gis-map-body { display: flex; flex-direction: column; gap: 1rem; }
.gis-map-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.gis-map-header .card-title { margin: 0 0 .35rem; }
.gis-map-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.gis-chip { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; border: 1px solid transparent; }
.gis-chip--investigate { background: #fde8e8; color: #9b1c1c; border-color: #f8b4b4; }
.gis-chip--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.gis-chip--ok { background: #def7ec; color: #03543f; border-color: #84e1bc; }
.gis-chip--ambiguous_match, .gis-chip--missing_data, .gis-chip--neutral { background: var(--chip-bg, #eef1f5); color: var(--text, #374151); border-color: var(--border, #d1d5db); }
.gis-map-close { border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--muted, #6b7280); padding: 0 .25rem; border-radius: 999px; }
.gis-map-close:hover { color: var(--text, #111827); }
/* A window's ×: no focus outline, ever; tabbing to it shows a soft circle behind it instead. */
.gis-map-close:focus, .gis-map-close:focus-visible,
.create-confirmation__close:focus, .create-confirmation__close:focus-visible { outline: none; box-shadow: none; }
.gis-map-close:focus-visible, .create-confirmation__close:focus-visible {
  color: var(--text, #111827); background: color-mix(in srgb, var(--muted, #6b7280) 18%, transparent); }
dialog.app-dialog:focus, dialog.app-dialog:focus-visible { outline: none; }
.gis-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: stretch; }
.gis-map-stage { position: relative; min-height: 480px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #d1d5db); }
#gis-map-canvas, #ghost-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gis-map-legend { position: absolute; left: .75rem; top: .75rem; display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem .65rem; background: rgba(255, 255, 255, .94); border-radius: 8px; font-size: .8rem; color: #1f2937;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15); z-index: 2; }
.gis-map-legend:empty { display: none; }
.gis-map-legend span { display: flex; align-items: center; gap: .45rem; }
.gis-map-legend i { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); display: inline-block; }
.gis-map-legend i.gis-legend-ring { background: transparent !important; border: 2px dashed; box-shadow: none; }
.gis-map-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .85);
  color: #374151; z-index: 3; }
.gis-map-status[hidden] { display: none; }
.gis-pin { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gis-pin__dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.gis-pin__dot--square { border-radius: 3px; }
.gis-pin--target .gis-pin__dot { width: 26px; height: 26px; position: relative; display: flex; align-items: center; justify-content: center; }
.gis-pin__x { color: #000; font-weight: 900; font-size: 20px; line-height: 1; }
.gis-pin__label { margin-top: .3rem; padding: .1rem .45rem; border-radius: 6px; background: rgba(255, 255, 255, .95); color: #111827;
  font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transform: translateY(1.1rem); position: absolute; }
.gis-distance-pill { padding: .2rem .6rem; border-radius: 999px; background: #111827; color: #fff; font-size: .8rem; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.gis-map-evidence { display: flex; flex-direction: column; gap: 1rem; }
.gis-evidence__distance strong { display: block; font-size: 2rem; line-height: 1.1; }
.gis-evidence__distance span { color: var(--muted, #6b7280); }
.gis-threshold { position: relative; padding-bottom: 1.1rem; }
.gis-threshold__track { position: relative; height: .6rem; border-radius: 999px; background: #e5e7eb; overflow: visible; }
.gis-threshold__zone { position: absolute; top: 0; bottom: 0; }
.gis-threshold__zone--ok { left: 0; background: #bbf7d0; border-radius: 999px 0 0 999px; }
.gis-threshold__zone--warn { background: #fde68a; }
.gis-threshold__zone--inv { background: #fecaca; border-radius: 0 999px 999px 0; }
.gis-threshold__marker { position: absolute; top: -.3rem; width: 4px; height: 1.2rem; margin-left: -2px; background: #111827; border-radius: 2px; }
.gis-threshold__labels span { position: absolute; top: .9rem; transform: translateX(-50%); font-size: .72rem; color: var(--muted, #6b7280); }
.gis-evidence__facts { display: grid; gap: .55rem; margin: 0; }
.gis-evidence__facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .5rem; }
.gis-evidence__facts dt { color: var(--muted, #6b7280); font-size: .85rem; }
.gis-evidence__facts dd { margin: 0; font-weight: 600; word-break: break-word; }
.gis-evidence__cause { padding: .65rem .75rem; border-radius: 8px; background: var(--chip-bg, #f3f4f6); }
.gis-evidence__cause span { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.gis-evidence__cause p { margin: .25rem 0 0; }
/* The dialog is capped at the window's height: the map fills what's left and the side panel scrolls, so
   nothing is clipped (the ghost map's candidate list can be long). */
.gis-map-dialog[open] { display: flex; flex-direction: column; block-size: 94dvh; }
dialog.app-dialog.gis-map-dialog { inline-size: 96vw; width: 96vw; max-width: 96vw; max-height: 94dvh; max-block-size: 94dvh; }
.gis-map-dialog .gis-map-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gis-map-dialog .gis-map-body { flex: 1; min-height: 0; }
.gis-map-dialog .gis-map-layout { flex: 1; min-height: 0; }
.gis-map-dialog .gis-map-stage { min-height: 320px; }
.gis-map-dialog .gis-map-evidence { min-height: 0; overflow-y: auto; padding-right: .35rem; }
@media (max-width: 900px) {
  .gis-map-layout { grid-template-columns: 1fr; }
  .gis-map-stage { min-height: 360px; }
  /* Stacked: the whole body scrolls instead. */
  .gis-map-dialog .gis-map-body { overflow-y: auto; }
  .gis-map-dialog .gis-map-layout { flex: none; }
  .gis-map-dialog .gis-map-stage { height: 360px; }
  .gis-map-dialog .gis-map-evidence { overflow-y: visible; }
}

.location-summary .location-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.95em;
  color: var(--text);
}

.location-summary .location-address {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.location-summary .location-address[hidden] {
  display: none !important;
}

.location-summary .location-coordinates {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
  color: color-mix(in srgb, var(--text) 85%, black);
}

.location-summary .coord-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7em;
  color: var(--muted);
}

.location-summary .coord-value {
  font-weight: 600;
  color: var(--primary);
}

.map-panel-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.75rem 1rem 1rem;
}

/* Service Points Performance / Comm Loss Events / Comm Open Incidents share the
   comm-incidents-view wrapper class. On these pages the map section stacks above the
   detail section (instead of sitting side by side), and within the map section the
   Service Location / Mesh Hop Path cards sit beside the map instead of underneath it,
   with the map taking the larger share of the width. Scoped to this wrapper class so
   the other pages reusing the same #map-and-detail-wrapper/#event-map-container ids
   (service contract, customer, customer onboarding, service point create) are unaffected. */
.comm-incidents-view #map-and-detail-wrapper {
  flex-direction: column;
}
.comm-incidents-view #event-map-container,
.comm-incidents-view #event-detail-wrapper {
  flex: 1 1 auto;
  width: 100%;
}
.comm-incidents-view .event-map-body {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.comm-incidents-view .event-map-body #event-map {
  flex: 1 1 65%;
  min-width: 0;
}
.comm-incidents-view .event-map-body .map-panel-info {
  flex: 1 1 35%;
  min-width: 0;
  padding-top: 0.75rem;
}
@media (max-width: 900px) {
  .comm-incidents-view .event-map-body {
    flex-direction: column;
  }
}

.map-order-link-status {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--card-bg) 98%, white);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  align-self: flex-start;
}

.map-order-link-status strong {
  color: var(--primary);
  font-weight: 700;
}

.map-panel-card {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--card-bg) 98%, white);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.map-panel-card .card-body {
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sync-path-summary .sync-path-overview {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.92em;
  color: var(--muted);
}









.sync-path-summary .sync-path-hops {
  font-weight: 600;
  color: var(--primary);
}

.sync-path-summary .sync-path-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 240px;
  overflow-y: auto;
}

.sync-path-summary .sync-path-list li {
  margin: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.9em;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  background: color-mix(in srgb, var(--card-bg) 93%, #fff);
  color: var(--text);
}

.sync-path-summary .sync-path-list-empty {
  border-style: dashed;
  color: var(--muted);
}

#footprint-card.card {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--card-bg);
  min-width: 320px;
}

#footprint-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.building-footprint-card .footprint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.building-footprint-card .footprint-meta {
  font-size: 0.8em;
  color: var(--muted);
  text-align: right;
}

.footprint-stage {
  position: relative;
  flex: 1;
}

.footprint-stage canvas[data-footprint-canvas] {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 25%, #d4dae3);
  background: #f8fafc;
  display: block;
  aspect-ratio: 3 / 2;
}

.footprint-stage .footprint-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.9em;
  color: var(--muted);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.footprint-stage .footprint-empty[hidden] {
  display: none;
}

.footprint-toolbar {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footprint-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.footprint-tool-btn,
.footprint-clear-btn {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  font-size: 0.85em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.footprint-tool-btn:hover:not(:disabled),
.footprint-clear-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, var(--control-bg));
  border-color: color-mix(in srgb, var(--primary) 65%, var(--control-border));
}

.footprint-tool-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset;
}

.footprint-tool-btn:disabled,
.footprint-clear-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.footprint-toolbar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footprint-status {
  font-size: 0.85em;
  color: var(--muted);
}

/* Mobile stacking stays the same */
@media (max-width: 900px) {
  #map-and-detail-wrapper { flex-direction: column; }
  #event-map-container.expanded,
  #footprint-card.expanded,
  #event-detail-wrapper.expanded,
  #diagnosis-wrapper.expanded {
    inset: .75rem !important;
  }
}

/* Expanded: a large pop-up over a dimmed page (cle_panels.js) — the same panel, so the map keeps its state.
   Larger than the dialogs' usual size: the map and details benefit from the room. */
#event-map-container.expanded,
#footprint-card.expanded,
#event-detail-wrapper.expanded,
#diagnosis-wrapper.expanded {
  position: fixed !important;
  inset: 3dvh 2vw !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  flex: none !important;
  overflow-y: auto;
  background: var(--popup-bg, var(--card-bg));
  border: 1px solid var(--popup-border, var(--border));
  border-radius: var(--popup-radius, 14px);
  box-shadow: var(--popup-shadow, 0 24px 60px rgba(15, 23, 42, .35));
}
#panel-expand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3500;  /* over the nav bar (3000–3003), under the job-status dialog (4000) */
  background: var(--popup-backdrop, rgba(15, 23, 42, .45));
  backdrop-filter: blur(3px);
}
#panel-expand-backdrop[hidden] { display: none; }
body.panel-expanded { overflow: hidden; }
/* The map grows to fill the pop-up. */
#event-map-container.expanded #event-map-canvas { min-height: calc(94dvh - 12rem); }  /* room for the Layers card below */
/* A table's column-visibility menu (attached to the page body) must open over the pop-up. */
body.panel-expanded div.dt-button-background { z-index: 3550; }
body.panel-expanded div.dt-button-collection { z-index: 3560; }
#event-map-container.expanded #event-map-header,
#event-detail-wrapper.expanded #event-detail-header,
#diagnosis-wrapper.expanded #diagnosis-header {
  position: sticky;
  top: 0;
  z-index: 5;
  font-size: .85rem;
  padding: .65rem 1rem;
}

.customer-hub-view:not(.customer-onboarding-view) #map-and-detail-wrapper {
  flex-wrap: wrap;
}

.customer-hub-view:not(.customer-onboarding-view) #event-map-container,
.customer-hub-view:not(.customer-onboarding-view) #event-detail-wrapper {
  flex: 1 0 100%;
  width: 100%;
}

.customer-hub-view #event-detail-panel {
  width: 100%;
}

.customer-onboarding-view #map-and-detail-wrapper {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.customer-onboarding-view #event-map-container {
  flex: 1 1 40%;
  width: auto;
}

.customer-onboarding-view #event-detail-wrapper {
  flex: 1 1 60%;
  width: auto;
}

@media (max-width: 900px) {
  .customer-onboarding-view #map-and-detail-wrapper {
    flex-direction: column;
  }

  .customer-onboarding-view #event-map-container,
  .customer-onboarding-view #event-detail-wrapper {
    flex: 1 1 auto;
    width: 100%;
  }
}

.meter-assignment-readonly {
  background: rgba(148, 163, 184, 0.14);
  color: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.45);
  cursor: not-allowed;
}

.meter-assignment-readonly:focus {
  outline: none;
  box-shadow: none;
  border-color: rgba(148, 163, 184, 0.45);
}

.meter-assignment-display {
  min-height: 42px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.meter-hub-view #meter-assignment-history-card {
  margin-top: 1rem;
}

.meter-hub-view #meter-edit-card {
  margin-top: 1rem;
}

.meter-hub-view #meter-assignment-edit-card {
  margin-top: 1rem;
}

.customer-hub-view .customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.35rem 0;
}

.customer-hub-view .detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
  min-height: 100%;
}

.customer-hub-view .detail-item--wide {
  grid-column: span 2;
}

.customer-hub-view .detail-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #555);
}

.customer-hub-view .detail-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-strong, var(--text-color, #1f2933));
  word-break: break-word;
}

.customer-hub-view .detail-value--muted {
  font-weight: 400;
  color: var(--text-muted, #555);
}

.customer-hub-view .status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--status-chip-bg, rgba(99, 102, 241, 0.12));
  color: var(--status-chip-text, #333);
  font-weight: 600;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .customer-hub-view .detail-item--wide {
    grid-column: span 1;
  }
}

/* =========================
   Navigation
   ========================= */

.main-nav {
  position: relative;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--nav-bg);
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: none;
}

/* Base button = same as main nav, but flat on nav bg */
.main-nav .btn {
  position: relative;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;  /* no border ring by default */
  border-radius: 8px;
  padding: .45rem .75rem;
}

/* Hover = subtle */
.main-nav .btn:hover {
  background: var(--nav-hover);
  transform: translateY(0);      /* keep nav buttons from “lifting” */
  box-shadow: none;
  color: var(--text-hover, #fff);
}

/* Active tab */
.main-nav .btn.active {
  background: var(--primary);
  color: #fff;
}

/* Active underline accent (tiny bar) */
.main-nav .btn.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.main-nav__group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.main-nav__group--menu {
  position: relative;
  z-index: 3001;
  margin-right: auto;
  min-width: 0;
}

.main-nav__group--links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Admin: a group button opening a menu of its pages */
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group__caret { font-size: .75em; opacity: .8; transition: transform 160ms ease; }
.nav-group[open] .nav-group__caret { transform: rotate(180deg); }
.nav-group__menu {  /* styled like the main menu */
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 3002;
  width: max-content; min-width: 280px; max-width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem;
  background: color-mix(in srgb, var(--primary) 15%, var(--card-bg)); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
}
.nav-group__link {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.65rem; border-radius: 8px;
  color: inherit; text-decoration: none; transition: background 120ms ease, color 120ms ease;
}
.nav-group__link small { color: var(--muted); font-size: 0.78rem; line-height: 1.3; font-weight: 400; }
.nav-group__link:hover, .nav-group__link:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); outline: none;
}
.nav-group__link.active { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }

.hub-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.hub-menu-toggle:hover,
.hub-menu-toggle:focus-visible {
  background: var(--nav-hover);
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
  transform: none;
}

.hub-menu-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.hub-menu-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.1rem;
  height: 0.85rem;
}

.hub-menu-icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.hub-menu-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
  white-space: nowrap;
}

.nav-jump-form {
  position: relative;
  flex: 1 1 26rem;
  width: clamp(18rem, 37vw, 33rem);
  min-width: 14rem;
}

.nav-jump-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-jump-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.nav-jump-form:focus-within .nav-jump-shell,
.nav-jump-form.has-results .nav-jump-shell {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}

.nav-jump-icon {
  color: var(--primary);
  font-weight: 900;
}

.nav-jump-shell input {
  box-sizing: border-box;
  height: 1.3rem;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
}

.nav-jump-shell input::placeholder {
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

.nav-jump-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  min-width: min(28rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  color: var(--text);
  z-index: 3003;
}

.hub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: max-content;
  min-width: 240px;
  max-width: min(96vw, 1180px);  /* five sections (incl. Diagnosis) on one row */
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: color-mix(in srgb, var(--primary) 15%, var(--card-bg));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 10px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
  padding: 0.85rem 1rem;
  z-index: 3002;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.3rem 1.5rem;
  align-items: start;
}

.hub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.hub-menu-section {
  min-width: 0;
}

.hub-menu-divider,
.hub-menu-secondary,
.hub-menu-meta,
.hub-menu > ul {
  grid-column: 1 / -1;
}

.hub-menu-section-title {
  margin: 0 0 0.35rem;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 60%, transparent);
}

.hub-menu-section-description {
  margin: -0.2rem 0 0.4rem;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 50%, transparent);
}

.hub-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.hub-menu-link:hover,
.hub-menu-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  outline: none;
}

.hub-menu-link.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.hub-menu-divider {
  margin: 0.75rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.hub-menu-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hub-menu-secondary .hub-menu-link {
  width: auto;
}

.hub-menu-meta {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.hub-menu-link--logout {
  color: var(--primary);
}

button.hub-menu-link--logout {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hub-menu-link--logout:hover,
.hub-menu-link--logout:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.inline-form {
  display: grid;
  gap: 0.45rem;
}

.inline-form label {
  font-weight: 600;
}

.inline-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.inline-form-row input[type="text"] {
  flex: 1 1 auto;
}

/* Small screens: wrap nicely */
@media (max-width: 640px) {
  .main-nav { flex-wrap: wrap; }
  .main-nav__group--menu {
    width: 100%;
  }
  .hub-menu {
    grid-template-columns: 1fr;
    width: auto;
    max-width: calc(100vw - 2rem);
  }
  .nav-jump-form {
    width: auto;
    min-width: 0;
  }
  .inline-form-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Settings sub-nav (mirrors top nav look & feel) */
#settings-fixed-nav,
.maintain-data-nav-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--card-gap, 1rem);  /* room between the toolbar and the page under it */
}
.settings-nav {
  display: inline-flex;            /* shrink to content width */
  align-items: center;
  gap: .5rem;
  background: var(--nav-bg);
  padding: .5rem .75rem;
  border-radius: 10px;
  box-shadow: none;
  /* Stick below main nav without hardcoding exact pixels */
  position: sticky;
  top: calc(var(--nav-h, 44px) + var(--settings-gap, 12px));
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  max-width: calc(100% - 1rem);
  z-index: 1000;
}

/* Base button = same as main nav, but flat on nav bg */
.settings-nav .btn {
  position: relative;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;  /* no border ring by default */
  border-radius: 8px;
  padding: .45rem .75rem;
}

/* Hover = subtle */
.settings-nav .btn:hover {
  background: var(--nav-hover);
  transform: translateY(0);      /* keep nav buttons from "lifting" */
  box-shadow: none;
  color: var(--text-hover, #fff);
}

/* Active tab */
.settings-nav .btn.active {
  background: var(--primary);
  color: #fff;
}

/* Active underline accent (tiny bar) */
.settings-nav .btn.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.pipeline-status {
  margin-top: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 0.9rem;
  color: var(--text-muted, #555);
}

.pipeline-status .spinner {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--primary, #007bff);
  animation: pipeline-spin 0.7s linear infinite;
}

@keyframes pipeline-spin {
  to { transform: rotate(360deg); }
}

/* Add top margin to content to account for fixed nav */
#settings-content { margin-top: 0; }

/* Small screens: wrap nicely */
@media (max-width: 640px) {
  .settings-nav { flex-wrap: wrap; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover { transform: none; }
}

/* Print styles: simplify for exports */
@media print {
  .main-nav, .settings-nav { display: none !important; }
  #main-panel { padding: 0; box-shadow: none; background: #fff; }
  .card { box-shadow: none; border: 1px solid #000; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
}

/* =========================
   Shared popup theme
   ========================= */
.app-dialog,
.modal-overlay,
.job-status-dialog,
.service-contract-customer-dialog,
.hub-edit-dialog {
  --popup-bg: var(--card-bg, #fff);
  --popup-text: var(--text, #1f2933);
  --popup-border: color-mix(in srgb, var(--border, #d9dee7) 82%, transparent);
  --popup-header-bg: color-mix(in srgb, var(--primary) 6%, var(--card-bg, #fff));
  --popup-backdrop: color-mix(in srgb, #0f172a 58%, transparent);
  --popup-radius: max(var(--radius, 12px), 12px);
  --popup-shadow: 0 24px 70px color-mix(in srgb, #0f172a 32%, transparent);
}

body.app-dialog-open {
  overflow: hidden;
}

.app-dialog {
  --app-dialog-width: 44rem;
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow) !important;
  color: var(--popup-text);
  inline-size: min(var(--app-dialog-width), calc(100vw - 2rem));
  max-block-size: min(90dvh, 58rem);
  overflow: hidden;
  padding: 0;
}

.app-dialog--sm { --app-dialog-width: 30rem; }
.app-dialog--md { --app-dialog-width: 44rem; }
.app-dialog--lg { --app-dialog-width: 60rem; }
.app-dialog--xl { --app-dialog-width: 76rem; }

.app-dialog::backdrop {
  background: var(--popup-backdrop);
  backdrop-filter: blur(3px);
}

.app-dialog[aria-busy="true"] {
  cursor: progress;
}

.app-dialog__header,
.app-dialog__footer {
  align-items: center;
  background: var(--popup-header-bg);
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  position: sticky;
  z-index: 4;
}

.app-dialog__header {
  border-bottom: 1px solid var(--popup-border);
  top: 0;
}

.app-dialog__footer {
  border-top: 1px solid var(--popup-border);
  bottom: 0;
  justify-content: flex-end;
}

.app-dialog__title {
  color: var(--popup-text);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  line-height: 1.35;
  margin: 0;
}

.app-dialog__body {
  max-block-size: calc(90dvh - 4.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
  scrollbar-gutter: stable;
}

.app-dialog :is(input[type="search"], [role="search"] input) {
  min-height: 3rem !important;
  font-size: 1rem !important;
  padding-inline: 0.9rem !important;
}

.app-dialog :is(.form-errors, .errorlist, [data-state="error"]) {
  border-radius: 9px;
  scroll-margin-block: 5rem;
}

.app-dialog button:disabled,
.app-dialog input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.app-dialog :is(.btn.primary, .btn.danger) {
  font-weight: 700;
}

.app-dialog .btn.danger {
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
}

.modal-overlay,
.job-status-dialog {
  position: fixed;
  inset: 0;
  background: var(--popup-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  z-index: 4000;
  backdrop-filter: blur(2px);
}

.modal-overlay[hidden],
.job-status-dialog[hidden] {
  display: none !important;
}

.modal-card {
  width: min(960px, 95vw);
  max-height: calc(100vh - 2rem);
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow) !important;
  color: var(--popup-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header, .modal-footer {
  flex: 0 0 auto;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--popup-border);
  background: var(--popup-header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
}

.modal-footer {
  border-top: 1px solid var(--popup-border);
  border-bottom: none;
  justify-content: flex-end;
  gap: .5rem;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem;
  overflow: auto;
}

.modal-card .modal-body > .service-order-create-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.modal-card .modal-body > .service-order-create-card > .card-body {
  padding: 0;
}

.modal-body table td { white-space: normal; word-break: break-word; }

/* =========================
   Scrollbar
   ========================= */
* { scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 5px;
}



/* =========================
   Settings » Test Data Generation
   ========================= */
.settings-card {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.settings-card .card-header {
  padding: 1.25rem 1.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.settings-card__header-main {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Page hints: one quiet panel for a page (the same everywhere), a plain line under a section heading, and an optional
   collapsed "How to use this page". Theme colours only. (page_hints.py; partials/page_hint.html) */
.page-hint--panel {
  display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%;
  margin: 0 0 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
  border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 8px; box-shadow: none;
  color: var(--text); font-size: .875rem; font-weight: 400; line-height: 1.5;
}
.page-hint__icon { flex: none; width: 16px; height: 16px; margin-top: 2.5px; color: var(--primary); }
.page-hint__body { min-width: 0; max-width: 80ch; }
.page-hint__text { margin: 0; }
.page-hint__guide { margin-top: 4px; font-size: .875rem; line-height: 1.5; }
.page-hint__guide > summary {
  display: flex; align-items: center; min-height: 32px; cursor: pointer; list-style-position: inside;
  font-size: .8125rem; font-weight: 600; color: var(--text);
}
.page-hint__guide > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.page-hint__guide ol { margin: 2px 0 6px; padding-left: 1.4rem; }
.page-hint__guide li { margin: 0 0 2px; }
.page-hint--section { margin: 4px 0 12px; max-width: 80ch; font-size: .8125rem; line-height: 1.5; color: var(--text); background: none; border: 0; padding: 0; }
@media (max-width: 640px) {
  .page-hint--panel { padding: 10px 12px; }
}
.settings-card__subtitle {
  margin-top: .35rem;
  margin-bottom: 0;
  font-size: .95rem;
  max-width: 52ch;
}

.settings-card__body {
  padding: 1.75rem;
  background: color-mix(in srgb, var(--card-bg) 96%, white);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-card__body > * {
  margin: 0;
}

.settings-subcard {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--control-bg) 92%, white);
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-subcard h3,
.settings-subcard h4 {
  margin: 0;
}

.table-scroll {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 98%, white);
  padding: 0;
  margin-top: .5rem;
}

.table-scroll table {
  width: 100%;
}

#area-diagnosis-table,
#result-codes-table {
  min-width: 64rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}

.form-actions .btn {
  padding: .55rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
}

.form-actions--end {
  justify-content: flex-end;
  width: 100%;
}

.form-actions--spread {
  justify-content: space-between;
  width: 100%;
}

.callout {
  background: color-mix(in srgb, var(--control-bg) 94%, white);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 10px;
  padding: .75rem;
  font-size: .9rem;
  color: color-mix(in srgb, var(--text) 85%, black);
  line-height: 1.4;
}

.area-diagnosis-summary,
.result-code-summary {
  background: color-mix(in srgb, var(--accent) 12%, var(--control-bg) 92%);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.area-diagnosis-metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.area-diagnosis-metrics .label {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 75%, black);
}

.area-diagnosis-metrics .value {
  font-size: 1.35rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 92%, black);
}

.area-diagnosis-forms,
.result-codes-forms {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.area-diagnosis-forms .settings-subcard,
.result-codes-forms .settings-subcard {
  height: 100%;
}

.result-codes-actions {
  justify-content: flex-end;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.result-codes-actions .btn {
  min-width: 9.5rem;
}

.result-codes-actions .btn#result-code-duplicate-button {
  min-width: 10.5rem;
}

.result-codes-actions .btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.result-codes-card details.settings-subcard {
  margin-bottom: .5rem;
}

.state-engine-rule-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.state-engine-rule-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 10px;
  padding: .75rem .85rem;
  background: color-mix(in srgb, var(--control-bg) 94%, white);
}

.state-engine-rule-item__meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.state-engine-rule-item__title {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 90%, black);
}

.state-engine-rule-item__desc {
  line-height: 1.35;
}

.state-engine-rule-item__toggle {
  padding-top: .1rem;
}

@media (max-width: 720px) {
  .result-codes-actions {
    justify-content: stretch;
  }
  .result-codes-actions .btn {
    min-width: 0;
    flex: 1 1 auto;
  }
  .state-engine-rule-item {
    flex-direction: row;
    align-items: flex-start;
  }
}

.area-diagnosis-preview {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.area-diagnosis-preview figure {
  margin: 0;
}

.area-diagnosis-preview img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.area-diagnosis-preview p {
  margin: 0;
  font-size: .9rem;
}

.theme-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.theme-preferences {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.theme-preference {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.theme-preference__text {
  flex: 1 1 240px;
}

.theme-preference__text h4 {
  margin: 0;
}

.theme-preference__text p {
  margin: .25rem 0 0;
}

.theme-preference__controls {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.theme-toggle {
  cursor: pointer;
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text);
  padding: 0;
}

.theme-toggle span {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: inherit;
}

.theme-toggle input:checked + span {
  background: var(--primary);
  color: #fff;
}

.theme-toggle:hover input:not(:checked) + span {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: color-mix(in srgb, var(--text) 95%, black);
}

.timezone-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 28rem;
}

.timezone-preview {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.timezone-preview__value {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 88%, black);
}

.account-form label.field {
  width: min(100%, 32rem);
}

.pipeline-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: flex-start;
}

.pipeline-form {
  max-width: 32rem;
}

.pipeline-form-actions {
  justify-content: flex-start;
  padding-top: .25rem;
}

.pipeline-guidance {
  gap: .75rem;
}

.pipeline-guidance .pipeline-tips {
  padding-left: 1rem;
}

@media (max-width: 900px) {
  .pipeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pipeline-form {
    max-width: none;
  }

  .theme-preference {
    align-items: flex-start;
  }
}

.test-data-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.test-data-section {
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 5%);
  border-radius: 14px;
  padding: 1.35rem 1.75rem;
  background: color-mix(in srgb, var(--card-bg) 85%, white);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.test-data-legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 .4rem;
  color: color-mix(in srgb, var(--primary) 62%, var(--text));
}

.test-data-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.test-data-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--control-bg) 92%, white);
}

.test-data-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.required-indicator {
  color: var(--accent);
  font-size: .9em;
}

.test-data-field input,
.test-data-field select,
.test-data-field textarea {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--control-border) 80%, var(--primary) 10%);
  padding: .55rem .65rem;
  font-size: .95rem;
  transition: border-color .15s ease;
}

.test-data-field input:focus,
.test-data-field select:focus,
.test-data-field textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--accent) 30%);
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 1px;
}

.test-data-help {
  font-size: .85rem;
  line-height: 1.4;
}

.test-data-default {
  font-size: .8rem;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}

.test-data-error {
  padding: .3rem .55rem;
  margin: 0;
  border-radius: 6px;
}

.test-data-actions--footer {
  justify-content: flex-start;
  padding-top: .25rem;
}

.test-data-run-cta--stacked {
  display: grid;
  gap: 1rem;
}

.test-data-run-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.run-status {
  font-size: .9rem;
  color: var(--muted);
}

@media (max-width: 768px) {
  .settings-card__body { padding: 1.25rem; }
  .settings-subcard { padding: 1.1rem 1.25rem; }
  .test-data-section { padding: 1.15rem 1.25rem; }
  .test-data-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .test-data-field input,
  .test-data-field select,
  .test-data-field textarea {
    transition: none;
  }
}

/* =========================
   Drop shadow removal (global)
   ========================= */
*, *::before, *::after {
  box-shadow: none !important;
}



/* =========================
   Theme selector tiles
   ========================= */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1200px) {
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.theme-tile {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  cursor: pointer;
  user-select: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.theme-tile input[type="radio"] { margin-right: .5rem; }
.theme-tile:hover { box-shadow: none; }

.theme-tile .swatch {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
  align-items: center;
}
.theme-tile .chip {
  display: block;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
}

.theme-tile .label { font-weight: 600; color: var(--text); }

.theme-swatches .theme-tile .label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

[hidden] { display: none !important; }

.comm-incidents-view .incident-summary-panels {
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comm-incidents-view .incident-summary-card {
  padding: 0.75rem 0.85rem;
}

.comm-incidents-view .incident-summary-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.comm-incidents-view .incident-summary-card--full {
  grid-column: 1 / -1;
  width: 100%;
}

.comm-incidents-view .incident-summary-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.comm-incidents-view .summary-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.comm-incidents-view .summary-item,
.full-case__parts .summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
}

.comm-incidents-view .summary-item--wide {
  grid-column: span 2;
}

.comm-incidents-view .summary-label,
.full-case__parts .summary-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #555);
}

.comm-incidents-view .summary-value,
.full-case__parts .summary-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-strong, var(--text-color, #1f2933));
  word-break: break-word;
}

.comm-incidents-view .status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--status-chip-bg, rgba(99, 102, 241, 0.12));
  color: var(--status-chip-text, #333);
  font-weight: 600;
  font-size: 0.8rem;
  max-width: fit-content;
}

@media (max-width: 720px) {
  .comm-incidents-view .summary-item--wide {
    grid-column: span 1;
  }
}

/* =========================
   Incident controls (assignment + notes)
   ========================= */
.incident-control-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.incident-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--table-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.incident-filter-bar .filter-label {
  font-weight: 600;
}

.incident-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.incident-filter-options .filter-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

#selection-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: #fff;
}

.selection-loading-spinner {
  background: rgba(15, 23, 42, 0.9);
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

body.selection-loading #selection-loading-overlay {
  display: flex;
}

body.selection-loading .incident-summary-panels,
body.selection-loading #map-and-detail-wrapper,
body.selection-loading .incident-control-row {
  visibility: hidden;
}

.incident-filter-options input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.incident-filter-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.incident-control-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 320px;
}

.incident-control-row .card {
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
}

.incident-control-row .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  flex: 1 1 auto;
}

.incident-control-row .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.incident-control-row select,
.incident-control-row textarea,
.incident-control-row input {
  box-sizing: border-box;
  width: 100%;
}

#incident-assignment-card .assignment-incident,
#incident-notes-card .notes-incident,
#incident-status-card .status-incident {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.incident-control-row .form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

#incident-assignment-card .assignment-status,
#incident-notes-card .notes-status,
#incident-status-card .status-feedback {
  min-height: 1.25rem;
}

#incident-assignment-card .assignment-status[data-state="error"],
#incident-notes-card .notes-status[data-state="error"],
#incident-status-card .status-feedback[data-state="error"] {
  color: #f87171;
}

#incident-assignment-card .assignment-status[data-state="success"],
#incident-notes-card .notes-status[data-state="success"],
#incident-status-card .status-feedback[data-state="success"] {
  color: var(--primary);
}

#service-order-creation-card .status-feedback {
  min-height: 1.25rem;
}

#service-order-creation-card .status-feedback[data-state="error"] {
  color: #f87171;
}

#service-order-creation-card .status-feedback[data-state="success"] {
  color: var(--primary);
}

.service-orders-view #event-detail-panel #service-order-creation-card {
  margin-bottom: 0.9rem;
}

.service-order-create-card {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 97%, white);
}

.service-order-create-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.95rem 1rem 1rem;
}

.service-order-create-card .service-order-create-intro {
  margin: -0.2rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.service-order-create-card form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.service-order-create-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.service-order-create-card .form-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.service-order-create-card input,
.service-order-create-card select,
.service-order-create-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0.55rem 0.65rem;
}

.service-order-create-card textarea {
  resize: vertical;
  min-height: 88px;
}

.service-order-create-card .service-order-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.8rem;
}

.service-order-create-card .service-order-create-actions {
  margin-top: 0.15rem;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .service-order-create-card .service-order-create-grid {
    grid-template-columns: 1fr;
  }
}

#outage-creation-card .status-feedback {
  min-height: 1.25rem;
}

#outage-creation-card .status-feedback[data-state="error"] {
  color: #f87171;
}

#outage-creation-card .status-feedback[data-state="success"] {
  color: var(--primary);
}

.outages-hub-view #event-detail-panel #outage-creation-card {
  margin-bottom: 0.9rem;
}

.outages-hub-view .outage-create-card {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-bg) 97%, white);
}

.outages-hub-view .outage-create-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.05rem 1.05rem;
}

.outages-hub-view .outage-create-intro {
  margin: -0.2rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.outages-hub-view #outage-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.outages-hub-view #outage-create-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.outages-hub-view #outage-create-form .form-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.outages-hub-view #outage-create-form input,
.outages-hub-view #outage-create-form select,
.outages-hub-view #outage-create-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0.55rem 0.65rem;
}

.outages-hub-view #outage-create-form textarea {
  resize: vertical;
  min-height: 88px;
}

.outages-hub-view .outage-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.8rem;
}

.outages-hub-view .outage-create-actions {
  margin-top: 0.15rem;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .outages-hub-view .outage-create-grid {
    grid-template-columns: 1fr;
  }
}

#incident-notes-text {
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0.65rem 0.75rem;
  resize: vertical;
  min-height: 120px;
}

.incident-notes-log {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 90%, var(--text) 5%);
  padding: 0.65rem 0.75rem;
  min-height: 100px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 0.9rem;
  color: var(--text);
}

/* =========================
   HUB DASHBOARD LAYOUT
   ========================= */

#hub-grid .full-span {
  grid-column: 1 / -1; /* span across all columns */
}

/* Service Point Performance */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge.excellent { background: #e6f7ec; color: #1a7f37; }
.badge.good      { background: #eef5ff; color: #1b5bbf; }
.badge.degraded  { background: #fff7e6; color: #ad6800; }
.badge.flatlined { background: #fdecec; color: #c62828; }
.badge.unknown   { background: #f2f2f2; color: #555; }

/* Grid helpers */
.grid {
  display: grid;
  gap: 1rem;
}
.grid.two-col {
  grid-template-columns: 1fr 1fr;
}
.grid.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.split-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.split-table .table-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Stat bar (top) */
.hub-dashboard .grid.stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1rem;
}
#stats-bar.grid.stats {
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  grid-template-columns: none;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}
#stats-bar .stat-card {
  min-width: 190px;
}
.stats-row-four {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  text-align: center;
  box-shadow: none;
}
.stat-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  margin-bottom: 0.25rem;
}
.stat-value {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.stat-sub {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 50%, transparent);
}

.home-hub-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-hub-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-hub-command {
  overflow: visible;
}

.home-quick-actions .card-body {
  overflow: visible;
}

.home-quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg) 92%, white) 0%, color-mix(in srgb, var(--primary) 8%, white) 100%);
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  text-align: center;
  padding: 0.75rem 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-quick-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.home-jump-form {
  position: relative;
  display: grid;
  gap: 0.85rem;
  max-width: 980px;
  margin: 0 auto;
}

.home-jump-form__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.home-jump-form__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  margin-bottom: 0.2rem;
}

.home-jump-form__subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 68%, transparent);
}

.home-jump-form__shortcut {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  background: color-mix(in srgb, var(--card-bg) 96%, white);
}

.home-jump-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--nav-bg) 18%, var(--border));
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-bg) 94%, white) 0%, color-mix(in srgb, var(--card-bg) 90%, var(--primary) 10%) 100%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-jump-form:focus-within .home-jump-shell,
.home-jump-form.has-results .home-jump-shell {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.home-jump-shell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
  font-weight: 900;
  font-size: 0.95rem;
}

.home-jump-shell input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
  min-width: 0;
}

.home-jump-shell input::placeholder {
  color: color-mix(in srgb, var(--text) 46%, transparent);
  font-weight: 500;
}

.home-jump-form__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  padding: 0 0.2rem;
}

.home-jump-results {
  margin-top: -0.05rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card-bg) 97%, white);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
  padding: 0.55rem;
  overflow: hidden;
}

.home-jump-group + .home-jump-group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.home-jump-group__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  padding: 0.2rem 0.45rem 0.4rem;
}

.home-jump-result {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.home-jump-result:hover,
.home-jump-result.is-active {
  background: color-mix(in srgb, var(--primary) 9%, white);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  transform: translateX(2px);
}

.home-jump-result__main {
  display: grid;
  gap: 0.16rem;
}

.home-jump-result__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.home-jump-result__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-jump-result__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.home-jump-result__badge--page {
  background: color-mix(in srgb, var(--nav-bg) 10%, white);
  color: var(--nav-bg);
}

.home-jump-result__badge--customer {
  background: color-mix(in srgb, #1d4ed8 12%, white);
  color: #1d4ed8;
}

.home-jump-result__badge--sp {
  background: color-mix(in srgb, #0f766e 12%, white);
  color: #0f766e;
}

.home-jump-result__badge--meter {
  background: color-mix(in srgb, #b45309 12%, white);
  color: #b45309;
}

.home-jump-result__badge--contract {
  background: color-mix(in srgb, #7c3aed 12%, white);
  color: #7c3aed;
}

.home-jump-result__badge--order {
  background: color-mix(in srgb, #be123c 12%, white);
  color: #be123c;
}

.home-jump-result__badge--outage {
  background: color-mix(in srgb, #dc2626 12%, white);
  color: #dc2626;
}

.home-jump-result__badge--default {
  background: color-mix(in srgb, var(--text) 10%, white);
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.home-jump-result__subtitle,
.home-jump-empty {
  color: color-mix(in srgb, var(--text) 62%, transparent);
  font-size: 0.82rem;
}

.home-jump-empty {
  padding: 0.9rem 1rem;
}

.home-jump-empty__title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.home-jump-empty__text {
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

.home-hub-stats .stat-sub {
  display: grid;
  gap: 0.15rem;
}

.home-hub-tile {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.home-hub-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--card-bg));
}

.home-watchlist {
  display: grid;
  gap: 0.7rem;
}

.home-watchlist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 0.9rem;
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--card-bg) 96%, white);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.home-watchlist__item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
}

.home-watchlist__count {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.95rem;
}

.home-watchlist__body {
  display: grid;
  gap: 0.18rem;
}

.home-watchlist__label {
  font-weight: 700;
}

.home-watchlist__detail {
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

.stat-sub-line {
  display: block;
}

@media (max-width: 980px) {
  .home-hub-stats {
    grid-template-columns: 1fr;
  }

  .home-hub-tiles {
    grid-template-columns: 1fr;
  }

  .home-quick-actions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-jump-form__header {
    flex-direction: column;
  }

  .home-jump-form__shortcut {
    align-self: flex-start;
  }
}

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.card-header {
  background: color-mix(in srgb, var(--nav-bg) 6%, var(--card-bg));
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.card-header h2 {
  font-size: 0.95rem;
  margin: 0;
}
.card-body {
  padding: 0.65rem 0.75rem;
  flex: 1;
  overflow: auto;
}
.card-body.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* List-style feed */
.list .list-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.list .list-row:last-child {
  border-bottom: none;
}
.list .kicker {
  font-weight: 500;
  font-size: 0.9rem;
}
.list .sub {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}
.list time {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--text) 50%, transparent);
  white-space: nowrap;
}

/* Bar chart rows */
.barlist .bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.barlist .bar-label {
  flex: 0 0 80px;
  font-size: 0.8rem;
}
.barlist .bar {
  flex: 1;
  height: 0.6rem;
  background: var(--border);
  border-radius: 0.3rem;
  overflow: hidden;
  margin: 0 0.5rem;
}
.barlist .bar > div {
  height: 100%;
  background: var(--primary);
}
.barlist .bar-value {
  font-size: 0.8rem;
  min-width: 2rem;
  text-align: right;
}

/* Mini tables */
.tableish {
  overflow-x: auto;
}
.mini-table {
  width: 100%;
  border-collapse: collapse;
}
.mini-table th,
.mini-table td {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.mini-table th {
  text-align: left;
  background: color-mix(in srgb, var(--nav-bg) 6%, var(--card-bg));
  font-weight: 600;
}

.scenario-details-table th,
.scenario-details-table td {
  font-size: 0.92rem;
  padding: 0.45rem 0.65rem;
}

/* Warnings + loaders */
.warning {
  font-size: 0.85rem;
  color: #b94a48;
  text-align: center;
}

/* =========================
   DataTables Core CSS Override & Column Reorder Integration
   Replace the duplicated DataTables sections in your hub.css with this
   ========================= */

/* Override DataTables core variables with our theme variables */
:root {
  --dt-row-selected: var(--table-selected-bg);
  --dt-row-selected-text: var(--table-selected-text);
  --dt-row-selected-link: var(--table-selected-text);
  --dt-row-stripe: var(--table-zebra);
  --dt-row-hover: var(--table-hover-bg);
  --dt-column-ordering: var(--table-border);
  --dt-html-background: var(--card-bg);
}

/* DataTables Column Reorder Integration (replaces colReorder.dataTables.min.css) */
table.DTCR_clonedTable.dataTable {
  position: absolute !important;
  background-color: color-mix(in srgb, var(--card-bg) 85%, transparent) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
  z-index: 202;
}

div.DTCR_pointer {
  width: 2px !important;
  background-color: var(--primary) !important;
  z-index: 201;
  box-shadow: none;
}

/* Column reorder hover states */
table.dataTable thead th.DTCR_moveableColumn {
  cursor: move !important;
  transition: background-color 0.2s ease;
}

table.dataTable thead th.DTCR_moveableColumn:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--table-header-bg)) !important;
}

/* Button Collection Dropdown (ColVis menu) */
div.dt-button-collection {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  margin-top: 4px;
  padding: 0.5em 0;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  z-index: 2002;
  overflow: hidden;
}

div.dt-button-collection .dt-button {
  position: relative;
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: left !important;
  color: var(--text) !important;
  cursor: pointer;
  font-size: 0.85em !important;
  line-height: 1.4;
  transition: background 0.2s ease;
}

div.dt-button-collection .dt-button:hover:not(.disabled) {
  background: var(--table-hover-bg) !important;
  color: var(--table-hover-text) !important;
  border: none !important;
  box-shadow: none !important;
}

div.dt-button-collection .dt-button.disabled {
  cursor: default;
  opacity: 0.4;
  color: color-mix(in srgb, var(--text) 50%, transparent) !important;
}

/* Active state for column visibility buttons */
div.dt-button-collection .dt-button-active {
  background: color-mix(in srgb, var(--primary) 15%, var(--card-bg)) !important;
  color: var(--primary) !important;
  padding-right: 3em !important;
}

div.dt-button-collection .dt-button-active:after {
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -8px;
  content: "✓";
  color: var(--primary) !important;
  font-weight: bold;
  font-size: 0.9em;
}

div.dt-button-collection .dt-button-active:hover {
  background: color-mix(in srgb, var(--primary) 25%, var(--card-bg)) !important;
  color: var(--primary) !important;
}

/* Collection title */
div.dt-button-collection-title {
  text-align: center;
  padding: 0.4em 0 0.6em;
  margin: 0 0.5em;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

div.dt-button-collection-title:empty {
  display: none;
}

/* Button spacers */
span.dt-button-spacer {
  display: inline-block;
  margin: 0.5em;
  white-space: nowrap;
}

span.dt-button-spacer.bar {
  width: 100%;
  height: 0;
  border-bottom: 1px solid var(--border);
  margin: 0.5em 0;
  padding: 0;
}

/* Background overlay when collection is open */
div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 2001;
}

/* Main button styling (override the minified CSS) */
div.dt-buttons > .dt-button,
div.dt-buttons > div.dt-button-split .dt-button {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  margin: 0 0.25em 0.5em 0 !important;
  padding: 0.4em 0.8em !important;
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 6px !important;
  font-size: 0.8em !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

div.dt-buttons > .dt-button:first-child {
  margin-left: 0 !important;
}

div.dt-buttons > .dt-button:hover:not(.disabled) {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

div.dt-buttons > .dt-button:focus:not(.disabled) {
  border-color: var(--primary) !important;
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent) !important;
  outline-offset: 1px;
}

div.dt-buttons > .dt-button.disabled {
  cursor: default !important;
  opacity: 0.4 !important;
  color: color-mix(in srgb, var(--text) 50%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 50%, transparent) !important;
}

div.dt-buttons > .dt-button.dt-button-active:not(.disabled) {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* Processing state */
.dt-button.processing {
  color: rgba(0, 0, 0, 0.2) !important;
  pointer-events: none;
}

.dt-button.processing:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  content: " ";
  border: 2px solid var(--primary);
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: dt-button-spinner 1.5s infinite linear;
}

@keyframes dt-button-spinner {
  100% {
    transform: rotate(360deg);
  }
}

/* Split buttons (if used) */
div.dt-buttons > div.dt-button-split {
  display: inline-block;
}

div.dt-buttons > div.dt-button-split .dt-button:first-child {
  margin-right: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--primary) 70%, transparent) !important;
}

div.dt-buttons > div.dt-button-split .dt-button:last-child {
  margin-left: -1px;
  padding-left: 0.6em !important;
  padding-right: 0.6em !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid transparent !important;
}

/* Button info popup (if used) */
div.dt-button-info {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
  text-align: center;
  z-index: 2003;
  overflow: hidden;
  color: var(--text);
}

div.dt-button-info h2 {
  padding: 1.5rem 2rem 1rem;
  margin: 0;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--nav-bg) 8%, var(--card-bg));
}

div.dt-button-info > div {
  padding: 1em 2em 2em;
}

/* Close button for popups */
div.dtb-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: bold;
}

div.dtb-popover-close:hover {
  background: color-mix(in srgb, var(--text) 20%, transparent);
}

/* Ensure processing indicator uses theme colors */
.dataTables_processing {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  box-shadow: none !important;
  z-index: 1001 !important;
}

/* Fix any remaining DataTables CDN overrides */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text) !important;
  font-family: inherit !important;
}

/* Result message styling (for your view success/error messages) */
.result-message,
#main-panel .result {
  background: color-mix(in srgb, var(--accent) 15%, var(--card-bg)) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 6px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 1rem !important;
  color: var(--text) !important;
  font-size: 0.9em;
}

/* Enhanced focus states for better accessibility */
.dataTables_filter input:focus,
.dataTables_length select:focus,
button.buttons-colvis:focus,
.dataTables_paginate .paginate_button:focus,
div.dt-buttons > .dt-button:focus {
  border-color: var(--primary) !important;
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent) !important;
  outline-offset: 1px;
}

/* Responsive behavior */
@media screen and (max-width: 768px) {
  div.dt-buttons {
    text-align: center;
  }
  
  div.dt-button-collection {
    width: 180px;
    font-size: 0.9em;
  }
  
  div.dt-buttons > .dt-button {
    font-size: 0.75em !important;
    padding: 0.35em 0.6em !important;
  }
}

/* Theme-specific fixes for dark mode */
:root[data-theme="neon"],
:root[data-theme="midnight"],
:root[data-theme="ember"] {
  --dt-row-hover: var(--table-hover-bg);
  --dt-row-stripe: var(--table-zebra);
  --dt-column-ordering: var(--table-border);
  --dt-html-background: var(--card-bg);
}

:root[data-theme="neon"] .dataTables_processing,
:root[data-theme="midnight"] .dataTables_processing,
:root[data-theme="ember"] .dataTables_processing {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

:root[data-theme="neon"] table.DTCR_clonedTable.dataTable,
:root[data-theme="midnight"] table.DTCR_clonedTable.dataTable,
:root[data-theme="ember"] table.DTCR_clonedTable.dataTable {
  background-color: color-mix(in srgb, var(--card-bg) 90%, transparent) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}

:root[data-theme="neon"] div.dt-button-collection,
:root[data-theme="midnight"] div.dt-button-collection,
:root[data-theme="ember"] div.dt-button-collection {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

:root[data-theme="neon"] div.dt-button-info,
:root[data-theme="midnight"] div.dt-button-info,
:root[data-theme="ember"] div.dt-button-info {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* Smooth transitions for all theme changes */
*, *::before, *::after {
  transition: background-color 0.2s ease, 
              color 0.2s ease, 
              border-color 0.2s ease !important;
}

/* Prevent transition on DataTables elements that shouldn't animate */
.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollFoot,
table.dataTable tbody tr,
table.dataTable thead th,
table.dataTable tbody td {
  transition: background-color 0.15s ease, 
              color 0.15s ease !important;
}

/* Ensure proper stacking order */
nav { z-index: 1000; }
div.dt-button-collection { z-index: 1002; }
div.dt-button-background { z-index: 1001; }
.dataTables_processing { z-index: 1003; }
#event-map-container.expanded { z-index: 3510; }
#event-detail-wrapper.expanded { z-index: 3520; }

/* =========================
   HTMX Indicator Styling
   ========================= */

/* By default hidden (you already used inline style, but this ensures consistency) */
.htmx-indicator {
  display: none;
  font-size: 0.9em;
  color: var(--primary);
  margin-left: 0.5em;
}

/* When htmx marks a request in progress on a target,
   any .htmx-indicator inside becomes visible */
.htmx-request .htmx-indicator {
  display: inline-block;
  animation: pulse 1s infinite ease-in-out;
}

/* Simple pulsing animation */
@keyframes pulse {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 0.2; }
}

/* Diagnosis Stats */
.diag-stats { display: grid; gap: 14px; }

.ds-headline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.stat-chip {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card-bg, #fafafa);
  box-shadow: none;
  color: var(--text, #111827);
}
.stat-chip .chip-label {
  font-size: 12px;
  color: var(--muted, #6b7280);
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.stat-chip .chip-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #111827);
}

.ds-section { display: grid; gap: 8px; }
.ds-title {
  font-size: 12px;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.meter-list, .label-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.meter-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.meter-row .name { font-size: 13px; color: var(--text, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter {
  height: 8px; border-radius: 999px; background: #eef2f7; position: relative; overflow: hidden;
}
.meter > span {
  position: absolute; inset: 0 100% 0 0; border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #34d399);
  transition: inset .4s ease;
}
.meter-row .count { font-size: 12px; color: color-mix(in srgb, var(--text, #111827) 70%, transparent); font-variant-numeric: tabular-nums; }

.label-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.label-row .name { font-size: 13px; color: var(--text, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg, #f8fafc) 88%, var(--text, #111827) 12%);
  color: var(--text, #111827);
  font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 70%, transparent);
}

/* Small screens: stack chips */
@media (max-width: 720px) {
  .ds-headline { grid-template-columns: 1fr; }
}



.stat-cards {
  display: flex;
  flex-wrap: wrap;   /* cards flow to next line if needed */
  gap: 12px;
}
.stat-cards .stat-card {
  flex: 1 1 160px;   /* shrink/grow nicely */
  max-width: 200px;  /* optional cap */
}

/* Service point detail indicator */
#save-indicator { display:none; }
.htmx-request #save-indicator { display:inline-block; }

.job-status-dialog {
  display: flex;
}

.job-status-dialog__card {
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow) !important;
  color: var(--popup-text);
  max-height: calc(100vh - 2rem);
  width: min(28rem, 95vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.job-status-dialog__header {
  background: var(--popup-header-bg);
  border-bottom: 1px solid var(--popup-border);
  padding: 1rem 1.25rem;
}

.job-status-dialog__header h3 {
  margin: 0;
  font-size: 1rem;
}

.job-status-dialog__body {
  display: grid;
  gap: 0.65rem;
  overflow: auto;
  padding: 1.25rem;
  font-size: 0.9rem;
}

.job-status-dialog__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.job-status-dialog__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-top-color: rgba(59, 130, 246, 0.9);
  animation: job-spin 0.8s linear infinite;
  display: inline-block;
}

.job-status-dialog__actions {
  background: var(--popup-header-bg);
  border-top: 1px solid var(--popup-border);
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
}

@keyframes job-spin {
  to { transform: rotate(360deg); }
}
.customer-info-card {
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, transparent) 0%, color-mix(in srgb, var(--card-bg) 75%, transparent) 100%);
  padding: 0;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  transition: none;
}
.customer-info-card .card-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.customer-info-card--wide {
  margin-top: 1rem;
}
.service-point-lower-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.service-point-lower-panels .customer-info-card--wide {
  margin-top: 0;
}
.customer-info-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}
.customer-info-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.customer-info-card:hover {
  transform: none;
  box-shadow: none;
}
.customer-info-card .card-title {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0;
}
.customer-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.customer-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.customer-info-grid__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}
.customer-info-grid dt {
  font-weight: 700;
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
.customer-info-grid dd {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .service-point-lower-panels {
    grid-template-columns: 1fr;
  }
  .customer-info-split {
    grid-template-columns: 1fr;
  }
  .customer-info-grid__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}
.split-grid__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.service-point-create-view #map-and-detail-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.service-point-create-view #event-map-container {
  flex: 1 1 40%;
}

.service-point-create-view #event-detail-wrapper {
  flex: 1 1 60%;
}

.service-point-create-view #event-detail-panel #service-point-creation-card {
  margin-bottom: 0;
}

.create-sp-map-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.8rem;
}

.create-sp-map-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.create-sp-map-inline input {
  flex: 1 1 auto;
}

.create-sp-map-inline--coords input {
  min-width: 0;
}

#create-sp-map-canvas {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 0.4rem;
}

#field-equipment-create-map-canvas {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 0.4rem;
}

.field-equipment-draft-marker {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.12);
  border: 2px solid rgba(127, 29, 29, 0.22);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
  opacity: 0.32;
}

@media (max-width: 980px) {
  .service-point-create-view #map-and-detail-wrapper {
    flex-direction: column;
  }

  .service-point-create-view #event-map-container,
  .service-point-create-view #event-detail-wrapper {
    flex: 1 1 auto;
  }

  .create-sp-map-search-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #create-sp-map-canvas {
    min-height: 360px;
  }

  #field-equipment-create-map-canvas {
    min-height: 360px;
  }

  .create-sp-map-inline {
    flex-wrap: wrap;
  }

  .create-sp-map-inline .btn {
    width: 100%;
  }
}
.split-grid__list {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.split-grid__label {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.list-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.list-card__list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}
.list-card__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.list-card__list span {
  font-size: 0.85rem;
  color: var(--muted);
}

.hub-dashboard {
  padding: 1.5rem;
  background: var(--dashboard-bg, color-mix(in srgb, var(--card-bg) 85%, var(--surface)));
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.05);
}
.hub-dashboard article.card + article.card {
  margin-top: 1rem;
}
.hub-dashboard .stat-card,
.hub-dashboard .card {
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 10px;
  background: var(--card-bg);
}
.stat-card,
.total-card {
  padding: 1.25rem;
}
.list-card .card-body,
.split-card .card-body {
  padding: 1rem;
}
.card-header {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.group-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
.group-card__stat {
  flex: 0 0 220px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--card-bg);
}
.group-card__stat .stat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--muted);
}
.group-card__stat .stat-value {
  font-size: 2rem;
  font-weight: 600;
  margin: 0.35rem 0;
}
.customer-secondary-account {
  align-items: center;
  border-bottom: 1px solid var(--border-color, #d9dee7);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.35rem 0;
}

.customer-secondary-account:last-child {
  border-bottom: 0;
}

.customer-accounts-compact {
  background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
  border-radius: 6px;
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
}

.customer-accounts-compact__header,
.customer-accounts-compact__row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 7rem minmax(0, 1fr);
}

.customer-accounts-compact__header {
  border-bottom: 1px solid var(--border-color, #d9dee7);
  padding-bottom: 0.35rem;
}

.customer-accounts-compact__header .text-muted {
  font-size: 0.78rem;
}

.customer-accounts-compact__row--secondary {
  align-items: start;
}

.customer-accounts-compact .customer-secondary-account .form-actions {
  flex-wrap: nowrap;
  margin: 0;
}

.customer-accounts-compact #customer-accounts-status:empty {
  display: none;
}

#account-contract-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.account-contract-id {
  background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-color, #d9dee7);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.account-contract-dialog .account-contract-mode-toggle {
  border-bottom: 1px solid var(--border-color, #d9dee7);
  justify-content: flex-start;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
}

.account-contract-dialog .settings-subcard {
  margin-top: 0;
}

.account-contract-dialog .service-order-create-actions {
  margin-top: 1rem;
}

.service-order-create-card .service-order-create-grid.service-contract-date-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .customer-accounts-compact__header,
  .customer-accounts-compact__row {
    grid-template-columns: 1fr;
  }

  .customer-secondary-account {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .service-order-create-card .service-order-create-grid.service-contract-date-grid {
    grid-template-columns: 1fr;
  }
}

.service-contract-customer-dialog {
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow) !important;
  color: var(--popup-text);
  max-height: min(90vh, 900px);
  max-width: 96vw;
  overflow: hidden;
  padding: 0;
  width: min(960px, 96vw);
}

.service-contract-customer-dialog::backdrop,
.hub-edit-dialog::backdrop {
  background: var(--popup-backdrop);
  backdrop-filter: blur(2px);
}

.service-contract-customer-dialog__header {
  align-items: center;
  background: var(--popup-header-bg);
  border-bottom: 1px solid var(--popup-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.service-contract-customer-dialog__header h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.service-contract-customer-dialog__body {
  max-height: calc(90vh - 3.5rem);
  overflow: auto;
  padding: 1.5rem;
}

.service-contract-customer-dialog__body .customer-onboarding-view {
  min-width: 0;
}

.hub-edit-dialog {
  background: transparent;
  border: 0;
  max-height: 90vh;
  max-width: 96vw;
  overflow: visible;
  padding: 0;
  width: min(960px, 96vw);
}

.hub-edit-dialog > .service-order-create-card {
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow) !important;
  color: var(--popup-text);
  margin: 0;
  max-height: 90vh;
  overflow: auto;
}

/* Popup form rhythm and comfortably sized search controls. */
:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) :is(.modal-body, .service-contract-customer-dialog__body, .card-body) {
  line-height: 1.5;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--control-border, var(--popup-border));
  border-radius: 9px;
  background: var(--control-bg, var(--popup-bg));
  color: var(--control-text, var(--popup-text));
  font: inherit;
  font-size: 0.95rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) :is(input, select, textarea):focus {
  border-color: var(--primary);
  outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 1px;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) select[size] {
  min-height: clamp(11rem, 28vh, 17rem);
  padding: 0.4rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) select[size] option {
  min-height: 2rem;
  padding: 0.45rem 0.55rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .create-sp-map-search-grid {
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
  gap: 1.25rem;
  align-items: stretch;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .create-sp-map-inline {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto;
  gap: 0.65rem;
  align-items: stretch;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .create-sp-map-inline .btn {
  min-width: 6.5rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) :is(.service-order-create-grid, .summary-columns) {
  gap: 1rem 1.25rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .settings-subcard {
  padding: 1.25rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card
) .form-actions {
  gap: 0.75rem;
}

:is(
  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog > .service-order-create-card,
  .job-status-dialog__card
) .btn {
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
}

@media (max-width: 780px) {
  .modal-overlay,
  .job-status-dialog {
    align-items: flex-start;
    padding: 0.75rem;
  }

  .modal-card,
  .service-contract-customer-dialog,
  .hub-edit-dialog {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
  }

  .modal-body,
  .service-contract-customer-dialog__body,
  .hub-edit-dialog > .service-order-create-card > .card-body {
    padding: 1rem;
  }

  :is(
    .modal-card,
    .service-contract-customer-dialog,
    .hub-edit-dialog > .service-order-create-card
  ) .create-sp-map-search-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(
    .modal-card,
    .service-contract-customer-dialog,
    .hub-edit-dialog > .service-order-create-card
  ) .create-sp-map-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(
    .modal-card,
    .service-contract-customer-dialog,
    .hub-edit-dialog > .service-order-create-card
  ) .create-sp-map-inline .btn {
    width: 100%;
  }
}

/* Final normalization wins over legacy popup-specific dimensions. */
dialog.app-dialog {
  width: min(var(--app-dialog-width), calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(90dvh, 58rem);
}

.app-dialog .app-dialog__header,
.app-dialog .app-dialog__footer {
  padding: 1.125rem 1.5rem;
}

.app-dialog .app-dialog__body {
  max-height: calc(90dvh - 4.5rem);
  padding: 1.5rem;
}

@media (max-width: 780px) {
  dialog.app-dialog {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .app-dialog .app-dialog__header,
  .app-dialog .app-dialog__footer,
  .app-dialog .app-dialog__body {
    padding: 1rem;
  }
}

/* Development workspace: intentionally spacious for destructive and long-running actions. */
#settings-content .development-page-card {
  width: 100%;
  margin: 0 0 2.5rem;
  border: 2px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 16px;
}

#settings-content .development-page-card .card-header {
  padding: 2rem 2.5rem 1.6rem;
}

#settings-content .development-page-card .settings-card__header-main {
  gap: .65rem;
}

#settings-content .development-page-card .settings-card__header-main h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.25;
}

#settings-content .development-page-card .settings-card__subtitle {
  max-width: 75ch;
  font-size: 1.08rem;
  line-height: 1.6;
}

#settings-content .development-page-card .settings-card__body {
  padding: 2.5rem;
  gap: 2.25rem;
}

#settings-content .development-actions-card .test-data-run-cta--stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

#settings-content .development-page-card .test-data-run-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 1rem;
  width: 100%;
  min-height: 170px;
  margin: 0;
  padding: 1.75rem 2rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--control-bg) 88%, white);
}

#settings-content .development-page-card .test-data-run-form > small {
  font-size: 1rem;
  line-height: 1.55;
}

#settings-content .development-page-card .test-data-run-form .btn,
#settings-content .development-page-card .test-data-settings-toggle > summary.btn {
  width: fit-content;
  min-height: 48px;
  padding: .8rem 1.25rem;
  font-size: 1.05rem;
}

#settings-content .development-reset-card .alert {
  padding: 1.25rem 1.4rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

#settings-content .development-reset-card #reset-application-confirmation {
  width: min(100%, 620px);
  min-height: 52px;
  padding: .75rem .9rem;
  font-size: 1.08rem;
}

@media (max-width: 768px) {
  #settings-content .development-page-card .card-header,
  #settings-content .development-page-card .settings-card__body {
    padding: 1.5rem;
  }

  #settings-content .development-page-card .test-data-run-form {
    min-height: 150px;
    padding: 1.4rem;
  }
}

/* Manage pages: "+ Create …" (and "← Back" on create pages) above the page content. */
.hub-page-actions { display: flex; justify-content: flex-end; gap: var(--space-2, .5rem); margin-bottom: var(--space-3, .75rem); }

/* Search forms above tables (ops-search) match the table search: same box, highlighted while filtering. */
.ops-search input[type="search"] { border-width: 2px; font-size: 1rem; }
.ops-search input[type="search"]:focus { outline: none; border-color: var(--accent, #2f6fdf); }
.ops-search--active input[type="search"] { border-color: var(--accent, #2f6fdf); background: var(--accent-soft, #eef4ff); }
.ops-search > div { display: flex; flex-wrap: wrap; gap: .6rem; }
.ops-search > div > input[type="search"] { flex: 1 1 18rem; }

/* A map panel whose only content was a description card is now empty. */
.map-panel-info:empty { display: none; }

/* Search pickers (partials/picker_field.html): type to search, pick a match, × to change it. */
.picker { position: relative; display: flex; flex-direction: column; gap: .3rem; }
.picker input[type="search"] { padding: .55rem .75rem; font-size: 1rem; border: 2px solid var(--border, #c9ced6); border-radius: var(--radius, 6px); }
.picker input[type="search"]:focus { outline: none; border-color: var(--accent, #2f6fdf); }
.picker-chip { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem;
  border: 2px solid var(--accent, #2f6fdf); border-radius: var(--radius, 6px); background: var(--accent-soft, #eef4ff); }
.picker-chip[hidden], .picker input[hidden] { display: none; }
.picker-chip__x { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.picker-options { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border, #c9ced6); border-radius: var(--radius, 6px);
  max-height: 18rem; overflow-y: auto; background: var(--card-bg, #fff); }
.picker-option { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left;
  padding: .5rem .75rem; border: 0; border-bottom: 1px solid var(--border, #eee); background: none; cursor: pointer; }
.picker-option:hover, .picker-option:focus { background: var(--accent-soft, #eef4ff); outline: none; }
.picker-hint { margin: .25rem 0 0; }
.field-error { color: var(--danger, #b3261e); }
.picker-chips { display: flex; flex-direction: column; gap: .35rem; }
.picker-chips:empty { display: none; }
.picker-checklist { display: flex; flex-direction: column; gap: .3rem; max-height: 16rem; overflow-y: auto; padding: .5rem .75rem;
  border: 1px solid var(--border, #c9ced6); border-radius: var(--radius, 6px); }
.picker-checklist label { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.picker-checklist__all { border-bottom: 1px solid var(--border, #eee); padding-bottom: .3rem; font-weight: 600 !important; }
.picker-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .75rem 1rem; margin-bottom: .75rem; }

/* Network Devices: the selected device's facts */
.network-device-facts { display: grid; gap: .45rem; margin: 1rem 0; }
.network-device-facts div { display: grid; grid-template-columns: 13rem 1fr; gap: .5rem; }
.network-device-facts dt { color: var(--muted, #6b7280); }
.network-device-facts dd { margin: 0; font-weight: 600; }
@media (max-width: 600px) { .network-device-facts div { grid-template-columns: 1fr; gap: 0; } }

/* Read history strip */
.read-history { margin-top: .75rem; }
.read-history__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.read-history__head .card-title { margin: 0; }
.read-history__summary { font-weight: 600; }
.read-history__range { display: flex; gap: .35rem; margin-left: auto; }
.read-history__chart { display: flex; flex-direction: column; gap: .4rem; }
.read-history__lane { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.read-history__label { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.read-history__label small { color: var(--muted, #6b7280); overflow-wrap: anywhere; }
.read-history__track { position: relative; height: 1.1rem; border-radius: 4px; background: var(--chip-bg, #eef1f5); overflow: hidden; }
.read-history__track--marks { background: transparent; border-bottom: 1px dashed var(--border, #d1d5db); border-radius: 0; overflow: visible; }
.read-history__track--axis { height: 1rem; background: transparent; overflow: visible; }
.read-history__track--axis span { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--muted, #6b7280); white-space: nowrap; }
.read-history__bar { position: absolute; top: 0; bottom: 0; }
.read-history__bar--ok { background: #22a06b; }
.read-history__bar--poor { background: #e2b203; }
.read-history__bar--silent { background: #d93f3f; }
.read-history__mark { position: absolute; top: .1rem; width: .6rem; height: .6rem; margin-left: -.3rem; border-radius: 50%; border: 2px solid var(--card-bg, #fff); }
.read-history__mark--order { background: #2563eb; }
.read-history__mark--outage { background: #7c3aed; }
.read-history__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .75rem; font-size: .8rem; color: var(--muted, #6b7280); }
.read-history__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.read-history__legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
.read-history__legend i[class*="mark"] { border-radius: 50%; }
@media (max-width: 640px) {
  .read-history__lane { grid-template-columns: 1fr; gap: .2rem; }
  .read-history__range { margin-left: 0; }
}

/* Combined diagnosis */
.combined-badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; margin-right: .35rem; }
.combined-badge--led { background: #e0ecff; color: #1e429f; }

/* Full Case Generator */
.full-case__body { display: grid; gap: 1rem; }
.full-case__fields { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin-bottom: 1rem; }
.full-case__fields label { display: grid; gap: .25rem; min-width: 12rem; }
.full-case__fields label.full-case__gpt { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.full-case__fields label.full-case__notes { flex: 1; min-width: 16rem; }
.cross-source-findings { margin: .4rem 0; padding: .45rem .65rem; border-left: 3px solid #d97706; background: rgba(217,119,6,.07); border-radius: 4px; }
.cross-source-findings ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.cross-source-findings li { margin-bottom: .2rem; }
.case-target-x { color: #000; font-weight: 900; font-size: 22px; line-height: 1; pointer-events: none; text-shadow: 0 0 1px #fff; }
.full-case__bank { background: #fff; color: #1f2937; border: 1px solid #1f2937; border-radius: 4px; padding: 1px 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.full-case__step { border: 1px solid var(--border, #d1d5db); border-radius: 8px; padding: .75rem 1rem .25rem; margin: 0 0 1rem; min-width: 0; }
.full-case__step legend { font-weight: 700; padding: 0 .35rem; }
.full-case__step legend .text-muted { font-weight: 400; }
.full-case__combined { padding: .85rem 1rem; border-radius: 8px; border: 1px solid var(--border, #d1d5db); border-left-width: 6px; }
.full-case__combined--topology { border-left-color: #2f6fed; }
.full-case__combined--timeline { border-left-color: #22a06b; }
.full-case__combined--service_point { border-left-color: #e2b203; }
.full-case__combined .combined-badge { vertical-align: middle; }
.full-case__parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.full-case__parts .item-summary-card .summary-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
.full-case__parts h4 { margin-top: 0; }
.full-case__map { height: 380px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #d1d5db); margin-bottom: .5rem; }
.full-case__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--muted, #6b7280); margin-bottom: .5rem; }
.full-case__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.full-case__legend i { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; }
.full-case__legend i.full-case__focal { background: none; border: none; width: auto; height: auto; font-style: normal; font-weight: 900; color: #000; line-height: 1; }
.full-case__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .35rem 1rem; margin: .75rem 0; font-size: .85rem; }
.full-case__facts div { display: flex; flex-direction: column; }
.full-case__facts dt { color: var(--muted, #6b7280); }
.full-case__facts dd { margin: 0; font-weight: 600; }
.full-case__truth { margin: .25rem 0 .5rem 1.1rem; }

.full-case__action { padding: .85rem 1rem; border-radius: 8px; border: 1px solid var(--border, #d1d5db); border-left-width: 6px; display: grid; gap: .25rem; }
.full-case__action--required { border-left-color: #d93f3f; }
.full-case__action--wait { border-left-color: #e2b203; }
.full-case__action--none { border-left-color: #22a06b; }
.full-case__action--review { border-left-color: #6b7280; }
.full-case__action-head { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }


.choice-or-new { display: flex; flex-direction: column; gap: .3rem; }
.choice-or-new select { max-width: 100%; }
/* The event and effect for "Caused by an Event" / "Correlates to a Prior Event" (partials/event_effect_fields.html). */
.event-effect { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; grid-column: 1 / -1; }
.event-effect[hidden] { display: none; }

/* Development → Diagnosis Model Training */
.case-gen-nav { margin: .6rem 0 1rem; }
/* The Generator / Saved examples bar: the settings sub-menu look, but it scrolls with the page. */
.settings-nav.case-gen-nav__pages { position: static; padding: .3rem .5rem; }
.settings-nav.case-gen-nav__pages .btn { padding: .3rem .7rem; font-size: .9rem; }

/* A generated case's comm-loss events (partials/comm_loss_chain.html) */
.comm-loss-chain { margin: .5rem 0; }
.comm-loss-chain ol { display: flex; flex-wrap: wrap; gap: .25rem .75rem; list-style: none; margin: .25rem 0 0; padding: 0; }
.comm-loss-chain li { font-size: .85rem; }
.comm-loss-chain li:not(:last-child)::after { content: " →"; color: var(--muted, #6b7280); }
.comm-loss-chain li.is-current strong { text-decoration: underline; }

/* Maps: one look (map_style.js) */
.ami-map-target { color: #000; font-weight: 900; font-size: 22px; line-height: 1; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.ami-map-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--muted, #6b7280); margin: .4rem 0 .5rem; }
.ami-map-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ami-map-legend i { display: inline-block; font-style: normal; }
.ami-map-legend--overlay { margin: 0 0 .5rem .5rem; padding: .3rem .55rem; max-width: calc(100% - 1rem); background: rgba(255,255,255,.92);
  color: #374151; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.18); font-size: .75rem; gap: .25rem .75rem; }
.ami-map-legend__dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--swatch, #6b7280); }
.ami-map-legend__square { width: .7rem; height: .7rem; border-radius: 1px; background: var(--swatch, #9ca3af); }
.ami-map-legend__triangle { width: 0; height: 0; border-left: .42rem solid transparent; border-right: .42rem solid transparent; border-bottom: .75rem solid var(--swatch, #0f766e); }
.ami-map-legend__asterisk::before { content: "✱"; color: var(--swatch, #2d8f5b); font-size: 1.05rem; line-height: 1; font-weight: 900; -webkit-text-stroke: .7px var(--swatch, #2d8f5b); }
.ami-map-legend__diamond { width: .6rem; height: .6rem; margin: 0 .1rem; transform: rotate(45deg); background: var(--swatch, #2d8f5b); }
.ami-map-legend__target::before { content: "✕"; color: #000; font-weight: 900; font-size: .9rem; line-height: 1; }
.gis-pin__asterisk { color: #2d8f5b; font-size: 32px; line-height: 1; font-weight: 900; -webkit-text-stroke: 2px #2d8f5b; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.gis-legend-target { position: relative; }
.gis-legend-target::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #000; font-size: .6rem; font-weight: 900; }

/* Cases: My Work, the case page, the Supervisor view. */
.cases-page { display: grid; gap: 1rem; }
.cases-messages { display: grid; gap: .5rem; margin-bottom: 1rem; }
/* My Work: the Next case button sits in the counts row, as its last box. */
.cases-next__button { font-size: 1.25rem; padding: .62em .83em; }  /* a .btn's proportions (.45rem .75rem at .9rem), at a larger size */
.my-case { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem;
  border: 1px solid var(--control-border); border-radius: 12px; }
.my-case__head { display: flex; flex-direction: column; gap: .2rem; }
.my-case__id { font-size: 1.3rem; }
.my-case__continue { min-height: 48px; display: inline-flex; align-items: center; }
.my-case__note { margin: .6rem 0 0; }
.my-case--empty { flex-direction: column; justify-content: center; text-align: center; padding: 2rem 1rem; border-style: dashed; }
.my-case--empty p { margin: 0; color: var(--muted); }
.case-locked { margin: .5rem 0 .75rem; }
@media (max-width: 640px) { .cases-next__button, .my-case__continue { width: 100%; min-width: 0; justify-content: center; } }
/* The case page: the case card down the left (details, then its actions), the rest to its right. */
.case-layout { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
.case-main { display: grid; gap: 1rem; min-width: 0; }
.case-main > .card { margin: 0; }
.case-side { position: sticky; top: 0; max-height: calc(100vh - 7rem); overflow-y: auto; margin: 0; }
.case-head { display: grid; gap: 1rem; }
.case-head .case-actions { padding-top: 1rem; border-top: 1px solid var(--border); }
.case-head__reason { font-size: 1.05rem; margin: .25rem 0; }
.case-actions { display: grid; gap: .75rem; }
.case-actions form { display: grid; gap: .35rem; }
.case-actions label, .case-inline-form { display: grid; gap: .25rem; font-size: .85rem; }
.case-actions input, .case-inline-form input, .case-inline-form select { min-height: 38px; padding: .4rem .6rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--control-bg); color: var(--control-text); font: inherit; }
.case-inline-form { grid-auto-flow: column; justify-content: start; align-items: center; margin-top: .35rem; }
.case-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.case-map { height: 320px; border-radius: 10px; overflow: hidden; margin-bottom: .25rem; }
@media (max-width: 900px) { .case-layout { grid-template-columns: 1fr; } .case-side { position: static; max-height: none; } .case-inline-form { grid-auto-flow: row; } }
.cases-page .ami-grid td { vertical-align: top; }
.cases-page .ami-grid td small { display: block; margin-top: .2rem; color: var(--muted); }

/* Case items: like the other tables (same header, stripes, hover), with roomier rows; a row opens its item. */
.case-items-wrap { border: 1px solid var(--table-border); border-radius: 10px; overflow: auto; }
.case-items { width: 100%; border-collapse: collapse; font-size: .95rem; }
.case-items thead th { background: var(--table-header-bg); color: var(--table-header-text); border-bottom: 1px solid var(--table-border);
  padding: .7rem 1rem; font-weight: 600; text-align: left; white-space: nowrap; }
.case-items tbody td { padding: .85rem 1rem; border-top: 1px solid var(--table-border); vertical-align: middle; color: var(--text); }
.case-items tbody tr:nth-child(even) > td { background: var(--table-zebra); }
.case-items tbody tr[data-row-href] { cursor: pointer; }
.case-items tbody tr[data-row-href]:hover > td, .case-items tbody tr[data-row-href]:focus-visible > td { background: var(--table-hover-bg); }
.case-items tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.case-items tbody tr.is-resolved > td { color: var(--muted); }
.case-items td small { display: block; margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.case-items td a { color: inherit; text-decoration: none; }
.case-pill { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; vertical-align: middle; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--text); }
.case-pill--incident { background: color-mix(in srgb, #d84d57 18%, transparent); }
.case-pill--event { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.case-pill--new { background: color-mix(in srgb, #e3a008 28%, transparent); }
.case-pill--open { margin-left: 0; background: color-mix(in srgb, #d84d57 16%, transparent); }
.case-pill--resolved { margin-left: 0; background: color-mix(in srgb, #2d8f5b 18%, transparent); }
.case-pill--action { margin-left: 0; background: color-mix(in srgb, #2d8f5b 18%, transparent); }
.case-pill--review { margin-left: 0; background: color-mix(in srgb, #d97706 22%, transparent); }
.case-pill--noaction { margin-left: 0; background: color-mix(in srgb, #6b7280 18%, transparent); }
.case-action-cell { width: 1%; max-width: 9rem; white-space: nowrap; font-size: .8rem; }
.case-action-cell small { display: block; color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.case-action-cell .case-inline-form { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.case-action-cell .case-inline-form select, .case-action-cell .case-inline-form input { max-width: 14rem; }

/* On an incident or event page opened from a case: the way back, kept in view while scrolling. */
.case-back-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  margin-bottom: .4rem; padding: .2rem .5rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 8px; font-size: .85rem; background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.case-back-bar .btn { padding: .2rem .55rem; font-size: .82rem; min-height: 0; line-height: 1.3; }
.case-back-bar span { color: var(--muted); font-size: .9rem; }

/* Which upstream device (Upstream Range Extender / Grid Router Down): a picker plus the devices on the path. */
.upstream-device { display: grid; gap: .4rem; min-width: 18rem; }
.upstream-device__path { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.upstream-device__path .test-data-label { width: 100%; }

/* Item pages (an event, incident, or premise on its own page): back / previous / next, then the summary. */
.comm-item-page { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.comm-item-page > * { min-width: 0; }
.item-summary-card .summary-columns { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }
/* The bar stays in view while scrolling, so it is slim: the way back, where you are, and compact previous / next. */
.item-nav-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  padding: .2rem .5rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 8px; font-size: .85rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.item-nav-bar .btn { padding: .2rem .55rem; font-size: .82rem; min-height: 0; line-height: 1.3; }
.item-nav-bar__back { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.item-nav-bar__crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.item-nav-bar__pos { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.item-nav-bar__steps { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.item-nav-context { margin: 0; font-size: .85rem; }
@media (max-width: 640px) { .item-nav-bar__word, .item-nav-bar__pos { display: none; } .item-nav-bar__back { max-width: 50%; } }
.item-nav-bar a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.item-summary-card .summary-columns { margin-bottom: .25rem; }
.item-summary-card__sub { margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* A table whose rows open item pages: the whole row is the link. */
[data-row-link] tbody tr[role="link"] { cursor: pointer; }
[data-row-link] tbody tr[role="link"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Tables whose rows open item pages (Comm Loss Events / Incidents, Service Points Performance) look like the
   case items table on My Work: roomier rows, larger text, the same header, stripes and hover, a rounded
   frame. With the map and details on the item pages, the table can fill the screen. */
#main-panel [data-row-link] .dataTables_scroll {
  border: 1px solid var(--table-border); border-radius: 10px; overflow: hidden;
}
#main-panel [data-row-link] .dataTables_wrapper .dataTables_scrollHead,
#main-panel [data-row-link] .dataTables_wrapper .dataTables_scrollBody { padding-left: 0; padding-right: 0; }
#main-panel [data-row-link] .dataTables_wrapper .dataTables_scrollBody {
  max-height: max(24rem, calc(100vh - 17rem)) !important;
}
#main-panel [data-row-link] table.dataTable thead th,
#main-panel [data-row-link] table.dataTable thead td {
  padding: .7rem 1rem; font-size: .95rem; font-weight: 600;
  background: var(--table-header-bg); color: var(--table-header-text); border-bottom: 1px solid var(--table-border);
}
#main-panel [data-row-link] table.dataTable tbody td {
  padding: .85rem 1rem; font-size: .95rem; vertical-align: middle; border-top: 1px solid var(--table-border);
}
#main-panel [data-row-link] table.dataTable tbody tr:nth-child(even):not(.selected):not(.custom-selected) > td { background: var(--table-zebra); }
#main-panel [data-row-link] table.dataTable tbody tr[role="link"]:hover > td,
#main-panel [data-row-link] table.dataTable tbody tr[role="link"]:focus-visible > td { background: var(--table-hover-bg) !important; }

/* Diagnosis and Action: one padded block per part, a small heading, the answer, then its supporting detail. */
/* The diagnosis cards share their row: however many there are, they divide its width (and wrap, still full width, when narrow);
   the decision panel takes a row of its own. */
.dx-summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.dx-summary > .dx-block { flex: 1 1 18rem; min-width: 0; }
.dx-summary > .dx-decision { flex: 1 1 100%; }
.dx-block { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); line-height: 1.45; }
.dx-block--action { border-left: 4px solid var(--primary); }
.dx-actions-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .75rem; }
.dx-label { margin-bottom: .35rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.dx-value { font-size: 1rem; font-weight: 600; }
.dx-value small { font-weight: 400; }
.dx-value--empty { color: var(--muted); font-weight: 400; }
.dx-meta { margin-top: .4rem; color: var(--muted); font-size: .88rem; }
.dx-meta .text-muted, .dx-meta div { margin-top: .2rem; }
.dx-block .combined-badge { margin-right: .35rem; vertical-align: 1px; }

/* Ghost Meters → View Map: the likely replaced meters, numbered in ranking order (1 = likeliest). */
.ghost-rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px;
  border-radius: 50%; border: 2px solid #fff; background: var(--rank-color, #d84d57); color: #fff; font-weight: 800;
  font-size: .8rem; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.ghost-rank--first { width: 30px; height: 30px; font-size: .95rem; }
.gis-map-legend i.ghost-legend-rank { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: #d84d57; color: #fff; font-style: normal; font-size: .65rem; font-weight: 800; }
.ghost-candidates { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .6rem; }
.ghost-candidate { display: flex; gap: .6rem; align-items: flex-start; }
.ghost-candidate .ghost-rank { background: #d84d57; }
.ghost-candidate small { display: block; color: var(--text-muted, #6b7280); }

/* Data Loads: one collapsible block per load run. */
.data-load-runs { display: grid; gap: .6rem; margin-top: .75rem; }
.data-load-run { border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.data-load-run > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; }
.data-load-run[open] > summary { border-bottom: 1px solid var(--border); }
.data-load-run > .callout, .data-load-run > .case-items-wrap { margin: .75rem .9rem; }
.data-load-skipped { color: #b45309; }
/* Settings → Daily Loads & Exports: the daily run (run now, schedule). */
.daily-run-card { margin-bottom: 1rem; }
.daily-run { display: grid; gap: 1rem; }
.daily-run__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.daily-run__now, .daily-run__schedule { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.daily-run__schedule { padding-top: 1rem; border-top: 1px solid var(--border); }
.daily-run__schedule input[type="text"] { width: 12rem; }
.daily-tabs > .case-tabs { margin-bottom: 1rem; }
.data-load-analysis { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .75rem .9rem 0; }
.data-load-analysis dt { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.data-load-analysis dd { margin: .15rem 0 0; }
/* Supervisor: escalations waiting stand out. */
.case-escalations { border-left: 4px solid #d97706; }

/* Data tables draw one frame, like the case items table: the box around the header and rows. The app's
   .table-wrapper and DataTables' own wrapper add no border, padding or background of their own (they used to,
   which stacked two or three borders around every data table). */
.table-wrapper:has(.dataTables_wrapper) {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.table-wrapper .dataTables_wrapper,
#event-table_wrapper,
#sp-table_wrapper {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.table-wrapper .dataTables_scroll {
  border: 1px solid var(--table-border);
  border-radius: 10px;
  overflow: hidden;
}
.table-wrapper .dataTables_scrollHead,
.table-wrapper .dataTables_scrollBody {
  padding-left: 0;
  padding-right: 0;
}

/* Data tables keep their controls (column choice, search, filters, paging) but in the clean look of the simple
   tables and the app's own search fields: the same rounded inputs and quiet secondary buttons, muted labels. */
.table-wrapper .table-controls { align-items: center; gap: .6rem; margin-bottom: .6rem; }
#main-panel .table-wrapper button.buttons-colvis,
#main-panel .table-wrapper .dataTables_wrapper .dt-buttons .dt-button {
  min-height: 38px; padding: .4rem .8rem; border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); color: var(--text); font-size: .88rem; font-weight: 600; box-shadow: none;
}
#main-panel .table-wrapper button.buttons-colvis:hover,
#main-panel .table-wrapper .dataTables_wrapper .dt-buttons .dt-button:hover { background: var(--table-hover-bg); }
.table-wrapper .dataTables_wrapper .dt-buttons { margin-bottom: 0; }
.table-wrapper .dataTables_filter.table-search-box label { color: var(--muted); font-size: .8rem; font-weight: 750; }
.table-wrapper .dataTables_filter.table-search-box input {
  min-height: 40px; border: 1px solid var(--control-border); border-radius: 9px; background: var(--control-bg);
}
.table-wrapper .table-common-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.table-wrapper .table-common-filters__title { color: var(--muted); font-size: .8rem; font-weight: 750; }
.table-wrapper .table-common-filters__input {
  min-height: 38px; padding: .4rem .65rem; border: 1px solid var(--control-border); border-radius: 8px;
  background: var(--control-bg); color: var(--control-text, var(--text)); font: inherit; font-size: .9rem;
}
.table-wrapper .table-common-filters .btn {
  min-height: 38px; padding: .4rem .8rem; border: 1px solid var(--control-border); border-radius: 8px;
  background: transparent; color: var(--text); font-size: .88rem; font-weight: 600; box-shadow: none;
}
.table-wrapper .table-common-filters .btn:hover { background: var(--table-hover-bg); }
.table-wrapper .table-controls-bottom { margin-top: .6rem; align-items: center; }
.table-wrapper .dataTables_info { color: var(--muted); font-size: .88rem; }
.table-wrapper .dataTables_paginate .paginate_button {
  min-width: 2.2rem; padding: .35rem .7rem; border: 1px solid transparent; border-radius: 8px; box-shadow: none;
}
.table-wrapper .dataTables_paginate .paginate_button.disabled { color: var(--muted); }
.case-nav-bar { margin-bottom: 1rem; }
/* A long simple table in its own scroll box (Ghost Meters, GIS Diagnostics), the header kept in view. */
.case-items-wrap--scroll { max-height: 36rem; }
.case-items-wrap--scroll .case-items thead th { position: sticky; top: 0; z-index: 2; }
.case-items-wrap--scroll .case-items tbody td { vertical-align: top; }
/* Item pages: an action row (e.g. Edit Meter), a pop-up's title row, and the read history card. */
.item-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.item-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.item-read-history { margin-bottom: 1rem; }
.security-check--unchecked { border-left-color: #8a94a6; }
.security-check--informational { border-left-color: #6b8fc7; }

/* Ghost map → Before changing a record → Request Investigation Order. */
.ghost-investigate { display: grid; gap: .5rem; margin-top: .6rem; }
.ghost-investigate label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 600; }
.ghost-investigate select, .ghost-investigate textarea { width: 100%; font: inherit; font-weight: 400; }
.ghost-investigate .btn { width: fit-content; margin-left: auto; }
.ghost-investigate__status:empty { display: none; }
.ghost-investigate__status, .ghost-investigate__done { margin: 0; font-size: .85rem; }

/* A Settings tab swapped straight into the main panel (a flex column): its cards keep their height and the
   panel scrolls, rather than each card being squeezed to fit the window. */
#main-panel > .settings-card { flex-shrink: 0; }

/* Form controls: a dropdown is the same size as a text box (height, text size, border), wherever a page doesn't
   style its own. Zero specificity (:where), so a page's own control rules still win. */
:where(#main-panel, dialog) :where(
  select:not([multiple]):not([size]),
  input:is([type="text"], [type="search"], [type="number"], [type="date"], [type="time"], [type="datetime-local"],
           [type="email"], [type="tel"], [type="password"], [type="url"], :not([type]))
) {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background-color: var(--control-bg);
  color: var(--control-text);
  font: inherit;
  font-size: 1rem;
}
/* A dense table of controls (the case generators' rows): smaller, but its dropdowns still match its text boxes. */
:where(.mini-table) :where(select, input:not([type="checkbox"]):not([type="radio"])) {
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.9rem;
}
/* A little more room above and below the text in every dropdown, and in the text boxes beside them so the two
   stay the same height (compact table controls and dense control tables keep their own spacing). */
:is(#main-panel, dialog) :is(
  select:not([multiple]):not([size]),
  input:is([type="text"], [type="search"], [type="number"], [type="date"], [type="time"], [type="datetime-local"],
           [type="email"], [type="tel"], [type="password"], [type="url"], :not([type]))
):not(.mini-table *):not(.table-controls *):not(.dataTables_wrapper *) {
  min-height: 2.75rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Settings → Daily Loads & Exports: Input Mapping (a pop-up). */
.daily-run__inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.input-map-file { margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid var(--control-border); border-radius: 10px; }
.input-map-file__head { display: flex; align-items: center; gap: 0.6rem; }
.input-map-file__head h4 { margin: 0; }
.input-map-file > p { margin: 0.3rem 0 0.6rem; }
.input-map-file__name { display: grid; gap: 0.3rem; max-width: 32rem; margin: 0 0 0.75rem; font-size: 0.85rem; font-weight: 650; }
.input-map-columns td small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.input-map-columns td:last-child { width: 40%; }
.input-map-columns input { width: 100%; }
.input-map-level { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; background: var(--chip-bg, #eef1f5); color: var(--muted); }
.input-map-level--required { background: color-mix(in srgb, #c73741 14%, transparent); color: #b02a35; }
.input-map-level--recommended { background: color-mix(in srgb, #c1810c 16%, transparent); color: #8a5b06; }
.input-map-save { margin-top: 1rem; }

/* The Create pop-up's confirmation, at the top of the table page once something's made. */
.create-confirmation { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; padding: 0.7rem 1rem;
  border-left: 4px solid #18864b; border-radius: 10px; background: color-mix(in srgb, #18864b 10%, var(--control-bg, #fff)); }
.create-confirmation span { flex: 1; }
.create-confirmation a { font-weight: 650; white-space: nowrap; }
.create-confirmation__close { border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.create-dialog .card-title { margin: 0; }
#create-dialog-body .incident-summary-card--full { box-sizing: border-box; }  /* width 100% plus its padding overran the pop-up */

/* Admin → Users & Access. */
.admin-users .case-items td small { display: block; color: var(--muted); font-size: 0.8rem; }
.user-extra { display: inline-block; margin: 0 0.3rem 0.3rem 0; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem;
  background: var(--chip-bg, #eef1f5); }
.admin-access-form h4 { margin: 1rem 0 0.5rem; }
.admin-role-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.admin-role { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.8rem; border: 1px solid var(--control-border); border-radius: 10px; cursor: pointer; }
.admin-role small { display: block; color: var(--muted); font-size: 0.82rem; }
.admin-role:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.admin-permissions td small { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.admin-permissions__role { text-align: center; color: var(--muted); }
.admin-permissions th:not(:first-child) { text-align: center; }
.admin-active { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.admin-access-save { margin-top: 0.75rem; }
.no-access { max-width: 40rem; margin: 15vh auto; padding: 0 16px; }
/* The create card's inputs are full width; its radios and checkboxes shouldn't be. */
.admin-access-form :is(input[type="radio"], input[type="checkbox"]) { width: auto; flex: none; margin-top: 0.2rem; }
.admin-permissions td:nth-last-child(2) { text-align: center; }

/* Supervisor: Assigned / Queue tabs in the card's head. */
.case-tabs { margin: 0; border-bottom: 0; }
.metrics-window { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
/* Supervisor's inline Assign / Reassign / Back to queue buttons: the same height as the Operator dropdown beside them. */
.case-inline-form .btn { min-height: 2.75rem; }

/* Admin → Simulator: forms like the create cards (stacked labels, fields in a row, full-width buttons). */
.simulator-page form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.simulator-page .simulator-fields {
  display: grid;
  /* At most two fields to a line (one on a narrow window), with room for what each one does. */
  grid-template-columns: repeat(auto-fit, minmax(max(18rem, calc((100% - 1.5rem) / 2)), 1fr));
  gap: 1.25rem 1.5rem;
  align-items: start;
}

.simulator-page .sim-place {
  grid-column: 1 / -1;
}

.simulator-page .sim-place__row {
  display: flex;
  gap: 0.5rem;
}

.simulator-page .sim-place__row .form-control {
  flex: 1;
}

.simulator-page .sim-place__results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.simulator-page .sim-place__results button {
  width: 100%;
  text-align: left;
}

.simulator-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.simulator-page .form-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.simulator-page input,
.simulator-page select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0.55rem 0.65rem;
}

.simulator-page .btn-block {
  min-height: 2.25rem;
}

.simulator-page .simulator-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1rem;
}

.simulator-page .simulator-facts dt {
  color: var(--muted);
  font-weight: 600;
}

.simulator-page .simulator-facts dd {
  margin: 0;
}

.simulator-page .simulator-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem;
}

.simulator-page .simulator-grade {
  white-space: pre-wrap;
  font-size: 0.85rem;
  max-height: 28rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
}

/* Diagnosis Model Training: Generator / Saved examples / Rules as tabs (links: each is its own page). */
.security-tabs a { flex: 0 0 auto; padding: .7rem .85rem; border-radius: 9px 9px 0 0; color: var(--muted); font-weight: 700; text-decoration: none; }
.security-tabs a[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 11%, var(--card-bg)); color: var(--primary); box-shadow: inset 0 -3px var(--primary); }
.case-gen-tabs { flex: 0 0 auto; margin-top: .75rem; }  /* in the page's column: never squeezed to nothing */

/* Admin's group menus on a phone: the bar wraps, and a menu opens full width under the bar */
@media (max-width: 640px) {
  .main-nav__group--links { flex-wrap: wrap; row-gap: 0.4rem; }
  .nav-group { position: static; }
  .nav-group__menu { position: fixed; left: 16px; right: 16px; top: calc(var(--nav-h, 110px) + 0.25rem); width: auto; max-width: none; min-width: 0; }
}

/* GIS & Topology → Comm Loss Map */
.comm-loss-map-card { padding: 1rem 1.1rem; }
.comm-loss-map-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.comm-loss-map-head h3 { margin: 0 0 .25rem; }
.comm-loss-map-head p { margin: 0; max-width: 46rem; }
.comm-loss-map-stats { display: flex; gap: 1.25rem; font-size: .9rem; color: var(--muted); }
.comm-loss-map-stats strong { color: var(--text); font-size: 1.15rem; margin-right: .2rem; }
.comm-loss-map-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: .9rem 0 .6rem; font-size: .9rem; }
.comm-loss-map-controls label { display: inline-flex; gap: .4rem; align-items: center; color: var(--muted); }
.comm-loss-map-controls select { padding: .3rem .5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); }
.comm-loss-map-mode { margin: 0; }
.comm-loss-map-stage { position: relative; }
.comm-loss-map-canvas { height: min(72vh, 760px); min-height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.comm-loss-map-legend { margin-top: .5rem; }
.comm-loss-map-status { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); padding: .4rem .8rem; border-radius: 8px;
  background: rgba(255,255,255,.94); color: #1f2937; font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.comm-loss-map-status[hidden] { display: none; }
.clm-count { color: #fff; font-weight: 700; font-size: .8rem; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.clm-pocket-label { pointer-events: none; margin-top: 2.2rem; padding: .15rem .45rem; border-radius: 999px; background: rgba(255,255,255,.92);
  color: #1f2937; font-size: .72rem; box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; }
.clm-popup { font-size: .82rem; line-height: 1.45; color: #1f2937; }
.clm-popup span { color: #6b7280; }
.clm-popup a { display: inline-block; margin-top: .3rem; font-weight: 600; }
@media (max-width: 640px) { .comm-loss-map-canvas { height: 60vh; } }

.admin-roles-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.admin-permissions label { display: block; cursor: pointer; text-align: left; }
.item-summary-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.theme-section-title { margin: 1.25rem 0 .2rem; }
.theme-section-note { margin: 0 0 .6rem; }

/* Dashboard (partials/ami_hub.html) */
.dash { display: grid; gap: 1rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.dash-kpi { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg);
  color: var(--text); text-decoration: none; border-top: 4px solid var(--primary); }
.dash-kpi:hover { border-color: var(--primary); }
.dash-kpi span { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.dash-kpi strong { font-size: 1.6rem; line-height: 1.15; }
.dash-kpi small { color: var(--muted); font-size: .8rem; }
.dash-kpi--warn { border-top-color: #d99a00; }
.dash-kpi--bad { border-top-color: #d84d57; }
.dash-question { margin: .75rem 0 0; font-size: 1.05rem; }
/* Cards on one row are as tall as the tallest of them; a card keeps its own content at the top. */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: stretch; }
.dash-card { padding: 1rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.dash-card > header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.dash-card > header h3 { margin: 0; font-size: 1rem; }
.dash-card > header a { font-size: .85rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.dash-card > header a:hover { text-decoration: underline; }
.dash-card > p { margin: 0; font-size: .875rem; line-height: 1.4; }
.dash-sub { margin: .4rem 0 0; font-size: .8rem; color: var(--muted); font-weight: 700; }
.dash-empty { color: var(--muted); margin: 0; }
.dash-warn { color: #b45309; }
.dash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.dash-bars li { display: grid; grid-template-columns: 7rem 1fr auto; gap: .6rem; align-items: center; }
.dash-bars--wide li { grid-template-columns: 12rem 1fr auto; }
.dash-bars__name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bars__bar { height: .7rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); overflow: hidden; }
.dash-bars__bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.dash-bars__count { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.dash-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem 1rem; margin: 0; }
.dash-figures dt { font-size: .75rem; color: var(--muted); }
.dash-figures dd { margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 4rem; align-items: end; }
.dash-columns > span { height: 100%; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 3px; }
.dash-columns > span > span { display: block; width: 100%; min-height: 2px; background: var(--primary); border-radius: 3px; }
.dash-table td small { display: block; color: var(--muted); }
@media (max-width: 640px) {
  .dash-bars li, .dash-bars--wide li { grid-template-columns: 6.5rem 1fr auto; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi strong { font-size: 1.25rem; }
}
.hop-band { display: inline-block; margin-left: .25rem; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem;
  font-weight: 700; color: #fff; vertical-align: middle; }
.hop-band--excellent, .hop-band--healthy { background: #2d8f5b; }
.hop-band--deep { background: #6b7280; }
.hop-band--high { background: #d99a00; }
.hop-band--excessive { background: #d84d57; }
.router-history__bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3px, 14px); justify-content: start; gap: 2px; height: 5rem; align-items: end; margin-top: .5rem; }
.router-history__bars > span { height: 100%; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 2px; }
.router-history__bars > span > span { display: block; width: 100%; min-height: 2px; background: var(--primary); border-radius: 2px; }
.router-history__bars > span.is-below > span { background: #d84d57; }

/* Requests this app made that the utility hasn't picked up yet (Service Orders, Outages, Back Office Requests): shaded and tagged until the daily feed brings the utility's own record back. */
table.dataTable tbody tr:has(.awaiting-tag) > * { background: color-mix(in srgb, var(--accent, #2f6fb5) 12%, var(--card-bg, #fff)); }
.awaiting-tag { display: inline-block; padding: .05rem .45rem; margin-right: .35rem; border-radius: 999px; font-size: .7rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--accent, #2f6fb5); border: 1px solid var(--accent, #2f6fb5); background: var(--card-bg, #fff); }

/* Clear case with items still at No Action Taken: the warning before they are marked No Action Possible. */
.case-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .5); }
.case-modal__box { max-width: 32rem; width: 100%; padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--card-bg, #fff); color: var(--text, inherit); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.case-modal__box ul { margin: .5rem 0 1rem 1.2rem; }
.case-modal__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* A thin line inside a hamburger-menu group (hardware tracking below Ghost Meters). */
.hub-menu-separator { list-style: none; height: 1px; margin: .35rem .75rem; background: var(--border, rgba(127, 127, 127, .3)); }

/* Which environment this is, beside the menu button (not shown in Production). */
.env-badge { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; line-height: 1.4; color: #fff; white-space: nowrap; user-select: none; }
.env-badge--development { background: #2563eb; }
.env-badge--demo { background: #7c3aed; }
.env-badge--qa { background: #d97706; }

/* Home: shortcut cards under the search, and your case above them. */
.home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; }
.home-shortcut { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.home-shortcut:hover, .home-shortcut:focus-visible { border-color: var(--primary); }
.home-shortcut__title { font-weight: 800; font-size: 1.05rem; }
.home-shortcut small { color: var(--muted); }

/* Order and outage pages: the record leads (no premise timeline or diagnosis). */
.order-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: .25rem 0 1rem; padding: 0; }
.order-steps li { display: grid; gap: .15rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.order-steps span, .order-notes .summary-label { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.order-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.order-notes > div { display: grid; align-content: start; gap: .15rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.order-notes p { margin: 0; white-space: pre-wrap; }
/* The boxes on the order and outage pages match: the same 1px edge and corner as the order's step boxes. */
.comm-item-page--order .summary-item, .comm-item-page--outage .summary-item { border: 1px solid var(--border); border-radius: 8px; }
.order-others { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .3rem; }
.comm-item-page--order #event-detail-wrapper, .comm-item-page--outage #event-detail-wrapper { display: none !important; }  /* the scripts that open a row may un-hide it */

/* GIS Diagnostics: the Back button after a record page sent you there. */
.gis-back-bar { margin: 0 0 .75rem; }

/* Simulator: Pause, Advance to next day and Switch mode on one line. */
.simulator-page .simulator-controls { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.simulator-page .simulator-controls form { flex: 1 1 10rem; }

/* Simulator: related cards side by side (Re-run Analysis / Grade the App, Delete Simulated Utility / Restore Demo Baseline). */
.simulator-page .simulator-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--card-gap); align-items: stretch; }
.simulator-page .simulator-pair > .settings-card { margin-bottom: 0; height: 100%; }

/* Address catalog pager: the other tables' look (Showing x to y of z, Previous, numbers, Next). */
.address-pager { margin-top: .6rem; }
.address-pager .dataTables_paginate { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.address-pager .paginate_button { font: inherit; font-size: .88rem; background: transparent; color: var(--text); min-width: 2.2rem; padding: .35rem .7rem;
                                  border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-align: center; }
.address-pager button.paginate_button:hover { background: var(--table-hover-bg); }
.address-pager .paginate_button.current { background: var(--primary); color: #fff; border-color: var(--primary); cursor: default; }
.address-pager .paginate_button.disabled { color: var(--muted); cursor: default; }
.address-pager .ellipsis { padding: 0 .3rem; color: var(--muted); }

/* Restore Demo Baseline: the confirmation box and the button on one line, the button its normal size. */
.simulator-page .demo-restore__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.simulator-page .demo-restore__row .form-control { flex: 1 1 10rem; min-width: 0; }
.simulator-page .demo-restore__row .btn { flex: 0 0 auto; width: auto; }

/* Daily Loads: Run Load & Analysis, Re-run Analysis and the schedule on one line. */
.daily-run__schedule--inline { padding-top: 0; border-top: 0; }
.daily-run__rerun { margin-left: auto; }

/* Buttons are their normal size. One that sits on a line of its own (a form's Save, Clear case, Start) goes to the right of the
   line, whether its form is a block, a grid or a column; buttons laid out side by side in a row keep the row's own alignment. */
.btn-block { display: flex; width: fit-content; margin-left: auto; align-self: flex-end; justify-self: end; }
.simulator-controls .btn-block, .simulator-switches .btn-block { margin-left: 0; width: 100%; }
.work-mobile .btn-block { width: 100%; margin-left: 0; }

/* Delete User (inside Edit Access): the confirmation box and the button on one line, set apart from the access form. */
.admin-delete-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-delete-form .demo-restore__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.admin-delete-form .demo-restore__row .form-control { flex: 1 1 10rem; min-width: 0; }

/* Every button its normal size. A button on a line of its own goes to the right of the area it is in: the form's final action
   (Save, Save Access, Save Mapping, Add, Create ...), a form's only button, and a lone button in a card. Buttons that share a line
   with fields or other buttons keep that line's layout. */
:is(.admin-access-form, .input-map-form, .form-grid, .case-actions form, .service-order-create-card form, .inline-form-column,
    .theme-form, .timezone-form, .test-data-form, .home-jump-form, .work-mobile__form) > :is(button.btn, a.btn):last-child,
:is(form, .card-body, .settings-card__body) > :is(button.btn, a.btn):only-child,
.settings-card__body > form > :is(button.btn, a.btn):last-child {
  display: flex; width: fit-content; margin-left: auto; align-self: flex-end; justify-self: end;
}
.work-mobile .btn { margin-left: 0; width: 100%; }  /* the phone work view keeps its own big buttons */
/* A group of form actions on its own line sits at the right of its area (a spread group keeps its two ends). */
.form-actions:not(.form-actions--spread), .incident-filter-actions { justify-content: flex-end; }
/* A form's closing button after block content (not after an input on the same line). */
form > :is(div, p, textarea, section, small, table, fieldset, ul, h4, label.form-group) + button.btn:last-child {
  display: flex; width: fit-content; margin-left: auto; align-self: flex-end; justify-self: end;
}

/* The card every map shows on a click (map_card.js). */
.map-card { font-size: .82rem; line-height: 1.45; color: #1f2937; }
.map-card > strong { display: block; margin-bottom: .15rem; font-size: .9rem; }
.map-card span { color: #6b7280; }
.map-card a { display: inline-block; margin-top: .35rem; font-weight: 600; }
.map-card--loading { color: #6b7280; }

/* The one decision panel on an event or incident: status, suggested outcome, evidence, next action. */
.dx-decision { grid-column: 1 / -1; display: grid; gap: .55rem; }
.dx-decision__status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dx-decision__outcome { font-size: 1rem; }
.dx-decision__part > strong { display: block; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .15rem; }
.dx-decision__evidence { margin: 0; padding-left: 1.1rem; }
.dx-decision__approval { margin: .2rem 0 0; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--border);
                         background: color-mix(in srgb, var(--primary) 5%, var(--card-bg)); font-size: .88rem; }

/* The investigation summary leads an event or incident page; the record's own fields sit below, expandable. */
.investigation-summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem 1.5rem; margin: 0; }
.investigation-summary__grid > div { min-width: 0; }
.investigation-summary__grid dt { font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.investigation-summary__grid dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.investigation-summary__next { grid-column: 1 / -1; }
.item-details > summary { cursor: pointer; padding: .4rem .2rem; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.item-details > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, #fff); outline-offset: 1px; }
.item-details[open] > summary { margin-bottom: .5rem; }

/* The Backoffice Request button: on its own line at the bottom of the summary card, at the right. */
.item-summary-card__actions { display: flex; justify-content: flex-end; margin-top: .75rem; }
.item-summary-card--nested { padding-top: .25rem; }
.investigation-summary .item-details { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .25rem; }

/* Expandable sections (Details) look like something to click: a bordered bar with a chevron and Show / Hide. */
.item-details > summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none;
  padding: .55rem .8rem; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card-bg)); color: var(--primary); font-weight: 600; }
.item-details > summary::-webkit-details-marker { display: none; }
.item-details > summary::before { content: "▸"; display: inline-block; font-size: 1.1em; line-height: 1; transition: transform .15s ease; }
.item-details[open] > summary::before { transform: rotate(90deg); }
.item-details > summary::after { content: "Show"; margin-left: auto; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); }
.item-details[open] > summary::after { content: "Hide"; }
.item-details > summary:hover { background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); border-color: var(--primary); }
.investigation-summary .item-details { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .item-details > summary::before { transition: none; } }
/* Slimmer: the Details bar is one compact line. */
.item-details > summary { padding: .2rem .6rem; min-height: 32px; font-size: .9rem; border-radius: 6px; }
.item-details > summary::after { font-size: .7rem; padding: 0 .45rem; }
.investigation-summary .item-details { margin-top: .5rem; }

/* Settings → Account → My preferences. */
.account-preferences { display: grid; gap: 1.1rem; }
.pref-section { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pref-section h5 { margin: 0; font-size: 1rem; }
.pref-choices { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; }
.pref-label { min-width: 8rem; color: var(--muted); font-weight: 600; font-size: .85rem; }
.pref-fields { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.pref-fields label { display: grid; gap: .2rem; font-size: .85rem; }
.pref-fields input, .pref-choices input[type="text"] { padding: .35rem .5rem; border: 1px solid var(--control-border); border-radius: 6px; background: var(--control-bg); color: var(--control-text); }
.pref-check { display: flex; align-items: center; gap: .5rem; }
.pref-preview { margin: 0; }
.pref-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* Settings → Account: grouped sections, a theme browser, short access summary, automatic saving. */
.settings-jump { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.settings-jump a { font-weight: 600; text-decoration: none; }
.settings-autosave { margin: 0; color: var(--muted); font-size: .9rem; }
.settings-group { display: grid; gap: .6rem; scroll-margin-top: 4rem; }
.settings-group__title { margin: 0; font-size: 1.05rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.account-access-grid--short { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pref-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.pref-head h4 { margin: 0; font-size: 1rem; }
.pref-status { min-height: 1.2rem; font-size: .85rem; }
.pref-saved { color: #18864b; font-weight: 700; animation: pref-fade 3.2s ease forwards; }
.pref-saved small { font-weight: 400; color: var(--muted); }
.pref-status__error { color: #b91c1c; }
.pref-status__note { color: var(--muted); }
.pref-saved-banner { text-align: right; }
@keyframes pref-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pref-saved { animation: none; } }
.theme-current { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.theme-current__swatch { display: inline-flex; gap: 2px; }
.theme-current__swatch .chip { width: 1.1rem; height: 1.1rem; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.theme-search { display: grid; gap: .25rem; margin-bottom: .75rem; }
.theme-search input { padding: .45rem .6rem; border: 1px solid var(--control-border); border-radius: 6px; background: var(--control-bg); color: var(--control-text); }
.theme-browser__grid { max-height: 60vh; overflow: auto; }

/* Compact rows, when the person chose them (Settings → Account → Table preferences). */
html[data-table-density="compact"] #main-panel .dataTable th,
html[data-table-density="compact"] #main-panel .dataTable td,
html[data-table-density="compact"] table.dataTable tbody th,
html[data-table-density="compact"] table.dataTable tbody td,
html[data-table-density="compact"] .case-items th,
html[data-table-density="compact"] .case-items td { padding-top: 0.2em; padding-bottom: 0.2em; padding-left: 0.45em; padding-right: 0.45em; }
html[data-table-density="compact"] .case-items td { line-height: 1.25; }
/* The section links of Settings → Account read as the app's own tabs, in the theme's colours. */
.settings-jump { gap: .4rem; padding: .35rem; border: 1px solid var(--border); border-radius: 10px; width: fit-content; max-width: 100%;
  background: color-mix(in srgb, var(--nav-bg) 6%, var(--card-bg)); }
.settings-jump a { padding: .3rem .75rem; border-radius: 8px; border: 1px solid transparent; color: var(--text); font-size: .9rem; }
.settings-jump a:hover { background: var(--table-hover-bg); color: var(--text); }
.settings-jump a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, #fff); outline-offset: 1px; }
.settings-jump a:target, .settings-jump a[aria-current="true"] { background: var(--primary); color: #fff; }
/* Settings → Account: the sections are tabs; one is shown at a time. */
.settings-tabs > [role="tabpanel"] { margin-top: .75rem; }
.settings-tabs > [role="tabpanel"][hidden] { display: none; }

.panel-title { color: var(--text); letter-spacing: .04em; }
.panel-toggle { margin-left: auto; }
/* The timeline's title is in its panel's grey header now. */
#event-detail-wrapper .sp-timeline-title { display: none; }

/* Ghost Meters: field orders and outages in their windows, with markers of their own (context). */
.ghost-work-list { margin-top: .4rem; font-size: .85rem; }
.ghost-work-key { display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; vertical-align: -1px; }
.ghost-work-key--order, .ghost-work-pin--order { background: #d97706; transform: rotate(45deg); border-radius: 2px; }
.ghost-work-key--outage, .ghost-work-pin--outage { width: 0; height: 0; background: none; border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-bottom: .75rem solid #7c3aed; }
.ghost-work-pin { display: block; width: .85rem; height: .85rem; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.ghost-work-pin--outage { border: 0; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-bottom: .9rem solid #7c3aed; box-shadow: none; width: 0; height: 0; }
/* Background Jobs: room between the counts and the table, and between the table's rows. */
.security-mini-metrics { margin-bottom: 1rem; }
[data-tab-panel="jobs"] .ami-grid th, [data-tab-panel="jobs"] .ami-grid td { padding-top: .6rem; padding-bottom: .6rem; }