/* Reference-matched Saptha management portal. Scoped to avoid legacy template collisions. */
:root {
  --ref-page: #eeedf5;
  --ref-shell: #fbfaff;
  --ref-surface: #ffffff;
  --ref-ink: #1e1f21;
  --ref-muted: #7d7d8d;
  --ref-border: #2b2e34;
  --ref-dark: #212225;
  --ref-dark-soft: #2d2e31;
  --ref-violet: var(--app-accent-mid-2);
  --ref-violet-2: var(--app-accent-mid);
  --ref-cyan: #20bfd4;
  --ref-green: #54c879;
  --ref-red: #ef716d;
  --ref-shadow: 0 20px 55px rgba(44, 46, 49, .09);
}

html,
body,
#root,
.container-scroller,
.page-body-wrapper,
.main-panel,
.content-wrapper {
  min-height: 100%;
}

body:has(.reference-dashboard) {
  margin: 0;
  background: var(--ref-page) !important;
  color: var(--ref-ink) !important;
  font-family: Manrope, "Segoe UI", Arial, sans-serif !important;
}

body:has(.reference-dashboard) .container-scroller,
body:has(.reference-dashboard) .page-body-wrapper,
body:has(.reference-dashboard) .main-panel,
body:has(.reference-dashboard) .content-wrapper {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.reference-dashboard,
.reference-dashboard * {
  box-sizing: border-box;
}

.reference-dashboard {
  min-height: 100vh;
  padding: 10px;
  background: radial-gradient(circle at 78% 0, rgba(239, 141, 92, .07), transparent 30%),
    var(--ref-page);
  color: var(--ref-ink);
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
}

.reference-dashboard button,
.reference-dashboard input,
.reference-dashboard select {
  font: inherit;
}

.reference-dashboard button {
  cursor: pointer;
}

.reference-dashboard button:focus-visible,
.reference-dashboard input:focus-visible,
.reference-dashboard select:focus-visible {
  outline: 3px solid rgba(238, 132, 79, .2);
  outline-offset: 2px;
}

.reference-shell {
  width: min(1500px, 100%);
  min-height: calc(100vh - 20px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 32px;
  padding: 24px 30px 28px;
  background: #1e2024;
  box-shadow: var(--ref-shadow);
}

.ref-header {
  min-height: 54px;
  display: grid;
  grid-template-columns: 225px minmax(480px, 1fr) 260px;
  align-items: center;
  gap: 18px;
}

.ref-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ref-brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
}

/* Long horizontal logo lockup for the top nav (wordmark already included). The
   double-class selector out-specifies the responsive `.ref-brand img` rules so
   the wide logo is never shrunk to the old 38–44px icon box. */
.ref-brand.ref-brand--long {
  gap: 0;
}

.ref-brand.ref-brand--long img {
  width: auto !important;
  height: 66px !important;
  max-width: 420px;
  flex: 0 0 auto !important;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .ref-brand.ref-brand--long img {
    height: 54px !important;
    max-width: 320px;
  }
}

@media (max-width: 900px) {
  .ref-brand.ref-brand--long img {
    height: 44px !important;
    max-width: 230px;
  }
}

.ref-brand span,
.ref-brand strong,
.ref-brand small {
  display: block;
}

.ref-brand strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
}

.ref-brand small {
  max-width: 180px;
  overflow: hidden;
  margin-top: 4px;
  color: var(--ref-muted);
  font-size: 9px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 4px;
  padding: 5px;
  border-radius: 24px;
  background: var(--ref-dark);
  box-shadow: 0 10px 30px rgba(28, 29, 30, .12);
}

.ref-navigation button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 19px;
  padding: 0 19px;
  color: #cbcbd5;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.ref-navigation button:hover {
  color: #fff;
}

.ref-navigation button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-mid), #eb7032);
  box-shadow: 0 7px 18px rgba(235, 110, 48, .42);
}

.ref-navigation .material-symbols-rounded {
  display: none;
  font-size: 17px;
}

.ref-header-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.ref-icon-button,
.ref-user {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  position: relative;
  border: 1px solid var(--ref-border);
  border-radius: 14px;
  color: #2e3033;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 16px rgba(46, 48, 51, .035);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.ref-icon-button:hover {
  transform: translateY(-1px);
  border-color: #2b2e34;
  color: var(--ref-violet);
}

.ref-icon-button .material-symbols-rounded {
  font-size: 20px;
}

.ref-icon-button.has-alert>i {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border: 2px solid white;
  border-radius: 50%;
  background: #ff4c4c;
  box-sizing: content-box;
}

.ref-user {
  border: 3px solid white;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #28292b, #ee8652);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(44, 45, 48, .18);
}

.ref-page-heading {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
}

.ref-page-title,
.ref-page-actions {
  display: flex;
  align-items: center;
}

.ref-page-title {
  min-width: 0;
  gap: 16px;
}

.ref-page-title>.ref-icon-button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 50%;
}

.ref-page-title h1 {
  margin: 0;
  color: var(--ref-ink);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.05px;
}

.ref-page-title p {
  margin: 5px 0 0;
  color: var(--ref-muted);
  font-size: 11px;
  font-weight: 500;
}

.ref-page-actions {
  gap: 10px;
}

.ref-sync-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ref-muted);
  font-size: 11px;
  white-space: nowrap;
}

.ref-sync-time i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ref-green);
  box-shadow: 0 0 0 4px rgba(84, 200, 121, .12);
}

.ref-primary-button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-mid), #eb7438);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(235, 116, 56, .2);
}

.ref-primary-button .material-symbols-rounded {
  font-size: 14px;
}

.ref-primary-button:disabled {
  cursor: wait;
  opacity: .75;
}

.ref-primary-button .material-symbols-rounded {
  font-size: 19px;
}

.reference-content {
  display: grid;
  gap: 12px;
}

.ref-metrics {
  display: grid;
  grid-template-columns: 1.02fr 1.08fr .94fr 1.28fr;
  gap: 12px;
}

.ref-metric-card {
  min-width: 0;
  height: 226px;
  min-height: 226px;
  overflow: hidden;
  position: relative;
  padding: 17px 20px 12px;
  border: 1px solid var(--ref-border);
  border-radius: 21px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 28px rgba(50, 52, 55, .025);
}

.ref-metric-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ref-metric-label>span {
  overflow: hidden;
  color: #2c2d30;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-metric-label>i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #1e2024;
  color: var(--ref-violet);
  font-style: normal;
}

.ref-metric-label>i.danger {
  color: var(--ref-red);
  background: #1e2024;
}

.ref-metric-label>i.cyan {
  color: var(--ref-cyan);
  background: #1e2024;
}

.ref-metric-label>i.success {
  color: var(--ref-green);
  background: #1e2024;
}

.ref-metric-label .material-symbols-rounded {
  font-size: 17px;
}

.ref-metric-value {
  margin-top: 8px;
  color: #232426;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

.ref-metric-value small {
  margin-left: 5px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.ref-metric-card>p {
  min-height: 16px;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 9px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-metric-card>p.danger::first-letter {
  color: var(--ref-red);
}

.ref-metric-visual {
  height: 92px;
  margin-top: 8px;
}

.ref-bar-chart {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
  padding-top: 6px;
}

.ref-bar-chart>span {
  height: 100%;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.ref-bar-chart i {
  width: 62%;
  min-height: 4px;
  display: block;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--app-accent-mid), #ec773c);
  box-shadow: 0 5px 10px rgba(237, 128, 73, .12);
}

.ref-bar-chart>span:nth-child(2n) i {
  background: linear-gradient(180deg, #23262b, var(--app-accent-mid));
}

.ref-bar-chart small {
  width: 100%;
  overflow: hidden;
  color: #a09dac;
  font-size: 8px;
  text-align: center;
  text-overflow: ellipsis;
}

.ref-line-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ref-line-chart .area {
  fill: url(#refLineArea);
  stroke: none;
}

.ref-line-chart polyline {
  fill: none;
  stroke: var(--ref-violet);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.ref-line-chart circle {
  fill: #fff;
  stroke: var(--ref-violet);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.ref-overdue-list,
.ref-engineer-capacity {
  height: 100%;
  display: grid;
  align-content: center;
  gap: 6px;
}

.ref-overdue-list>div:not(.ref-empty-visual) {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #1e2024;
}

.ref-overdue-list>div>span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ref-red);
  background: #1e2024;
}

.ref-overdue-list .material-symbols-rounded {
  font-size: 16px;
}

.ref-overdue-list p {
  min-width: 0;
  margin: 0;
}

.ref-overdue-list strong,
.ref-overdue-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-overdue-list strong {
  color: #2d2f32;
  font-size: 10px;
}

.ref-overdue-list small {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-overdue-list b {
  color: var(--ref-red);
  font-size: 10px;
}

.ref-engineer-capacity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  align-content: stretch;
}

.ref-engineer-capacity>div:not(.ref-empty-visual) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 13px;
  background: #1e2024;
  text-align: center;
}

.ref-engineer-capacity>div.active {
  color: var(--ref-ink);
  background: rgb(from var(--app-accent) r g b / .1);
  border: 1px solid rgb(from var(--app-accent) r g b / .42);
  box-shadow: none;
}

.ref-engineer-capacity>div>span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #2b2e34;
  border-radius: 50%;
  color: #fff;
  background: #2b2d30;
  font-size: 8px;
  font-weight: 800;
}

.ref-engineer-capacity strong,
.ref-engineer-capacity small {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-engineer-capacity strong {
  font-size: 8px;
}

.ref-engineer-capacity small {
  color: var(--ref-muted);
  font-size: 7px;
}

.ref-engineer-capacity>div.active small {
  color: var(--ref-muted);
}

.ref-engineer-capacity>div.active>span {
  border-color: rgb(from var(--app-accent) r g b /.5);
}

.ref-empty-visual {
  min-height: 100%;
  /* !important guards against container rules like `.list > div { display:grid }`
     that would otherwise force the icon/label/sub into overlapping grid cells. */
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  text-align: center;
  color: #a09dac;
}

.ref-empty-visual>i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: #b9b6c6;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid #2b2e34;
}

.ref-empty-visual>i .material-symbols-rounded {
  font-size: 20px;
}

.ref-empty-visual>span {
  font-size: 11px;
  font-weight: 600;
  color: #c7c4d2;
}

.ref-empty-visual>small {
  max-width: 30ch;
  font-size: 9px;
  line-height: 1.4;
  color: #8a8896;
}

/* legacy single-line callers (icon rendered directly, no <i> wrapper) */
.ref-empty-visual>.material-symbols-rounded {
  font-size: 17px;
}

.ref-filterbar {
  min-height: 54px;
  display: grid;
  grid-template-columns: max-content minmax(170px, .8fr) minmax(170px, .8fr) minmax(280px, 1.6fr);
  align-items: center;
  gap: 9px;
}

.ref-filterbar>strong {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.ref-filterbar>strong>span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ref-dark);
  font-size: 9px;
}

.ref-filterbar>label {
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  border: 1px solid var(--ref-border);
  border-radius: 20px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .73);
  color: var(--ref-muted);
}

.ref-filterbar>label>.material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 16px;
}

.ref-filterbar select,
.ref-filterbar input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: #696977;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 500;
}

.ref-filterbar select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  color-scheme: light;
}

.ref-filterbar select option {
  color: var(--ref-ink);
  background: #1e2024;
}

.ref-filterbar label>select+.material-symbols-rounded {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

.ref-filter-date span {
  overflow: hidden;
  color: #696977;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-filter-search .material-symbols-rounded {
  order: 2;
  color: #303134;
}

.ref-workspace {
  min-height: 368px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  border-radius: 28px;
  background: var(--ref-dark);
  box-shadow: 0 16px 32px rgba(36, 37, 40, .1);
}

.ref-workspace-header {
  min-height: 65px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.ref-workspace-header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 365px;
  height: 51px;
  transform: translateX(-50%);
  background: var(--ref-shell);
  clip-path: path("M0 0H365 C354 0 351 7 349 16 L346 34 C344 44 340 49 332 51 H33 C25 49 21 44 19 34 L16 16 C14 7 11 0 0 0Z");
}

.ref-workspace-header>div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ref-workspace-header h3 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.ref-workspace-header>div:first-child>span {
  color: #87899a;
  font-size: 9px;
}

.ref-workspace-header>div:last-child {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.ref-workspace-header .ref-icon-button {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-color: #3d3f42;
  border-radius: 50%;
  color: #c6c7d2;
  background: #292a2d;
}

.ref-workspace-header .ref-icon-button .material-symbols-rounded {
  font-size: 17px;
}

.ref-segmented-tabs {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 50%;
  width: 328px;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 22px;
  background: #1e2024;
  box-shadow: 0 5px 14px rgba(12, 13, 14, .12);
  transform: translateX(-50%);
}

.ref-segmented-tabs::before {
  content: none;
}

.ref-segmented-tabs button {
  min-width: 0;
  min-height: 33px;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 17px;
  padding: 0 8px;
  color: #5d5c69;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
}

.ref-segmented-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-mid), #eb753a);
  box-shadow: 0 6px 12px rgba(235, 113, 52, .26);
}

.ref-segmented-tabs button>span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #2b2e34;
  color: #2a2c2f;
  background: #1e2024;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ref-segmented-tabs button.active>span {
  border-color: #2b2e34;
  color: #3e4044;
  background: #1e2024;
}

.ref-workspace-body {
  min-height: 313px;
  display: grid;
  grid-template-columns: 34% 66%;
  padding: 0 14px 14px;
}

.ref-workspace-body>aside {
  min-width: 0;
  padding: 0 12px 0 2px;
}

.ref-request-list {
  display: grid;
  gap: 4px;
}

.ref-request-row {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 32px minmax(82px, 1fr) auto 58px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  padding: 6px 11px;
  color: #d6d7df;
  background: #292a2d;
  text-align: left;
  transition: transform .18s ease, background .18s ease;
}

.ref-request-row:hover {
  transform: translateX(2px);
  background: #343538;
}

.ref-request-row.active {
  color: var(--ref-ink);
  background: #25282e;
  box-shadow: inset 3px 0 0 var(--orange), 0 8px 20px rgba(0, 0, 0, .3);
}

.ref-request-row.active .ref-request-id strong {
  color: var(--orange);
}

.ref-request-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #46484c, #1a1b1d);
  font-size: 8px;
  font-weight: 800;
}

.ref-request-id {
  min-width: 0;
}

.ref-request-id strong,
.ref-request-id small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-request-id strong {
  font-size: 12px;
  font-weight: 650;
}

.ref-request-id small {
  margin-top: 2px;
  color: #9b9dac;
  font-size: 10px;
}

.ref-request-row.active .ref-request-id small {
  color: var(--ref-muted);
}

.ref-status {
  max-width: 76px;
  overflow: hidden;
  border-radius: 12px;
  padding: 5px 8px;
  color: #c4c5d1;
  background: #333538;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-status-complete {
  color: #34d399;
  background: rgba(52, 211, 153, .14);
}

.ref-status-cancelled {
  color: #ffb4ab;
  background: rgba(255, 180, 171, .13);
}

.ref-status-assigned,
.ref-status-accepted,
.ref-status-progress {
  color: var(--app-accent-soft);
  background: rgb(from var(--app-accent) r g b / .16);
}

.ref-status-confirmed {
  color: #79d1ff;
  background: rgba(121, 209, 255, .13);
}

.ref-request-row.active .ref-status {
  color: var(--ref-ink);
  background: rgba(255, 255, 255, .1);
}

.ref-request-row>b {
  overflow: hidden;
  color: #f5f5f8;
  font-size: 11px;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-request-detail {
  min-width: 0;
  min-height: 278px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(circle at 75% 0, rgba(255, 255, 255, .12), transparent 38%),
    linear-gradient(135deg, #ee834e, #e55c17);
}

.ref-request-detail>header {
  min-height: 73px;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 5px;
}

.ref-request-detail header>div {
  min-width: 0;
}

.ref-request-detail header span,
.ref-request-detail footer>span {
  color: #d9d4f6;
  font-size: 10px;
}

.ref-request-detail h2 {
  display: inline-block;
  max-width: calc(100% - 4px);
  overflow: hidden;
  margin: 5px 9px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.ref-request-detail header .ref-status {
  display: inline-block;
  color: #e5e1ff;
  background: rgba(65, 67, 71, .19);
}

.ref-detail-customer p {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 0;
}

.ref-detail-customer p>i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: #2c2d30;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.ref-detail-customer strong,
.ref-detail-customer small,
.ref-detail-company strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-detail-customer strong,
.ref-detail-company strong {
  font-size: 12px;
  font-weight: 600;
}

.ref-detail-customer small {
  margin-top: 3px;
  color: #d9d4f6;
  font-size: 8px;
  font-weight: 400;
}

.ref-detail-company strong {
  margin-top: 8px;
}

.ref-detail-tabs {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 22px;
}

.ref-detail-tabs button {
  height: 26px;
  border: 0;
  border-radius: 13px;
  padding: 0 11px;
  color: #d7d1f2;
  background: transparent;
  font-size: 9px;
  font-weight: 650;
}

.ref-detail-tabs button.active {
  color: #dc5816;
  background: #1e2024;
}

.ref-detail-body {
  min-height: 121px;
  flex: 1;
  padding: 7px 20px 10px;
}

.ref-detail-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ref-detail-items article {
  min-width: 0;
  min-height: 74px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  padding: 12px 28px 10px 12px;
  background: rgba(255, 255, 255, .09);
}

.ref-detail-items article>span {
  display: block;
  color: #dedaf5;
  font-size: 10px;
}

.ref-detail-items article>strong {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-detail-items article>.material-symbols-rounded {
  position: absolute;
  top: 11px;
  right: 10px;
  color: #e5e2f8;
  font-size: 15px;
}

.ref-progress-card i {
  height: 4px;
  display: block;
  overflow: hidden;
  margin-top: 9px;
  border-radius: 3px;
  background: rgba(59, 61, 64, .25);
}

.ref-progress-card em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #1e2024;
}

.ref-detail-description {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  padding: 0 4px;
}

.ref-detail-description span {
  color: #d9d4f6;
  font-size: 8px;
}

.ref-detail-description p {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-request-detail>footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 7px 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.ref-request-detail footer>span {
  min-width: 0;
}

.ref-request-detail footer>span>strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #fff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-request-detail footer button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  border: 0;
  border-radius: 18px;
  padding: 0 18px;
  color: #ba4a12;
  background: #1e2024;
  font-size: 9px;
  font-weight: 700;
}

.ref-request-detail footer button .material-symbols-rounded {
  font-size: 16px;
}

.ref-detail-timeline {
  display: grid;
  gap: 5px;
}

.ref-detail-timeline article {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
}

.ref-detail-timeline article>i {
  width: 7px;
  height: 7px;
  border: 2px solid #2b2e34;
  border-radius: 50%;
  background: #ea6d2f;
}

.ref-detail-timeline strong,
.ref-detail-timeline small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-detail-timeline strong {
  font-size: 9px;
}

.ref-detail-timeline small,
.ref-detail-timeline article>span {
  margin-top: 2px;
  color: #dedaf5;
  font-size: 8px;
}

.ref-assignee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ref-assignee-grid article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
}

.ref-assignee-grid article>span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: #2c2d30;
  font-size: 8px;
  font-weight: 800;
}

.ref-assignee-grid article>div {
  min-width: 0;
}

.ref-assignee-grid strong,
.ref-assignee-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-assignee-grid strong {
  font-size: 9px;
}

.ref-assignee-grid small {
  margin-top: 3px;
  color: #d9d4f6;
  font-size: 8px;
}

.ref-detail-empty,
.ref-workspace-empty,
.ref-panel-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #d8d4ef;
  font-size: 9px;
  text-align: center;
}

.ref-detail-empty .material-symbols-rounded {
  font-size: 25px;
}

.ref-detail-empty.standalone {
  border-radius: 23px;
  border: 1px solid #262628;
  color: var(--ref-muted);
  background: radial-gradient(circle at 82% -12%, rgb(from var(--app-accent) r g b /.1), transparent 55%), linear-gradient(160deg, #17181b 0%, #121214 100%);
}

.ref-detail-empty.standalone .material-symbols-rounded {
  color: var(--orange);
}

.ref-workspace-empty {
  min-height: 270px;
  color: #9294a5;
}

.ref-workspace-empty strong {
  color: #fff;
  font-size: 11px;
}

.ref-workspace-empty span {
  max-width: 220px;
  line-height: 1.5;
}

.ref-standalone-panel {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--ref-border);
  border-radius: 24px;
  background: var(--ref-surface);
}

.ref-standalone-panel>header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ref-border);
}

.ref-standalone-panel header span {
  color: var(--ref-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.ref-standalone-panel h2 {
  margin: 5px 0 0;
  font-size: 22px;
}

.ref-standalone-panel header>strong {
  border-radius: 18px;
  padding: 9px 13px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 11px;
}

.ref-activity-list,
.ref-engineer-grid,
.ref-customer-grid {
  display: grid;
  gap: 1px;
  padding: 8px 18px 18px;
  background: var(--ref-border);
}

.ref-activity-list article,
.ref-engineer-grid article,
.ref-customer-grid article {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  background: #1e2024;
}

.ref-activity-list article {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.ref-activity-list article>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-activity-list article>div {
  min-width: 0;
}

.ref-activity-list strong,
.ref-activity-list p {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-activity-list strong {
  font-size: 12px;
}

.ref-activity-list p,
.ref-activity-list small {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 10px;
}

.ref-engineer-grid,
.ref-customer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: #1e2024;
  padding: 18px;
}

.ref-engineer-grid article,
.ref-customer-grid article {
  grid-template-columns: 42px minmax(0, 1fr) 55px 70px;
  border: 1px solid var(--ref-border);
  border-radius: 15px;
}

.ref-engineer-grid article>span,
.ref-customer-grid article>span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2f3134, #ee8957);
  font-size: 10px;
  font-weight: 800;
}

.ref-engineer-grid article>div,
.ref-customer-grid article>div {
  min-width: 0;
}

.ref-engineer-grid article>div>strong,
.ref-customer-grid article>div>strong,
.ref-engineer-grid article>div>small,
.ref-customer-grid article>div>small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-engineer-grid article>div>strong,
.ref-customer-grid article>div>strong {
  font-size: 11px;
}

.ref-engineer-grid article>div>small,
.ref-customer-grid article>div>small {
  margin-top: 4px;
  color: var(--ref-muted);
  font-size: 9px;
}

.ref-engineer-grid article>p,
.ref-customer-grid article>p {
  margin: 0;
  text-align: center;
}

.ref-engineer-grid article>p>b,
.ref-customer-grid article>p>b,
.ref-engineer-grid article>p>small,
.ref-customer-grid article>p>small {
  display: block;
}

.ref-engineer-grid article>p>b,
.ref-customer-grid article>p>b {
  font-size: 14px;
}

.ref-engineer-grid article>p>small,
.ref-customer-grid article>p>small {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-customer-grid article {
  grid-template-columns: 42px minmax(0, 1fr) 60px 45px 34px;
}

.ref-customer-grid article>button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-customer-grid article>button .material-symbols-rounded {
  font-size: 17px;
}

.ref-panel-empty {
  min-height: 360px;
  color: var(--ref-muted);
}

.ref-panel-empty .material-symbols-rounded {
  color: var(--ref-violet);
  font-size: 36px;
}

.ref-map-workspace {
  min-height: 400px;
  display: grid;
  grid-template-columns: 34% 66%;
  overflow: hidden;
  border-radius: 28px;
  padding: 0 14px 14px;
  background: var(--ref-dark);
  box-shadow: 0 16px 32px rgba(36, 37, 40, .1);
}

.ref-map-workspace>aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 12px 0 4px;
  color: #fff;
  background: var(--ref-dark);
}

.ref-map-workspace>aside>header>span {
  color: #9294a5;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.ref-map-workspace>aside>header>h2 {
  margin: 7px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.4px;
}

.ref-map-coverage {
  margin-bottom: 2px;
}

.ref-map-coverage>span {
  display: flex;
  justify-content: space-between;
  color: #a4a6b6;
  font-size: 9px;
}

.ref-map-coverage>span>b {
  color: #fff;
}

.ref-map-coverage>i {
  height: 5px;
  display: block;
  overflow: hidden;
  margin: 8px 0 6px;
  border-radius: 4px;
  background: #393b3e;
}

.ref-map-coverage>i>em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--app-accent-mid));
}

.ref-map-coverage>small {
  color: #8f91a2;
  font-size: 8px;
}

.ref-map-customer {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 16px;
  background: #2c2d30;
}

.ref-map-customer>span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 2px solid #2b2e34;
  border-radius: 50%;
  background: linear-gradient(145deg, #383a3d, #ee8652);
  font-size: 9px;
  font-weight: 800;
}

.ref-map-customer>div {
  min-width: 0;
}

.ref-map-customer strong,
.ref-map-customer small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-map-customer strong {
  font-size: 11px;
}

.ref-map-customer small {
  margin-top: 4px;
  color: #9b9dac;
  font-size: 8px;
}

.ref-map-progress {
  margin-top: 20px;
}

.ref-map-progress>span {
  display: flex;
  justify-content: space-between;
  color: #a4a6b6;
  font-size: 9px;
}

.ref-map-progress>span>b {
  color: #fff;
}

.ref-map-progress>i {
  height: 5px;
  display: block;
  overflow: hidden;
  margin: 9px 0 11px;
  border-radius: 4px;
  background: #393b3e;
}

.ref-map-progress>i>em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--app-accent-mid));
}

.ref-map-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.ref-map-facts>span {
  min-width: 0;
  position: relative;
  border-radius: 14px;
  padding: 11px 10px 10px 33px;
  background: #2c2d30;
}

.ref-map-facts .material-symbols-rounded {
  position: absolute;
  top: 12px;
  left: 10px;
  color: var(--app-accent-mid);
  font-size: 16px;
}

.ref-map-facts b,
.ref-map-facts small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-map-facts b {
  font-size: 10px;
}

.ref-map-facts small {
  margin-top: 3px;
  color: #8f91a2;
  font-size: 8px;
}

.ref-map-request-list {
  display: grid;
  gap: 5px;
  margin-top: 18px;
}

.ref-map-request-list button {
  min-width: 0;
  min-height: 43px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 12px;
  padding: 5px 9px;
  color: #d8d9e1;
  background: transparent;
  text-align: left;
}

.ref-map-request-list button:hover,
.ref-map-request-list button.active {
  color: #fff;
  background: #333538;
}

.ref-map-request-list button>i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ee8652;
  box-shadow: 0 0 0 4px rgba(238, 134, 82, .14);
}

.ref-map-request-list button>span {
  min-width: 0;
}

.ref-map-request-list strong,
.ref-map-request-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-map-request-list strong {
  font-size: 9px;
}

.ref-map-request-list small {
  margin-top: 3px;
  color: #8f91a2;
  font-size: 8px;
}

.ref-map-request-list .material-symbols-rounded {
  color: #8f91a2;
  font-size: 16px;
}

.ref-map-stage {
  min-width: 0;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #1e2024;
}

.ref-map-stage iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  border: 0;
}

.ref-map-legend {
  position: absolute;
  right: 16px;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 16px;
  padding: 8px 11px;
  background: #1e2024;
  box-shadow: 0 8px 22px rgba(42, 44, 47, .12);
  backdrop-filter: blur(12px);
}

.ref-map-legend>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #737382;
  font-size: 8px;
  white-space: nowrap;
}

.ref-map-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ee8652;
}

.ref-map-legend i.high {
  background: var(--ref-red);
}

.ref-map-legend i.complete {
  background: var(--ref-green);
}

.ref-map-legend>b {
  border-left: 1px solid #2b2e34;
  padding-left: 11px;
  color: #2e3033;
  font-size: 9px;
}

.ref-loading,
.ref-error {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--ref-border);
  border-radius: 25px;
  background: #1e2024;
}

.ref-loading>span {
  width: 34px;
  height: 34px;
  border: 3px solid #2b2e34;
  border-top-color: var(--ref-violet);
  border-radius: 50%;
  animation: ref-spin .8s linear infinite;
}

.ref-loading strong,
.ref-loading small {
  display: block;
}

.ref-loading strong {
  font-size: 14px;
}

.ref-loading small {
  margin-top: 4px;
  color: var(--ref-muted);
  font-size: 10px;
}

.ref-error {
  flex-direction: column;
  text-align: center;
}

.ref-error>.material-symbols-rounded {
  color: var(--ref-red);
  font-size: 40px;
}

.ref-error strong,
.ref-error span {
  display: block;
}

.ref-error strong {
  font-size: 15px;
}

.ref-error span {
  max-width: 500px;
  margin-top: 5px;
  color: var(--ref-muted);
  font-size: 11px;
}

.ref-error button {
  min-height: 38px;
  border: 0;
  border-radius: 19px;
  padding: 0 16px;
  color: #fff;
  background: var(--ref-violet);
  font-size: 10px;
  font-weight: 700;
}

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

@media (min-width: 1101px) {
  .reference-shell {
    padding: 18px 30px 28px;
  }

  .ref-page-heading {
    min-height: 95px;
  }
}

@media (max-width: 1100px) {
  .reference-shell {
    padding-inline: 22px;
  }

  .ref-header {
    grid-template-columns: 180px minmax(450px, 1fr) 210px;
  }

  .ref-brand small {
    display: block;
    max-width: 128px;
    font-size: 8px;
  }

  .ref-navigation button {
    padding-inline: 14px;
  }

  .ref-header-tools .ref-icon-button:first-child {
    display: none;
  }

  .ref-filterbar {
    grid-template-columns: max-content repeat(2, minmax(145px, .8fr)) minmax(220px, 1.5fr);
  }
}

@media (max-width: 1050px) {
  .ref-header {
    grid-template-columns: 160px minmax(0, 1fr) 160px;
  }

  .ref-navigation {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .ref-navigation::-webkit-scrollbar {
    display: none;
  }

  .ref-navigation button {
    min-width: 46px;
    padding-inline: 12px;
  }

  .ref-navigation button span {
    display: none;
  }

  .ref-navigation .material-symbols-rounded {
    display: block;
  }

  .ref-header-tools .ref-icon-button:nth-child(-n+2) {
    display: none;
  }

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

  .ref-filterbar {
    grid-template-columns: max-content repeat(2, minmax(150px, 1fr)) minmax(190px, 1fr);
  }

  .ref-filter-date {
    display: none !important;
  }

  .ref-workspace-body {
    grid-template-columns: 39% 61%;
  }

  .ref-request-row {
    grid-template-columns: 32px minmax(72px, 1fr) auto;
  }

  .ref-request-row>b {
    display: none;
  }

  .ref-request-detail>header {
    grid-template-columns: .9fr 1.1fr;
  }

  .ref-detail-company {
    display: none;
  }

  .ref-detail-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-detail-description {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .ref-workspace-header::before {
    transform: translateX(-50%) scaleX(.937);
    transform-origin: center top;
  }

  .ref-segmented-tabs {
    width: 304px;
  }
}

@media (max-width: 820px) {
  .reference-dashboard {
    padding: 0;
  }

  .reference-shell {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 14px;
  }

  .ref-header {
    grid-template-columns: 125px minmax(0, 1fr) 46px;
    gap: 9px;
  }

  .ref-brand img {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .ref-brand strong {
    font-size: 17px;
  }

  .ref-header-tools .ref-icon-button {
    display: none;
  }

  .ref-header-tools {
    gap: 0;
  }

  .ref-user {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .ref-page-heading {
    align-items: flex-start;
    padding: 18px 0 12px;
  }

  .ref-sync-time,
  .ref-page-actions>.ref-icon-button {
    display: none;
  }

  .ref-primary-button {
    width: 42px;
    padding: 0;
    border-radius: 50%;
  }

  .ref-primary-button:not(:disabled) {
    font-size: 0;
  }

  .ref-primary-button .material-symbols-rounded {
    font-size: 19px;
  }

  .ref-page-title h1 {
    font-size: 26px;
  }

  .ref-page-title p {
    max-width: 370px;
  }

  .ref-filterbar {
    grid-template-columns: max-content 1fr 1fr;
    padding: 5px 0;
  }

  .ref-filter-search {
    grid-column: 2 / -1;
  }

  .ref-workspace-header {
    grid-template-columns: 1fr auto;
    min-height: 0;
    padding: 12px 12px 10px;
    row-gap: 10px;
  }

  .ref-workspace-header::before {
    display: none;
  }

  .ref-workspace-header>div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .ref-workspace-header>div:first-child h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ref-workspace-header>div:last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .ref-segmented-tabs {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    height: 40px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ref-workspace-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ref-workspace-body>aside {
    padding: 0;
  }

  .ref-request-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-request-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .ref-request-detail {
    min-height: 320px;
  }

  .ref-engineer-grid,
  .ref-customer-grid {
    grid-template-columns: 1fr;
  }

  .ref-map-workspace {
    grid-template-columns: 1fr;
  }

  .ref-map-workspace>aside {
    min-height: auto;
  }

  .ref-map-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-map-request-list {
    display: none;
  }

  .ref-map-stage {
    min-height: 380px;
    border-radius: 24px 24px 0 0;
  }

  .ref-map-stage iframe {
    min-height: 380px;
  }
}

@media (max-width: 580px) {
  .ref-header {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
  }

  .ref-brand span {
    display: none;
  }

  .ref-brand img {
    width: 40px;
    height: 40px;
  }

  .ref-navigation button {
    min-width: 42px;
  }

  .ref-page-title {
    gap: 10px;
  }

  .ref-page-title>.ref-icon-button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .ref-page-title p {
    display: none;
  }

  .ref-metrics {
    grid-template-columns: 1fr;
  }

  .ref-metric-card {
    min-height: 205px;
  }

  .ref-filterbar {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .ref-filterbar>strong {
    grid-column: 1 / -1;
  }

  .ref-filter-search {
    grid-column: 1 / -1;
  }

  .ref-request-list {
    grid-template-columns: 1fr;
  }

  .ref-request-row {
    min-height: 50px;
  }

  .ref-request-detail>header {
    grid-template-columns: 1fr;
  }

  .ref-detail-customer {
    display: none;
  }

  .ref-detail-items {
    grid-template-columns: 1fr 1fr;
  }

  .ref-request-detail footer {
    gap: 12px;
  }

  .ref-request-detail footer>span:nth-child(2),
  .ref-request-detail footer>span:nth-child(3) {
    display: none;
  }

  .ref-segmented-tabs button {
    padding-inline: 10px;
  }

  .ref-engineer-grid article,
  .ref-customer-grid article {
    grid-template-columns: 38px minmax(0, 1fr) 45px;
  }

  .ref-engineer-grid article>p:last-child,
  .ref-customer-grid article>p:last-of-type {
    display: none;
  }

  .ref-customer-grid article>button {
    display: none;
  }

  .ref-map-legend>span:nth-child(2),
  .ref-map-legend>span:nth-child(3) {
    display: none;
  }
}

/* Interaction and management layer */
.reference-dashboard button {
  -webkit-tap-highlight-color: transparent;
}

.reference-dashboard button:focus-visible {
  outline: 3px solid rgba(238, 134, 82, .3);
  outline-offset: 2px;
}

.reference-content>section {
  animation: ref-rise .38s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ref-rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ref-header {
  position: relative;
  z-index: 160;
}

.ref-header-tools {
  position: relative;
  z-index: 161;
}

.ref-icon-button.active {
  border-color: #2b2e34;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-logout-button:hover {
  border-color: #2b2e34;
  color: var(--ref-red);
  background: #1e2024;
}

.ref-popover-backdrop,
.ref-menu-backdrop,
.ref-media-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  border: 0;
  background: transparent;
}

.ref-header-popover {
  position: absolute;
  z-index: 170;
  top: 50px;
  right: 0;
  width: min(340px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 20px;
  background: #1e2024;
  box-shadow: 0 26px 76px rgba(32, 33, 36, .24);
  animation: ref-pop .24s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ref-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ref-header-popover>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  background: #1e2024;
}

.ref-header-popover>header span,
.ref-header-popover>header h3 {
  display: block;
}

.ref-header-popover>header span {
  color: var(--ref-muted);
  font-size: 8px;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.ref-header-popover>header h3 {
  margin: 3px 0 0;
  color: var(--ref-ink);
  font-size: 17px;
}

.ref-header-popover>header b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 14px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 10px;
}

.ref-header-popover>div {
  max-height: 330px;
  overflow: auto;
  padding: 0 8px 8px;
  background: #1e2024;
}

.ref-header-popover>div>button {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 13px;
  padding: 9px 10px;
  color: var(--ref-ink);
  background: #1e2024;
  text-align: left;
  cursor: pointer;
}

.ref-header-popover>div>button+button {
  margin-top: 2px;
}

.ref-header-popover>div>button:hover {
  background: #1e2024;
}

.ref-header-popover>div>button>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-header-popover>div>button strong,
.ref-header-popover>div>button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-header-popover>div>button strong {
  color: var(--ref-ink);
  font-size: 10px;
}

.ref-header-popover>div>button small {
  margin-top: 3px;
  color: #858596;
  font-size: 8px;
}

.ref-header-popover>div>button>.material-symbols-rounded {
  color: #2b2d30;
  font-size: 19px;
}

.ref-header-popover time {
  color: #858596;
  font-size: 8px;
}

.ref-header-popover>div>p {
  margin: 15px;
  color: var(--ref-muted);
  font-size: 10px;
  text-align: center;
}

.ref-header-popover>footer {
  border-top: 1px solid var(--ref-border);
  padding: 8px;
  background: #1e2024;
}

.ref-header-popover>footer button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  padding: 10px;
  color: #ec793f;
  background: #1e2024;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.ref-header-popover>footer button .material-symbols-rounded {
  color: inherit;
  font-size: 20px;
}

.ref-engineer-capacity>button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 13px;
  padding: 5px;
  color: var(--ref-ink);
  background: #1e2024;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.ref-engineer-capacity>button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46, 48, 51, .1);
}

.ref-engineer-capacity>button.active {
  color: var(--ref-ink);
  background: rgb(from var(--app-accent) r g b /.1);
  border: 1px solid rgb(from var(--app-accent) r g b /.42);
  box-shadow: none;
}

.ref-engineer-capacity>button>span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #2b2e34;
  border-radius: 50%;
  color: #fff;
  background: #2b2d30;
  font-size: 8px;
  font-weight: 750;
}

.ref-engineer-capacity>button.active>span {
  border-color: rgb(from var(--app-accent) r g b /.5);
}

.ref-engineer-capacity>button.active small {
  color: var(--ref-muted);
}

.ref-engineer-capacity>button.active strong {
  color: var(--orange);
}

.ref-filter-control {
  position: relative;
  min-width: 0;
  height: 40px;
}

.ref-filterbar {
  position: relative;
  z-index: 90;
  overflow: visible;
}

.ref-filterbar:has(.ref-filter-control.open) {
  z-index: 120;
}

.ref-workspace,
.ref-map-workspace,
.ref-standalone-panel,
.ref-reports,
.ref-management {
  position: relative;
  z-index: 1;
}

.ref-filter-trigger {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ref-border);
  border-radius: 20px;
  padding: 0 12px;
  color: #696977;
  background: #1e2024;
  text-align: left;
  cursor: pointer;
  transition: border .2s, box-shadow .2s;
}

.ref-filter-control.open .ref-filter-trigger {
  border-color: #2b2e34;
  box-shadow: 0 0 0 3px rgba(238, 134, 82, .09);
}

.ref-filter-trigger .material-symbols-rounded {
  font-size: 16px;
}

.ref-filter-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.ref-filter-menu {
  position: absolute;
  z-index: 55;
  top: 48px;
  left: 0;
  width: max(100%, 310px);
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 19px;
  background: #1e2024;
  box-shadow: 0 22px 55px rgba(35, 36, 39, .18);
  animation: ref-pop .2s ease both;
}

.ref-filter-menu>label {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  padding: 0 11px;
  background: #1e2024;
  transition: border .2s, box-shadow .2s;
}

.ref-filter-menu>label:focus-within {
  border-color: #2b2e34;
  box-shadow: 0 0 0 3px rgba(238, 134, 82, .08)
}

.ref-filter-menu>label .material-symbols-rounded {
  font-size: 16px;
  color: #8d8a9a
}

.ref-filter-menu>label input {
  font-size: 9px !important;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important
}

.ref-filter-menu>div {
  max-height: 252px;
  overflow: auto;
  padding: 0 7px 8px;
  scrollbar-width: thin;
  scrollbar-color: #ccc8d7 transparent;
}

.ref-filter-menu>div::-webkit-scrollbar {
  width: 5px
}

.ref-filter-menu>div::-webkit-scrollbar-track {
  background: transparent
}

.ref-filter-menu>div::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #23262b
}

.ref-filter-menu>div>button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 12px;
  padding: 7px 8px;
  color: #4e4d5c;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}

.ref-filter-menu>div>button:hover,
.ref-filter-menu>div>button.selected {
  color: var(--ref-violet);
  background: #1e2024
}

.ref-filter-menu>div>button:hover {
  transform: translateX(2px)
}

.ref-filter-menu>div>button>i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #3c3e42, #ee8753);
  font-size: 7px;
  font-style: normal;
  font-weight: 800
}

.ref-filter-menu>div>button>i>.material-symbols-rounded {
  font-size: 15px
}

.ref-filter-menu>div>button>i>span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ee8652;
  box-shadow: 0 0 0 4px #e7e3ff
}

.ref-filter-menu>div>button>span {
  min-width: 0
}

.ref-filter-menu>div>button strong,
.ref-filter-menu>div>button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-filter-menu>div>button strong {
  font-size: 9px;
  font-weight: 700
}

.ref-filter-menu>div>button small {
  margin-top: 2px;
  color: #9996a5;
  font-size: 7px
}

.ref-filter-menu>div>button>.material-symbols-rounded {
  font-size: 15px
}

.ref-workspace-actions {
  position: relative;
}

.ref-workspace-menu {
  position: absolute;
  z-index: 70;
  top: 40px;
  right: 0;
  width: 190px;
  overflow: hidden;
  border: 1px solid #3d3f43;
  border-radius: 15px;
  padding: 6px;
  background: #292a2d;
  box-shadow: 0 20px 45px rgba(15, 15, 16, .38);
  animation: ref-pop .2s ease both;
}

.ref-workspace-menu>span {
  display: block;
  padding: 7px 8px;
  color: #8f91a3;
  font-size: 8px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.ref-workspace-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 9px;
  color: #e6e7ef;
  background: transparent;
  font-size: 9px;
  text-align: left;
  cursor: pointer;
}

.ref-workspace-menu button:hover,
.ref-workspace-menu button.selected {
  color: #fff;
  background: #3f4145;
}

.ref-workspace-menu button .material-symbols-rounded {
  font-size: 15px
}

.ref-detail-tabs button>span {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 8px;
  padding: 0 5px;
  color: var(--on-orange);
  background: var(--orange);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.ref-detail-media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ref-detail-media>button {
  height: 78px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}

.ref-detail-media>button:hover {
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-1px);
}

.ref-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.ref-detail-media>button>span {
  height: 100%;
  display: grid;
  place-items: center
}

.ref-detail-media>button>span .material-symbols-rounded {
  font-size: 28px
}

.ref-detail-media>button>small {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  overflow: hidden;
  border-radius: 7px;
  padding: 4px;
  color: #fff;
  background: rgba(26, 27, 29, .72);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-media-more {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.ref-media-more strong {
  font-size: 18px
}

.ref-media-loading {
  height: 100%;
  display: grid !important;
  place-items: center
}

.ref-media-loading .material-symbols-rounded {
  animation: ref-spin .8s linear infinite
}

.ref-media-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;
}

.ref-media-modal .ref-media-backdrop {
  background: rgba(20, 21, 22, .72);
  backdrop-filter: blur(12px)
}

.ref-media-modal>section {
  position: relative;
  z-index: 201;
  width: min(940px, 96vw);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background: #202122;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  animation: ref-modal .32s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ref-modal {
  from {
    opacity: 0;
    transform: scale(.96) translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.ref-media-modal>section>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  color: #fff;
}

.ref-media-modal header span {
  color: #999cad;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .7px
}

.ref-media-modal h2 {
  max-width: 700px;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-media-modal .ref-icon-button {
  border-color: #3f4145;
  color: #fff;
  background: #2e3033
}

.ref-media-preview {
  min-height: 500px;
  display: grid;
  place-items: center;
  background: #111213;
}

.ref-media-preview img,
.ref-media-preview video {
  max-width: 100%;
  max-height: 64vh;
  object-fit: contain
}

.ref-media-preview audio {
  width: min(520px, 80%)
}

.ref-media-fallback {
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px;
  color: #fff;
  text-align: center
}

.ref-media-fallback .material-symbols-rounded {
  font-size: 55px;
  color: var(--app-accent-mid)
}

.ref-media-fallback strong {
  font-size: 17px
}

.ref-media-fallback span {
  color: #a7a9b8;
  font-size: 10px;
  line-height: 1.6
}

.ref-media-modal>section>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 20px;
  color: #b9bbc8
}

.ref-media-modal footer>div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px
}

.ref-media-modal footer span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px
}

.ref-media-modal footer .material-symbols-rounded {
  font-size: 14px
}

.ref-media-modal footer nav {
  display: flex;
  gap: 7px
}

.ref-reports,
.ref-management {
  min-height: 530px;
  border: 1px solid var(--ref-border);
  border-radius: 25px;
  background: #1e2024;
  overflow: hidden
}

.ref-reports>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--ref-border)
}

.ref-reports>header span,
.ref-report-grid header span {
  color: var(--ref-muted);
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase
}

.ref-reports h2 {
  margin: 4px 0 2px;
  font-size: 22px
}

.ref-reports>header p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 9px
}

.ref-reports>header button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 19px;
  padding: 11px 15px;
  color: #fff;
  background: var(--ref-violet);
  font-size: 9px;
  font-weight: 750;
  cursor: pointer
}

.ref-reports>header button .material-symbols-rounded {
  font-size: 16px
}

.ref-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px 20px
}

.ref-report-kpis article {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--ref-border);
  border-radius: 17px;
  padding: 13px
}

.ref-report-kpis article>.material-symbols-rounded {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 19px
}

.ref-report-kpis span,
.ref-report-kpis strong {
  display: block
}

.ref-report-kpis span {
  color: var(--ref-muted);
  font-size: 8px
}

.ref-report-kpis strong {
  margin-top: 3px;
  color: var(--ref-ink);
  font-size: 18px
}

.ref-report-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  padding: 0 20px 20px
}

.ref-report-grid>article {
  min-width: 0;
  border: 1px solid var(--ref-border);
  border-radius: 19px;
  padding: 16px
}

.ref-report-grid h3 {
  margin: 4px 0 13px;
  font-size: 14px
}

.ref-report-status p {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
  font-size: 8px
}

.ref-report-status p>i {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #1e2024
}

.ref-report-status p em {
  height: 100%;
  display: block;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--app-accent-mid), #ec7a41)
}

.ref-report-status p b {
  text-align: right
}

.ref-report-engineers p,
.ref-report-risk p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #2b2e34
}

.ref-report-engineers p>i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ba4a12;
  font-size: 7px;
  font-style: normal
}

.ref-report-engineers p>span,
.ref-report-risk p>span {
  min-width: 0;
  flex: 1
}

.ref-report-engineers strong,
.ref-report-engineers small,
.ref-report-risk strong,
.ref-report-risk small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-report-engineers strong,
.ref-report-risk strong {
  font-size: 9px
}

.ref-report-engineers small,
.ref-report-risk small {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 7px
}

.ref-report-risk p>b {
  color: var(--ref-red);
  font-size: 9px
}

.ref-management {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  background: #1e2024
}

.ref-management>aside {
  padding: 25px;
  background: #212225;
  color: #fff
}

.ref-management>aside>span {
  color: #8d90a3;
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase
}

.ref-management>aside h2 {
  margin: 6px 0;
  font-size: 22px
}

.ref-management>aside>p {
  margin: 0 0 22px;
  color: #9699aa;
  font-size: 9px
}

.ref-management nav {
  display: grid;
  gap: 6px
}

.ref-management nav button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  padding: 10px;
  color: #cbcdda;
  background: transparent;
  text-align: left;
  cursor: pointer
}

.ref-management nav button:hover,
.ref-management nav button.active {
  border-color: #45474c;
  color: #fff;
  background: #343538
}

.ref-management nav button>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #404246
}

.ref-management nav button strong,
.ref-management nav button small {
  display: block
}

.ref-management nav button strong {
  font-size: 9px
}

.ref-management nav button small {
  margin-top: 3px;
  color: #9295a7;
  font-size: 7px
}

.ref-management nav .material-symbols-rounded {
  font-size: 16px
}

.ref-management>article {
  margin: 18px;
  border: 1px solid var(--ref-border);
  border-radius: 20px;
  padding: 20px;
  background: #1e2024
}

.ref-management>article>header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ref-border)
}

.ref-management>article>header>i {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ref-violet);
  background: #1e2024
}

.ref-management>article header span {
  color: var(--ref-muted);
  font-size: 8px;
  text-transform: uppercase
}

.ref-management>article h2 {
  margin: 3px 0;
  font-size: 20px
}

.ref-management>article header p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 8px
}

.ref-management-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px
}

.ref-management-facts p {
  margin: 0;
  border: 1px solid var(--ref-border);
  border-radius: 16px;
  padding: 16px
}

.ref-management-facts span,
.ref-management-facts strong {
  display: block
}

.ref-management-facts span {
  color: var(--ref-muted);
  font-size: 8px
}

.ref-management-facts strong {
  margin-top: 7px;
  font-size: 22px
}

.ref-management-list {
  margin-top: 12px
}

.ref-management-list p {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid var(--ref-border);
  font-size: 9px
}

.ref-management-list .material-symbols-rounded {
  color: var(--ref-violet);
  font-size: 17px
}

.ref-integration-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.ref-integration-card .material-symbols-rounded {
  font-size: 48px;
  color: var(--ref-green)
}

.ref-integration-card strong {
  font-size: 14px
}

.ref-integration-card span {
  color: var(--ref-muted);
  font-size: 9px
}

.ref-engineer-grid.compact {
  grid-template-columns: 1fr;
  margin-top: 12px;
  padding: 0;
  background: transparent
}

.ref-engineer-grid.compact article {
  border-bottom: 1px solid var(--ref-border)
}

@media(max-width:900px) {
  .ref-report-kpis {
    grid-template-columns: repeat(2, 1fr)
  }

  .ref-report-grid {
    grid-template-columns: 1fr
  }

  .ref-management {
    grid-template-columns: 1fr
  }

  .ref-management>aside nav {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:580px) {
  .ref-header-popover {
    position: fixed;
    top: 75px;
    right: 12px;
    left: 12px;
    width: auto
  }

  .ref-detail-media {
    grid-template-columns: repeat(2, 1fr)
  }

  .ref-media-preview {
    min-height: 330px
  }

  .ref-media-modal>section>footer {
    align-items: flex-start;
    flex-direction: column
  }

  .ref-report-kpis {
    grid-template-columns: 1fr 1fr
  }

  .ref-management>aside nav {
    grid-template-columns: 1fr
  }

  .ref-management {
    border-radius: 18px
  }
}

/* Executive secondary views */
.ref-map-workspace {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  overflow: visible;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.ref-map-workspace>aside {
  overflow: hidden;
  border-radius: 26px;
  padding: 24px 18px 16px;
  background: linear-gradient(155deg, #27282a 0%, #1d1e1f 100%);
  box-shadow: 0 14px 34px rgba(40, 41, 43, .13);
}

.ref-map-stage {
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(40, 41, 43, .1);
}

.ref-map-customer {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .06);
}

.ref-map-facts>span {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .05);
}

.ref-map-request-list {
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: none;
}

.ref-map-request-list::-webkit-scrollbar {
  display: none;
}

.ref-directory-panel {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--ref-border);
  border-radius: 25px;
  background: #1e2024;
}

.ref-directory-panel>header {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: linear-gradient(120deg, #1e2024 55%, #1e2024 100%);
}

.ref-directory-panel>header span {
  color: var(--ref-violet);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ref-directory-panel>header h2 {
  margin: 5px 0 2px;
  font-size: 23px;
  letter-spacing: -.5px;
}

.ref-directory-panel>header p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 9px;
}

.ref-directory-panel>header>strong {
  border: 1px solid #2b2e34;
  border-radius: 18px;
  padding: 9px 14px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 10px;
  box-shadow: 0 7px 18px rgba(238, 134, 82, .08);
}

.ref-directory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 20px;
  border-block: 1px solid var(--ref-border);
  background: #1e2024;
}

.ref-engineers-panel,
.ref-customers-panel {
  background: #1e2024;
}

.ref-engineers-panel>.ref-directory-summary:first-child,
.ref-customers-panel>.ref-directory-summary:first-child {
  border-top: 0;
  padding: 16px 16px 14px;
}

.ref-engineers-panel>.ref-tree-workspace,
.ref-customers-panel>.ref-tree-workspace {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ref-directory-summary article>div {
  min-width: 0;
}

.ref-directory-summary article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #2b2e34;
  border-radius: 15px;
  padding: 11px 12px;
  background: #1e2024;
}

.ref-directory-summary article>i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 11px;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-directory-summary .material-symbols-rounded {
  font-size: 18px;
}

.ref-directory-summary span,
.ref-directory-summary strong {
  display: block;
}

.ref-directory-summary span {
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-directory-summary strong {
  margin-top: 2px;
  color: var(--ref-ink);
  font-size: 15px;
}

.ref-customer-cards,
.ref-engineer-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 22px;
  background: #1e2024;
}

.ref-customer-cards>article,
.ref-engineer-cards>article {
  min-width: 0;
  border: 1px solid #2b2e34;
  border-radius: 19px;
  padding: 14px;
  background: linear-gradient(155deg, #1e2024 55%, #1e2024);
  box-shadow: 0 8px 22px rgba(42, 44, 47, .045);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.ref-customer-cards>article:hover,
.ref-engineer-cards>article:hover {
  transform: translateY(-3px);
  border-color: #2b2e34;
  box-shadow: 0 15px 32px rgba(186, 74, 18, .11);
}

.ref-customer-cards article>header,
.ref-engineer-cards article>header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ref-customer-cards header>span:first-child,
.ref-engineer-cards header>span:first-child {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #313336, #ee8957);
  font-size: 8px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(233, 103, 38, .2);
}

.ref-customer-cards header>i {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  padding: 5px 8px;
  color: #6f6c7b;
  background: #1e2024;
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-customer-cards header>button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  color: var(--ref-violet);
  background: #1e2024;
  cursor: pointer;
  transition: transform .2s, background .2s;
}

.ref-customer-cards header>button:hover {
  transform: translate(2px, -2px);
  background: #1e2024;
}

.ref-customer-cards header>button .material-symbols-rounded {
  font-size: 16px
}

.ref-customer-cards h3,
.ref-engineer-cards h3 {
  overflow: hidden;
  margin: 13px 0 4px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-customer-cards>article>p,
.ref-engineer-cards>article>p {
  overflow: hidden;
  margin: 0;
  color: var(--ref-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-customer-cards footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #2b2e34;
}

.ref-customer-cards footer span {
  color: var(--ref-muted);
  font-size: 7px;
}

.ref-customer-cards footer b {
  display: block;
  margin-bottom: 3px;
  color: var(--ref-ink);
  font-size: 13px
}

.ref-customer-cards footer span.attention b {
  color: var(--ref-red)
}

.ref-engineer-cards article>header>i {
  margin-left: auto;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

.ref-engineer-cards header i.deployed {
  color: #138398;
  background: #1e2024
}

.ref-engineer-cards header i.available {
  color: #218552;
  background: #1e2024
}

.ref-engineer-cards header>.material-symbols-rounded {
  font-size: 17px;
  color: #a19eac
}

.ref-engineer-cards>article>div {
  margin-top: 16px;
}

.ref-engineer-cards>article>div>span {
  display: flex;
  justify-content: space-between;
  color: var(--ref-muted);
  font-size: 7px
}

.ref-engineer-cards>article>div>span b {
  color: #4d4b5a
}

.ref-engineer-cards>article>div>i {
  height: 5px;
  display: block;
  overflow: hidden;
  margin-top: 7px;
  border-radius: 4px;
  background: #1e2024
}

.ref-engineer-cards>article>div em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), #ec7a41)
}

.ref-engineer-cards footer {
  display: flex;
  gap: 18px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #2b2e34;
  color: var(--ref-muted);
  font-size: 7px
}

.ref-engineer-cards footer b {
  margin-right: 3px;
  color: var(--ref-ink);
  font-size: 11px
}

.ref-reports {
  overflow: hidden;
  background: #1e2024;
}

.ref-reports>header {
  min-height: 142px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(260px, .85fr) auto;
  gap: 24px;
  padding: 24px 26px;
  color: #fff;
  background: linear-gradient(125deg, #252629 0%, #313336 55%, #eb753a 130%);
}

.ref-reports>header span {
  color: #aaa8ba;
}

.ref-reports>header h2 {
  color: #fff;
  font-size: 25px
}

.ref-reports>header p {
  color: #b8b5c7
}

.ref-reports>header button {
  color: #2d2f32;
  background: #1e2024;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16)
}

.ref-report-hero-chart {
  height: 78px;
  align-self: center;
}

.ref-report-hero-chart .ref-bar-chart {
  height: 78px
}

.ref-report-hero-chart .ref-bar-chart span i {
  background: linear-gradient(180deg, var(--app-accent-mid), var(--app-accent-mid))
}

.ref-report-hero-chart .ref-bar-chart small {
  color: #c8c4da
}

.ref-report-kpis {
  position: relative;
  z-index: 2;
  margin-top: -17px;
  padding: 0 20px 18px;
}

.ref-report-kpis article {
  border: 1px solid #2b2e34;
  background: #1e2024;
  box-shadow: 0 12px 26px rgba(37, 38, 40, .08)
}

.ref-report-grid {
  padding: 0 20px 20px;
}

.ref-report-grid>article {
  background: #1e2024;
  box-shadow: 0 9px 24px rgba(41, 42, 44, .045)
}

.ref-report-status p>i {
  height: 7px
}

.ref-report-engineers p>i {
  background: linear-gradient(145deg, #2f3134, #ee8957)
}

@media(max-width:1050px) {

  .ref-customer-cards,
  .ref-engineer-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .ref-map-workspace {
    grid-template-columns: 290px minmax(0, 1fr)
  }

  .ref-reports>header {
    grid-template-columns: 1fr auto
  }

  .ref-report-hero-chart {
    display: none
  }
}

@media(max-width:820px) {
  .ref-directory-summary {
    grid-template-columns: repeat(2, 1fr)
  }

  .ref-customer-cards,
  .ref-engineer-cards {
    grid-template-columns: 1fr
  }

  .ref-map-workspace {
    grid-template-columns: 1fr
  }

  .ref-map-workspace>aside {
    border-radius: 24px
  }

  .ref-reports>header {
    grid-template-columns: 1fr
  }

  .ref-reports>header button {
    justify-self: start
  }
}

/* Joyful premium finish */
.reference-dashboard {
  background: radial-gradient(circle at 8% 8%, rgb(from var(--app-accent-mid) r g b / .12), transparent 24%),
    radial-gradient(circle at 91% 12%, rgba(45, 201, 187, .1), transparent 21%),
    linear-gradient(135deg, #1e2024, #1e2024);
}

.reference-shell {
  background: linear-gradient(145deg, #1e2024 0%, #1e2024 58%, #1e2024 100%);
}

.ref-page-title h1 {
  letter-spacing: -1.15px;
}

.ref-primary-button {
  background: linear-gradient(125deg, var(--app-accent-mid), #eb7236 65%, #ed8049);
  box-shadow: 0 12px 26px rgba(236, 122, 65, .25);
}

.ref-primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(236, 122, 65, .32);
}

.ref-metric-card {
  position: relative;
  overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease;
}

.ref-metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(67, 69, 73, .12);
}

.ref-metric-card::after {
  content: "";
  position: absolute;
  right: -35px;
  top: -38px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  pointer-events: none;
  background: rgb(from var(--app-accent-mid) r g b / .07);
}

.ref-metric-card:nth-child(1) {
  background: linear-gradient(150deg, #1e2024 64%, #1e2024)
}

.ref-metric-card:nth-child(1)::after {
  background: rgba(246, 115, 108, .1)
}

.ref-metric-card:nth-child(2) {
  background: linear-gradient(150deg, #1e2024 64%, #1e2024)
}

.ref-metric-card:nth-child(3) {
  background: linear-gradient(150deg, #1e2024 64%, #1e2024)
}

.ref-metric-card:nth-child(3)::after {
  background: rgba(40, 194, 211, .1)
}

.ref-metric-card:nth-child(4) {
  background: linear-gradient(150deg, #1e2024 64%, #1e2024)
}

.ref-metric-card:nth-child(4)::after {
  background: rgba(69, 198, 125, .1)
}

.ref-directory-panel {
  box-shadow: 0 18px 45px rgba(57, 59, 63, .07);
}

.ref-directory-panel>header {
  position: relative;
  overflow: hidden;
  min-height: 102px;
}

.ref-directory-panel>header::after {
  content: "";
  position: absolute;
  right: 100px;
  top: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 138, 88, .13), transparent 68%);
}

.ref-directory-panel>header span {
  font-size: 9px;
}

.ref-directory-panel>header h2 {
  font-size: 25px;
}

.ref-directory-panel>header p {
  font-size: 10px;
}

.ref-directory-summary {
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(90deg, #1e2024, #1e2024);
}

.ref-directory-summary article {
  min-height: 58px;
  padding: 11px 13px;
  transition: transform .22s ease, box-shadow .22s ease;
}

.ref-directory-summary article:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(57, 59, 63, .08);
}

.ref-directory-summary article:nth-child(1)>i {
  color: #ed7f48;
  background: #1e2024
}

.ref-directory-summary article:nth-child(2)>i {
  color: #168ca3;
  background: #1e2024
}

.ref-directory-summary article:nth-child(3)>i {
  color: #e05f59;
  background: #1e2024
}

.ref-directory-summary article:nth-child(4)>i {
  color: #238c57;
  background: #1e2024
}

.ref-directory-summary span {
  font-size: 9px;
}

.ref-directory-summary strong {
  font-size: 17px
}

.ref-customer-cards,
.ref-engineer-cards {
  gap: 14px;
  padding: 20px;
}

.ref-customer-cards>article,
.ref-engineer-cards>article {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 16px;
  border-radius: 21px;
}

.ref-customer-cards>article::before,
.ref-engineer-cards>article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #ef9060, var(--app-accent-mid));
}

.ref-customer-cards>article:nth-child(4n+2)::before,
.ref-engineer-cards>article:nth-child(4n+2)::before {
  background: linear-gradient(90deg, #24b9c9, #67d8d1)
}

.ref-customer-cards>article:nth-child(4n+3)::before,
.ref-engineer-cards>article:nth-child(4n+3)::before {
  background: linear-gradient(90deg, #f17c70, #ef9161)
}

.ref-customer-cards>article:nth-child(4n)::before,
.ref-engineer-cards>article:nth-child(4n)::before {
  background: linear-gradient(90deg, #42bd7b, #88d890)
}

.ref-customer-cards>article:nth-child(4n+2) header>span:first-child,
.ref-engineer-cards>article:nth-child(4n+2) header>span:first-child {
  background: linear-gradient(145deg, #167f9b, #37c8cb)
}

.ref-customer-cards>article:nth-child(4n+3) header>span:first-child,
.ref-engineer-cards>article:nth-child(4n+3) header>span:first-child {
  background: linear-gradient(145deg, #d95b60, #ef9161)
}

.ref-customer-cards>article:nth-child(4n) header>span:first-child,
.ref-engineer-cards>article:nth-child(4n) header>span:first-child {
  background: linear-gradient(145deg, #248353, #59c17f)
}

.ref-customer-cards h3,
.ref-engineer-cards h3 {
  margin-top: 15px;
  font-size: 13px;
}

.ref-customer-cards>article>p,
.ref-engineer-cards>article>p {
  font-size: 9px;
}

.ref-customer-cards footer span,
.ref-engineer-cards footer {
  font-size: 8px;
}

.ref-customer-cards footer b {
  font-size: 15px;
}

.ref-customer-cards header>i {
  font-size: 8px;
}

.ref-engineer-cards article>header>i {
  font-size: 8px;
}

.ref-engineer-cards>article>div>span {
  font-size: 8px;
}

.ref-engineer-cards>article>div>i {
  height: 6px;
}

.ref-map-workspace>aside {
  background: radial-gradient(circle at 110% -10%, rgba(239, 142, 94, .34), transparent 34%),
    linear-gradient(155deg, #2b2c2f 0%, #1d1e1f 100%);
}

.ref-map-customer {
  padding: 14px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(239, 142, 93, .09));
}

.ref-map-progress>i>em {
  background: linear-gradient(90deg, var(--app-accent-mid), var(--app-accent-mid));
  box-shadow: 0 0 14px rgb(from var(--app-accent-mid) r g b / .34);
}

.ref-map-request-list button {
  transition: transform .2s ease, background .2s ease;
}

.ref-map-request-list button:hover {
  transform: translateX(3px);
}

.ref-map-request-list button.active {
  background: linear-gradient(90deg, #3c3e41, #333538);
  box-shadow: inset 3px 0 0 var(--app-accent-mid);
}

.ref-map-stage {
  box-shadow: 0 18px 46px rgba(48, 50, 53, .13);
}

.ref-reports>header {
  overflow: hidden;
  background: radial-gradient(circle at 82% -30%, rgba(125, 215, 235, .24), transparent 34%),
    radial-gradient(circle at 44% 140%, rgba(255, 153, 129, .18), transparent 42%),
    linear-gradient(125deg, #242528 0%, #414348 54%, #ed8049 115%);
}

.ref-reports>header::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -82px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 58px rgba(255, 255, 255, .025);
}

.ref-reports>header h2 {
  font-size: 27px;
  letter-spacing: -.65px;
}

.ref-reports>header p {
  font-size: 10px;
}

.ref-report-kpis article {
  min-height: 65px;
  border-radius: 18px;
}

.ref-report-kpis article:nth-child(1) {
  background: linear-gradient(145deg, #1e2024, #1e2024)
}

.ref-report-kpis article:nth-child(2) {
  background: linear-gradient(145deg, #1e2024, #1e2024)
}

.ref-report-kpis article:nth-child(3) {
  background: linear-gradient(145deg, #1e2024, #1e2024)
}

.ref-report-kpis article:nth-child(4) {
  background: linear-gradient(145deg, #1e2024, #1e2024)
}

.ref-report-kpis article:nth-child(2)>.material-symbols-rounded {
  color: #248f58;
  background: #1e2024
}

.ref-report-kpis article:nth-child(3)>.material-symbols-rounded {
  color: #df615b;
  background: #1e2024
}

.ref-report-kpis article:nth-child(4)>.material-symbols-rounded {
  color: #168da5;
  background: #1e2024
}

.ref-report-kpis span {
  font-size: 9px;
}

.ref-report-kpis strong {
  font-size: 20px
}

.ref-report-grid>article {
  border-radius: 21px;
  transition: transform .24s ease, box-shadow .24s ease;
}

.ref-report-grid>article:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(56, 58, 62, .09);
}

.ref-report-grid h3 {
  font-size: 15px;
}

.ref-report-grid header span {
  font-size: 9px
}

.ref-report-status p {
  font-size: 9px;
}

.ref-report-engineers strong,
.ref-report-risk strong {
  font-size: 10px
}

.ref-report-engineers small,
.ref-report-risk small {
  font-size: 8px
}

/* Restrained account and workforce palette */
.ref-customers-panel .ref-directory-summary article>i,
.ref-engineers-panel .ref-directory-summary article>i {
  color: #ec7940 !important;
  background: #1e2024 !important;
}

.ref-customer-cards>article::before,
.ref-engineer-cards>article::before {
  background: #ef9060 !important;
}

.ref-customer-cards>article header>span:first-child,
.ref-engineer-cards>article header>span:first-child {
  color: #fff !important;
  background: linear-gradient(145deg, #313336, #ee834e) !important;
}

.ref-engineer-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ref-engineer-cards>article {
  min-height: 220px;
}

.ref-card-arrow {
  width: 31px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  margin-left: auto;
  border-radius: 10px !important;
  color: var(--ref-violet) !important;
  background: #1e2024 !important;
  box-shadow: none !important;
}

.ref-card-arrow .material-symbols-rounded {
  font-size: 16px;
}

.ref-customer-card-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.ref-customer-card-hit:focus-visible {
  outline: 3px solid rgba(238, 134, 82, .22);
  outline-offset: -3px;
}

.ref-engineer-assignment {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  padding: 7px 9px;
  color: var(--ref-ink);
  background: #1e2024;
  text-align: left;
  cursor: pointer;
  transition: border .2s, background .2s;
}

.ref-engineer-assignment:hover {
  border-color: #2b2e34;
  background: #1e2024
}

.ref-engineer-assignment>.material-symbols-rounded:first-child {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ee8652;
  background: #1e2024;
  font-size: 15px
}

.ref-engineer-assignment>.material-symbols-rounded:last-child {
  color: #aaa7b5;
  font-size: 15px
}

.ref-engineer-assignment span {
  min-width: 0
}

.ref-engineer-assignment strong,
.ref-engineer-assignment small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-engineer-assignment strong {
  font-size: 8px
}

.ref-engineer-assignment small {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 7px
}

.ref-engineer-ready {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  border: 1px dashed #2b2e34;
  border-radius: 13px;
  padding: 9px;
  color: #8b8897;
  background: #1e2024;
  font-size: 8px
}

.ref-engineer-ready .material-symbols-rounded {
  color: #5ba97b;
  font-size: 16px
}

.ref-customer-profile {
  overflow: hidden;
  border: 1px solid var(--ref-border);
  border-radius: 26px;
  background: #1e2024;
  box-shadow: 0 18px 45px rgba(57, 59, 63, .07);
}

.ref-customer-profile>header {
  min-height: 112px;
  display: grid;
  grid-template-columns: 42px 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 19px 24px;
  color: #fff;
  background: radial-gradient(circle at 86% 0, rgb(from var(--app-accent-mid) r g b / .36), transparent 31%), linear-gradient(125deg, #242528, #404246 64%, #e96421);
}

.ref-customer-profile>header>button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

.ref-customer-profile>header>span:nth-child(2) {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  background: linear-gradient(145deg, #ee8753, var(--app-accent-mid));
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.ref-customer-profile>header small {
  color: #aaa8bd;
  font-size: 8px;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.ref-customer-profile>header h2 {
  margin: 4px 0 2px;
  font-size: 25px;
  letter-spacing: -.6px
}

.ref-customer-profile>header p {
  margin: 0;
  color: #bfbdce;
  font-size: 9px
}

.ref-customer-profile>header>.ref-status {
  justify-self: end
}

.ref-customer-profile-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ref-border);
  background: #1e2024;
}

.ref-customer-profile-kpis article {
  min-width: 0;
  position: relative;
  border: 1px solid #2b2e34;
  border-radius: 15px;
  padding: 11px 36px 11px 12px;
  background: #1e2024;
}

.ref-customer-profile-kpis span,
.ref-customer-profile-kpis strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-customer-profile-kpis span {
  color: var(--ref-muted);
  font-size: 7px
}

.ref-customer-profile-kpis strong {
  margin-top: 4px;
  font-size: 13px
}

.ref-customer-profile-kpis .material-symbols-rounded {
  position: absolute;
  right: 10px;
  top: 14px;
  color: #ef9060;
  font-size: 18px
}

.ref-profile-loading {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ref-muted);
  font-size: 9px
}

.ref-profile-loading>span {
  width: 24px;
  height: 24px;
  border: 3px solid #2b2e34;
  border-top-color: var(--ref-violet);
  border-radius: 50%;
  animation: ref-spin .8s linear infinite
}

.ref-customer-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px 16px;
  background: #1e2024;
}

.ref-profile-left {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.ref-profile-left>article,
.ref-customer-profile-grid>article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 20px;
  background: #1e2024;
}

.ref-customer-profile-grid article>header {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #2b2e34;
}

.ref-customer-profile-grid article>header span {
  color: var(--ref-violet);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .8px;
  text-transform: uppercase
}

.ref-customer-profile-grid article>header h3 {
  margin: 4px 0 0;
  font-size: 14px
}

.ref-customer-profile-grid article>header b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 14px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 9px
}

.ref-profile-requests>div {
  overflow: visible;
}

.ref-profile-timeline>div {
  max-height: 520px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d0ccd9 transparent;
}

.ref-profile-requests>div>button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #2b2e34;
  padding: 12px 14px;
  color: var(--ref-ink);
  background: #1e2024;
  text-align: left;
  cursor: pointer;
}

.ref-profile-requests>div>button:hover {
  background: #1e2024
}

.ref-profile-requests>div>button>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ee8652;
  background: #1e2024
}

.ref-profile-requests>div>button>i.complete {
  color: #278b59;
  background: #1e2024
}

.ref-profile-requests>div>button>span {
  min-width: 0
}

.ref-profile-requests strong,
.ref-profile-requests small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-profile-requests strong {
  font-size: 9px
}

.ref-profile-requests small {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 7px
}

.ref-profile-requests>div>button>div {
  display: grid;
  justify-items: end;
  gap: 4px
}

.ref-profile-requests>div>button>.material-symbols-rounded {
  font-size: 16px;
  color: #aaa7b5
}

.ref-profile-timeline>div>section {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 15px 12px 18px;
}

.ref-profile-timeline>div>section:not(:last-child) {
  border-bottom: 1px solid #2b2e34
}

.ref-profile-timeline section>i {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border: 2px solid #2b2e34;
  border-radius: 50%;
  background: #ee8754;
  box-shadow: 0 0 0 3px #e7e3ff
}

.ref-profile-timeline section strong,
.ref-profile-timeline section p,
.ref-profile-timeline section small {
  display: block;
  margin: 0
}

.ref-profile-timeline section strong {
  font-size: 9px
}

.ref-profile-timeline section p {
  margin-top: 3px;
  color: #666473;
  font-size: 8px;
  line-height: 1.4
}

.ref-profile-timeline section small {
  margin-top: 4px;
  color: #a09daa;
  font-size: 7px
}

.ref-profile-timeline time {
  color: #9996a5;
  font-size: 7px;
  white-space: nowrap
}

.ref-profile-evidence>div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 11px
}

.ref-profile-evidence figure {
  height: 92px;
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  background: #1e2024
}

.ref-profile-evidence img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ref-profile-evidence figure>.material-symbols-rounded {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ef9060;
  font-size: 28px
}

.ref-profile-evidence figcaption {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  overflow: hidden;
  border-radius: 7px;
  padding: 4px 6px;
  color: #fff;
  background: rgba(29, 30, 31, .72);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-report-controls {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: -17px 20px 13px;
  border: 1px solid #2b2e34;
  border-radius: 19px;
  padding: 10px;
  background: #1e2024;
  box-shadow: 0 13px 28px rgba(38, 39, 42, .1);
}

.ref-report-controls>div:first-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 8px
}

.ref-report-controls .ref-filter-control {
  height: 38px
}

.ref-report-controls nav {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 17px;
  background: #1e2024
}

.ref-report-controls nav button {
  border: 0;
  border-radius: 14px;
  padding: 8px 11px;
  color: #747180;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer
}

.ref-report-controls nav button.active {
  color: #fff;
  background: #ee8652;
  box-shadow: 0 6px 14px rgba(238, 134, 82, .24)
}

.ref-report-controls>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777482;
  font-size: 8px;
  white-space: nowrap
}

.ref-report-controls>span .material-symbols-rounded {
  font-size: 14px;
  color: #ee8652
}

.ref-report-controls>span.loading .material-symbols-rounded {
  animation: ref-spin .8s linear infinite
}

.ref-report-dates {
  grid-column: 1/-1 !important;
  display: flex !important;
  gap: 9px !important;
  padding-top: 2px
}

.ref-report-dates label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #777482;
  font-size: 8px
}

.ref-report-dates input {
  height: 32px;
  border: 1px solid #2b2e34;
  border-radius: 10px;
  padding: 0 9px;
  color: #4f4d5c;
  background: #1e2024;
  font: inherit;
  outline: 0
}

.ref-report-dates input:focus {
  border-color: #2b2e34;
  box-shadow: 0 0 0 3px rgba(238, 134, 82, .08)
}

.ref-reports .ref-report-kpis {
  margin-top: 0
}

.ref-panel-empty.compact {
  min-height: 200px;
  font-size: 8px
}

@media(max-width:1050px) {
  .ref-customer-profile-kpis {
    grid-template-columns: repeat(3, 1fr)
  }

  .ref-report-controls {
    grid-template-columns: 1fr auto
  }

  .ref-report-controls>span {
    grid-column: 1/-1
  }

  .ref-engineer-cards {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:820px) {
  .ref-customer-profile-grid {
    grid-template-columns: 1fr
  }

  .ref-profile-evidence>div {
    grid-template-columns: repeat(2, 1fr)
  }

  .ref-customer-profile>header {
    grid-template-columns: 40px 50px minmax(0, 1fr)
  }

  .ref-customer-profile>header>.ref-status {
    display: none
  }

  .ref-report-controls {
    grid-template-columns: 1fr;
    margin-inline: 10px
  }

  .ref-report-controls>div:first-child {
    grid-template-columns: 1fr
  }

  .ref-report-controls nav {
    justify-self: start
  }

  .ref-engineer-cards {
    grid-template-columns: 1fr
  }
}

/* Mature account and workforce workspaces */
.ref-customers-panel,
.ref-engineers-panel {
  border-color: #2b2e34;
  border-radius: 22px;
  background: #1e2024;
  box-shadow: 0 16px 38px rgba(33, 34, 37, .055);
}

.ref-customers-panel>header,
.ref-engineers-panel>header {
  min-height: 86px;
  padding: 18px 22px;
  border-bottom: 1px solid #2b2e34;
  background: #1e2024;
}

.ref-customers-panel>header::after,
.ref-engineers-panel>header::after {
  content: none;
}

.ref-customers-panel>header span,
.ref-engineers-panel>header span {
  color: #727482;
  font-size: 8px;
  letter-spacing: 1.25px;
}

.ref-customers-panel>header h2,
.ref-engineers-panel>header h2 {
  margin-top: 4px;
  color: #212225;
  font-size: 22px;
  letter-spacing: -.55px;
}

.ref-customers-panel>header p,
.ref-engineers-panel>header p {
  color: #858694;
  font-size: 9px;
}

.ref-customers-panel>header>strong,
.ref-engineers-panel>header>strong {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  color: #fff;
  background: #242527;
  box-shadow: none;
  font-size: 9px;
  font-weight: 750;
}

.ref-customers-panel .ref-directory-summary,
.ref-engineers-panel .ref-directory-summary {
  gap: 0;
  padding: 0 12px;
  border: 0;
  background: #242527;
}

.ref-customers-panel .ref-directory-summary article,
.ref-engineers-panel .ref-directory-summary article {
  min-height: 72px;
  gap: 11px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  padding: 13px 18px;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.ref-customers-panel .ref-directory-summary article:last-child,
.ref-engineers-panel .ref-directory-summary article:last-child {
  border-right: 0;
}

.ref-customers-panel .ref-directory-summary article:hover,
.ref-engineers-panel .ref-directory-summary article:hover {
  transform: none;
  box-shadow: none;
}

.ref-customers-panel .ref-directory-summary article>i,
.ref-engineers-panel .ref-directory-summary article>i {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  color: #b9afff !important;
  background: rgba(239, 144, 96, .14) !important;
}

.ref-customers-panel .ref-directory-summary span,
.ref-engineers-panel .ref-directory-summary span {
  color: #a7a8b5;
  font-size: 8px;
}

.ref-customers-panel .ref-directory-summary strong,
.ref-engineers-panel .ref-directory-summary strong {
  margin-top: 3px;
  color: #fff;
  font-size: 18px;
}

.ref-customer-cards,
.ref-engineer-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #1e2024;
}

.ref-customer-cards>article,
.ref-engineer-cards>article {
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 15px;
  padding: 15px 16px;
  background: #1e2024;
  box-shadow: none;
}

.ref-customer-cards>article::before,
.ref-engineer-cards>article::before {
  content: none;
}

.ref-customer-cards>article:hover,
.ref-engineer-cards>article:hover {
  transform: none;
  border-color: var(--app-accent-mid);
  box-shadow: 0 9px 24px rgba(38, 39, 41, .07);
}

.ref-customer-cards header>span:first-child,
.ref-engineer-cards header>span:first-child {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 50%;
  color: #fff !important;
  background: #2d2e31 !important;
  box-shadow: none;
  font-size: 9px;
}

.ref-customer-cards header>i {
  border: 1px solid #2b2e34;
  border-radius: 999px;
  padding: 4px 8px;
  color: #737582;
  background: #1e2024;
  font-size: 7px;
}

.ref-card-arrow {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #2b2e34 !important;
  border-radius: 50% !important;
  color: #595b69 !important;
  background: #1e2024 !important;
}

.ref-customer-cards h3,
.ref-engineer-cards h3 {
  margin: 12px 0 4px;
  color: #232427;
  font-size: 13px;
  letter-spacing: -.15px;
}

.ref-customer-cards>article>p,
.ref-engineer-cards>article>p {
  color: #858794;
  font-size: 8px;
}

.ref-customer-cards footer {
  gap: 0;
  margin-top: 13px;
  padding-top: 11px;
  border-top-color: #ececf1;
}

.ref-customer-cards footer span {
  border-right: 1px solid #2b2e34;
  padding-left: 11px;
  color: #8c8d98;
  font-size: 7px;
}

.ref-customer-cards footer span:first-child {
  padding-left: 0;
}

.ref-customer-cards footer span:last-child {
  border-right: 0;
}

.ref-customer-cards footer b {
  color: #27282a;
  font-size: 14px;
}

.ref-customer-cards footer span.attention b {
  color: #c24f50;
}

.ref-engineer-cards>article {
  min-height: 184px;
}

@media (min-width: 1051px) {
  .ref-engineer-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ref-engineer-cards article>header>i {
  border: 1px solid #2b2e34;
  border-radius: 999px;
  padding: 5px 9px;
  color: #555866;
  background: #1e2024;
}

.ref-engineer-cards header i.deployed {
  color: #256b78;
  background: #1e2024;
  border-color: #2b2e34;
}

.ref-engineer-cards header i.available {
  color: #ba4a12;
  background: #1e2024;
  border-color: #2b2e34;
}

.ref-engineer-cards header>.material-symbols-rounded {
  color: #8c8e9a;
}

.ref-engineer-assignment,
.ref-engineer-ready {
  min-height: 44px;
  margin-top: 11px;
  border-radius: 10px;
  background: #1e2024;
}

.ref-engineer-assignment>.material-symbols-rounded:first-child {
  color: #e96726;
  background: #1e2024;
}

.ref-engineer-cards>article>div {
  margin-top: 13px;
}

.ref-engineer-cards>article>div>i {
  height: 4px;
  background: #1e2024;
}

.ref-engineer-cards>article>div em {
  background: #ec783e;
}

.ref-engineer-cards footer {
  margin-top: 11px;
  padding-top: 9px;
}

@media(max-width:820px) {

  .ref-customer-cards,
  .ref-engineer-cards {
    grid-template-columns: 1fr;
  }

  .ref-customers-panel .ref-directory-summary,
  .ref-engineers-panel .ref-directory-summary {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 8px;
  }

  .ref-customers-panel .ref-directory-summary article:nth-child(2),
  .ref-engineers-panel .ref-directory-summary article:nth-child(2) {
    border-right: 0;
  }
}

/* Master-detail tree tables */
.ref-customers-panel,
.ref-engineers-panel {
  min-height: 540px;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
}

.ref-tree-workspace {
  min-height: 540px;
  display: grid;
  grid-template-columns: 36% 64%;
  grid-template-rows: 58px minmax(482px, auto);
  overflow: hidden;
  border-radius: 28px;
  background: #212225;
  box-shadow: 0 16px 34px rgba(33, 34, 37, .12);
}

.ref-tree-workspace-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 19px;
  color: #fff;
}

.ref-tree-workspace-header span {
  display: block;
  color: #8f92a5;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.ref-tree-workspace-header h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: -.2px;
}

.ref-tree-workspace-header p {
  margin: 2px 0 0;
  color: #9395a6;
  font-size: 7px;
}

.ref-tree-workspace-header>strong {
  color: #b6b8c7;
  font-size: 8px;
  font-weight: 650;
}

.ref-tree-table {
  min-width: 0;
  overflow: hidden;
  padding: 0 11px 12px 14px;
}

.ref-tree-table>header,
.ref-tree-row {
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: 7px;
}

.ref-tree-table>header {
  min-height: 28px;
  padding: 0 9px;
  color: #848799;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ref-tree-table>header span:first-child {
  grid-column: 1 / 4;
}

.ref-tree-table>header span:not(:first-child) {
  text-align: right;
}

.ref-tree-table>div {
  max-height: 442px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: #44464b transparent;
}

.ref-tree-table>div>section {
  margin-bottom: 4px;
}

.ref-tree-row {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 15px;
  padding: 5px 9px;
  color: #d7d8e1;
  background: #2a2b2e;
  text-align: left;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ref-tree-row:hover {
  background: #343538;
  transform: translateX(2px);
}

.ref-tree-table>div>section.active>.ref-tree-row {
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-mid), #eb7236);
  box-shadow: 0 8px 18px rgba(232, 95, 27, .28);
}

.ref-tree-row>.material-symbols-rounded {
  color: #898c9e;
  font-size: 16px;
}

.ref-tree-table>div>section.active>.ref-tree-row>.material-symbols-rounded {
  color: #fff;
}

.ref-tree-row>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  color: #fff;
  background: #353639;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.ref-tree-row>span {
  min-width: 0;
}

.ref-tree-row>span strong,
.ref-tree-row>span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-tree-row>span strong {
  font-size: 9px;
  font-weight: 700;
}

.ref-tree-row>span small {
  margin-top: 3px;
  color: #999cad;
  font-size: 7px;
}

.ref-tree-table>div>section.active>.ref-tree-row>span small {
  color: #dedaf8;
}

.ref-tree-row>b {
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.ref-tree-children {
  padding: 4px 0 1px 55px;
}

.ref-tree-children>button {
  width: 100%;
  min-height: 39px;
  position: relative;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  border: 0;
  border-radius: 11px;
  padding: 5px 8px;
  color: #c9cad5;
  background: #2e2f32;
  text-align: left;
}

.ref-tree-children>button::before {
  content: "";
  position: absolute;
  left: -17px;
  top: -8px;
  width: 13px;
  height: 27px;
  border-left: 1px solid #434549;
  border-bottom: 1px solid #434549;
  border-radius: 0 0 0 7px;
}

.ref-tree-children>button:hover {
  color: #fff;
  background: #37393c;
}

.ref-tree-children .material-symbols-rounded {
  color: #777b91;
  font-size: 14px;
}

.ref-tree-children span {
  min-width: 0;
}

.ref-tree-children strong,
.ref-tree-children small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-tree-children strong {
  font-size: 8px;
}

.ref-tree-children small {
  margin-top: 2px;
  color: #8f92a4;
  font-size: 6.5px;
}

.ref-tree-children>p {
  margin: 5px 0 7px;
  color: #85889a;
  font-size: 7px;
}

.ref-tree-detail {
  min-width: 0;
  min-height: 470px;
  max-height: 482px;
  overflow: auto;
  margin: 0 14px 14px 0;
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(circle at 82% 0, rgba(255, 255, 255, .13), transparent 35%),
    linear-gradient(135deg, #ed804a, #e65c17);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .32) transparent;
}

.ref-engineer-tree-detail {
  display: flex;
  flex-direction: column;
}

.ref-engineer-tree-detail>.ref-tree-detail-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ref-engineer-tree-detail>.ref-tree-detail-section>.ref-tree-history {
  flex: 1 1 auto;
}

.ref-engineer-tree-detail>.ref-tree-detail-section>.ref-tree-history .ref-panel-empty {
  height: 100%;
}

.ref-engineer-tree-detail>header {
  min-height: 80px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 13px 18px 8px;
}

.ref-engineer-tree-detail>header>i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .74);
  border-radius: 50%;
  background: #343538;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.ref-engineer-tree-detail>header span {
  color: #d7d3ef;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.ref-engineer-tree-detail>header h2 {
  margin: 3px 0 2px;
  color: #fff;
  font-size: 20px;
  letter-spacing: -.4px;
}

.ref-engineer-tree-detail>header p {
  margin: 0;
  color: #dbd7ef;
  font-size: 8px;
}

.ref-tree-view-more,
.ref-profile-view-more {
  min-height: 34px !important;
  min-width: 118px;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 18px !important;
  padding: 0 11px !important;
  color: #46484d !important;
  background: #1e2024 !important;
  font-size: 8.5px !important;
  font-weight: 750;
  white-space: nowrap;
}

.ref-tree-view-more>span,
.ref-profile-view-more>span {
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: 0;
  text-transform: none;
}

.ref-tree-view-more .material-symbols-rounded,
.ref-profile-view-more .material-symbols-rounded {
  color: inherit;
  font-size: 14px;
}

.ref-tree-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 4px 16px 11px;
}

.ref-tree-detail-kpis article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255, 255, 255, .09);
}

.ref-tree-detail-kpis span,
.ref-tree-detail-kpis strong {
  display: block;
}

.ref-tree-detail-kpis span {
  color: #ddd9f3;
  font-size: 7px;
}

.ref-tree-detail-kpis strong {
  margin-top: 7px;
  font-size: 15px;
}

.ref-tree-detail-section {
  overflow: hidden;
  margin: 0 16px 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(39, 40, 42, .16);
}

.ref-tree-detail-section>header {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ref-tree-detail-section>header span {
  color: #d5d1ec;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.ref-tree-detail-section>header h3 {
  margin: 3px 0 0;
  font-size: 13px;
}

.ref-tree-detail-section>header b {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .12);
  font-size: 8px;
}

.ref-tree-history>button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 62px 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 7px 11px;
  color: #fff;
  background: transparent;
  text-align: left;
}

.ref-tree-history>button:hover {
  background: rgba(255, 255, 255, .07);
}

.ref-tree-history>button>i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.ref-tree-history>button>i.complete {
  color: #baf0cf;
  background: rgba(56, 170, 103, .2);
}

.ref-tree-history>button>i .material-symbols-rounded {
  font-size: 15px;
}

.ref-tree-history>button>span {
  min-width: 0;
}

.ref-tree-history strong,
.ref-tree-history small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-tree-history strong {
  font-size: 8.5px;
}

.ref-tree-history small {
  margin-top: 3px;
  color: #d2cee9;
  font-size: 6.5px;
}

.ref-tree-history time {
  color: #d2cee9;
  font-size: 6.5px;
  text-align: right;
}

.ref-tree-history>button>.material-symbols-rounded {
  font-size: 14px;
}

/* Embedded customer inspector */
.ref-customer-tree-detail {
  padding: 0;
}

.ref-customer-profile.embedded {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ref-customer-profile.embedded>header {
  min-height: 82px;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 11px;
  padding: 12px 17px 7px;
  background: transparent;
}

.ref-customer-profile.embedded>header>button:first-child {
  display: none;
}

.ref-customer-profile.embedded>header>span:nth-child(2) {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #343538;
  box-shadow: none;
}

.ref-customer-profile.embedded>header small {
  color: #d5d1ec;
  font-size: 7px;
}

.ref-customer-profile.embedded>header h2 {
  margin-top: 3px;
  font-size: 19px;
}

.ref-customer-profile.embedded>header p {
  color: #d7d3ea;
  font-size: 7.5px;
}

.ref-customer-profile.embedded .ref-customer-profile-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px 14px 10px;
  border: 0;
  background: transparent;
}

.ref-customer-profile.embedded .ref-customer-profile-kpis article {
  min-height: 50px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 9px 28px 9px 10px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.ref-customer-profile.embedded .ref-customer-profile-kpis span {
  color: #d7d3ed;
  font-size: 6.5px;
}

.ref-customer-profile.embedded .ref-customer-profile-kpis strong {
  font-size: 11px;
}

.ref-customer-profile.embedded .ref-customer-profile-kpis .material-symbols-rounded {
  right: 8px;
  top: 15px;
  color: #fff;
  font-size: 15px;
}

.ref-customer-profile.embedded .ref-customer-profile-grid {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 0 12px 12px;
  background: transparent;
}

.ref-customer-profile.embedded .ref-profile-left {
  gap: 9px;
}

.ref-customer-profile.embedded .ref-profile-left>article,
.ref-customer-profile.embedded .ref-customer-profile-grid>article {
  border-color: rgba(255, 255, 255, .11);
  border-radius: 15px;
}

.ref-customer-profile.embedded .ref-customer-profile-grid article>header {
  min-height: 52px;
  padding: 9px 12px;
}

.ref-customer-profile.embedded .ref-customer-profile-grid article>header h3 {
  font-size: 12px;
}

.ref-customer-profile.embedded .ref-profile-timeline>div {
  max-height: 320px;
}

/* Full engineer page */
.ref-engineer-profile {
  overflow: hidden;
  border: 1px solid var(--ref-border);
  border-radius: 26px;
  background: #1e2024;
  box-shadow: 0 18px 45px rgba(57, 59, 63, .07);
}

.ref-engineer-profile>header {
  min-height: 108px;
  display: grid;
  grid-template-columns: 42px 58px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  color: #fff;
  background: radial-gradient(circle at 86% 0, rgb(from var(--app-accent-mid) r g b / .3), transparent 31%), linear-gradient(125deg, #242528, #404246 64%, #e96421);
}

.ref-engineer-profile>header .ref-export-toolbar {
  flex-wrap: nowrap;
}

.ref-engineer-profile>header>button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.ref-engineer-profile>header>i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: #343538;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ref-engineer-profile>header span {
  color: #aaa8bd;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.ref-engineer-profile>header h2 {
  margin: 4px 0 2px;
  font-size: 25px;
}

.ref-engineer-profile>header p {
  margin: 0;
  color: #c6c2d8;
  font-size: 9px;
}

.ref-engineer-profile-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ref-border);
  background: #1e2024;
}

.ref-engineer-profile-kpis article {
  min-width: 0;
  position: relative;
  min-height: 58px;
  border: 1px solid #2b2e34;
  border-radius: 14px;
  padding: 10px 34px 10px 11px;
}

.ref-engineer-profile-kpis span,
.ref-engineer-profile-kpis strong {
  display: block;
}

.ref-engineer-profile-kpis span {
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-engineer-profile-kpis strong {
  margin-top: 5px;
  font-size: 15px;
}

.ref-engineer-profile-kpis .material-symbols-rounded {
  position: absolute;
  top: 16px;
  right: 10px;
  color: var(--ref-violet);
  font-size: 18px;
}

.ref-engineer-profile-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 12px;
  padding: 14px 16px 16px;
}

.ref-engineer-profile-grid>article {
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 19px;
  background: #1e2024;
}

.ref-engineer-profile-grid>article>header {
  min-height: 62px;
  padding: 12px 15px;
  border-bottom: 1px solid #2b2e34;
}

.ref-engineer-profile-grid>article>header span {
  color: var(--ref-violet);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.ref-engineer-profile-grid>article>header h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

.ref-engineer-operational-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  margin: 14px;
  border: 1px solid #2b2e34;
  border-radius: 15px;
  padding: 12px;
  background: #1e2024;
}

.ref-engineer-operational-card>i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--app-accent-mid-2);
  background: #1e2024;
}

.ref-engineer-operational-card>i.available {
  color: #2f8255;
  background: #1e2024;
}

.ref-engineer-operational-card span,
.ref-engineer-operational-card strong,
.ref-engineer-operational-card p {
  display: block;
  margin: 0;
}

.ref-engineer-operational-card span {
  color: var(--ref-muted);
  font-size: 7px;
}

.ref-engineer-operational-card strong {
  margin-top: 4px;
  font-size: 12px;
}

.ref-engineer-operational-card p {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 7px;
}

.ref-engineer-operational-card button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-engineer-performance {
  margin: 0 14px 16px;
}

.ref-engineer-performance span {
  display: flex;
  justify-content: space-between;
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-engineer-performance i {
  height: 6px;
  display: block;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 5px;
  background: #1e2024;
}

.ref-engineer-performance em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--ref-violet);
}

.ref-engineer-profile-history>div {
  max-height: 348px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ref-engineer-profile-history>div::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ref-engineer-profile-history>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ref-engineer-profile-history>header b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ref-violet);
  background: #1e2024;
  font-size: 9px;
}

.ref-engineer-profile-history>div>button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid #2b2e34;
  padding: 10px 13px;
  color: var(--ref-ink);
  background: #1e2024;
  text-align: left;
}

.ref-engineer-profile-history>div>button:hover {
  background: #1e2024;
}

.ref-engineer-profile-history>div>button>i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ref-violet);
  background: #1e2024;
}

.ref-engineer-profile-history>div>button>i.complete {
  color: #278b59;
  background: #1e2024;
}

.ref-engineer-profile-history strong,
.ref-engineer-profile-history small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-engineer-profile-history strong {
  font-size: 9px;
}

.ref-engineer-profile-history small {
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 7px;
}

.ref-engineer-profile-history>div>button>div {
  display: grid;
  justify-items: end;
  gap: 4px;
}

@media(max-width:1050px) {
  .ref-tree-workspace {
    grid-template-columns: 42% 58%;
  }

  .ref-tree-detail-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .ref-customer-profile.embedded .ref-customer-profile-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:820px) {
  .ref-tree-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 58px auto auto;
    gap: 10px;
    padding-bottom: 10px;
  }

  .ref-tree-table {
    max-height: 330px;
    padding-right: 14px;
  }

  .ref-tree-table>div {
    max-height: 292px;
  }

  .ref-tree-detail {
    min-height: 420px;
    max-height: 600px;
    margin: 0 12px;
  }

  .ref-engineer-profile-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .ref-engineer-profile-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   SHIPPING THEME — black surfaces, orange accent.
   Appended last so it overrides earlier rules.
   ============================================================ */
:root {
  /* Mobile-app palette (T:/Adithi/Saptha-Mobile-Service-App theme/tokens.js):
     neutral slate base + orange signature accent. */
  --ref-page: #1a1a1c;
  --ref-shell: #191b1e;
  --ref-surface: #1e2024;
  --ref-ink: #eceef2;
  --ref-muted: #a4abb6;
  --ref-border: #2b2e34;
  --ref-dark: #1e2024;
  --ref-dark-soft: #212429;
  --ref-violet: var(--app-accent);
  --ref-violet-2: var(--app-accent-soft);
  --ref-cyan: #79d1ff;
  --ref-green: #34d399;
  --ref-red: #ffb4ab;
  --ref-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  --orange: var(--app-accent);
  --orange-2: var(--app-accent-soft);
  --on-orange: #5e2a00;
  --slate-high: #282b31;
  --slate-highest: #32363d;
  --faint: #6d747f;
}

body:has(.reference-dashboard) {
  background: var(--ref-page) !important;
  color: var(--ref-ink) !important;
}

.reference-dashboard {
  background: radial-gradient(circle at 84% -6%, rgb(from var(--app-accent) r g b /.12), transparent 34%),
    radial-gradient(circle at 2% 106%, rgb(from var(--app-accent) r g b /.06), transparent 40%),
    var(--ref-page);
  color: var(--ref-ink);
}

.reference-shell {
  border: 1px solid #2b2e34;
  background: var(--ref-shell);
  box-shadow: var(--ref-shadow);
}

/* Header / nav / tools */
.ref-brand strong {
  color: var(--ref-ink);
}

.ref-navigation {
  background: #1e2024;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.ref-navigation button {
  color: #9a9aa0;
}

.ref-navigation button:hover {
  color: #fff;
}

.ref-navigation button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 7px 18px rgb(from var(--app-accent) r g b /.42);
}

.ref-icon-button,
.ref-user {
  border: 1px solid #32363d;
  color: #d8d8dc;
  background: #1e2024;
  box-shadow: none;
}

.ref-icon-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.ref-icon-button.has-alert>i {
  border-color: #1e2024;
}

.ref-user {
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  border-color: transparent;
}

/* Page heading */
.ref-page-title h1 {
  color: var(--ref-ink);
}

.ref-page-title p {
  color: var(--ref-muted);
}

.ref-page-title>.ref-icon-button {
  color: var(--orange);
}

.ref-sync-time {
  color: var(--ref-muted);
}

.ref-primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 22px rgb(from var(--app-accent) r g b /.3);
}

.ref-primary-button .material-symbols-rounded {
  color: inherit;
}

/* KPI metric cards */
.ref-metric-card {
  border: 1px solid #2b2e34;
  background: #1e2024;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
}

.ref-metric-card:nth-child(1) {
  background: linear-gradient(150deg, #1e2024 62%, #1f2127)
}

.ref-metric-card:nth-child(2) {
  background: linear-gradient(150deg, #1e2024 62%, #1e2025)
}

.ref-metric-card:nth-child(3) {
  background: linear-gradient(150deg, #1e2024 62%, #1d2126)
}

.ref-metric-card:nth-child(4) {
  background: linear-gradient(150deg, #1e2024 62%, #1e2124)
}

.ref-metric-label>span {
  color: #dadadf;
}

.ref-metric-label>i {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.15);
}

.ref-metric-label>i.danger {
  color: var(--ref-red);
  background: rgba(239, 113, 109, .15);
}

.ref-metric-label>i.cyan {
  color: var(--ref-cyan);
  background: rgba(32, 191, 212, .14);
}

.ref-metric-label>i.success {
  color: var(--ref-green);
  background: rgba(84, 200, 121, .15);
}

.ref-metric-value {
  color: var(--ref-ink);
}

.ref-metric-card>p {
  color: var(--ref-muted);
}

.ref-overdue-list>div:not(.ref-empty-visual) {
  background: #212429;
  border-color: #2b2e34;
}

.ref-overdue-list strong {
  color: #efeceb;
}

/* Bar chart: orange */
.ref-bar-chart i {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
}

.ref-bar-chart>span:nth-child(2n) i {
  opacity: .55;
}

/* Filter bar + dropdowns */
.ref-filterbar {
  color: var(--ref-ink);
}

.ref-filter-dropdown,
.ref-filter-search,
.ref-filter-date {
  border: 1px solid #2b2e34 !important;
  background: #1e2024 !important;
  color: var(--ref-ink) !important;
}

.ref-filterbar input {
  color: var(--ref-ink) !important;
  background: transparent !important;
}

.ref-filterbar input::placeholder {
  color: #83838a !important;
}

.ref-filterbar>strong {
  color: var(--ref-muted);
}

/* Large surface cards forced dark (not orange) */
.ref-request-detail {
  border: 1px solid #2b2e34;
  background: radial-gradient(circle at 82% -12%, rgb(from var(--app-accent) r g b /.15), transparent 55%), linear-gradient(160deg, #17161a 0%, #121113 100%);
}

.ref-request-detail header .ref-status {
  color: #f5ddcb;
  background: rgb(from var(--app-accent) r g b /.18);
}

.ref-detail-tabs {
  background: rgba(255, 255, 255, .05);
}

.ref-detail-tabs button.active {
  color: #5e2a00;
  background: var(--orange);
}

.ref-tree-detail {
  border: 1px solid #2b2e34;
  background: radial-gradient(130% 62% at 82% -12%, rgb(from var(--app-accent) r g b /.14), transparent 60%), linear-gradient(160deg, #18171b 0%, #121113 100%);
}

/* Segmented tabs */
.ref-segmented-tabs {
  background: #212429;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}

.ref-segmented-tabs button {
  color: #a4a4aa;
}

.ref-segmented-tabs button>span {
  border-color: #303032;
  color: #ebebf0;
  background: #26262a;
}

.ref-segmented-tabs button.active>span {
  border-color: transparent;
  color: #5e2a00;
  background: #1e2024;
}

/* Workspace inner surfaces */
.ref-workspace-header .ref-icon-button {
  border-color: #32363d;
  color: #d3d3d8;
  background: #212429;
}

.ref-request-row:hover {
  background: #212429;
}

/* Map + directory */
.ref-map-customer,
.ref-map-facts>span {
  background: #212429;
}

.ref-map-request-list button:hover,
.ref-map-request-list button.active {
  background: #2b2e34;
}

.ref-directory-summary {
  background: #191b1e;
  border-color: #2b2e34;
}

.ref-directory-summary article {
  border-color: #2b2e34;
  background: #1e2024;
}

.ref-directory-summary article>i {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
}

.ref-directory-summary span {
  color: var(--ref-muted);
}

.ref-directory-summary strong {
  color: var(--ref-ink);
}

.ref-engineers-panel,
.ref-customers-panel {
  background: #17181a;
}

/* Data-table layout for Engineer & Customer directories */
.ref-data-panel {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--ref-border);
  border-radius: 22px;
  background: #191b1e;
}

.ref-data-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #2b2e34;
}

.ref-data-panel-header span {
  color: var(--orange);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ref-data-panel-header h2 {
  margin: 5px 0 0;
  font-size: 20px;
  letter-spacing: -.4px;
  color: var(--ref-ink);
}

.ref-data-panel-header>strong {
  border: 1px solid #3a3128;
  border-radius: 16px;
  padding: 8px 13px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.08);
  font-size: 10px;
  white-space: nowrap;
}

.ref-data-table {
  overflow-x: auto;
  scrollbar-width: thin;
}

.ref-data-head {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 700px;
  padding: 12px 22px;
  border-bottom: 1px solid #2b2e34;
  color: #83838a;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.ref-data-head .num {
  text-align: center;
}

.ref-data-head .act {
  text-align: right;
}

.ref-data-body {
  display: flex;
  flex-direction: column;
}

.ref-data-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 700px;
  padding: 11px 22px;
  border-bottom: 1px solid #1a1a1c;
  color: var(--ref-ink);
  transition: background .16s ease;
}

.ref-data-row:hover {
  background: #212429;
}

.ref-eng-cols {
  grid-template-columns: 34px minmax(0, 1.8fr) 92px 58px 82px 56px minmax(90px, 1fr) 44px;
}

.ref-cust-cols {
  grid-template-columns: 34px minmax(0, 2fr) minmax(0, 1.1fr) 56px 56px 116px 44px;
}

.ref-data-head .sno,
.ref-data-row .sno {
  text-align: center;
  color: var(--ref-muted);
  font-size: 10px;
  font-weight: 700;
}

.ref-data-row .sno .top {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 9px;
  font-weight: 800;
}

.ref-export-toolbar {
  display: flex;
  gap: 6px;
}

.ref-export-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ref-border);
  border-radius: 9px;
  color: var(--ref-muted);
  background: #1e2126;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.ref-export-toolbar button:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: #22262b;
}

.ref-export-toolbar button .material-symbols-rounded {
  font-size: 15px;
}

@media (max-width: 680px) {
  .ref-export-toolbar button span {
    display: none;
  }

  .ref-export-toolbar button {
    padding: 0 8px;
  }
}

.ref-data-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ref-data-name>i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #32363d, var(--orange));
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.ref-data-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-data-name strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.32;
  word-break: break-word;
}

.ref-data-name small {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-data-row.ref-cust-cols,
.ref-data-row.ref-eng-cols {
  align-items: center;
}

.ref-data-row .num {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.ref-data-type,
.ref-data-date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c8c8ce;
  font-size: 10px;
}

.ref-data-rate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ref-data-rate>i {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 4px;
  background: #32363d;
}

.ref-data-rate em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
}

.ref-data-rate small {
  color: #c8c8ce;
  font-size: 9px;
  min-width: 26px;
  text-align: right;
}

/* Icon-only eye button */
.ref-data-view {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #313640;
  border-radius: 10px;
  color: var(--orange);
  background: #1e2126;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .1s ease;
}

.ref-data-view:hover {
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  border-color: transparent;
}

.ref-data-view:active {
  transform: scale(.94);
}

.ref-data-view .material-symbols-rounded {
  font-size: 17px;
}

/* Full customer/engineer profile pages -> dark (mobile slate) */
.ref-customer-profile,
.ref-engineer-profile {
  border-color: var(--ref-border);
  background: var(--ref-shell);
  box-shadow: var(--ref-shadow);
}

.ref-customer-profile>header,
.ref-engineer-profile>header {
  background: radial-gradient(circle at 86% 0, rgb(from var(--app-accent) r g b /.32), transparent 34%), linear-gradient(125deg, #24262a, #2f333a 60%, #b3611f);
}

.ref-customer-profile-kpis,
.ref-engineer-profile-kpis {
  background: var(--ref-surface);
  border-color: var(--ref-border);
}

.ref-customer-profile-kpis article,
.ref-engineer-profile-kpis article {
  border-color: var(--ref-border);
  background: #212429;
}

.ref-customer-profile-kpis strong,
.ref-engineer-profile-kpis strong {
  color: var(--ref-ink);
}

.ref-customer-profile-kpis .material-symbols-rounded,
.ref-engineer-profile-kpis .material-symbols-rounded {
  color: var(--orange);
}

.ref-customer-profile-grid,
.ref-engineer-profile-grid {
  background: #17181a;
}

.ref-profile-left>article,
.ref-customer-profile-grid>article,
.ref-engineer-profile-grid>article {
  border-color: var(--ref-border);
  background: var(--ref-surface);
}

.ref-customer-profile-grid article>header,
.ref-engineer-profile-grid>article>header {
  border-color: var(--ref-border);
}

.ref-customer-profile-grid article>header h3,
.ref-engineer-profile-grid article>header h3 {
  color: var(--ref-ink);
}

.ref-customer-profile-grid article>header span,
.ref-engineer-profile-grid article>header span {
  color: var(--orange);
}

.ref-customer-profile-grid article>header b,
.ref-engineer-profile-history>header b {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
}

.ref-profile-requests>div>button,
.ref-engineer-profile-history>div>button {
  border-color: #23262b;
  background: var(--ref-surface);
  color: var(--ref-ink);
}

.ref-profile-requests>div>button:hover,
.ref-engineer-profile-history>div>button:hover {
  background: #212429;
}

.ref-profile-requests>div>button>i,
.ref-engineer-profile-history>div>button>i {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
}

.ref-profile-requests>div>button>i.complete,
.ref-engineer-profile-history>div>button>i.complete {
  color: #34d399;
  background: rgba(52, 211, 153, .16);
}

.ref-profile-requests strong,
.ref-engineer-profile-history strong {
  color: var(--ref-ink);
}

.ref-profile-timeline>div>section:not(:last-child) {
  border-color: #23262b;
}

.ref-profile-timeline section strong {
  color: var(--ref-ink);
}

.ref-profile-timeline section p {
  color: var(--ref-muted);
}

.ref-profile-timeline section>i {
  border-color: var(--ref-surface);
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b /.2);
}

.ref-profile-evidence figure {
  background: #212429;
}

.ref-profile-evidence figure>.material-symbols-rounded {
  color: var(--orange);
}

.ref-customer-profile>header small,
.ref-engineer-profile>header small {
  color: #f0dccb;
}

.ref-customer-profile>header p,
.ref-engineer-profile>header p {
  color: #e6ddd4;
}

/* Data-table pagination */
.ref-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid #23262b;
}

.ref-page-size {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ref-page-size>span {
  margin-right: 4px;
  color: var(--ref-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.ref-page-size button {
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--ref-border);
  border-radius: 9px;
  padding: 0 8px;
  color: var(--ref-muted);
  background: #212429;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.ref-page-size button:hover {
  color: var(--ref-ink);
  border-color: var(--faint);
}

.ref-page-size button.active {
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  border-color: transparent;
}

.ref-page-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ref-page-nav>span {
  color: var(--ref-muted);
  font-size: 10px;
}

.ref-page-nav>b {
  color: var(--ref-ink);
  font-size: 10px;
  font-weight: 700;
  min-width: 46px;
  text-align: center;
}

.ref-page-nav button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ref-border);
  border-radius: 9px;
  color: var(--ref-ink);
  background: #212429;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.ref-page-nav button:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--orange);
}

.ref-page-nav button:disabled {
  opacity: .4;
  cursor: default;
}

.ref-page-nav button .material-symbols-rounded {
  font-size: 17px;
}

/* Re-accent buttons/badges that must NOT be dark (fixed after bg-darken pass) */
.ref-reports>header button {
  color: var(--on-orange) !important;
  background: linear-gradient(135deg, var(--orange-2), var(--orange)) !important;
  box-shadow: 0 10px 22px rgb(from var(--app-accent) r g b /.28) !important;
}

.ref-segmented-tabs button.active>span {
  background: #fff !important;
  color: #5e2a00 !important;
  border-color: transparent !important;
}

.ref-detail-tabs button.active {
  color: #5e2a00 !important;
  background: var(--orange) !important;
}

.ref-tree-view-more,
.ref-profile-view-more {
  color: var(--on-orange) !important;
  background: linear-gradient(135deg, var(--orange-2), var(--orange)) !important;
  border-color: transparent !important;
}

.ref-report-controls nav button.active {
  color: var(--on-orange) !important;
  background: linear-gradient(135deg, var(--orange-2), var(--orange)) !important;
}

.ref-header-popover>header b,
.ref-header-popover>div>button>i {
  color: var(--orange) !important;
  background: rgb(from var(--app-accent) r g b /.14) !important;
}

.ref-header-popover>div>button:hover {
  background: #212429 !important;
}

.ref-header-popover>footer button,
.ref-header-popover a[role="button"] {
  color: var(--on-orange) !important;
  background: linear-gradient(135deg, var(--orange-2), var(--orange)) !important;
}

/* Report KPI icon tints keep semantic hues */
.ref-report-kpis article:nth-child(1)>.material-symbols-rounded {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.15);
}

.ref-report-kpis article:nth-child(2)>.material-symbols-rounded {
  color: #34d399;
  background: rgba(52, 211, 153, .15);
}

.ref-report-kpis article:nth-child(3)>.material-symbols-rounded {
  color: #ffb4ab;
  background: rgba(255, 180, 171, .14);
}

.ref-report-kpis article:nth-child(4)>.material-symbols-rounded {
  color: #79d1ff;
  background: rgba(121, 209, 255, .14);
}

.ref-report-status p>em {
  background: linear-gradient(90deg, var(--orange-2), var(--orange)) !important;
}

.ref-reports>header {
  background: radial-gradient(circle at 88% -10%, rgb(from var(--app-accent) r g b /.28), transparent 42%), linear-gradient(120deg, #1f2226 0%, #262a2f 55%, #6d3c18 130%) !important;
}

/* Directory panels are now plain wrappers (stats band removed) */
.ref-engineers-panel,
.ref-customers-panel {
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Icon buttons — raise contrast so they're clearly visible */
.ref-icon-button {
  background: #24272c !important;
  border: 1px solid #383c43 !important;
  color: #e7eaef !important;
}

.ref-icon-button .material-symbols-rounded {
  color: #d3d8df;
}

.ref-icon-button:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

.ref-icon-button:hover .material-symbols-rounded {
  color: var(--orange);
}

/* Fix: long customer/engineer name must truncate, not overlap next column */
.ref-data-name>span {
  min-width: 0;
  overflow: hidden;
}

.ref-data-type,
.ref-data-date {
  min-width: 0;
}

/* Profile popover (avatar menu) */
.ref-profile-popover {
  width: min(260px, calc(100vw - 24px));
}

.ref-profile-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 15px 13px;
  border-bottom: 1px solid #23262b;
}

.ref-profile-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 12px;
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 14px;
  font-weight: 800;
}

.ref-profile-card>div {
  min-width: 0;
}

.ref-profile-card strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-profile-card small {
  display: block;
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 10px;
}

.ref-profile-meta {
  padding: 12px 16px;
  display: grid;
  gap: 9px;
}

.ref-profile-meta p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ref-muted);
  font-size: 10px;
}

.ref-profile-meta p .material-symbols-rounded {
  color: var(--orange);
  font-size: 16px;
}

.ref-profile-meta b {
  color: var(--ref-ink);
  font-weight: 700;
}

.ref-profile-popover>footer {
  padding: 12px 16px 14px;
  border-top: 1px solid #23262b;
}

.ref-profile-popover>footer button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #383c43;
  border-radius: 12px;
  padding: 10px;
  color: var(--ref-ink);
  background: #24272c;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.ref-profile-popover>footer button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.ref-profile-popover>footer button .material-symbols-rounded {
  font-size: 16px;
}

/* ── Map analytics row (priority / stage / selected-SR analytics) ── */
.ref-map-analytics {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

.ref-analytic-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ref-analytic-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ref-border);
  border-radius: 16px;
  padding: 13px 15px;
  background: var(--ref-surface);
}

.ref-analytic-card>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ref-analytic-card header span {
  display: block;
  color: var(--orange);
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-analytic-card header h3 {
  margin: 3px 0 0;
  color: var(--ref-ink);
  font-size: 13px;
}

.ref-analytic-card header>b {
  color: var(--ref-muted);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.ref-analytic-bars {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
}

.ref-analytic-bars p {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ref-analytic-bars--cust p {
  grid-template-columns: 82px minmax(0, 1fr) 20px;
}

.ref-analytic-bars p>span {
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-analytic-bars p>i {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #26292f;
}

.ref-analytic-bars p em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

.ref-analytic-bars p>b {
  color: var(--ref-ink);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.ref-analytic-bars .is-high em {
  background: linear-gradient(90deg, #ff8f8a, #ffb4ab);
}

.ref-analytic-bars .is-norm em {
  background: linear-gradient(90deg, #59616c, #7a828d);
}

.ref-analytic-bars .is-low em {
  background: linear-gradient(90deg, #9fdcff, #79d1ff);
}

/* Completion donut */
.ref-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ref-donut-ring {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}

.ref-donut-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ref-donut-track {
  fill: none;
  stroke: #2b2f36;
  stroke-width: 3.4;
}

.ref-donut-arc {
  fill: none;
  stroke: url(#refDonutGrad);
  stroke-width: 3.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgb(from var(--app-accent) r g b /.45));
  transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1);
}

.ref-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ref-donut-center strong {
  color: var(--ref-ink);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
}

.ref-donut-center strong small {
  font-size: 11px;
  font-weight: 700;
  color: var(--ref-muted);
  margin-left: 1px;
}

.ref-donut-center span {
  margin-top: 3px;
  color: var(--faint);
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.ref-donut-legend {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ref-donut-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ref-muted);
  font-size: 9px;
}

.ref-donut-legend li b {
  margin-left: auto;
  color: var(--ref-ink);
  font-size: 11px;
  font-weight: 700;
}

.ref-donut-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ref-donut-legend i.done {
  background: var(--orange);
}

.ref-donut-legend i.open {
  background: #59616c;
}

.ref-donut-legend i.high {
  background: #ffb4ab;
}

/* SR media gallery */
.ref-sr-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ref-sr-media-grid figure,
.ref-sr-media-grid>button {
  width: 100%;
  height: 56px;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 9px;
  padding: 0;
  background: #212429;
  cursor: pointer;
}

.ref-sr-media-grid>button:hover {
  box-shadow: 0 0 0 2px var(--orange);
}

.ref-sr-media-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ref-sr-media-doc {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--orange);
}

.ref-sr-media-doc .material-symbols-rounded {
  font-size: 22px;
}

.ref-sr-analytics-body {
  display: grid;
  gap: 14px;
}

.ref-sr-subtitle {
  display: block;
  margin-bottom: 10px;
  color: var(--ref-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.ref-sr-progress-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

.ref-sr-progress-steps span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.ref-sr-progress-steps span::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #2a2d33;
}

.ref-sr-progress-steps span:first-child::before {
  display: none;
}

.ref-sr-progress-steps span.done::before {
  background: var(--orange);
}

.ref-sr-progress-steps span>i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a2d33;
  border: 2px solid var(--ref-surface);
  position: relative;
  z-index: 1;
}

.ref-sr-progress-steps span.done>i {
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b /.2);
}

.ref-sr-progress-steps small {
  color: var(--ref-muted);
  font-size: 7px;
  text-align: center;
  line-height: 1.2;
}

.ref-sr-progress-steps span.done small {
  color: var(--ref-ink);
}

.ref-sr-engineers>div,
.ref-sr-activity>div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #23262b;
}

.ref-sr-engineers>div:last-child,
.ref-sr-activity>div:last-child {
  border-bottom: 0;
}

.ref-sr-engineers>div>i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 10px;
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 8px;
  font-weight: 800;
  font-style: normal;
}

.ref-sr-engineers>div>div,
.ref-sr-activity>div>div {
  min-width: 0;
  flex: 1;
}

.ref-sr-engineers strong,
.ref-sr-activity strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-sr-engineers small,
.ref-sr-activity small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-sr-engineers .on-call {
  color: #34d399;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.ref-sr-activity>div>i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--orange);
  align-self: flex-start;
}

.ref-sr-activity time {
  color: var(--faint);
  font-size: 8px;
  white-space: nowrap;
  align-self: flex-start;
}

.ref-sr-empty {
  margin: 0;
  color: var(--ref-muted);
  font-size: 9px;
}

@media (max-width: 1050px) {
  .ref-map-analytics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ref-analytic-charts {
    grid-template-columns: 1fr;
  }
}

/* Cap the Live Map height so it doesn't dominate the screen; aside scrolls */
.ref-map-workspace {
  align-items: start !important;
}

.ref-map-stage {
  height: 440px !important;
  min-height: 440px !important;
}

.ref-map-stage iframe {
  height: 440px !important;
  min-height: 440px !important;
}

.ref-map-workspace>aside {
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.ref-map-workspace>aside::-webkit-scrollbar {
  width: 5px;
}

.ref-map-workspace>aside::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, .16);
}

/* Map: 3-column layout — browse | map | selected-SR panel (media/reviews beside the map) */
.ref-map-workspace--3col {
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
}

.ref-map-sr-panel {
  overflow: hidden auto;
  border-radius: 26px;
  padding: 18px 16px;
  background: linear-gradient(155deg, #27282a 0%, #1d1e1f 100%);
  box-shadow: 0 14px 34px rgba(40, 41, 43, .13);
  color: #fff;
}

.ref-sr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.ref-sr-head>div {
  min-width: 0;
}

.ref-sr-head span {
  display: block;
  color: var(--orange);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-sr-head h2 {
  margin: 4px 0 3px;
  color: var(--ref-ink);
  font-size: 18px;
  letter-spacing: -.4px;
}

.ref-sr-head small {
  display: block;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-map-sr-panel .ref-sr-progress-steps {
  margin-bottom: 16px;
}

.ref-map-sr-panel .ref-sr-media,
.ref-map-sr-panel .ref-sr-engineers,
.ref-map-sr-panel .ref-sr-activity {
  margin-top: 15px;
}

.ref-map-sr-panel .ref-sr-media-grid figure,
.ref-map-sr-panel .ref-sr-media-grid>button {
  height: 66px;
}

.ref-map-sr-panel .ref-panel-empty {
  min-height: 380px;
}

/* charts now sit in a full-width row below the map */
.ref-map-analytics {
  grid-template-columns: 1fr !important;
}

.ref-analytic-charts--row {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1200px) {
  .ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .ref-map-browse {
    display: none;
  }

  .ref-analytic-charts--row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 860px) {
  .ref-map-workspace--3col {
    grid-template-columns: 1fr !important;
  }

  .ref-map-browse {
    display: block;
  }
}

@media (max-width: 560px) {
  .ref-analytic-charts--row {
    grid-template-columns: 1fr !important;
  }
}

/* Clean, inset panel scrollbars (no overlap) */
.ref-map-workspace>aside,
.ref-map-sr-panel {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.ref-map-workspace>aside::-webkit-scrollbar,
.ref-map-sr-panel::-webkit-scrollbar {
  width: 8px;
}

.ref-map-workspace>aside::-webkit-scrollbar-track,
.ref-map-sr-panel::-webkit-scrollbar-track {
  background: transparent;
}

.ref-map-workspace>aside::-webkit-scrollbar-thumb,
.ref-map-sr-panel::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ref-map-workspace>aside::-webkit-scrollbar-thumb:hover,
.ref-map-sr-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .26);
  background-clip: padding-box;
}

.ref-map-browse>header {
  margin-bottom: 12px;
}

/* Map browse column: dedicate the panel to the complete SR list. */
.ref-map-browse {
  overflow: hidden !important;
}

.ref-map-browse>.ref-map-request-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 0;
  padding-right: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ref-map-browse>.ref-map-request-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Hide the map-panel scrollbars entirely (keep scroll functional) */
.ref-map-workspace>aside,
.ref-map-sr-panel,
.ref-map-browse {
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
  -ms-overflow-style: none !important;
}

.ref-map-workspace>aside::-webkit-scrollbar,
.ref-map-sr-panel::-webkit-scrollbar,
.ref-map-browse::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Reports — management overview: health score, export toolbar, 6 KPIs */
.ref-reports>header {
  grid-template-columns: minmax(170px, 1fr) auto minmax(140px, .65fr) auto !important;
  gap: 18px;
  align-items: center;
}

.ref-report-headline span {
  color: #f0dccb;
}

.ref-report-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ref-score-ring {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.ref-score-ring strong {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}

.ref-score-ring small {
  font-size: 8px;
  opacity: .82;
}

.ref-score-ring.good {
  border-color: #8ff0b8;
}

.ref-score-ring.ok {
  border-color: #ffd7ad;
}

.ref-score-ring.warn {
  border-color: #ffe08a;
}

.ref-score-ring.bad {
  border-color: #ffb0a8;
}

.ref-report-score>div {
  min-width: 0;
}

.ref-report-score>div>span {
  display: block;
  color: #f0dccb;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.ref-report-score>div>b {
  display: block;
  margin: 3px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
}

.ref-report-score>div>b.good {
  color: #c7f7d9;
}

.ref-report-score>div>b.bad {
  color: #ffc9c3;
}

.ref-report-score>div>small {
  display: block;
  color: #ecd6c8;
  font-size: 8px;
}

.ref-report-export {
  display: flex;
  gap: 6px;
}

.ref-report-export button {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 8px 11px !important;
  border-radius: 10px !important;
  font-size: 9.5px !important;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.ref-report-export button .material-symbols-rounded {
  font-size: 15px;
  color: inherit;
}

.ref-report-kpis {
  grid-template-columns: repeat(6, 1fr) !important;
}

@media (max-width: 1200px) {
  .ref-report-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 820px) {
  .ref-reports>header {
    grid-template-columns: 1fr !important;
  }

  .ref-report-hero-chart {
    display: none;
  }

  .ref-report-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ref-report-export {
    flex-wrap: wrap;
  }
}

/* Reports — 3 filters, 4 panels (2x2), readable date inputs */
.ref-report-controls {
  grid-template-columns: minmax(440px, 1.5fr) auto auto !important;
}

.ref-report-controls>div:first-child {
  grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
}

.ref-report-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ref-report-dates input[type="date"] {
  color-scheme: light;
  color: #23262b !important;
  background: #ffffff !important;
  border: 1px solid #d8d3ce !important;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 11px !important;
  font-weight: 600;
}

.ref-report-dates input[type="date"]:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b /.18) !important;
}

.ref-report-dates input[type="date"]::-webkit-datetime-edit,
.ref-report-dates input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.ref-report-dates input[type="date"]::-webkit-datetime-edit-text,
.ref-report-dates input[type="date"]::-webkit-datetime-edit-month-field,
.ref-report-dates input[type="date"]::-webkit-datetime-edit-day-field,
.ref-report-dates input[type="date"]::-webkit-datetime-edit-year-field {
  color: #23262b !important;
}

.ref-report-dates input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .6;
  cursor: pointer;
}

.ref-report-dates input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.ref-report-dates label {
  color: var(--ref-muted);
  font-size: 10px !important;
}

@media (max-width: 1050px) {
  .ref-report-controls {
    grid-template-columns: 1fr auto !important;
  }

  .ref-report-controls>div:first-child {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .ref-report-grid {
    grid-template-columns: 1fr !important;
  }

  .ref-report-controls>div:first-child {
    grid-template-columns: 1fr !important;
  }
}

/* In-place SR detail modal (opened from a customer/engineer profile) */
.ref-sr-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ref-sr-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 7, 9, .66);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.ref-sr-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid var(--ref-border);
  border-radius: 22px;
  background: var(--ref-shell);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  animation: ref-pop .24s cubic-bezier(.2, .8, .2, 1) both;
  scrollbar-width: none;
}

.ref-sr-modal-panel::-webkit-scrollbar {
  display: none;
}

.ref-sr-modal-panel .ref-request-detail {
  min-height: auto;
  border-radius: 22px;
}

.ref-sr-modal-close {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 11px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}

.ref-sr-modal-close:hover {
  background: rgba(255, 255, 255, .22);
}

.ref-sr-modal-close .material-symbols-rounded {
  font-size: 19px;
}

/* Fix: Reports header decorative pseudo-elements were intercepting clicks on Excel/PDF */
.ref-reports>header::before,
.ref-reports>header::after {
  pointer-events: none !important;
}

.ref-report-export {
  position: relative;
  z-index: 4;
}

.ref-report-score,
.ref-report-hero-chart,
.ref-report-headline {
  position: relative;
  z-index: 2;
}

/* Scrollable service-request list so all records are reachable */
.ref-workspace-body>aside {
  align-self: stretch;
  min-height: 0;
}

.ref-request-list {
  max-height: 444px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}

.ref-request-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 820px) {
  .ref-request-list {
    max-height: 340px;
  }
}

@media (max-width: 820px) {
  .ref-request-list {
    max-height: 360px;
  }
}

/* Calmer orange on active nav / segmented tab / primary button — flatter fill, no glow halo */
.ref-navigation button.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, var(--app-accent), #e16f22) !important;
  box-shadow: 0 4px 11px rgb(from var(--app-accent) r g b /.2) !important;
}

.ref-navigation button.active span,
.ref-navigation button.active .material-symbols-rounded {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-navigation button:hover {
  -webkit-text-fill-color: #fff !important;
}

.ref-primary-button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, var(--app-accent), #e16f22) !important;
  box-shadow: 0 5px 13px rgb(from var(--app-accent) r g b /.18) !important;
}

.ref-primary-button .material-symbols-rounded {
  -webkit-text-fill-color: #fff !important;
}

/* All orange-filled buttons/badges use white text for legibility */
.ref-top-tag,
.ref-top-tag .material-symbols-rounded {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-user {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-segmented-tabs button.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-segmented-tabs button.active>span {
  color: #5e2a00 !important;
  -webkit-text-fill-color: #5e2a00 !important;
}

.ref-report-export button,
.ref-report-export button .material-symbols-rounded {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-detail-tabs button.active,
.ref-detail-tabs button.active .material-symbols-rounded {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--orange) !important;
}

.ref-detail-tabs button>span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ref-request-detail footer button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #1e2024 !important;
  border: 1px solid #32363d !important;
}

.ref-request-detail footer button .material-symbols-rounded {
  color: var(--orange) !important;
  -webkit-text-fill-color: var(--orange) !important;
}

.ref-segmented-tabs button.active {
  background: linear-gradient(135deg, var(--app-accent), #e16f22) !important;
  box-shadow: 0 4px 11px rgb(from var(--app-accent) r g b /.2) !important;
}

/* Filter bar: 3 dropdowns (customer / type / status), no search */
.ref-filterbar--3 {
  grid-template-columns: max-content repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 820px) {
  .ref-filterbar--3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .ref-filterbar--3>strong {
    grid-column: 1 / -1;
  }
}

/* Top performer / top account badge (rank #1 in directories) */
.ref-top-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 9px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  color: var(--on-orange);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgb(from var(--app-accent) r g b /.28);
}

.ref-top-tag .material-symbols-rounded {
  font-size: 12px;
}

/* Request detail: 2x2 facts + SR location map */
.ref-detail-overview {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  padding: 14px 16px 16px;
  align-items: stretch;
}

.ref-detail-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ref-detail-items--2 {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  flex: 1;
}

.ref-detail-items--2 article {
  min-height: 108px;
  padding: 17px 34px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ref-detail-items--2 article>span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}

.ref-detail-items--2 article>strong {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: normal;
  line-height: 1.2;
}

.ref-detail-items--2 article>.material-symbols-rounded {
  top: 15px;
  right: 15px;
  font-size: 20px;
}

.ref-detail-items--2 .ref-progress-card strong {
  margin-bottom: 6px;
  font-size: 22px;
}

.ref-detail-items--2 .ref-progress-card i {
  height: 7px;
  margin-top: 6px;
}

.ref-detail-map {
  position: relative;
  min-height: 236px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #1e2024;
}

.ref-detail-map iframe {
  width: 100%;
  height: 100%;
  min-height: 236px;
  border: 0;
  display: block;
}

.ref-detail-map-label {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 9px;
  color: #fff;
  background: rgba(18, 19, 21, .72);
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.ref-detail-map-label .material-symbols-rounded {
  font-size: 13px;
  color: var(--orange);
}

.ref-detail-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ref-muted);
  font-size: 9px;
}

.ref-detail-map-empty .material-symbols-rounded {
  font-size: 22px;
  color: var(--faint);
}

@media (max-width: 1050px) {
  .ref-detail-overview {
    grid-template-columns: 1fr;
  }
}

/* Reports period as a dropdown */
.ref-report-period {
  min-width: 150px;
}

/* Reports — account demand analysis (full-width management report block) */
.ref-report-demand {
  grid-column: 1 / -1;
}

.ref-report-demand>header {
  display: block;
  margin-bottom: 14px;
}

.ref-report-demand>header p {
  margin: 6px 0 0;
  color: var(--ref-muted);
  font-size: 10px;
  line-height: 1.5;
  max-width: 640px;
}

.ref-demand-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ref-demand-metrics>div {
  min-width: 0;
  border: 1px solid #2b2e34;
  border-radius: 14px;
  padding: 12px 13px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
}

.ref-demand-metrics>div.alert {
  border-color: rgba(255, 120, 90, .4);
  background: linear-gradient(160deg, rgba(255, 107, 94, .12), rgba(255, 107, 94, 0));
}

.ref-demand-metrics span {
  display: block;
  color: var(--ref-muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.ref-demand-metrics strong {
  display: block;
  overflow: hidden;
  margin: 7px 0 2px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-metrics>div.wide strong {
  font-size: 14px;
}

.ref-demand-metrics small {
  display: block;
  color: var(--faint);
  font-size: 8px;
}

.ref-demand-metrics>div.alert strong {
  color: #ff8f7f;
}

.ref-demand-table {
  border: 1px solid #2b2e34;
  border-radius: 16px;
  overflow: hidden;
}

.ref-demand-head,
.ref-demand-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1.6fr) 110px 70px 120px 132px minmax(220px, 2.2fr);
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
}

.ref-demand-head {
  color: var(--ref-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid #2b2e34;
}

.ref-demand-head .num,
.ref-demand-row .num {
  text-align: center;
}

.ref-demand-body {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ref-demand-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ref-demand-row {
  border-bottom: 1px solid #23262b;
  transition: background .16s ease;
}

.ref-demand-row:last-child {
  border-bottom: 0;
}

.ref-demand-row:hover {
  background: rgba(255, 255, 255, .025);
}

.ref-demand-row .sno {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
}

.ref-demand-acct {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ref-demand-acct>i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(145deg, #32363d, var(--orange));
}

.ref-demand-name {
  min-width: 0;
}

.ref-demand-acct strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-acct small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-type {
  min-width: 0;
  overflow: hidden;
  color: #c8c8ce;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-row>b.num {
  color: var(--orange);
  font-size: 15px;
  font-weight: 800;
}

.ref-demand-rate {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ref-demand-rate>i {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #1e2024;
}

.ref-demand-rate em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), #ec7a41);
}

.ref-demand-rate small {
  color: var(--ref-muted);
  font-size: 8px;
  font-weight: 700;
}

.ref-demand-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.ref-demand-tag.tone-hot {
  color: #ffce9e;
  background: rgb(from var(--app-accent) r g b /.16);
  border-color: rgb(from var(--app-accent) r g b /.34);
}

.ref-demand-tag.tone-warm {
  color: #ffd9b8;
  background: rgb(from var(--app-accent) r g b /.09);
  border-color: rgb(from var(--app-accent) r g b /.2);
}

.ref-demand-tag.tone-cool {
  color: #b9c0cc;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
}

.ref-demand-tag.tone-cold {
  color: #ff9e90;
  background: rgba(255, 107, 94, .12);
  border-color: rgba(255, 107, 94, .32);
}

.ref-demand-signal {
  min-width: 0;
  color: var(--ref-muted);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 1150px) {
  .ref-demand-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .ref-demand-head,
  .ref-demand-row {
    grid-template-columns: 26px minmax(120px, 1.4fr) 60px 90px 118px;
  }

  .ref-demand-head span:nth-child(3),
  .ref-demand-row .ref-demand-type,
  .ref-demand-head span:last-child,
  .ref-demand-row .ref-demand-signal {
    display: none;
  }
}

@media (max-width: 620px) {
  .ref-demand-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reports — demand intelligence dashboard */
.ref-report-demand {
  padding: 0 !important;
  overflow: hidden;
  background: radial-gradient(circle at 92% 0, rgb(from var(--app-accent) r g b /.08), transparent 30%), #1e2024 !important;
}

.ref-demand-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 !important;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #2b2e34;
}

.ref-demand-header>div:first-child {
  min-width: 0;
}

.ref-demand-header h3 {
  margin-bottom: 0;
  font-size: 17px;
  letter-spacing: -.25px;
}

.ref-demand-header p {
  max-width: none !important;
  margin-top: 7px !important;
}

.ref-demand-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 20px;
  color: #a7e9cb;
  background: rgba(52, 211, 153, .07);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .15px;
  text-transform: uppercase;
}

.ref-demand-live>i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .1), 0 0 10px rgba(52, 211, 153, .5);
  animation: ref-live-pulse 2s ease-in-out infinite;
}

@keyframes ref-live-pulse {
  50% {
    opacity: .55;
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
  }
}

.ref-demand-command {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) minmax(270px, .95fr) minmax(250px, .82fr);
  gap: 12px;
  padding: 16px 18px 18px;
}

.ref-demand-pulse,
.ref-demand-top,
.ref-demand-stat-grid>article {
  border: 1px solid #30343a;
  box-shadow: 0 13px 34px rgba(7, 8, 10, .18);
}

.ref-demand-pulse {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 18px;
  padding: 17px 17px 0;
  background: radial-gradient(circle at 82% 10%, rgb(from var(--app-accent) r g b /.17), transparent 35%), linear-gradient(145deg, #25282d, #1b1e22);
}

.ref-demand-pulse::after {
  content: "";
  position: absolute;
  top: -58px;
  right: -50px;
  width: 145px;
  height: 145px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 50%;
  box-shadow: 0 0 0 23px rgba(255, 255, 255, .018), 0 0 0 45px rgba(255, 255, 255, .012);
  pointer-events: none;
}

.ref-demand-pulse-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 106px;
}

.ref-demand-pulse-copy>span {
  display: block;
  color: #d8a57c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}

.ref-demand-pulse-copy>strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -.4px;
}

.ref-demand-pulse-copy>p {
  max-width: 270px;
  margin: 7px 0 0;
  color: #aaa9b2;
  font-size: 9px;
  line-height: 1.5;
}

.ref-demand-gauge {
  --value: 0deg;
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  flex: 0 0 82px;
  border-radius: 50%;
  background: conic-gradient(var(--orange) var(--value), rgba(255, 255, 255, .08) 0);
  box-shadow: 0 0 24px rgb(from var(--app-accent) r g b /.14);
}

.ref-demand-gauge::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: #212429;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.ref-demand-gauge>span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.ref-demand-gauge strong {
  color: #fff;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.4px;
}

.ref-demand-gauge small {
  margin-top: 4px;
  color: #8f9099;
  font-size: 7px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.ref-demand-pulse>footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 12px -17px 0;
  border-top: 1px solid #30343a;
  background: #30343a;
}

.ref-demand-pulse>footer>span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 6px;
  padding: 10px 12px;
  background: rgba(20, 22, 25, .72);
}

.ref-demand-pulse>footer .material-symbols-rounded {
  grid-row: 1 / 3;
  color: #34d399;
  font-size: 16px;
}

.ref-demand-pulse>footer .warn .material-symbols-rounded {
  color: #ffb565;
}

.ref-demand-pulse>footer b {
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.ref-demand-pulse>footer small {
  overflow: hidden;
  color: #777984;
  font-size: 7px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.ref-demand-stat-grid>article {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px;
  padding: 13px;
  background: linear-gradient(145deg, #23262b, #1c1f23);
  transition: transform .18s ease, border-color .18s ease;
}

.ref-demand-stat-grid>article:hover {
  transform: translateY(-2px);
  border-color: rgb(from var(--app-accent) r g b /.42);
}

.ref-demand-stat-grid>article>.material-symbols-rounded {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.12);
  font-size: 16px;
}

.ref-demand-stat-grid>article.tone-green>.material-symbols-rounded {
  color: #45dca3;
  background: rgba(52, 211, 153, .12);
}

.ref-demand-stat-grid>article.tone-blue>.material-symbols-rounded {
  color: #79d1ff;
  background: rgba(121, 209, 255, .12);
}

.ref-demand-stat-grid>article.tone-red>.material-symbols-rounded {
  color: #ff8f7f;
  background: rgba(255, 107, 94, .12);
}

.ref-demand-stat-grid>article>span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ref-demand-stat-grid small,
.ref-demand-stat-grid em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-stat-grid small {
  color: #8f9099;
  font-size: 7.5px;
  font-weight: 650;
  text-transform: uppercase;
}

.ref-demand-stat-grid strong {
  margin: 5px 0 2px;
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.ref-demand-stat-grid em {
  color: #696b75;
  font-size: 7px;
  font-style: normal;
}

.ref-demand-top {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  padding: 15px;
  text-align: left;
  color: inherit;
  background: radial-gradient(circle at 110% -10%, rgb(from var(--app-accent) r g b /.27), transparent 48%), linear-gradient(145deg, #292b30, #202328);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ref-demand-top:hover {
  transform: translateY(-3px);
  border-color: rgb(from var(--app-accent) r g b /.56);
  box-shadow: 0 18px 38px rgba(7, 8, 10, .3);
}

.ref-demand-top:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.ref-demand-top-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f4b37d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.ref-demand-top-label .material-symbols-rounded {
  color: #ffb96d;
  font-size: 16px;
}

.ref-demand-top-label>i {
  margin-left: auto;
  color: rgba(255, 255, 255, .3);
  font-style: normal;
}

.ref-demand-top-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 13px;
}

.ref-demand-top-account>i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #7e5639, var(--orange));
  box-shadow: 0 7px 16px rgb(from var(--app-accent) r g b /.2);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.ref-demand-top-account>span {
  min-width: 0;
}

.ref-demand-top-account strong,
.ref-demand-top-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-top-account strong {
  color: #fff;
  font-size: 11px;
}

.ref-demand-top-account small {
  margin-top: 3px;
  color: #888a94;
  font-size: 8px;
}

.ref-demand-top-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 13px;
}

.ref-demand-top-progress>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #888a94;
}

.ref-demand-top-progress small {
  font-size: 7.5px;
  text-transform: uppercase;
}

.ref-demand-top-progress b {
  color: #fff;
  font-size: 9px;
}

.ref-demand-top-progress>i {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #15171a;
}

.ref-demand-top-progress em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--orange));
}

.ref-demand-top-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
}

.ref-demand-top-foot>span:first-child {
  color: #8d8e97;
  font-size: 8px;
}

.ref-demand-top-foot>span:first-child b {
  color: #fff;
  font-size: 12px;
}

.ref-demand-top-foot .material-symbols-rounded {
  margin-left: auto;
  color: var(--orange);
  font-size: 17px;
  transition: transform .18s ease;
}

.ref-demand-top:hover .ref-demand-top-foot .material-symbols-rounded {
  transform: translateX(3px);
}

.ref-demand-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 20px 11px;
}

.ref-demand-directory-head>div span,
.ref-demand-directory-head>div strong {
  display: block;
}

.ref-demand-directory-head>div span {
  color: #797b85;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.ref-demand-directory-head>div strong {
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
}

.ref-demand-directory-head p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #70727c;
  font-size: 8px;
}

.ref-demand-directory-head .material-symbols-rounded {
  color: var(--orange);
  font-size: 14px;
}

.ref-demand-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.ref-demand-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #2d3036;
  border-radius: 17px;
  padding: 14px 15px 12px;
  text-align: left;
  color: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  cursor: pointer;
  animation: ref-pop .45s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: var(--d, 0ms);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ref-demand-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  opacity: .7;
  background: #68707c;
}

.ref-demand-card.tone-hot::before,
.ref-demand-card.tone-warm::before {
  background: var(--orange);
}

.ref-demand-card.tone-cold::before {
  background: #ff7167;
}

.ref-demand-card:hover {
  transform: translateY(-3px);
  border-color: rgb(from var(--app-accent) r g b /.42);
  background: linear-gradient(145deg, rgb(from var(--app-accent) r g b /.07), rgba(255, 255, 255, .012));
  box-shadow: 0 14px 28px rgba(7, 8, 10, .22);
}

.ref-demand-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.ref-demand-card-top {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ref-demand-rank {
  color: #61636d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .3px;
}

.ref-demand-card-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ref-demand-card-account>i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #4b4e55, var(--orange));
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  transition: transform .18s ease;
}

.ref-demand-card:hover .ref-demand-card-account>i {
  transform: scale(1.06) rotate(-3deg);
}

.ref-demand-card-account>span {
  min-width: 0;
}

.ref-demand-card-account strong,
.ref-demand-card-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-card-account strong {
  color: #f4f4f6;
  font-size: 10px;
  line-height: 1.25;
}

.ref-demand-card-account small {
  margin-top: 3px;
  color: #747680;
  font-size: 7.5px;
}

.ref-demand-card-stats {
  display: grid;
  grid-template-columns: 54px 58px 42px minmax(100px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 10px 0 2px 40px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.ref-demand-card-stats>span>small {
  display: block;
  color: #6e7079;
  font-size: 7px;
  text-transform: uppercase;
}

.ref-demand-card-stats>span>strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
}

.ref-demand-card-delivery {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ref-demand-card-delivery>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.ref-demand-card-delivery b {
  color: #c7c9ce;
  font-size: 8px;
}

.ref-demand-card-delivery>i {
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: #15171a;
}

.ref-demand-card-delivery em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--orange));
  transition: width .9s cubic-bezier(.2, .85, .25, 1);
}

.ref-demand-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 40px;
}

.ref-demand-card-foot>span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #858791;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-card-foot .material-symbols-rounded {
  flex: 0 0 auto;
  color: #666873;
  font-size: 16px;
  transition: color .18s ease, transform .18s ease;
}

.ref-demand-card:hover .ref-demand-card-foot .material-symbols-rounded {
  color: var(--orange);
  transform: translate(2px, -2px);
}

@media (max-width: 1180px) {
  .ref-demand-command {
    grid-template-columns: 1.15fr .85fr;
  }

  .ref-demand-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(160px, .7fr) auto;
    align-items: center;
    gap: 16px;
  }

  .ref-demand-top-account,
  .ref-demand-top-progress,
  .ref-demand-top-foot {
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 820px) {
  .ref-demand-command {
    grid-template-columns: 1fr;
  }

  .ref-demand-top {
    grid-column: auto;
    display: flex;
  }

  .ref-demand-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ref-demand-header {
    flex-direction: column;
  }

  .ref-demand-command {
    padding-inline: 12px;
  }

  .ref-demand-pulse-main {
    grid-template-columns: 1fr;
  }

  .ref-demand-gauge {
    position: absolute;
    top: 0;
    right: 0;
    width: 68px;
    height: 68px;
  }

  .ref-demand-pulse-copy {
    padding-right: 76px;
  }

  .ref-demand-pulse>footer {
    grid-template-columns: 1fr;
  }

  .ref-demand-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ref-demand-directory-head p {
    display: none;
  }

  .ref-demand-cards {
    padding-inline: 12px;
  }

  .ref-demand-card-top {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .ref-demand-card-top>.ref-demand-tag {
    grid-column: 2;
  }

  .ref-demand-card-stats {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 34px;
  }

  .ref-demand-card-delivery {
    grid-column: 1 / -1;
  }

  .ref-demand-card-foot {
    padding-left: 34px;
  }
}

/* Export scope picker modal */
.ref-export-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ref-export-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 9, 11, .66);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.ref-export-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #2b2e34;
  border-radius: 22px;
  background: #17191d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}

.ref-export-dialog>header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid #23262b;
}

.ref-export-dialog>header>div {
  flex: 1;
  min-width: 0;
}

.ref-export-dialog>header span {
  color: var(--orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-export-dialog>header h3 {
  margin: 6px 0 5px;
  font-size: 19px;
  letter-spacing: -.01em;
}

.ref-export-dialog>header p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.ref-export-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #32363d;
  border-radius: 10px;
  color: #d8d8dc;
  background: #1e2024;
  cursor: pointer;
}

.ref-export-close:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.ref-export-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 22px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.ref-export-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 14px;
  border: 1px solid #2b2e34;
  border-radius: 15px;
  color: var(--ref-ink);
  background: #1e2126;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.ref-export-card:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  background: #22262b;
}

.ref-export-card.universal {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgb(from var(--app-accent) r g b /.14), rgb(from var(--app-accent) r g b /.02));
  border-color: rgb(from var(--app-accent) r g b /.34);
}

.ref-export-card>i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(145deg, #32363d, var(--orange));
}

.ref-export-card.universal>i {
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
}

.ref-export-card>i .material-symbols-rounded {
  font-size: 19px;
}

.ref-export-card>span {
  flex: 1;
  min-width: 0;
}

.ref-export-card strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-export-card small {
  display: block;
  margin-top: 3px;
  color: var(--ref-muted);
  font-size: 8.5px;
  line-height: 1.4;
}

.ref-export-card>.material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 17px;
}

.ref-export-card:hover>.material-symbols-rounded {
  color: var(--orange);
}

@media (max-width: 560px) {
  .ref-export-cards {
    grid-template-columns: 1fr;
  }
}

/* Guarantee the export modal never inherits container button styling, wherever it renders */
.ref-export-modal .ref-export-backdrop {
  background: rgba(6, 7, 9, .82) !important;
  backdrop-filter: blur(7px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ref-export-modal .ref-export-card {
  display: flex !important;
  height: auto !important;
  padding: 14px !important;
  border-radius: 15px !important;
  border: 1px solid #2b2e34 !important;
  background: #1e2126 !important;
  box-shadow: none !important;
  color: var(--ref-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.ref-export-modal .ref-export-card.universal {
  border-color: rgb(from var(--app-accent) r g b /.34) !important;
  background: linear-gradient(120deg, rgb(from var(--app-accent) r g b /.14), rgb(from var(--app-accent) r g b /.02)) !important;
}

.ref-export-modal .ref-export-close {
  background: #1e2024 !important;
}

/* ============================================================
   AUTO-ROTATING KIOSK OVERVIEW + header timing control
   ============================================================ */

/* --- Header rotation control --- */
.ref-rot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 4px;
  border: 1px solid #32363d;
  border-radius: 14px;
  background: #1e2024;
}

.ref-rot.active {
  border-color: var(--orange);
}

.ref-rot-play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}

.ref-rot-play:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ref-rot-play .material-symbols-rounded {
  font-size: 18px;
}

.ref-rot-timing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  color: #d8d8dc;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.ref-rot-timing:hover {
  color: var(--orange);
  background: #212429;
}

.ref-rot-timing b {
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

.ref-rot-timing .material-symbols-rounded {
  font-size: 16px;
}

.ref-rot-timing .material-symbols-rounded:last-child {
  font-size: 15px;
  opacity: .8;
}

.ref-rot-popover.ref-header-popover {
  top: 50px;
  right: 0;
  width: min(280px, calc(100vw - 24px));
}

.ref-rot-options {
  padding: 8px;
  display: grid;
  gap: 4px;
}

.ref-rot-options button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 11px;
  color: var(--ref-ink);
  background: #212429;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.ref-rot-options button:hover {
  border-color: #45474c;
  background: #26292f;
}

.ref-rot-options button.selected {
  border-color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.12);
}

.ref-rot-options button .material-symbols-rounded:first-child {
  font-size: 16px;
  color: var(--orange);
}

.ref-rot-options button .material-symbols-rounded:last-child {
  font-size: 16px;
  color: var(--orange);
}

/* --- Overview shell --- */
.ref-ov-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ref-ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.ref-ov-head-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ref-ov-head-title>i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
  border: 1px solid rgb(from var(--app-accent) r g b /.28);
}

.ref-ov-head-title>i .material-symbols-rounded {
  font-size: 24px;
}

.ref-ov-head-title>div {
  min-width: 0;
}

.ref-ov-head-title span {
  display: block;
  color: var(--orange);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.ref-ov-head-title h2 {
  margin: 3px 0 2px;
  font-size: 22px;
  letter-spacing: -.5px;
  color: var(--ref-ink);
}

.ref-ov-head-title small {
  display: block;
  color: var(--ref-muted);
  font-size: 10.5px;
}

.ref-ov-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #2b2e34;
  border-radius: 16px;
  background: #1e2024;
}

.ref-ov-dots button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  color: #9a9aa0;
  background: transparent;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.ref-ov-dots button .material-symbols-rounded {
  font-size: 16px;
}

.ref-ov-dots button span {
  white-space: nowrap;
}

.ref-ov-dots button:hover {
  color: #fff;
}

.ref-ov-dots button.active {
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 6px 14px rgb(from var(--app-accent) r g b /.32);
}

/* --- Rotation progress bar --- */
.ref-ov-progress {
  height: 3px;
  margin: 12px 0 14px;
  overflow: hidden;
  border-radius: 3px;
  background: #2b2e34;
}

.ref-ov-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
}

.ref-ov-progress i.run {
  animation: ref-ov-fill linear forwards;
}

@keyframes ref-ov-fill {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* --- Stage fade --- */
.ref-ov-stage {
  animation: ref-ov-scene-in .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ref-ov-scene-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ref-ov-stage {
    animation: none;
  }

  .ref-ov-progress i.run {
    animation: none;
    width: 100%;
  }
}

.ref-ov-scene {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- KPI tiles --- */
.ref-ov-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.ref-ov-kpi {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #2b2e34;
  border-radius: 17px;
  background: linear-gradient(150deg, #1e2024 62%, #1f2127);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.ref-ov-kpi>i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
  font-style: normal;
}

.ref-ov-kpi>i .material-symbols-rounded {
  font-size: 20px;
}

.ref-ov-kpi>i.tone-green {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .14);
}

.ref-ov-kpi>i.tone-red {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-kpi>i.tone-cyan {
  color: var(--ref-cyan);
  background: rgba(121, 209, 255, .14);
}

.ref-ov-kpi>i.tone-amber {
  color: #f0c760;
  background: rgba(224, 182, 75, .14);
}

.ref-ov-kpi>i.tone-blue {
  color: #8fb4ff;
  background: rgba(91, 141, 239, .14);
}

.ref-ov-kpi>i.tone-slate {
  color: #b9c0cc;
  background: rgba(138, 141, 153, .16);
}

.ref-ov-kpi>div {
  min-width: 0;
}

.ref-ov-kpi strong {
  display: block;
  color: var(--ref-ink);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}

.ref-ov-kpi strong small {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ref-muted);
  letter-spacing: 0;
}

.ref-ov-kpi span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #d3d6dd;
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-kpi em {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 8.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Scene grids --- */
.ref-ov-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ref-ov-grid .span2 {
  grid-column: span 2;
}

.ref-ov-grid .span3 {
  grid-column: 1 / -1;
}

/* --- Scene cards --- */
.ref-ov-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 20px;
  background: #1e2024;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}

.ref-ov-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 17px 10px;
}

.ref-ov-card>header span {
  display: block;
  color: var(--orange);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.ref-ov-card>header h3 {
  margin: 4px 0 0;
  font-size: 15px;
  letter-spacing: -.3px;
  color: var(--ref-ink);
}

.ref-ov-card>header>b {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.13);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-ov-card-body {
  flex: 1;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 17px 16px;
}

.ref-ov-live {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .14) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 8px !important;
}

/* --- Trend (line + bars) --- */
.ref-ov-trend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ref-ov-trend .ref-line-chart {
  height: 96px;
}

.ref-ov-trend .ref-bar-chart {
  height: 118px;
}

/* --- Donut --- */
.ref-ov-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ref-ov-donut-ring {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
}

.ref-ov-donut-ring svg {
  width: 100%;
  height: 100%;
}

.ref-ov-donut-track {
  fill: none;
  stroke: #2b2e34;
  stroke-width: 3.6;
}

.ref-ov-donut-arc {
  fill: none;
  stroke-width: 3.9;
  stroke-linecap: butt;
  transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1);
}

.ref-ov-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ref-ov-donut-center strong {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -.6px;
  color: var(--ref-ink);
}

.ref-ov-donut-center span {
  display: block;
  margin-top: 1px;
  color: var(--ref-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.ref-ov-donut-legend {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.ref-ov-donut-legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #cdd0d7;
  font-size: 10.5px;
}

.ref-ov-donut-legend li i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ref-ov-donut-legend li b {
  color: var(--ref-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Horizontal bars --- */
.ref-ov-hbars {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}

.ref-ov-hbars p {
  display: grid;
  grid-template-columns: minmax(72px, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.ref-ov-hbars p>span {
  overflow: hidden;
  color: #d3d6dd;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-hbars p>i {
  height: 8px;
  overflow: hidden;
  border-radius: 5px;
  background: #2b2e34;
}

.ref-ov-hbars p>i em {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 5px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.ref-ov-hbars p>b {
  color: var(--ref-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Gauge + capacity --- */
.ref-ov-capacity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ref-ov-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.ref-ov-gauge-ring {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, #1e2024 78%, transparent 79%), conic-gradient(var(--tone) calc(var(--val) * 1%), #2b2e34 0);
}

.ref-ov-gauge-ring strong {
  font-size: 24px;
  font-weight: 750;
  color: var(--ref-ink);
  letter-spacing: -.6px;
}

.ref-ov-gauge-ring strong small {
  font-size: 12px;
  color: var(--ref-muted);
}

.ref-ov-gauge>span {
  color: var(--ref-muted);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ref-ov-capacity-stats {
  flex: 1;
  display: grid;
  gap: 8px;
}

.ref-ov-capacity-stats span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #2b2e34;
  border-radius: 12px;
  background: #212429;
}

.ref-ov-capacity-stats b {
  color: var(--ref-ink);
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-ov-capacity-stats small {
  color: var(--ref-muted);
  font-size: 10px;
}

/* --- Activity feed --- */
.ref-ov-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.ref-ov-feed>div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #26292f;
}

.ref-ov-feed>div:last-child {
  border-bottom: 0;
}

.ref-ov-feed>div>i {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b /.16);
}

.ref-ov-feed strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-feed small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-feed time {
  color: #8b8f99;
  font-size: 9px;
  white-space: nowrap;
}

/* --- Attention list --- */
.ref-ov-attention {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ref-ov-attention>div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  background: #212429;
}

.ref-ov-attention>div>span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-attention>div>span .material-symbols-rounded {
  font-size: 17px;
}

.ref-ov-attention strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-attention small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-attention b {
  color: var(--ref-red);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

/* --- Latest requests table --- */
.ref-ov-req-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.ref-ov-req-head,
.ref-ov-req-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 100px 120px;
  align-items: center;
  gap: 12px;
}

.ref-ov-req-head {
  padding: 4px 6px 10px;
  border-bottom: 1px solid #2b2e34;
}

.ref-ov-req-head span {
  color: var(--ref-muted);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.ref-ov-req-row {
  padding: 10px 6px;
  border-bottom: 1px solid #26292f;
}

.ref-ov-req-row:last-child {
  border-bottom: 0;
}

.ref-ov-req-row>span {
  overflow: hidden;
  color: #d6d9e0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-req-row>span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ref-ink);
  font-weight: 650;
}

.ref-ov-req-row>span:first-child i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #5e2a00;
  background: linear-gradient(145deg, #3c3e42, var(--orange));
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.ref-ov-prio {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #d3d6dd;
  background: #2b2e34;
}

.ref-ov-prio.prio-high {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-prio.prio-medium {
  color: #f0c760;
  background: rgba(224, 182, 75, .14);
}

.ref-ov-prio.prio-low {
  color: #b9c0cc;
  background: rgba(138, 141, 153, .16);
}

/* --- Responsive --- */
@media (max-width: 1180px) {
  .ref-ov-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .ref-ov-grid .span2,
  .ref-ov-grid .span3 {
    grid-column: 1 / -1;
  }

  .ref-ov-req-head,
  .ref-ov-req-row {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 1.3fr) 90px 110px;
  }

  .ref-ov-req-head span:nth-child(3),
  .ref-ov-req-row>span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 760px) {
  .ref-ov-head {
    gap: 12px;
  }

  .ref-ov-dots button span {
    display: none;
  }

  .ref-ov-dots button {
    padding: 0 10px;
  }

  .ref-ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-ov-grid {
    grid-template-columns: 1fr;
  }

  .ref-ov-donut {
    flex-direction: column;
    align-items: stretch;
  }

  .ref-ov-donut-ring {
    align-self: center;
  }

  .ref-ov-capacity {
    flex-direction: column;
    align-items: stretch;
  }

  .ref-ov-req-head,
  .ref-ov-req-row {
    grid-template-columns: minmax(110px, 1fr) 80px 100px;
  }

  .ref-ov-req-head span:nth-child(2),
  .ref-ov-req-row>span:nth-child(2),
  .ref-ov-req-head span:nth-child(3),
  .ref-ov-req-row>span:nth-child(3) {
    display: none;
  }
}

/* ============================================================
   BI KIOSK v2 — fit-to-viewport (no scroll), gauge/number heavy.
   Appended last; overrides the earlier .ref-ov-* rules.
   ============================================================ */

/* Header control: time selector only (no play/pause) */
.ref-rot-timing {
  height: 32px;
}

/* ---- Fit the whole Overview inside the viewport, no page scroll ---- */
.reference-shell:has(.ref-ov-shell) {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
  min-height: 0;
  overflow: hidden;
}

.reference-shell:has(.ref-ov-shell) .reference-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ref-ov-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ref-ov-stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  animation: ref-ov-scene-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

/* Give the overview more room: compress the big page heading above it */
.reference-shell:has(.ref-ov-shell) .ref-page-heading {
  min-height: 0;
  padding: 6px 0 8px;
}

.ref-ov-progress {
  margin: 10px 0 10px;
}

/* ---- Scene fills the stage ---- */
.ref-ov-scene {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

/* ---- KPI band (compact) ---- */
.ref-ov-kpis {
  gap: 8px;
}

.ref-ov-kpi {
  gap: 10px;
  padding: clamp(8px, 1.4vh, 13px) 13px;
  border-radius: 14px;
}

.ref-ov-kpi>i {
  width: clamp(32px, 4.6vh, 38px);
  height: clamp(32px, 4.6vh, 38px);
}

.ref-ov-kpi strong {
  font-size: clamp(16px, 2.5vh, 22px);
}

.ref-ov-kpi span {
  font-size: clamp(9px, 1.4vh, 10.5px);
}

/* ---- Grid layouts per scene (named areas, fractional rows so it always fits) ---- */
.ref-ov-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 10px;
  grid-auto-rows: unset;
}

.ref-ov-grid .cell-a {
  grid-area: a;
}

.ref-ov-grid .cell-b {
  grid-area: b;
}

.ref-ov-grid .cell-c {
  grid-area: c;
}

.ref-ov-grid .cell-d {
  grid-area: d;
}

.ref-ov-grid .cell-e {
  grid-area: e;
}

.ref-ov-grid .cell-a,
.ref-ov-grid .cell-b,
.ref-ov-grid .cell-c,
.ref-ov-grid .cell-d,
.ref-ov-grid .cell-e {
  grid-column: auto;
}

.ref-ov-grid--company {
  grid-template-columns: .95fr 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b c" "a d e";
}

.ref-ov-grid--requests {
  grid-template-columns: .95fr 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b c" "a d e";
}

.ref-ov-grid--people {
  grid-template-columns: .95fr 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b c" "a b d";
}

/* ---- Cards fill their cell; body never overflows ---- */
.ref-ov-card {
  height: 100%;
  min-height: 0;
}

.ref-ov-card>header {
  padding: clamp(8px, 1.5vh, 13px) 15px clamp(4px, .8vh, 9px);
}

.ref-ov-card>header h3 {
  font-size: clamp(12px, 1.9vh, 15px);
}

.ref-ov-card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  justify-content: center;
  padding: 2px 15px clamp(8px, 1.5vh, 15px);
}

/* ---- Trend (bars only) fills card ---- */
.ref-ov-trend {
  height: 100%;
}

.ref-ov-trend .ref-bar-chart {
  height: 100%;
}

/* ---- Gauge stack (three small live gauges) ---- */
.ref-ov-gauges {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
  height: 100%;
}

.ref-ov-gauge {
  display: flex;
  align-items: center;
}

.ref-ov-gauge.size-sm {
  flex-direction: row;
  gap: 13px;
}

.ref-ov-gauge.size-lg {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.ref-ov-gauge-ring {
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, #1e2024 76%, transparent 77%), conic-gradient(var(--tone) calc(var(--val) * 1%), #2b2e34 0);
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring {
  width: clamp(48px, 8vh, 76px);
  height: clamp(48px, 8vh, 76px);
}

.ref-ov-gauge.size-lg .ref-ov-gauge-ring {
  width: clamp(80px, 15vh, 128px);
  height: clamp(80px, 15vh, 128px);
}

.ref-ov-gauge-ring strong {
  color: var(--ref-ink);
  font-weight: 750;
  letter-spacing: -.5px;
  line-height: 1;
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring strong {
  font-size: clamp(13px, 2vh, 18px);
}

.ref-ov-gauge.size-lg .ref-ov-gauge-ring strong {
  font-size: clamp(20px, 3.2vh, 30px);
}

.ref-ov-gauge-ring strong small {
  font-size: .55em;
  color: var(--ref-muted);
}

.ref-ov-gauge-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ref-ov-gauge.size-lg .ref-ov-gauge-meta {
  align-items: center;
}

.ref-ov-gauge-meta b {
  color: var(--ref-ink);
  font-size: clamp(11px, 1.7vh, 13.5px);
  font-weight: 700;
  line-height: 1.15;
}

.ref-ov-gauge-meta small {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: clamp(8.5px, 1.3vh, 10px);
}

/* ---- Big-number stat blocks ---- */
.ref-ov-bigstats {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 6px;
  height: 100%;
}

.ref-ov-bigstat {
  display: grid;
  grid-template-columns: clamp(34px, 5vh, 44px) auto 1fr;
  grid-template-areas: "ic val lbl" "ic val sub";
  align-items: center;
  column-gap: 13px;
  padding: clamp(4px, 1vh, 10px) 2px;
  border-bottom: 1px solid #26292f;
}

.ref-ov-bigstat:last-child {
  border-bottom: 0;
}

.ref-ov-bigstat>i {
  grid-area: ic;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: clamp(34px, 5vh, 44px);
  height: clamp(34px, 5vh, 44px);
  border-radius: 12px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
  font-style: normal;
}

.ref-ov-bigstat>i .material-symbols-rounded {
  font-size: clamp(18px, 2.6vh, 22px);
}

.ref-ov-bigstat>i.tone-green {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .14);
}

.ref-ov-bigstat>i.tone-red {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-bigstat>i.tone-amber {
  color: #f0c760;
  background: rgba(224, 182, 75, .14);
}

.ref-ov-bigstat>i.tone-blue {
  color: #8fb4ff;
  background: rgba(91, 141, 239, .14);
}

.ref-ov-bigstat>strong {
  grid-area: val;
  grid-row: 1 / 3;
  color: var(--ref-ink);
  font-size: clamp(22px, 3.6vh, 34px);
  font-weight: 750;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

.ref-ov-bigstat>span {
  grid-area: lbl;
  align-self: end;
  color: #d3d6dd;
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 650;
}

.ref-ov-bigstat>small {
  grid-area: sub;
  align-self: start;
  color: var(--ref-muted);
  font-size: clamp(8.5px, 1.3vh, 10px);
}

/* ---- Donut sizing scales with viewport height ---- */
.ref-ov-donut {
  gap: 14px;
}

.ref-ov-donut-ring {
  width: clamp(86px, 16vh, 138px);
  height: clamp(86px, 16vh, 138px);
}

.ref-ov-donut-center strong {
  font-size: clamp(17px, 2.6vh, 24px);
}

.ref-ov-donut-legend {
  gap: clamp(4px, .9vh, 7px);
}

.ref-ov-donut-legend li {
  font-size: clamp(9.5px, 1.4vh, 10.5px);
}

/* ---- Horizontal bars: gaps compress on short screens ---- */
.ref-ov-hbars {
  gap: clamp(5px, 1.4vh, 11px);
}

.ref-ov-capacity-stats {
  gap: clamp(5px, 1.1vh, 8px);
}

.ref-ov-capacity-stats span {
  padding: clamp(5px, 1vh, 8px) 12px;
}

/* ---- Wide desktops: a touch more breathing room ---- */
@media (min-width: 1500px) {
  .ref-ov-scene {
    gap: 12px;
  }

  .ref-ov-grid {
    gap: 12px;
  }
}

/* ---- Tablet / narrow landscape ---- */
@media (max-width: 1120px) {
  .ref-ov-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ref-ov-grid--company,
  .ref-ov-grid--requests {
    grid-template-columns: .9fr 1.25fr;
    grid-template-areas: "a b" "c d" "e e";
    grid-template-rows: 1.2fr 1fr .9fr;
  }

  .ref-ov-grid--people {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c d";
    grid-template-rows: 1fr 1fr;
  }
}

/* ---- Portrait / phones: still no page scroll, everything compresses ---- */
@media (max-width: 720px) {
  .reference-shell:has(.ref-ov-shell) {
    padding: 12px 12px 14px;
    border-radius: 20px;
  }

  .ref-ov-head-title>i {
    display: none;
  }

  .ref-ov-head-title h2 {
    font-size: 17px;
  }

  .ref-ov-head-title small {
    display: none;
  }

  .ref-ov-dots button span {
    display: none;
  }

  .ref-ov-dots button {
    padding: 0 9px;
  }

  .ref-ov-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .ref-ov-kpi em {
    display: none;
  }

  .ref-ov-grid--company,
  .ref-ov-grid--requests,
  .ref-ov-grid--people {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c d" "e e";
    grid-template-rows: 1.1fr 1fr .9fr;
  }

  .ref-ov-grid--people {
    grid-template-areas: "a b" "c d" "b b";
  }

  .ref-ov-donut {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 720px) and (min-width: 1px) {

  /* People has no cell-e; keep it 2x2 on phones */
  .ref-ov-grid--people {
    grid-template-areas: "a b" "c d";
    grid-template-rows: 1fr 1fr;
  }
}

/* ============================================================
   BI KIOSK v3 — hard fit. Rows must shrink (minmax(0,1fr)),
   tighter overhead so nothing clips at short window heights.
   ============================================================ */

/* Critical: allow grid tracks to shrink below content, then cards clip internally (they don't, because contents are vh-scaled). */
.ref-ov-grid--company {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.ref-ov-grid--requests {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.ref-ov-grid--people {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

/* Kill the redundant "Service Operations" page heading on the Overview —
   the rotating scene header already titles the view. Reclaims ~80px. */
.reference-shell:has(.ref-ov-shell) .ref-page-heading {
  display: none;
}

.ref-ov-head {
  gap: 12px;
  padding-top: 4px;
}

.ref-ov-head-title>i {
  width: 40px;
  height: 40px;
}

.ref-ov-head-title h2 {
  margin: 1px 0 1px;
  font-size: clamp(16px, 2.4vh, 20px);
}

.ref-ov-head-title small {
  font-size: 10px;
}

.ref-ov-progress {
  margin: 7px 0 8px;
}

.ref-ov-scene {
  gap: 8px;
}

.ref-ov-grid {
  gap: 8px;
}

/* KPI band: shorter, single tight line */
.ref-ov-kpis {
  gap: 7px;
}

.ref-ov-kpi {
  gap: 9px;
  padding: clamp(6px, 1vh, 10px) 11px;
}

.ref-ov-kpi>i {
  width: clamp(28px, 4vh, 36px);
  height: clamp(28px, 4vh, 36px);
  border-radius: 10px;
}

.ref-ov-kpi>i .material-symbols-rounded {
  font-size: clamp(16px, 2.4vh, 20px);
}

.ref-ov-kpi strong {
  font-size: clamp(15px, 2.3vh, 21px);
}

.ref-ov-kpi span {
  font-size: clamp(8.5px, 1.3vh, 10px);
}

.ref-ov-kpi em {
  font-size: 8px;
}

/* Cards: minimal header/body padding so charts get the room */
.ref-ov-card>header {
  padding: clamp(6px, 1.1vh, 11px) 14px clamp(2px, .5vh, 6px);
}

.ref-ov-card>header span {
  font-size: 7.5px;
}

.ref-ov-card>header h3 {
  font-size: clamp(11px, 1.7vh, 14px);
}

.ref-ov-card-body {
  padding: 2px 14px clamp(6px, 1.1vh, 12px);
}

/* Gauges: smaller floors so a stack of 3 always fits a half-height card */
.ref-ov-gauges {
  gap: clamp(4px, 1vh, 10px);
}

.ref-ov-gauge.size-sm {
  gap: 11px;
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring {
  width: clamp(40px, 6.8vh, 68px);
  height: clamp(40px, 6.8vh, 68px);
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring strong {
  font-size: clamp(11px, 1.7vh, 16px);
}

.ref-ov-gauge-meta b {
  font-size: clamp(10px, 1.5vh, 13px);
}

.ref-ov-gauge-meta small {
  font-size: clamp(8px, 1.2vh, 9.5px);
}

.ref-ov-gauge.size-lg .ref-ov-gauge-ring {
  width: clamp(64px, 12vh, 118px);
  height: clamp(64px, 12vh, 118px);
}

/* Big stats: compress row height + number */
.ref-ov-bigstats {
  gap: 4px;
}

.ref-ov-bigstat {
  column-gap: 11px;
  padding: clamp(2px, .7vh, 8px) 2px;
}

.ref-ov-bigstat>i {
  width: clamp(30px, 4.4vh, 42px);
  height: clamp(30px, 4.4vh, 42px);
}

.ref-ov-bigstat>strong {
  font-size: clamp(18px, 3vh, 32px);
}

/* Donut: smaller floor */
.ref-ov-donut {
  gap: 12px;
}

.ref-ov-donut-ring {
  width: clamp(72px, 14vh, 132px);
  height: clamp(72px, 14vh, 132px);
}

.ref-ov-donut-center strong {
  font-size: clamp(15px, 2.3vh, 23px);
}

.ref-ov-donut-legend {
  gap: clamp(3px, .8vh, 7px);
}

.ref-ov-donut-legend li {
  font-size: clamp(9px, 1.3vh, 10.5px);
}

.ref-ov-donut-legend li i {
  width: 9px;
  height: 9px;
}

/* Horizontal bars: tight, and cap visual weight */
.ref-ov-hbars {
  gap: clamp(4px, 1.1vh, 10px);
}

.ref-ov-hbars p {
  grid-template-columns: minmax(64px, 140px) minmax(0, 1fr) auto;
  gap: 10px;
}

.ref-ov-hbars p>span {
  font-size: clamp(9.5px, 1.4vh, 11px);
}

.ref-ov-hbars p>i {
  height: clamp(6px, 1vh, 8px);
}

/* Bar chart bottom labels shrink */
.ref-ov-trend .ref-bar-chart small {
  font-size: 8px;
}

/* Capacity block tighter */
.ref-ov-capacity {
  gap: 14px;
}

.ref-ov-capacity-stats {
  gap: 5px;
}

.ref-ov-capacity-stats span {
  padding: clamp(4px, .9vh, 8px) 11px;
}

.ref-ov-capacity-stats b {
  font-size: clamp(13px, 2vh, 16px);
}

/* Absolute guarantee: the scene never forces a scrollbar anywhere */
.ref-ov-shell,
.ref-ov-stage,
.ref-ov-scene,
.ref-ov-grid,
.ref-ov-card,
.ref-ov-card-body {
  min-height: 0;
}

.ref-ov-card-body {
  overflow: hidden;
}

/* ============================================================
   BI KIOSK v4 — content FILLS the card (equal slices + dividers),
   bigger gauges/bars/donuts. Kills the "little info in a big card" look.
   Rows use flex:1 so they fill on tall screens AND shrink on short ones.
   ============================================================ */

.ref-ov-card-body {
  justify-content: stretch;
}

/* ---- Gauge stack: equal-height rows with dividers, larger rings ---- */
.ref-ov-gauges {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ref-ov-gauge.size-sm {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 4px 2px;
}

.ref-ov-gauge.size-sm+.ref-ov-gauge.size-sm {
  border-top: 1px solid #282b31;
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring {
  width: clamp(46px, 10.5vh, 88px);
  height: clamp(46px, 10.5vh, 88px);
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.ref-ov-gauge.size-sm .ref-ov-gauge-ring strong {
  font-size: clamp(12px, 2vh, 18px);
}

.ref-ov-gauge-meta b {
  font-size: clamp(11px, 1.8vh, 14.5px);
}

.ref-ov-gauge-meta small {
  font-size: clamp(9px, 1.35vh, 10.5px);
}

/* ---- Horizontal bars: rows fill the whole card, dividers, thicker bars ---- */
.ref-ov-hbars {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ref-ov-hbars p {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(72px, 158px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 3px 0;
  margin: 0;
}

.ref-ov-hbars p+p {
  border-top: 1px solid #282b31;
}

.ref-ov-hbars p>span {
  font-size: clamp(10px, 1.55vh, 12px);
}

.ref-ov-hbars p>i {
  height: clamp(7px, 1.3vh, 11px);
}

.ref-ov-hbars p>b {
  font-size: clamp(11px, 1.7vh, 13px);
}

/* ---- Big-number stats: rows fill card, dividers ---- */
.ref-ov-bigstats {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ref-ov-bigstat {
  flex: 1 1 0;
  min-height: 0;
}

.ref-ov-bigstat>strong {
  font-size: clamp(22px, 4vh, 38px);
}

.ref-ov-bigstat>span {
  font-size: clamp(11px, 1.7vh, 13px);
}

.ref-ov-bigstat>small {
  font-size: clamp(9px, 1.4vh, 10.5px);
}

/* ---- Donut: bigger ring, centered, roomy legend that fills width ---- */
.ref-ov-donut {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 26px);
}

.ref-ov-donut-ring {
  width: clamp(96px, 22vh, 172px);
  height: clamp(96px, 22vh, 172px);
}

.ref-ov-donut-arc {
  stroke-width: 4.4;
}

.ref-ov-donut-track {
  stroke-width: 4.4;
}

.ref-ov-donut-center strong {
  font-size: clamp(19px, 3.2vh, 28px);
}

.ref-ov-donut-legend {
  flex: 1;
  gap: clamp(6px, 1.6vh, 12px);
}

.ref-ov-donut-legend li {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  font-size: clamp(10px, 1.55vh, 12px);
}

.ref-ov-donut-legend li i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.ref-ov-donut-legend li b {
  font-size: clamp(12px, 1.9vh, 14px);
}

/* ---- Trend bars fill card, a touch more presence ---- */
.ref-ov-trend {
  height: 100%;
}

.ref-ov-trend .ref-bar-chart {
  height: 100%;
  padding-top: 4px;
}

/* ---- Capacity: gauge + stat rows fill the card ---- */
.ref-ov-capacity {
  height: 100%;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
}

.ref-ov-capacity .ref-ov-gauge.size-lg {
  flex: 0 0 auto;
}

.ref-ov-capacity .ref-ov-gauge.size-lg .ref-ov-gauge-ring {
  width: clamp(78px, 15vh, 132px);
  height: clamp(78px, 15vh, 132px);
}

.ref-ov-capacity-stats {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.4vh, 10px);
}

.ref-ov-capacity-stats span {
  flex: 0 0 auto;
}

.ref-ov-capacity-stats b {
  font-size: clamp(14px, 2.2vh, 17px);
}

/* ============================================================
   BI KIOSK v5 — Power BI density: rich KPI cards (number + mini
   chart + delta badge), labeled column charts, %-donuts, denser grid.
   ============================================================ */

/* ---- Denser grids: big chart + donut on top row, bars below ---- */
.ref-ov-grid--company {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.15fr 1fr;
  grid-template-areas: "a a b" "c d e";
}

.ref-ov-grid--requests {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.15fr 1fr;
  grid-template-areas: "a a b" "c d e";
}

.ref-ov-grid--people {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a a b" "a a c";
}

/* ---- Rich KPI card ---- */
.ref-ov-kpi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
}

.ref-ov-kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ref-ov-kpi-head i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(24px, 3.6vh, 30px);
  height: clamp(24px, 3.6vh, 30px);
  border-radius: 9px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.15);
  font-style: normal;
}

.ref-ov-kpi-head i .material-symbols-rounded {
  font-size: clamp(14px, 2vh, 17px);
}

.ref-ov-kpi-head i.tone-green {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .15);
}

.ref-ov-kpi-head i.tone-red {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .15);
}

.ref-ov-kpi-head i.tone-cyan {
  color: var(--ref-cyan);
  background: rgba(121, 209, 255, .15);
}

.ref-ov-kpi-head i.tone-amber {
  color: #f0c760;
  background: rgba(224, 182, 75, .15);
}

.ref-ov-kpi-head i.tone-blue {
  color: #8fb4ff;
  background: rgba(91, 141, 239, .15);
}

.ref-ov-kpi-head i.tone-slate {
  color: #b9c0cc;
  background: rgba(138, 141, 153, .18);
}

.ref-ov-kpi-head span {
  min-width: 0;
  overflow: hidden;
  color: #c9ccd4;
  font-size: clamp(8px, 1.25vh, 9.5px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-kpi-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.ref-ov-kpi-num {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ref-ov-kpi-num strong {
  color: var(--ref-ink);
  font-size: clamp(17px, 3vh, 27px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}

.ref-ov-kpi-num strong small {
  font-size: .5em;
  color: var(--ref-muted);
  font-weight: 650;
  margin-left: 1px;
  letter-spacing: 0;
}

.ref-ov-kpi-num em {
  overflow: hidden;
  color: var(--ref-muted);
  font-size: clamp(8px, 1.2vh, 9.5px);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-kpi-spark {
  flex: 0 0 auto;
  width: clamp(40px, 6vw, 74px);
  height: clamp(20px, 4vh, 34px);
}

.ref-spark-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.ref-spark-bars i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px 2px 1px 1px;
}

.ref-ov-kpi-note {
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: clamp(8.5px, 1.15vh, 10px);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---- Delta badge (▲/▼ colored) ---- */
.ref-delta {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  align-self: flex-start;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: clamp(8.5px, 1.3vh, 10px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ref-delta.up {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .14);
}

.ref-delta.down {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-delta .material-symbols-rounded {
  font-size: 13px;
}

/* ---- Column chart with data labels ---- */
.ref-col-chart {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(3px, .7vw, 9px);
  padding-top: 12px;
}

.ref-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.ref-col b {
  color: var(--ref-ink);
  font-size: clamp(8px, 1.35vh, 10.5px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ref-col i {
  width: clamp(40%, 66%, 74%);
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 5px 12px rgb(from var(--app-accent) r g b /.16);
  transition: height .5s cubic-bezier(.2, .8, .2, 1);
}

.ref-col small {
  width: 100%;
  overflow: hidden;
  color: #9aa0ab;
  font-size: clamp(7px, 1.1vh, 9px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Donut legend: value + percent columns ---- */
.ref-ov-donut-legend li {
  grid-template-columns: 12px minmax(0, 1fr) auto 40px;
  gap: 9px;
}

.ref-ov-donut-legend li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-donut-legend li em {
  color: var(--ref-muted);
  font-size: clamp(9px, 1.4vh, 10.5px);
  font-style: normal;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive: 2-column below 1120px, keep no-scroll ---- */
@media (max-width: 1120px) {

  .ref-ov-grid--company,
  .ref-ov-grid--requests {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }

  .ref-ov-grid--people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.2fr 1fr;
    grid-template-areas: "a a" "b c";
  }
}

@media (max-width: 720px) {
  .ref-ov-kpi-spark {
    display: none;
  }

  .ref-ov-grid--company,
  .ref-ov-grid--requests {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }

  .ref-ov-grid--people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.2fr 1fr;
    grid-template-areas: "a a" "b c";
  }

  .ref-col b {
    font-size: 7.5px;
  }
}

/* v5b — reclaim vertical space on short displays so nothing clips down to ~600px */
@media (max-height: 700px) {
  .ref-ov-kpis {
    gap: 6px;
  }

  .ref-ov-kpi {
    gap: 3px;
  }

  .ref-ov-kpi-head i {
    width: 22px;
    height: 22px;
  }

  .ref-ov-kpi-head i .material-symbols-rounded {
    font-size: 14px;
  }

  .ref-ov-kpi-spark {
    height: 16px;
    width: clamp(34px, 5vw, 56px);
  }

  .ref-ov-scene {
    gap: 7px;
  }

  .ref-ov-grid {
    gap: 7px;
  }

  .ref-ov-card>header {
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .ref-ov-progress {
    margin: 6px 0 7px;
  }
}

/* ============================================================
   v6 — FIX the empty-column gap: an earlier rule set
   `grid-column: auto` on the cells, which collapsed the 2-col
   spans and left the 3rd column empty. Re-assert grid-area last.
   ============================================================ */
.ref-ov-grid {
  width: 100%;
}

.ref-ov-grid>.cell-a {
  grid-area: a;
}

.ref-ov-grid>.cell-b {
  grid-area: b;
}

.ref-ov-grid>.cell-c {
  grid-area: c;
}

.ref-ov-grid>.cell-d {
  grid-area: d;
}

.ref-ov-grid>.cell-e {
  grid-area: e;
}

/* Field capacity: gauge + stats side by side, no overlap */
.ref-ov-capacity {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 22px);
}

.ref-ov-capacity .ref-ov-gauge.size-lg {
  flex: 0 0 auto;
  gap: 6px;
}

.ref-ov-capacity .ref-ov-gauge.size-lg .ref-ov-gauge-ring {
  width: clamp(66px, 12vh, 104px);
  height: clamp(66px, 12vh, 104px);
}

.ref-ov-capacity .ref-ov-gauge.size-lg .ref-ov-gauge-meta {
  align-items: center;
  text-align: center;
}

.ref-ov-capacity-stats {
  flex: 1;
  min-width: 0;
}

/* Slate tone for neutral big-stat chips (e.g. Cancelled) */
.ref-ov-bigstat>i.tone-slate {
  color: #b9c0cc;
  background: rgba(138, 141, 153, .16);
}

/* ============================================================
   v7 — rebalanced scene layouts (Overview 4 panels, People 5),
   still fills fully, no repeats.
   ============================================================ */
.ref-ov-grid--company {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.1fr 1fr;
  grid-template-areas: "a a b" "c d d";
}

.ref-ov-grid--requests {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.1fr 1fr;
  grid-template-areas: "a a b" "c d e";
}

.ref-ov-grid--people {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.1fr 1fr;
  grid-template-areas: "a a b" "c d e";
}

@media (max-width: 1120px) {
  .ref-ov-grid--company {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d d";
  }

  .ref-ov-grid--requests,
  .ref-ov-grid--people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }
}

@media (max-width: 720px) {
  .ref-ov-grid--company {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d d";
  }

  .ref-ov-grid--requests,
  .ref-ov-grid--people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }
}

/* ============================================================
   v8 — new chart types: area/line trend + stacked bars
   ============================================================ */
.ref-area-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ref-area {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.ref-area-labels {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}

.ref-area-labels span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #9aa0ab;
  font-size: clamp(7px, 1.1vh, 9px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-stacked-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ref-stack-legend {
  flex: 0 0 auto;
  display: flex;
  gap: 16px;
}

.ref-stack-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c9ccd4;
  font-size: clamp(8.5px, 1.3vh, 10.5px);
  font-weight: 650;
}

.ref-stack-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ref-stacked {
  flex: 1;
  min-height: 0;
}

.ref-stacked p>i {
  display: flex;
  overflow: hidden;
  background: #2b2e34;
}

.ref-stacked p>i em {
  height: 100%;
  min-width: 0;
  border-radius: 0;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.ref-stacked p>i em:first-child {
  border-radius: 5px 0 0 5px;
}

.ref-stacked p>i em:last-child {
  border-radius: 0 5px 5px 0;
}

/* ============================================================
   v9 — SLEEK pass: balanced Overview, redesigned capacity card,
   glossier bars, refined cards + KPIs. Keeps the no-scroll fit.
   ============================================================ */

/* Overview now 5 balanced panels (row2 = three 1-col cards) */
.ref-ov-grid--company {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1.12fr 1fr;
  grid-template-areas: "a a b" "c d e";
}

@media (max-width: 1120px) {
  .ref-ov-grid--company {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }
}

@media (max-width: 720px) {
  .ref-ov-grid--company {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1.1fr 1fr 1fr;
    grid-template-areas: "a a" "b c" "d e";
  }
}

/* --- Cards: subtle depth + crisper edges --- */
.ref-ov-card {
  border: 1px solid #30343c;
  border-radius: 18px;
  background: linear-gradient(180deg, #212530 0%, #1b1e25 62%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.ref-ov-card>header {
  padding: clamp(9px, 1.5vh, 14px) 16px clamp(4px, .8vh, 8px);
}

.ref-ov-card>header span {
  color: var(--orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.ref-ov-card>header h3 {
  color: #f4f5f7;
  font-weight: 700;
  letter-spacing: -.2px;
}

.ref-ov-card>header>b {
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.16);
  border: 1px solid rgb(from var(--app-accent) r g b /.28);
}

/* --- KPI cards: cleaner, consistent, a little glow --- */
.ref-ov-kpi {
  border: 1px solid #30343c;
  border-radius: 16px;
  background: linear-gradient(180deg, #232733, #1b1e25);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
}

.ref-ov-kpi-head i {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.ref-ov-kpi-num strong {
  color: #f5f6f8;
}

.ref-ov-kpi-spark {
  width: clamp(46px, 7vw, 84px);
  height: clamp(24px, 4.6vh, 38px);
  align-self: flex-end;
}

.ref-spark-bars i {
  border-radius: 3px 3px 1px 1px;
}

.ref-delta {
  border-radius: 8px;
}

/* --- Horizontal bars: thicker, glossy, rounded, softer track --- */
.ref-ov-hbars p>i {
  height: clamp(9px, 1.7vh, 13px);
  border-radius: 99px;
  background: #2c3038;
}

.ref-ov-hbars p>i em {
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  background-blend-mode: overlay;
}

.ref-ov-hbars p>span {
  color: #dfe2e8;
}

.ref-ov-hbars p>b {
  color: #f4f5f7;
}

/* --- Stacked bars match the new thickness --- */
.ref-stacked p>i {
  height: clamp(11px, 2vh, 15px);
  border-radius: 99px;
  background: #2c3038;
}

.ref-stacked p>i em:first-child {
  border-radius: 99px 0 0 99px;
}

.ref-stacked p>i em:last-child {
  border-radius: 0 99px 99px 0;
}

.ref-stacked p>i em:only-child {
  border-radius: 99px;
}

/* --- Column chart bars: rounded, gradient, subtle --- */
.ref-col i {
  border-radius: 6px 6px 3px 3px;
}

/* --- Donuts: bolder ring, cleaner legend --- */
.ref-ov-donut-track {
  stroke: #2c3038;
  stroke-width: 4.6;
}

.ref-ov-donut-arc {
  stroke-width: 4.8;
  stroke-linecap: round;
}

.ref-ov-donut-center strong {
  color: #f5f6f8;
}

.ref-ov-donut-legend li span {
  color: #dfe2e8;
}

.ref-ov-donut-legend li b {
  color: #f4f5f7;
}

/* --- Field capacity: gauge + tidy stat pills (no stretched empty rows) --- */
.ref-ov-capacity {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

.ref-ov-capacity .ref-ov-gauge.size-lg {
  flex: 0 0 auto;
  gap: 5px;
}

.ref-ov-capacity .ref-ov-gauge.size-lg .ref-ov-gauge-ring {
  width: clamp(66px, 12vh, 104px);
  height: clamp(66px, 12vh, 104px);
}

.ref-cap-stats {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1.2vh, 9px);
}

.ref-cap-stats>div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: clamp(5px, 1vh, 9px) 12px;
  border: 1px solid #30343c;
  border-radius: 11px;
  background: #191c22;
}

.ref-cap-stats .dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ref-cap-stats .dot-total {
  background: #8a8d99;
}

.ref-cap-stats .dot-on {
  background: var(--orange);
}

.ref-cap-stats .dot-free {
  background: var(--ref-green);
}

.ref-cap-stats b {
  color: #f4f5f7;
  font-size: clamp(14px, 2.1vh, 17px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
}

.ref-cap-stats small {
  color: var(--ref-muted);
  font-size: clamp(9px, 1.4vh, 11px);
  font-weight: 600;
}

/* --- Big-number stat rows: a touch bolder --- */
.ref-ov-bigstat>strong {
  color: #f5f6f8;
}

.ref-ov-bigstat>span {
  color: #dfe2e8;
}

/* --- Scene header polish --- */
.ref-ov-head-title h2 {
  color: #f6f7f9;
}

.ref-ov-progress {
  background: #2c3038;
}

/* ============================================================
   v10 — radial-ring chart + entrance animations + glow.
   ============================================================ */

/* --- Radial progress rings --- */
.ref-radials {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.ref-radial {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.ref-radial-ring {
  position: relative;
  width: clamp(54px, 11vh, 92px);
  height: clamp(54px, 11vh, 92px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, #1c1f26 71%, transparent 72%), conic-gradient(var(--tone) calc(var(--val) * 1%), #2c3038 0);
}

.ref-radial-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 16px -5px var(--tone);
}

.ref-radial-ring strong {
  color: #f5f6f8;
  font-size: clamp(15px, 2.4vh, 22px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-radial>b {
  color: #eceef2;
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 700;
}

.ref-radial>small {
  color: var(--ref-muted);
  font-size: clamp(8px, 1.2vh, 9.5px);
}

/* --- Glow refinements --- */
.ref-ov-donut-ring svg {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4));
}

.ref-ov-gauge-ring {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4));
}

.ref-area polyline {
  filter: drop-shadow(0 4px 7px rgb(from var(--app-accent) r g b /.3));
}

.ref-col i {
  filter: drop-shadow(0 4px 8px rgb(from var(--app-accent) r g b /.18));
}

/* --- Entrance animations (fire on every scene change; stage remounts) --- */
@keyframes ref-grow-x {
  from {
    transform: scaleX(0);
    opacity: .5;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes ref-grow-y {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes ref-pop {
  from {
    opacity: 0;
    transform: scale(.85);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ref-rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ref-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ref-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ref-ov-stage .ref-ov-card {
  animation: ref-rise .5s ease both;
}

.ref-ov-stage .ref-ov-kpi {
  animation: ref-rise .45s ease both;
}

.ref-ov-stage .ref-ov-hbars p>i em,
.ref-ov-stage .ref-stacked p>i em {
  transform-origin: left center;
  animation: ref-grow-x .8s cubic-bezier(.2, .8, .2, 1) both;
}

.ref-ov-stage .ref-col i {
  transform-origin: bottom center;
  animation: ref-grow-y .75s cubic-bezier(.2, .8, .2, 1) both;
}

.ref-ov-stage .ref-spark-bars i {
  transform-origin: bottom center;
  animation: ref-grow-y .6s ease both;
}

.ref-ov-stage .ref-ov-donut-ring,
.ref-ov-stage .ref-ov-gauge-ring,
.ref-ov-stage .ref-radial-ring {
  animation: ref-pop .65s cubic-bezier(.2, .8, .2, 1) both;
}

.ref-ov-stage .ref-ov-bigstat {
  animation: ref-rise .5s ease both;
}

.ref-ov-stage .ref-area path {
  animation: ref-fade .9s ease both;
}

.ref-ov-stage .ref-area polyline {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: ref-draw 1.1s .1s ease forwards;
}

/* Stagger — KPIs */
.ref-ov-stage .ref-ov-kpi:nth-child(1) {
  animation-delay: .02s;
}

.ref-ov-stage .ref-ov-kpi:nth-child(2) {
  animation-delay: .06s;
}

.ref-ov-stage .ref-ov-kpi:nth-child(3) {
  animation-delay: .10s;
}

.ref-ov-stage .ref-ov-kpi:nth-child(4) {
  animation-delay: .14s;
}

.ref-ov-stage .ref-ov-kpi:nth-child(5) {
  animation-delay: .18s;
}

.ref-ov-stage .ref-ov-kpi:nth-child(6) {
  animation-delay: .22s;
}

/* Stagger — grid cards */
.ref-ov-grid>*:nth-child(1) {
  animation-delay: .08s;
}

.ref-ov-grid>*:nth-child(2) {
  animation-delay: .14s;
}

.ref-ov-grid>*:nth-child(3) {
  animation-delay: .20s;
}

.ref-ov-grid>*:nth-child(4) {
  animation-delay: .26s;
}

.ref-ov-grid>*:nth-child(5) {
  animation-delay: .32s;
}

/* Stagger — bar rows */
.ref-ov-hbars p:nth-child(1)>i>em {
  animation-delay: .10s;
}

.ref-ov-hbars p:nth-child(2)>i>em {
  animation-delay: .16s;
}

.ref-ov-hbars p:nth-child(3)>i>em {
  animation-delay: .22s;
}

.ref-ov-hbars p:nth-child(4)>i>em {
  animation-delay: .28s;
}

.ref-ov-hbars p:nth-child(5)>i>em {
  animation-delay: .34s;
}

.ref-ov-hbars p:nth-child(6)>i>em {
  animation-delay: .40s;
}

/* Stagger — columns */
.ref-col:nth-child(1) i {
  animation-delay: .10s;
}

.ref-col:nth-child(2) i {
  animation-delay: .15s;
}

.ref-col:nth-child(3) i {
  animation-delay: .20s;
}

.ref-col:nth-child(4) i {
  animation-delay: .25s;
}

.ref-col:nth-child(5) i {
  animation-delay: .30s;
}

.ref-col:nth-child(6) i {
  animation-delay: .35s;
}

.ref-col:nth-child(7) i {
  animation-delay: .40s;
}

.ref-col:nth-child(8) i {
  animation-delay: .45s;
}

/* Stagger — radials */
.ref-radial:nth-child(1) .ref-radial-ring {
  animation-delay: .12s;
}

.ref-radial:nth-child(2) .ref-radial-ring {
  animation-delay: .22s;
}

.ref-radial:nth-child(3) .ref-radial-ring {
  animation-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {

  .ref-ov-stage .ref-ov-card,
  .ref-ov-stage .ref-ov-kpi,
  .ref-ov-stage .ref-ov-hbars p>i em,
  .ref-ov-stage .ref-stacked p>i em,
  .ref-ov-stage .ref-col i,
  .ref-ov-stage .ref-spark-bars i,
  .ref-ov-stage .ref-ov-donut-ring,
  .ref-ov-stage .ref-ov-gauge-ring,
  .ref-ov-stage .ref-radial-ring,
  .ref-ov-stage .ref-ov-bigstat,
  .ref-ov-stage .ref-area path,
  .ref-ov-stage .ref-area polyline {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   BI KIOSK v4 — "god mode" density.
   Each scene: KPI band + metric ribbon + an 8-card grid.
   Appended last so it overrides the earlier .ref-ov-* rules.
   ============================================================ */

/* Three stacked bands: KPIs, ribbon, then the card grid fills the rest. */
.ref-ov-scene--rich {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
}

/* --- Secondary metric ribbon --- */
.ref-ov-ribbon {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ref-ov-ribbon-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: clamp(5px, .9vh, 9px) 11px;
  border: 1px solid #2b2e34;
  border-radius: 12px;
  background: linear-gradient(150deg, #202329 60%, #1d1f24);
}

.ref-ov-ribbon-item>i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(24px, 3.4vh, 30px);
  height: clamp(24px, 3.4vh, 30px);
  border-radius: 9px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
  font-style: normal;
}

.ref-ov-ribbon-item>i .material-symbols-rounded {
  font-size: clamp(14px, 2vh, 17px);
}

.ref-ov-ribbon-item>i.tone-green {
  color: var(--ref-green);
  background: rgba(52, 211, 153, .14);
}

.ref-ov-ribbon-item>i.tone-red {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-ribbon-item>i.tone-cyan {
  color: var(--ref-cyan);
  background: rgba(121, 209, 255, .14);
}

.ref-ov-ribbon-item>i.tone-amber {
  color: #f0c760;
  background: rgba(224, 182, 75, .14);
}

.ref-ov-ribbon-item>i.tone-blue {
  color: #8fb4ff;
  background: rgba(91, 141, 239, .14);
}

.ref-ov-ribbon-item>i.tone-slate {
  color: #b9c0cc;
  background: rgba(138, 141, 153, .16);
}

.ref-ov-ribbon-item>div {
  min-width: 0;
}

.ref-ov-ribbon-item strong {
  display: block;
  color: var(--ref-ink);
  font-size: clamp(13px, 2vh, 17px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
}

.ref-ov-ribbon-item strong small {
  margin-left: 1px;
  font-size: .62em;
  font-weight: 650;
  color: var(--ref-muted);
}

.ref-ov-ribbon-item span {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: clamp(8px, 1.2vh, 9.5px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-ribbon-item .ref-delta {
  margin-left: auto;
  flex: 0 0 auto;
}

/* --- Grids: 4 columns x 2 rows, eight cards (a..h) --- */
.ref-ov-grid .cell-f {
  grid-area: f;
}

.ref-ov-grid .cell-g {
  grid-area: g;
}

.ref-ov-grid .cell-h {
  grid-area: h;
}

.ref-ov-grid--company,
.ref-ov-grid--requests,
.ref-ov-grid--people {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a b c d" "e f g h";
}

/* Cards are a touch tighter so eight fit the wall cleanly. */
.ref-ov-scene--rich .ref-ov-card {
  border-radius: 16px;
}

.ref-ov-scene--rich .ref-ov-card>header {
  padding: clamp(6px, 1.1vh, 11px) 13px clamp(2px, .5vh, 5px);
}

.ref-ov-scene--rich .ref-ov-card>header h3 {
  font-size: clamp(10.5px, 1.6vh, 13.5px);
}

.ref-ov-scene--rich .ref-ov-card-body {
  min-height: 0;
  padding: 2px 13px clamp(6px, 1vh, 11px);
}

/* --- Funnel --- */
.ref-ov-funnel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1vh, 9px);
  width: 100%;
  height: 100%;
}

.ref-ov-funnel-row {
  display: grid;
  grid-template-columns: minmax(58px, 92px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}

.ref-ov-funnel-row>span {
  overflow: hidden;
  color: #d3d6dd;
  font-size: clamp(9.5px, 1.4vh, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-funnel-row>i {
  height: clamp(9px, 1.5vh, 13px);
  overflow: hidden;
  border-radius: 6px;
  background: #2b2e34;
}

.ref-ov-funnel-row>i em {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 6px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.ref-ov-funnel-row>b {
  color: var(--ref-ink);
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-ov-funnel-row>small {
  min-width: 30px;
  text-align: right;
  color: var(--orange);
  font-size: clamp(8.5px, 1.3vh, 10px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Leaderboard --- */
.ref-ov-board {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, .9vh, 8px);
  width: 100%;
  height: 100%;
}

.ref-ov-board-row {
  display: grid;
  grid-template-columns: 20px minmax(56px, 1.1fr) minmax(0, 1.3fr) auto auto;
  align-items: center;
  gap: 9px;
}

.ref-ov-board-row .rank {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: var(--ref-muted);
  background: #2b2e34;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ref-ov-board-row.lead .rank {
  color: #5e2a00;
  background: linear-gradient(145deg, var(--orange-2), var(--orange));
}

.ref-ov-board-row .who {
  overflow: hidden;
  color: #d6d9e0;
  font-size: clamp(9.5px, 1.4vh, 11px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-board-row>i {
  height: clamp(6px, 1vh, 8px);
  overflow: hidden;
  border-radius: 5px;
  background: #2b2e34;
}

.ref-ov-board-row>i em {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 5px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.ref-ov-board-row>b {
  color: var(--ref-ink);
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-ov-board-row>small {
  min-width: 30px;
  text-align: right;
  color: var(--ref-green);
  font-size: clamp(8.5px, 1.3vh, 10px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Heat strip --- */
.ref-ov-heat {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.ref-ov-heat-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ref-ov-heat-cell>i {
  flex: 1;
  min-height: clamp(28px, 6vh, 64px);
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: clamp(9px, 1.5vh, 12px);
  font-weight: 750;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ref-ov-heat-cell>small {
  text-align: center;
  color: var(--ref-muted);
  font-size: clamp(7.5px, 1.1vh, 9px);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* --- Watch list --- */
.ref-ov-watch {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: clamp(3px, .9vh, 7px);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ref-ov-watch-row {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: clamp(4px, .8vh, 8px) 9px;
  border: 1px solid #2b2e34;
  border-radius: 11px;
  background: #212429;
}

.ref-ov-watch-row .ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-watch-row .ic.tone-amber {
  color: #f0c760;
  background: rgba(224, 182, 75, .14);
}

.ref-ov-watch-row .ic.tone-red {
  color: var(--ref-red);
  background: rgba(255, 180, 171, .14);
}

.ref-ov-watch-row .ic .material-symbols-rounded {
  font-size: 15px;
}

.ref-ov-watch-row p {
  min-width: 0;
  margin: 0;
}

.ref-ov-watch-row strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: clamp(9.5px, 1.4vh, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-watch-row small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: clamp(8px, 1.2vh, 9.5px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-watch-row>b {
  color: var(--ref-red);
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ref-ov-watch-row>b.tone-amber {
  color: #f0c760;
}

/* Keep the capacity + big-stat blocks tidy inside the smaller v4 cards. */
.ref-ov-scene--rich .ref-ov-capacity {
  gap: 12px;
}

.ref-ov-scene--rich .ref-ov-bigstats {
  gap: 2px;
}

/* --- Responsive: tablet / narrow landscape --- */
@media (max-width: 1240px) {
  .ref-ov-ribbon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ref-ov-grid--company,
  .ref-ov-grid--requests,
  .ref-ov-grid--people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-areas: "a b" "c d" "e f" "g h";
  }

  /* Let the wall breathe: allow the overview to scroll rather than clip. */
  .reference-shell:has(.ref-ov-shell) {
    height: auto;
    min-height: calc(100vh - 20px);
    overflow: visible;
  }

  .reference-shell:has(.ref-ov-shell) .reference-content {
    overflow: visible;
  }

  .ref-ov-stage {
    overflow: visible;
  }

  .ref-ov-scene--rich .ref-ov-card-body {
    min-height: 132px;
  }
}

/* --- Responsive: phones --- */
@media (max-width: 720px) {
  .ref-ov-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-ov-grid--company,
  .ref-ov-grid--requests,
  .ref-ov-grid--people {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h";
  }

  .ref-ov-heat-cell>i {
    min-height: 40px;
  }
}

/* ============================================================
   BI KIOSK v5 — roomy + interactive.
   Rich scenes scroll instead of clipping; charts get real height;
   header gains a period filter, a live badge and pause-on-hover.
   Appended last so it wins the cascade.
   ============================================================ */

/* ---- Let the overview grow and scroll; never clip a chart ---- */
.reference-shell:has(.ref-ov-scene--rich) {
  height: auto;
  min-height: calc(100vh - 20px);
  overflow: visible;
}

.reference-shell:has(.ref-ov-scene--rich) .reference-content {
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.ref-ov-shell:has(.ref-ov-scene--rich) {
  min-height: 0;
}

.ref-ov-stage:has(.ref-ov-scene--rich) {
  overflow: visible;
  min-height: 0;
}

.ref-ov-scene--rich {
  height: auto;
  grid-template-rows: auto auto auto;
}

/* ---- Header controls: period filter + scene dots ---- */
.ref-ov-head-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ref-ov-periods {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #2b2e34;
  border-radius: 16px;
  background: #1e2024;
}

.ref-ov-periods-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 8px;
  color: var(--ref-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ref-ov-periods-label .material-symbols-rounded {
  font-size: 15px;
  color: var(--orange);
}

.ref-ov-periods button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 0;
  border-radius: 11px;
  padding: 0 11px;
  color: #9a9aa0;
  background: transparent;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.ref-ov-periods button .material-symbols-rounded {
  font-size: 15px;
}

.ref-ov-periods button:hover {
  color: #fff;
  background: #2a2d33;
}

.ref-ov-periods button.active {
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 5px 12px rgb(from var(--app-accent) r g b /.3);
}

.ref-ov-periods button.is-month {
  color: #fff;
  background: rgb(from var(--app-accent) r g b /.16);
  box-shadow: none;
}

.ref-ov-periods button.is-month .material-symbols-rounded {
  font-size: 14px;
}

/* Live badge shown on the Today scene (period filter hidden there). */
.ref-ov-livebadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(52, 211, 153, .32);
  border-radius: 16px;
  background: rgba(52, 211, 153, .1);
  color: var(--ref-green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
}

.ref-ov-livebadge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ref-green);
  animation: ref-live-pulse 1.8s ease-out infinite;
}

@keyframes ref-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
  }

  70% {
    box-shadow: 0 0 0 9px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Paused hint on the progress bar. */
.ref-ov-shell.is-paused .ref-ov-progress {
  background: repeating-linear-gradient(90deg, #2b2e34 0 10px, #24262b 10px 20px);
}

/* ---- Roomy grids: content-height rows with a generous floor ---- */
.ref-ov-grid .cell-i {
  grid-area: i;
}

.ref-ov-grid .cell-j {
  grid-area: j;
}

.ref-ov-scene--rich .ref-ov-grid--today,
.ref-ov-scene--rich .ref-ov-grid--company,
.ref-ov-scene--rich .ref-ov-grid--requests {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(238px, auto) minmax(238px, auto);
  grid-template-areas: "a b c d" "e f g h";
}

.ref-ov-scene--rich .ref-ov-grid--people {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(238px, auto));
  grid-template-areas: "a b c d" "e f g h" "i i j j";
}

/* ---- Cards get real internal height so no chart collapses ---- */
.ref-ov-scene--rich .ref-ov-card-body {
  min-height: 214px;
  height: auto;
  overflow: hidden;
}

.ref-ov-scene--rich .ref-ov-trend {
  height: 100%;
  min-height: 176px;
}

.ref-ov-scene--rich .ref-ov-donut {
  justify-content: center;
}

.ref-ov-scene--rich .ref-ov-donut-ring {
  width: clamp(104px, 12vw, 138px);
  height: clamp(104px, 12vw, 138px);
}

/* ---- Interactivity: cards lift, bars brighten, months click ---- */
.ref-ov-scene--rich .ref-ov-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ref-ov-scene--rich .ref-ov-card:hover {
  transform: translateY(-3px);
  border-color: rgb(from var(--app-accent) r g b /.42);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .46);
}

.ref-ov-hbars p:hover>i em,
.ref-ov-funnel-row:hover>i em,
.ref-ov-board-row:hover>i em {
  filter: brightness(1.18) saturate(1.05);
}

.ref-ov-board-row {
  border-radius: 8px;
  transition: background .16s ease;
}

.ref-ov-board-row:hover {
  background: #24262b;
}

.ref-ov-watch-row {
  transition: transform .16s ease, border-color .16s ease;
}

.ref-ov-watch-row:hover {
  transform: translateX(2px);
  border-color: #3a3d44;
}

/* Clickable heatmap cells */
.ref-ov-heat.is-clickable .ref-ov-heat-cell {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.ref-ov-heat.is-clickable .ref-ov-heat-cell>i {
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ref-ov-heat.is-clickable .ref-ov-heat-cell:hover>i {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .45);
}

.ref-ov-heat .ref-ov-heat-cell.active>i {
  outline-color: var(--orange);
  box-shadow: 0 8px 18px rgb(from var(--app-accent) r g b /.4);
}

.ref-ov-heat.is-clickable .ref-ov-heat-cell.active>small {
  color: var(--orange);
}

/* ---- Responsive: tablet / narrow landscape ---- */
@media (max-width: 1240px) {
  .ref-ov-head-controls {
    width: 100%;
    justify-content: space-between;
  }

  .ref-ov-scene--rich .ref-ov-grid--today,
  .ref-ov-scene--rich .ref-ov-grid--company,
  .ref-ov-scene--rich .ref-ov-grid--requests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(206px, auto));
    grid-template-areas: "a b" "c d" "e f" "g h";
  }

  .ref-ov-scene--rich .ref-ov-grid--people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(206px, auto));
    grid-template-areas: "a b" "c d" "e f" "g h" "i j";
  }
}

/* ---- Responsive: phones — single column, natural flow ---- */
@media (max-width: 720px) {
  .ref-ov-periods {
    flex-wrap: wrap;
  }

  .ref-ov-scene--rich .ref-ov-grid--today,
  .ref-ov-scene--rich .ref-ov-grid--company,
  .ref-ov-scene--rich .ref-ov-grid--requests,
  .ref-ov-scene--rich .ref-ov-grid--people {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(196px, auto);
    grid-template-areas: none;
  }

  .ref-ov-scene--rich .ref-ov-grid>.ref-ov-card {
    grid-area: auto;
    grid-column: auto;
  }
}

/* ============================================================
   BI KIOSK v6 — fit-to-screen (no scroll), 4 cards per scene,
   persistent interactive calendar rail. Wins the cascade.
   ============================================================ */

/* ---- Restore: the whole overview fits the display, never scrolls ---- */
.reference-shell:has(.ref-ov-scene--rich) {
  height: calc(100vh - 20px);
  min-height: 0;
  overflow: hidden;
}

.reference-shell:has(.ref-ov-scene--rich) .reference-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ref-ov-shell:has(.ref-ov-scene--rich) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Body row: rotating scene on the left, calendar rail on the right ---- */
.ref-ov-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}

.ref-ov-main .ref-ov-stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ref-ov-rail {
  flex: 0 0 clamp(238px, 21vw, 306px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Scene = KPI band + a 2x2 grid (ribbon removed) ---- */
.ref-ov-scene--rich {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.ref-ov-scene--rich .ref-ov-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ref-ov-grid--hex {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a b c" "d e f";
}

/* Cards fit their cell again — undo the v5 min-heights so nothing scrolls */
.ref-ov-scene--rich .ref-ov-card {
  border-radius: 16px;
}

.ref-ov-scene--rich .ref-ov-card-body {
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.ref-ov-scene--rich .ref-ov-trend {
  height: 100%;
  min-height: 0;
}

.ref-ov-scene--rich .ref-ov-donut-ring {
  width: clamp(96px, 13vh, 140px);
  height: clamp(96px, 13vh, 140px);
}

/* ---- Interactive calendar ---- */
.ref-ov-cal {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px;
  border: 1px solid #2b2e34;
  border-radius: 18px;
  background: linear-gradient(160deg, #1e2024 62%, #1f2127);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}

.ref-ov-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ref-ov-cal-head>button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid #2b2e34;
  border-radius: 9px;
  background: #212429;
  color: #c7cbd3;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.ref-ov-cal-head>button:hover {
  color: var(--orange);
  border-color: rgb(from var(--app-accent) r g b /.45);
}

.ref-ov-cal-head>button .material-symbols-rounded {
  font-size: 18px;
}

.ref-ov-cal-title {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ref-ink);
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.2px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ref-ov-cal-title b {
  color: var(--ref-muted);
  font-weight: 700;
}

.ref-ov-cal-title:hover {
  background: #24262b;
}

.ref-ov-cal-title.active {
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
}

.ref-ov-cal-title.active b {
  color: rgba(94, 42, 0, .7);
}

.ref-ov-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.ref-ov-cal-dow span {
  text-align: center;
  color: var(--ref-muted);
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.ref-ov-cal-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
}

.ref-ov-cal-grid .empty {
  border-radius: 8px;
}

.ref-ov-cal-day {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid #2b2e34;
  border-radius: 8px;
  background: #212429;
  color: #aeb3bd;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.ref-ov-cal-day em {
  font-size: clamp(9px, 1.4vh, 11px);
  font-weight: 650;
  font-style: normal;
  line-height: 1;
}

.ref-ov-cal-day i {
  font-size: 7.5px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  margin-top: 1px;
}

.ref-ov-cal-day.has {
  background: rgb(from var(--app-accent) r g b / var(--heat, .3));
  border-color: rgb(from var(--app-accent) r g b /.28);
  color: #fff;
}

.ref-ov-cal-day.has i {
  color: #fff;
  opacity: .92;
}

.ref-ov-cal-day:hover {
  transform: translateY(-2px);
  border-color: rgb(from var(--app-accent) r g b /.6);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}

.ref-ov-cal-day.today {
  border-color: var(--ref-green);
}

.ref-ov-cal-day.today em {
  color: var(--ref-green);
}

.ref-ov-cal-day.has.today em {
  color: #fff;
}

.ref-ov-cal-day.selected {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  box-shadow: 0 6px 16px rgb(from var(--app-accent) r g b /.4);
}

.ref-ov-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.ref-ov-cal-foot>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-cal-foot>span .material-symbols-rounded {
  font-size: 14px;
  color: var(--orange);
}

.ref-ov-cal-foot>b {
  color: var(--ref-ink);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ref-ov-cal-foot>button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgb(from var(--app-accent) r g b /.3);
  border-radius: 999px;
  background: rgb(from var(--app-accent) r g b /.12);
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ref-ov-cal-foot>button .material-symbols-rounded {
  font-size: 13px;
}

/* ---- Responsive: tablet / narrow — calendar drops below the scene ---- */
@media (max-width: 1140px) {
  .reference-shell:has(.ref-ov-scene--rich) {
    height: auto;
    min-height: calc(100vh - 20px);
    overflow: visible;
  }

  .reference-shell:has(.ref-ov-scene--rich) .reference-content {
    overflow: visible;
  }

  .ref-ov-main {
    flex-direction: column;
  }

  .ref-ov-rail {
    flex: 0 0 auto;
  }

  .ref-ov-cal {
    min-height: 300px;
  }

  .ref-ov-scene--rich .ref-ov-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ref-ov-grid--hex {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(196px, auto));
    grid-template-areas: "a b" "c d" "e f";
  }
}

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

  .ref-ov-grid--hex {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(184px, auto);
    grid-template-areas: "a" "b" "c" "d" "e" "f";
  }
}

/* ============================================================
   BI KIOSK v7 — premium calendar restyle (overrides v6 calendar).
   ============================================================ */
.ref-ov-cal {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 13px;
  border: 1px solid #2c2f36;
  border-radius: 20px;
  background: linear-gradient(165deg, #202329 0%, #1b1d22 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

/* Header: arrows + centered month-year on one line */
.ref-ov-cal-head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
}

.ref-ov-cal-head>button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #2f333b;
  border-radius: 10px;
  background: #23262c;
  color: #c7cbd3;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ref-ov-cal-head>button:hover {
  color: var(--orange);
  border-color: rgb(from var(--app-accent) r g b /.5);
  background: #26292f;
}

.ref-ov-cal-head>button .material-symbols-rounded {
  font-size: 19px;
}

.ref-ov-cal-title {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ref-ink);
  background: transparent;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ref-ov-cal-title b {
  color: var(--orange);
  font-weight: 750;
}

.ref-ov-cal-title:hover {
  background: #26292f;
}

.ref-ov-cal-title.active {
  color: #5e2a00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
}

.ref-ov-cal-title.active b {
  color: #5e2a00;
}

/* Weekday header */
.ref-ov-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 0 1px;
}

.ref-ov-cal-dow span {
  text-align: center;
  color: #7f8592;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .6px;
}

/* Day grid — square tiles, natural height (no stretching) */
.ref-ov-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.ref-ov-cal-grid .empty {
  aspect-ratio: 1;
}

.ref-ov-cal-day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #2b2e34;
  border-radius: 10px;
  background: #22252b;
  color: #9aa0ac;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.ref-ov-cal-day em {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
}

.ref-ov-cal-day i {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  color: #7f8592;
}

.ref-ov-cal-day.has {
  background: rgb(from var(--app-accent) r g b / var(--heat, .3));
  border-color: rgb(from var(--app-accent) r g b /.3);
  color: #fff;
}

.ref-ov-cal-day.has em {
  font-weight: 750;
}

.ref-ov-cal-day.has i {
  color: #fff;
  opacity: .95;
}

.ref-ov-cal-day:hover {
  transform: translateY(-2px);
  border-color: rgb(from var(--app-accent) r g b /.65);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .45);
  z-index: 1;
}

.ref-ov-cal-day.today {
  border-color: var(--ref-green);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5);
}

.ref-ov-cal-day.today em {
  color: var(--ref-green);
}

.ref-ov-cal-day.has.today em {
  color: #fff;
}

.ref-ov-cal-day.selected {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  box-shadow: 0 8px 18px rgb(from var(--app-accent) r g b /.45);
  z-index: 1;
}

/* Legend + footer pinned to the bottom of the rail */
.ref-ov-cal-legend {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ref-ov-cal-legend span {
  color: #7f8592;
  font-size: 9px;
  font-weight: 600;
}

.ref-ov-cal-legend i {
  width: 15px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .05);
}

.ref-ov-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #2a2d33;
}

.ref-ov-cal-foot>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: #cdd0d7;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-cal-foot>span .material-symbols-rounded {
  font-size: 15px;
  color: var(--orange);
}

.ref-ov-cal-foot>b {
  color: var(--ref-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ref-ov-cal-foot>button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgb(from var(--app-accent) r g b /.35);
  border-radius: 999px;
  background: rgb(from var(--app-accent) r g b /.14);
  color: var(--orange);
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  transition: background .15s ease;
}

.ref-ov-cal-foot>button:hover {
  background: rgb(from var(--app-accent) r g b /.24);
}

.ref-ov-cal-foot>button .material-symbols-rounded {
  font-size: 14px;
}

/* ============================================================
   BI KIOSK v8 — rail = calendar (natural) + upcoming-visits agenda.
   ============================================================ */
.ref-ov-rail {
  gap: 12px;
}

.ref-ov-cal {
  flex: 0 0 auto;
}

.ref-ov-cal-grid {
  grid-auto-rows: unset;
}

.ref-ov-agenda {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #2c2f36;
  border-radius: 20px;
  background: linear-gradient(165deg, #202329 0%, #1b1d22 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.ref-ov-agenda>header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ref-ov-agenda>header>i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
}

.ref-ov-agenda>header>i .material-symbols-rounded {
  font-size: 18px;
}

.ref-ov-agenda>header>span {
  flex: 1;
  min-width: 0;
  color: var(--ref-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.ref-ov-agenda>header>b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.13);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ref-ov-agenda-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ref-ov-agenda-list>div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #2b2e34;
  border-radius: 12px;
  background: #212429;
  transition: transform .14s ease, border-color .14s ease;
}

.ref-ov-agenda-list>div:hover {
  transform: translateX(2px);
  border-color: rgb(from var(--app-accent) r g b /.4);
}

.ref-ov-agenda-list .dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #191b1f;
  border: 1px solid #2f333b;
}

.ref-ov-agenda-list .dt b {
  color: var(--ref-ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ref-ov-agenda-list .dt small {
  color: var(--orange);
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 1px;
}

.ref-ov-agenda-list p {
  min-width: 0;
  margin: 0;
}

.ref-ov-agenda-list p strong {
  display: block;
  overflow: hidden;
  color: var(--ref-ink);
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-agenda-list p small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-ov-agenda-list .ref-ov-prio {
  font-size: 9px;
  padding: 3px 8px;
}

/* On stacked (narrow) layout the agenda can breathe under the calendar */
@media (max-width: 1140px) {
  .ref-ov-agenda {
    min-height: 200px;
  }
}

/* ============================================================
   BI KIOSK v9 — fix: month title button must not inherit the
   32px arrow-button sizing; make it confident and centered.
   ============================================================ */
.ref-ov-cal-head>button.ref-ov-cal-title {
  width: auto;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.ref-ov-cal-head>button.ref-ov-cal-title b {
  font-size: 15px;
  font-weight: 800;
}

/* ============================================================
   BI KIOSK v10 — calendar takes natural height so the agenda
   below it fills the rest of the rail (fixes collapsed agenda).
   ============================================================ */
.ref-ov-rail .ref-ov-cal {
  height: auto;
  flex: 0 0 auto;
}

.ref-ov-rail .ref-ov-cal-legend {
  margin-top: 4px;
}

.ref-ov-rail .ref-ov-agenda {
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   REPORTS v11 — BI polish: animated health ring, rolling KPIs,
   lively bars, and a click-through account drill-down modal.
   Scoped entirely to the Reports tab (.ref-reports / .ref-acct-*).
   ============================================================ */

/* --- Animated SVG health/score ring (replaces the flat bordered circle) --- */
.ref-score-ring {
  position: relative;
  border: 0 !important;
  background: transparent !important;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.ref-ring-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ref-ring-track {
  stroke: rgba(255, 255, 255, .16);
}

.ref-ring-fill {
  transition: stroke-dashoffset 1.15s cubic-bezier(.2, .85, .25, 1);
}

.ref-score-ring.good .ref-ring-fill {
  stroke: #34d399;
}

.ref-score-ring.ok .ref-ring-fill {
  stroke: var(--orange, var(--app-accent));
}

.ref-score-ring.warn .ref-ring-fill {
  stroke: #ffcf6b;
}

.ref-score-ring.bad .ref-ring-fill {
  stroke: #ff8f7f;
}

.ref-ring-fill {
  filter: drop-shadow(0 0 5px currentColor);
}

.ref-score-ring.good .ref-ring-fill,
.ref-score-ring.ok .ref-ring-fill,
.ref-score-ring.warn .ref-ring-fill,
.ref-score-ring.bad .ref-ring-fill {
  color: inherit;
}

.ref-ring-label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ref-ring-label strong {
  color: #fff;
  font-weight: 800;
  font-size: 20px;
}

.ref-ring-label small {
  margin-top: 1px;
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
}

/* --- Entrance choreography for KPI cards & demand metrics --- */
@keyframes ref-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ref-report-kpis article {
  animation: ref-pop .5s cubic-bezier(.2, .8, .25, 1) both;
}

.ref-report-kpis article:nth-child(1) {
  animation-delay: .02s;
}

.ref-report-kpis article:nth-child(2) {
  animation-delay: .07s;
}

.ref-report-kpis article:nth-child(3) {
  animation-delay: .12s;
}

.ref-report-kpis article:nth-child(4) {
  animation-delay: .17s;
}

.ref-report-kpis article:nth-child(5) {
  animation-delay: .22s;
}

.ref-report-kpis article:nth-child(6) {
  animation-delay: .27s;
}

.ref-report-kpis article {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ref-report-kpis article:hover {
  transform: translateY(-3px);
  border-color: rgb(from var(--app-accent) r g b /.5) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

.ref-report-kpis article>.material-symbols-rounded {
  transition: transform .2s ease;
}

.ref-report-kpis article:hover>.material-symbols-rounded {
  transform: scale(1.12) rotate(-6deg);
}

.ref-demand-metrics>div {
  animation: ref-pop .5s cubic-bezier(.2, .8, .25, 1) both;
}

.ref-demand-metrics>div:nth-child(2) {
  animation-delay: .05s;
}

.ref-demand-metrics>div:nth-child(3) {
  animation-delay: .1s;
}

.ref-demand-metrics>div:nth-child(4) {
  animation-delay: .15s;
}

.ref-demand-metrics>div:nth-child(5) {
  animation-delay: .2s;
}

.ref-demand-metrics>div:nth-child(6) {
  animation-delay: .25s;
}

/* --- Bars animate their width smoothly whenever the data changes --- */
.ref-report-status p em,
.ref-demand-rate em,
.ref-report-types em {
  transition: width .9s cubic-bezier(.2, .85, .25, 1);
}

.ref-report-status p em,
.ref-demand-rate em {
  position: relative;
  overflow: hidden;
}

.ref-report-status p em::after,
.ref-demand-rate em::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: ref-shimmer 2.4s ease-in-out infinite;
}

@keyframes ref-shimmer {
  0% {
    transform: translateX(-120%);
  }

  55%,
  100% {
    transform: translateX(230%);
  }
}

/* --- Demand rows become click-through drill-downs --- */
.ref-demand-row.is-click {
  cursor: pointer;
  animation: ref-pop .45s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: var(--d, 0ms);
}

.ref-demand-row.is-click:hover {
  background: rgb(from var(--app-accent) r g b /.08);
}

.ref-demand-row.is-click:focus-visible {
  outline: 2px solid var(--orange, var(--app-accent));
  outline-offset: -2px;
}

.ref-demand-row.is-click:hover .ref-demand-acct>i {
  transform: scale(1.08) rotate(-4deg);
}

.ref-demand-acct>i {
  transition: transform .18s ease;
}

.ref-demand-signal {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ref-demand-signal>.material-symbols-rounded {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--faint, #6c6c78);
  font-size: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

.ref-demand-row.is-click:hover .ref-demand-signal>.material-symbols-rounded {
  opacity: 1;
  transform: none;
  color: var(--orange, var(--app-accent));
}

/* ============================================================
   Account drill-down modal
   ============================================================ */
.ref-acct-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ref-acct-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(8, 9, 11, .68);
  backdrop-filter: blur(5px);
  cursor: pointer;
  animation: ref-fade .25s ease both;
}

@keyframes ref-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ref-acct-modal>section {
  position: relative;
  z-index: 1;
  width: min(720px, 96vw);
  max-height: 88vh;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  display: flex;
  flex-direction: column;
  border: 1px solid #2b2e34;
  border-radius: 24px;
  background: #17191d;
  box-shadow: 0 48px 120px -30px rgba(0, 0, 0, .85);
  animation: ref-modal-bounce .5s cubic-bezier(.18, .9, .24, 1.08) both;
}

@keyframes ref-modal-bounce {
  0% {
    opacity: 0;
    transform: scale(.9) translateY(24px);
  }

  60% {
    transform: scale(1.015) translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.ref-acct-modal>section::-webkit-scrollbar {
  width: 8px;
}

.ref-acct-modal>section::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 8px;
}

.ref-acct-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #32363d;
  border-radius: 11px;
  color: #d8d8dc;
  background: rgba(30, 32, 36, .8);
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
}

.ref-acct-close:hover {
  color: var(--orange, var(--app-accent));
  border-color: var(--orange, var(--app-accent));
  transform: rotate(90deg);
}

.ref-acct-close .material-symbols-rounded {
  font-size: 19px;
}

.ref-acct-modal>section>header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 66px 20px 24px;
  overflow: hidden;
  background: radial-gradient(circle at 88% -30%, rgb(from var(--app-accent) r g b /.26), transparent 46%), linear-gradient(125deg, #23262b, #2c3036);
}

.ref-acct-modal>section>header .ref-score-ring {
  margin-right: 2px;
}

.ref-acct-modal>section>header .ref-ring-svg {
  overflow: hidden;
}

.ref-acct-emoji {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  font-style: normal;
  line-height: 1;
  color: var(--orange, var(--app-accent));
  border: 1px solid #34383f;
  border-radius: 15px;
  background: linear-gradient(160deg, rgb(from var(--app-accent) r g b /.18), rgb(from var(--app-accent) r g b /.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.ref-acct-emoji .material-symbols-rounded {
  font-size: 30px;
}

.ref-acct-title {
  min-width: 0;
}

.ref-acct-title>span {
  display: block;
  color: #f0dccb;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-acct-title h2 {
  margin: 5px 0 6px;
  overflow: hidden;
  color: #fff;
  font-size: 21px;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-acct-title p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c9c6d6;
  font-size: 10px;
}

.ref-acct-title .ref-demand-tag {
  position: static;
}

.ref-acct-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 16px 20px 6px;
}

.ref-acct-stats>div {
  min-width: 0;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  padding: 11px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  animation: ref-pop .5s cubic-bezier(.2, .8, .25, 1) both;
}

.ref-acct-stats>div:nth-child(2) {
  animation-delay: .06s
}

.ref-acct-stats>div:nth-child(3) {
  animation-delay: .12s
}

.ref-acct-stats>div:nth-child(4) {
  animation-delay: .18s
}

.ref-acct-stats>div:nth-child(5) {
  animation-delay: .24s
}

.ref-acct-stats span {
  display: block;
  color: var(--ref-muted, #8a8a97);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.ref-acct-stats strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ref-acct-stats>div.good strong {
  color: #4fd598;
}

.ref-acct-stats>div.warn strong {
  color: #ffc971;
}

.ref-acct-stats>div.bad strong {
  color: #ff8f7f;
}

.ref-acct-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
  padding: 12px 20px;
}

.ref-acct-panel {
  border: 1px solid #2b2e34;
  border-radius: 15px;
  padding: 14px 15px;
  background: #1a1c20;
}

.ref-acct-panel h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 12px;
}

.ref-acct-pipeline p {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  color: #c7c7ce;
  font-size: 9px;
}

.ref-acct-pipeline p>i {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #101216;
}

.ref-acct-pipeline p em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), #ec7a41);
  transition: width .9s cubic-bezier(.2, .85, .25, 1);
}

.ref-acct-pipeline p em.s-complete {
  background: linear-gradient(90deg, #34d399, #22c07f);
}

.ref-acct-pipeline p em.s-cancelled {
  background: linear-gradient(90deg, #ff8f7f, #ef716d);
}

.ref-acct-pipeline p em.s-hold {
  background: linear-gradient(90deg, #ffcf6b, #f2ad3a);
}

.ref-acct-pipeline p b {
  text-align: right;
  color: #fff;
  font-size: 10px;
}

.ref-acct-signal {
  margin: 0;
  color: #b7b7c0;
  font-size: 11px;
  line-height: 1.55;
}

.ref-acct-eng {
  margin-top: 13px;
}

.ref-acct-eng>span {
  display: block;
  margin-bottom: 6px;
  color: var(--ref-muted, #8a8a97);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.ref-acct-eng>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ref-acct-eng b {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 8px;
  color: #ffce9e;
  background: rgb(from var(--app-accent) r g b /.14);
  border: 1px solid rgb(from var(--app-accent) r g b /.28);
  font-size: 9px;
  font-weight: 700;
}

.ref-acct-requests {
  padding: 6px 20px 22px;
}

.ref-acct-req-head,
.ref-acct-req-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.3fr) 96px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}

.ref-acct-req-head {
  color: var(--ref-muted, #8a8a97);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid #2b2e34;
}

.ref-acct-req-body {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.ref-acct-req-row {
  border-bottom: 1px solid #212429;
  animation: ref-slide-in .4s ease both;
  animation-delay: var(--d, 0ms);
}

@keyframes ref-slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ref-acct-req-row:last-child {
  border-bottom: 0;
}

.ref-acct-req-row .sno {
  color: var(--faint, #6c6c78);
  font-size: 10px;
  font-weight: 700;
}

.ref-acct-req-row>strong {
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-acct-req-row .eng,
.ref-acct-req-row .date {
  overflow: hidden;
  color: #b0b0b8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-acct-status {
  justify-self: start;
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  color: #c7c7ce;
  background: rgba(255, 255, 255, .06);
}

.ref-acct-status.s-complete {
  color: #4fd598;
  background: rgba(52, 211, 153, .13);
}

.ref-acct-status.s-cancelled {
  color: #ff8f7f;
  background: rgba(255, 107, 94, .13);
}

.ref-acct-status.s-progress {
  color: #ffc971;
  background: rgba(255, 201, 113, .13);
}

.ref-acct-status.s-hold {
  color: #ffcf6b;
  background: rgba(242, 173, 58, .12);
}

/* Confetti burst for strategic (hot) accounts — pure CSS, self-contained */
.ref-acct-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.ref-acct-confetti span {
  position: absolute;
  top: -12px;
  left: calc(var(--i) * 5.6% + 3%);
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  background: var(--orange, var(--app-accent));
  animation: ref-confetti 1.5s ease-in forwards;
  animation-delay: calc(var(--i) * 45ms);
}

.ref-acct-confetti span:nth-child(3n) {
  background: #34d399;
}

.ref-acct-confetti span:nth-child(3n+1) {
  background: #79d1ff;
}

.ref-acct-confetti span:nth-child(4n) {
  background: #ffd166;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@keyframes ref-confetti {
  0% {
    opacity: 0;
    transform: translateY(-12px) rotate(0);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(190px) rotate(540deg);
  }
}

@media (max-width: 640px) {
  .ref-acct-modal {
    padding: 12px;
  }

  .ref-acct-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ref-acct-body {
    grid-template-columns: 1fr;
  }

  .ref-acct-req-head,
  .ref-acct-req-row {
    grid-template-columns: 22px minmax(0, 1.2fr) 84px 80px;
  }

  .ref-acct-req-head span:nth-child(4),
  .ref-acct-req-row .eng {
    display: none;
  }
}

/* ============================================================
   KIOSK FIT — the rounded shell owns exactly one viewport; the
   window never scrolls. Any overflow scrolls *inside* the content
   card, so every tab reads as one contained screen. Desktop only;
   small/short viewports keep natural document flow.
   ============================================================ */
@media (min-width: 960px) and (min-height: 500px) {
  body:has(.reference-dashboard) {
    overflow: hidden;
  }

  .reference-dashboard {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .reference-shell {
    height: calc(100vh - 20px);
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .reference-shell>.ref-header,
  .reference-shell>.ref-page-heading {
    flex: 0 0 auto;
  }

  .reference-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }

  .reference-content::-webkit-scrollbar {
    width: 8px;
  }

  .reference-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 8px;
  }

  /* Reports fits inside the card: hero, filters, KPIs and the trend chart stay pinned; only the
     lower panel grid scrolls, so the header block never leaves the screen and the window never scrolls. */
  .reference-content>.ref-reports {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .reference-content>.ref-reports>header,
  .reference-content>.ref-reports>.ref-report-controls,
  .reference-content>.ref-reports>.ref-report-kpis {
    flex: 0 0 auto;
  }

  .reference-content>.ref-reports>.ref-report-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }

  .reference-content>.ref-reports>.ref-report-grid::-webkit-scrollbar {
    width: 7px;
  }

  .reference-content>.ref-reports>.ref-report-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 7px;
  }

  /* One scroll region only — the account table flows with the grid instead of nesting its own scrollbar. */
  .reference-content>.ref-reports .ref-demand-body {
    max-height: none;
  }

  /* Trim the hero so the KPI + chart band is fully visible without scrolling. */
  .reference-content>.ref-reports>header {
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* --- Kill dead space: panels size to their content instead of stretching to the tallest sibling --- */
.ref-report-grid {
  align-items: start;
}

.ref-report-grid>article {
  align-self: start;
}

/* The empty "no overdue" / "no engineers" states no longer reserve a tall block. */
.ref-report-grid .ref-panel-empty.compact {
  min-height: 120px;
}

/* --- Engineer workload as horizontal split bars (green = completed, orange = active) --- */
.ref-eng-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}

.ref-eng-bars>p {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(80px, 1.5fr) 26px;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ref-eng-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ref-eng-name>i {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(145deg, #32363d, var(--orange, var(--app-accent)));
}

.ref-eng-name strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-eng-bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: #101216;
}

.ref-eng-bar em {
  display: block;
  height: 100%;
  transition: width .8s cubic-bezier(.2, .85, .25, 1);
}

.ref-eng-bar em.done {
  background: linear-gradient(90deg, #34d399, #22c07f);
}

.ref-eng-bar em.act {
  background: linear-gradient(90deg, #f7a45a, var(--orange, var(--app-accent)));
}

.ref-eng-bars>p>b {
  text-align: right;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* Delivery-mix panel: keep the donut compact and centered like the segments donut */
.ref-report-delivery .ref-ov-donut,
.ref-report-types .ref-ov-donut {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Interactive trend chart: same bars as before, just clickable month filters --- */
.ref-bar-chart.is-interactive>span {
  cursor: pointer;
  outline: none;
  border-radius: 6px;
}

.ref-bar-chart.is-interactive>span>i {
  transition: filter .15s ease;
}

.ref-bar-chart.is-interactive>span:hover>i {
  filter: brightness(1.2);
}

.ref-bar-chart.is-interactive>span:focus-visible {
  box-shadow: 0 0 0 2px rgb(from var(--app-accent) r g b /.55);
}

.ref-bar-chart.is-interactive>span.active>i {
  background: linear-gradient(180deg, #ffd9b8, var(--orange, var(--app-accent))) !important;
  filter: drop-shadow(0 0 5px rgb(from var(--app-accent) r g b /.75));
}

.ref-bar-chart.is-interactive>span.active>small {
  color: #fff;
  font-weight: 800;
}

.ref-bar-chart.is-interactive:has(span.active)>span:not(.active)>i {
  filter: saturate(.5) brightness(.72);
}

.ref-report-hero-chart {
  position: relative;
}

.ref-month-clear {
  position: absolute;
  top: -13px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  border: 1px solid rgb(from var(--app-accent) r g b /.5);
  border-radius: 20px;
  background: rgb(from var(--app-accent) r g b /.16);
  color: #ffd9b8;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
}

.ref-month-clear:hover {
  background: rgb(from var(--app-accent) r g b /.28);
}

.ref-month-clear .material-symbols-rounded {
  font-size: 12px;
}

/* ============================================================
   REPORTS — account demand aligned to the management dashboard
   ============================================================ */
.ref-report-demand {
  padding: 0 !important;
  overflow: hidden;
  background: #1e2024 !important;
}

.ref-demand-hero {
  position: relative;
  min-height: 142px;
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) auto minmax(220px, .8fr);
  align-items: center;
  gap: 28px;
  margin: 0 !important;
  padding: 22px 26px !important;
  border-bottom: 1px solid #34373d;
  background: radial-gradient(circle at 91% -30%, rgb(from var(--app-accent) r g b /.31), transparent 42%), linear-gradient(120deg, #22252a 0%, #292c31 58%, #75421f 130%);
}

.ref-demand-hero::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -94px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, .025), 0 0 0 62px rgba(255, 255, 255, .018);
  pointer-events: none;
}

.ref-demand-hero>* {
  position: relative;
  z-index: 1;
}

.ref-demand-hero-copy>span {
  color: #e6b18a !important;
  font-size: 8px !important;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-demand-hero-copy h3 {
  margin: 7px 0 6px;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.55px;
}

.ref-demand-hero-copy p {
  max-width: 400px !important;
  margin: 0 !important;
  color: #bbb7c2 !important;
  font-size: 9px !important;
  line-height: 1.5;
}

.ref-demand-hero-score {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 210px;
}

.ref-demand-hero-score>div:last-child {
  min-width: 0;
}

.ref-demand-hero-score>div:last-child>span {
  display: block;
  color: #d6a986;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.ref-demand-hero-score>div:last-child>strong {
  display: block;
  margin: 4px 0;
  color: #c7f7d9;
  font-size: 15px;
}

.ref-demand-hero-score>div:last-child>small {
  display: block;
  color: #c3bcc2;
  font-size: 8px;
}

.ref-demand-hero-chart {
  height: 82px;
  min-width: 0;
  padding-top: 13px;
}

.ref-demand-hero-chart>span {
  position: absolute;
  top: 0;
  left: 0;
  color: #d5a47f !important;
  font-size: 7.5px !important;
  font-weight: 750;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.ref-demand-hero-chart .ref-bar-chart {
  height: 69px;
  gap: 6px;
}

.ref-demand-hero-chart .ref-bar-chart i {
  background: linear-gradient(180deg, #ffad72, #ed7d3d);
  box-shadow: none;
}

.ref-demand-hero-chart .ref-bar-chart>span:nth-child(2n) i {
  opacity: .6;
  background: #cf7547;
}

.ref-demand-hero-chart .ref-bar-chart small {
  color: #d2bec0;
  font-size: 7px;
}

.ref-demand-live {
  position: absolute !important;
  top: 15px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(52, 211, 153, .24);
  border-radius: 20px;
  color: #b9f0d7;
  background: rgba(25, 30, 30, .36);
  backdrop-filter: blur(5px);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.ref-demand-live>i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, .75);
  animation: ref-live-pulse 2s ease-in-out infinite;
}

.ref-demand-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 18px;
}

.ref-demand-kpis>article {
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #2d3036;
  border-radius: 18px;
  padding: 13px;
  background: #1b1e22;
  box-shadow: 0 10px 24px rgba(8, 9, 11, .14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ref-demand-kpis>article:hover {
  transform: translateY(-2px);
  border-color: rgb(from var(--app-accent) r g b /.42);
  box-shadow: 0 14px 28px rgba(8, 9, 11, .24);
}

.ref-demand-kpis>article>.material-symbols-rounded {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.14);
  font-size: 19px;
}

.ref-demand-kpis>article.tone-green>.material-symbols-rounded {
  color: #34d399;
  background: rgba(52, 211, 153, .13);
}

.ref-demand-kpis>article.tone-blue>.material-symbols-rounded {
  color: #79d1ff;
  background: rgba(121, 209, 255, .13);
}

.ref-demand-kpis>article.tone-purple>.material-symbols-rounded {
  color: #c79bff;
  background: rgba(192, 132, 252, .13);
}

.ref-demand-kpis>article.tone-red>.material-symbols-rounded {
  color: #ff9d92;
  background: rgba(239, 113, 109, .14);
}

.ref-demand-kpis>article>span {
  min-width: 0;
}

.ref-demand-kpis small,
.ref-demand-kpis strong,
.ref-demand-kpis em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-kpis small {
  color: #8e9099;
  font-size: 8px;
}

.ref-demand-kpis strong {
  margin-top: 4px;
  color: #f3f3f5;
  font-size: 19px;
  line-height: 1.05;
}

.ref-demand-kpis strong.is-text {
  font-size: 10.5px;
  line-height: 1.2;
}

.ref-demand-kpis em {
  margin-top: 3px;
  color: #61636c;
  font-size: 7px;
  font-style: normal;
}

.ref-demand-insights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 12px;
  padding: 0 18px 18px;
}

.ref-demand-panel {
  min-width: 0;
  min-height: 238px;
  border: 1px solid #2d3036;
  border-radius: 20px;
  padding: 18px;
  background: #1b1e22;
}

.ref-demand-panel>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ref-demand-panel>header span {
  color: #7e808a;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.ref-demand-panel>header h4 {
  margin: 5px 0 0;
  color: #f4f4f6;
  font-size: 15px;
}

.ref-demand-panel>header>b {
  padding: 5px 9px;
  border-radius: 9px;
  color: #71dfb1;
  background: rgba(52, 211, 153, .1);
  font-size: 8px;
}

.ref-demand-panel>header>small {
  color: #747680;
  font-size: 8px;
}

.ref-demand-mix>div {
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-demand-mix .ref-ov-donut {
  width: 100%;
  justify-content: center;
  gap: 28px;
}

.ref-demand-mix .ref-ov-donut-ring {
  width: 118px;
  height: 118px;
}

.ref-demand-mix .ref-ov-donut-center strong {
  font-size: 22px;
}

.ref-demand-mix .ref-ov-donut-legend {
  flex: 0 1 220px;
  gap: 10px;
}

.ref-demand-mix>footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #292c31;
}

.ref-demand-mix>footer>span {
  color: #777982;
  font-size: 8px;
  text-align: center;
}

.ref-demand-mix>footer b {
  margin-right: 3px;
  color: #f0f0f2;
  font-size: 10px;
}

.ref-demand-mix>footer .warn b {
  color: #ff9d92;
}

.ref-demand-leaders>div {
  display: flex;
  flex-direction: column;
}

.ref-demand-leaders button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 20px 30px minmax(100px, 1.3fr) minmax(120px, 1fr) 38px 16px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid #292c31;
  padding: 8px 5px;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease;
}

.ref-demand-leaders button:last-child {
  border-bottom: 0;
}

.ref-demand-leaders button:hover {
  border-radius: 10px;
  background: rgb(from var(--app-accent) r g b /.07);
}

.ref-demand-leaders .rank {
  color: #62646d;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.ref-demand-leaders button>i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #41444a, var(--orange));
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.ref-demand-leaders .name {
  min-width: 0;
}

.ref-demand-leaders .name strong,
.ref-demand-leaders .name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-leaders .name strong {
  color: #e8e8eb;
  font-size: 9px;
}

.ref-demand-leaders .name small {
  margin-top: 2px;
  color: #696b74;
  font-size: 7px;
}

.ref-demand-leaders .bar {
  min-width: 0;
}

.ref-demand-leaders .bar>i {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #111317;
}

.ref-demand-leaders .bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e98b58, var(--orange));
}

.ref-demand-leaders .bar small {
  display: block;
  margin-top: 3px;
  color: #666872;
  font-size: 7px;
}

.ref-demand-leaders button>b {
  color: #d8d9dd;
  font-size: 9px;
  text-align: right;
}

.ref-demand-leaders button>.material-symbols-rounded {
  color: #555761;
  font-size: 15px;
}

.ref-demand-leaders button:hover>.material-symbols-rounded {
  color: var(--orange);
}

.ref-demand-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 20px 12px;
}

.ref-demand-directory-head>div span,
.ref-demand-directory-head>div strong {
  display: block;
}

.ref-demand-directory-head>div span {
  color: #797b85;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.ref-demand-directory-head>div strong {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
}

.ref-demand-directory-head p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #70727c;
  font-size: 8px;
}

.ref-demand-directory-head .material-symbols-rounded {
  color: var(--orange);
  font-size: 14px;
}

.ref-demand-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 0 18px 18px;
}

.ref-demand-card {
  position: relative;
  min-width: 0;
  min-height: 138px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 13px;
  border: 1px solid #2e3137;
  border-radius: 19px;
  padding: 15px 16px 13px;
  color: inherit;
  text-align: left;
  background: #1b1e22;
  cursor: pointer;
  animation: ref-pop .4s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: var(--d, 0ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ref-demand-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #5c626b;
}

.ref-demand-card.tone-hot::before,
.ref-demand-card.tone-warm::before {
  background: var(--orange);
}

.ref-demand-card.tone-cold::before {
  background: #ef716d;
}

.ref-demand-card:hover {
  transform: translateY(-3px);
  border-color: rgb(from var(--app-accent) r g b /.5);
  box-shadow: 0 15px 30px rgba(6, 7, 9, .23);
}

.ref-demand-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.ref-demand-card-top {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.ref-demand-card-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.ref-demand-card-account>i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #464950, var(--orange));
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.ref-demand-card-account>span {
  min-width: 0;
}

.ref-demand-card-account strong,
.ref-demand-card-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-card-account strong {
  color: #f2f2f4;
  font-size: 11px;
}

.ref-demand-card-account small {
  margin-top: 4px;
  color: #73757e;
  font-size: 8px;
}

.ref-demand-card-stats {
  display: grid;
  grid-template-columns: 64px 70px 48px minmax(130px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 11px 0 0 49px;
  border-top: 1px solid #292c31;
}

.ref-demand-card-stats>span>small {
  display: block;
  color: #6d6f78;
  font-size: 7px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.ref-demand-card-stats>span>strong {
  display: block;
  margin-top: 5px;
  color: #f0f0f2;
  font-size: 15px;
}

.ref-demand-card-delivery {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ref-demand-card-delivery>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ref-demand-card-delivery b {
  color: #d4d5d9;
  font-size: 9px;
}

.ref-demand-card-delivery>i {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #111317;
}

.ref-demand-card-delivery em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e98b58, var(--orange));
}

.ref-demand-card-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 49px;
}

.ref-demand-card-foot>span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #858791;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-card-foot>span b {
  margin-right: 8px;
  color: #5e6069;
  font-size: 8px;
}

.ref-demand-card-foot .material-symbols-rounded {
  flex: 0 0 auto;
  color: #62646d;
  font-size: 16px;
}

.ref-demand-card:hover .ref-demand-card-foot .material-symbols-rounded {
  color: var(--orange);
}

@media (max-width: 1200px) {
  .ref-demand-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .ref-demand-hero {
    grid-template-columns: minmax(230px, 1fr) auto;
  }

  .ref-demand-hero-chart {
    display: none;
  }
}

@media (max-width: 900px) {

  .ref-demand-insights,
  .ref-demand-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .ref-demand-hero {
    grid-template-columns: 1fr;
  }

  .ref-demand-hero-score {
    margin-top: 6px;
  }

  .ref-demand-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .ref-demand-card-stats {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0;
  }

  .ref-demand-card-delivery {
    grid-column: 1/-1;
  }

  .ref-demand-card-foot {
    padding-left: 0;
  }
}

/* Reports single-screen layout: no document card wall and no report scrollbar. */
.ref-report-demand--compact {
  grid-column: auto !important;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px;
  background: #1e2024 !important;
}

.ref-report-demand--compact>header {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #2b2e34;
  background: radial-gradient(circle at 98% -80%, rgb(from var(--app-accent) r g b /.18), transparent 46%), #1e2024;
}

.ref-report-demand--compact>header>div:first-child {
  min-width: 0;
  flex: 1;
}

.ref-report-demand--compact>header h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

.ref-demand-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.ref-demand-summary>span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 5px 8px;
  border: 1px solid #32353b;
  border-radius: 9px;
  color: #7c7e87;
  background: #202328;
  font-size: 7px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.ref-demand-summary b {
  color: #f3f3f5;
  font-size: 10px;
}

.ref-report-demand--compact>header nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.ref-report-demand--compact>header nav button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #34373d;
  border-radius: 8px;
  padding: 0;
  color: #c8c9ce;
  background: #22252a;
  cursor: pointer;
}

.ref-report-demand--compact>header nav button:disabled {
  opacity: .35;
  cursor: default;
}

.ref-report-demand--compact>header nav .material-symbols-rounded {
  font-size: 15px;
}

.ref-report-demand--compact>header nav>span {
  color: #777983;
  font-size: 7px;
}

.ref-demand-matrix {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 6px;
  padding: 9px 10px 10px;
}

.ref-demand-matrix>button {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 18px 28px minmax(70px, 1fr) 28px 72px 62px 14px;
  align-items: center;
  gap: 7px;
  border: 1px solid #2c2f35;
  border-radius: 11px;
  padding: 5px 7px;
  color: inherit;
  text-align: left;
  background: #1a1d21;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.ref-demand-matrix>button:hover {
  border-color: rgb(from var(--app-accent) r g b /.45);
  background: rgb(from var(--app-accent) r g b /.055);
}

.ref-demand-matrix>button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.ref-demand-matrix .rank {
  color: #5d5f68;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

.ref-demand-matrix>button>i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #45484f, var(--orange));
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.ref-demand-matrix .account {
  min-width: 0;
}

.ref-demand-matrix .account strong,
.ref-demand-matrix .account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-matrix .account strong {
  color: #e8e8eb;
  font-size: 8.5px;
}

.ref-demand-matrix .account small {
  margin-top: 2px;
  color: #676972;
  font-size: 6.5px;
}

.ref-demand-matrix .requests {
  text-align: center;
}

.ref-demand-matrix .requests b,
.ref-demand-matrix .requests small {
  display: block;
}

.ref-demand-matrix .requests b {
  color: #f0f0f2;
  font-size: 10px;
}

.ref-demand-matrix .requests small {
  color: #64666f;
  font-size: 6px;
}

.ref-demand-matrix .delivery {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25px;
  align-items: center;
  gap: 5px;
}

.ref-demand-matrix .delivery>i {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #101216;
}

.ref-demand-matrix .delivery em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--orange));
}

.ref-demand-matrix .delivery>b {
  color: #aeb0b7;
  font-size: 7px;
  text-align: right;
}

.ref-demand-matrix .ref-demand-tag {
  justify-self: end;
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 6px;
}

.ref-demand-matrix>button>.material-symbols-rounded {
  color: #555761;
  font-size: 14px;
}

.ref-demand-matrix>button:hover>.material-symbols-rounded {
  color: var(--orange);
}

.ref-demand-compact-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 10px 10px;
  overflow: hidden;
  border: 1px solid #2d3036;
  border-radius: 12px;
  background: #1a1d21;
}

.ref-demand-compact-head,
.ref-demand-compact-body>button {
  display: grid;
  grid-template-columns: 24px minmax(130px, 1fr) 54px minmax(86px, .75fr) 78px 14px;
  align-items: center;
  gap: 9px;
}

.ref-demand-compact-head {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-bottom: 1px solid #30333a;
  color: #747680;
  background: #202328;
  font-size: 6.5px;
  font-weight: 750;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.ref-demand-compact-head>span:nth-child(3) {
  text-align: center;
}

.ref-demand-compact-body {
  flex: 1 1 auto;
  min-height: clamp(150px, 24vh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ref-demand-compact-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ref-demand-compact-body>button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid #272a30;
  padding: 5px 10px;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background .14s ease;
}

.ref-demand-compact-body>button:last-child {
  border-bottom: 0;
}

.ref-demand-compact-body>button:hover {
  background: rgb(from var(--app-accent) r g b /.065);
}

.ref-demand-compact-body>button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.ref-demand-compact-body .rank {
  color: #5d5f68;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

.ref-demand-compact-body .account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ref-demand-compact-body .account>i {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #45484f, var(--orange));
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.ref-demand-compact-body .account>span {
  min-width: 0;
}

.ref-demand-compact-body .account strong,
.ref-demand-compact-body .account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-demand-compact-body .account strong {
  color: #e9e9ec;
  font-size: 8.5px;
}

.ref-demand-compact-body .account small {
  margin-top: 2px;
  color: #666872;
  font-size: 6.5px;
}

.ref-demand-compact-body .requests {
  color: #f1f1f3;
  font-size: 10px;
  text-align: center;
}

.ref-demand-compact-body .delivery {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
}

.ref-demand-compact-body .delivery>i {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #101216;
}

.ref-demand-compact-body .delivery em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--orange));
}

.ref-demand-compact-body .delivery>b {
  color: #b8bac0;
  font-size: 7px;
  text-align: right;
}

.ref-demand-compact-body .ref-demand-tag {
  justify-self: end;
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 6px;
}

.ref-demand-compact-body>button>.material-symbols-rounded {
  color: #555761;
  font-size: 14px;
}

.ref-demand-compact-body>button:hover>.material-symbols-rounded {
  color: var(--orange);
}

.ref-demand-compact-pagination {
  flex: 0 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border-top: 1px solid #30333a;
  background: #202328;
}

.ref-demand-compact-pagination .sizes {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ref-demand-compact-pagination .sizes>span {
  margin-right: 3px;
  color: #6f717a;
  font-size: 6.5px;
  text-transform: uppercase;
}

.ref-demand-compact-pagination button {
  height: 22px;
  min-width: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 5px;
  color: #858790;
  background: transparent;
  font-size: 7px;
  font-weight: 750;
  cursor: pointer;
}

.ref-demand-compact-pagination button:hover:not(:disabled) {
  color: #fff;
  border-color: #3a3d44;
  background: #292c31;
}

.ref-demand-compact-pagination button.active {
  color: #fff;
  border-color: rgb(from var(--app-accent) r g b /.55);
  background: var(--orange);
}

.ref-demand-compact-pagination button:disabled {
  opacity: .3;
  cursor: default;
}

.ref-demand-compact-pagination .range {
  color: #72747d;
  font-size: 7px;
  white-space: nowrap;
}

.ref-demand-compact-pagination nav {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ref-demand-compact-pagination nav>span {
  min-width: 28px;
  color: #8a8c95;
  font-size: 7px;
  text-align: center;
}

.ref-demand-compact-pagination nav .material-symbols-rounded {
  font-size: 14px;
}

/* Account table balance: flatter controls, five visible default rows, less horizontal stretch. */
.ref-report-demand--compact {
  border-radius: 17px;
}

.ref-report-demand--compact>header {
  height: 56px;
  min-height: 56px;
  padding: 9px 13px !important;
}

.ref-report-demand--compact>header h3 {
  margin-top: 3px;
}

.ref-demand-summary {
  gap: 11px;
}

.ref-demand-summary>span {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #777983;
  background: transparent;
}

.ref-demand-summary>span+span::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -6px;
  width: 1px;
  background: #34373d;
}

.ref-demand-compact-table {
  margin: 0 9px 9px;
  border-radius: 9px;
}

.ref-demand-compact-head {
  min-height: 23px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.ref-demand-compact-body>button {
  min-height: 26px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.ref-demand-compact-body .account {
  gap: 7px;
}

.ref-demand-compact-body .account>i {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 7px;
  font-size: 6px;
}

.ref-demand-compact-body .account strong {
  font-size: 8px;
}

.ref-demand-compact-body .account small {
  margin-top: 0;
  font-size: 6px;
}

.ref-demand-compact-body .ref-demand-tag {
  border-radius: 5px;
}

.ref-demand-compact-pagination {
  flex-basis: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.ref-demand-compact-pagination button {
  height: 20px;
  min-width: 22px;
  border-radius: 4px;
}

.ref-demand-compact-pagination button.active {
  color: #ffad72;
  border-color: transparent;
  border-bottom-color: var(--orange);
  background: rgb(from var(--app-accent) r g b /.07);
}

/* Compact report charts: keep center copy legible at reduced card heights. */
.ref-report-delivery .ref-ov-donut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}

.ref-report-delivery .ref-ov-donut-center strong {
  margin: 0;
  line-height: 1;
}

.ref-report-delivery .ref-ov-donut-center span {
  margin: 0;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .45px;
}

/* Account drill-down score ring is intentionally flat, without an outer halo. */
.ref-acct-modal .ref-ring-fill {
  filter: none;
}

.ref-acct-modal .ref-score-ring,
.ref-acct-modal .ref-ring-svg {
  box-shadow: none;
}

@media (min-width: 1100px) and (min-height: 500px) {
  .reference-content:has(> .ref-reports) {
    overflow: hidden !important;
  }

  .reference-content>.ref-reports {
    height: 100%;
    overflow: hidden !important;
  }

  .reference-content>.ref-reports>.ref-report-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
    padding: 2px 22px 20px;
    overflow: hidden !important;
  }

  .reference-content>.ref-reports>.ref-report-grid>article {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    transform: none;
  }

  .reference-content>.ref-reports>.ref-report-grid>.ref-report-status:not(.ref-report-demand--compact) {
    padding: 14px;
  }

  .reference-content>.ref-reports>.ref-report-grid>.ref-report-status>header h3 {
    margin-bottom: 10px;
  }

  .reference-content>.ref-reports>.ref-report-grid>.ref-report-status p {
    margin: 7px 0;
  }

  .reference-content>.ref-reports .ref-report-delivery>div {
    height: calc(100% - 38px);
    display: flex;
    align-items: center;
  }

  .reference-content>.ref-reports .ref-report-delivery .ref-ov-donut {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }

  .reference-content>.ref-reports .ref-report-delivery .ref-ov-donut-ring {
    width: clamp(92px, 12vh, 126px);
    height: clamp(92px, 12vh, 126px);
  }

  .reference-content>.ref-reports .ref-report-delivery .ref-ov-donut-legend {
    flex: 0 1 145px;
  }
}

/* Reports: combine pipeline and delivery mix, then dedicate the wider column to accounts. */
.ref-report-operations {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px !important;
}

.ref-report-operations>header {
  flex: 0 0 auto;
}

.ref-report-operations-body {
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
  align-items: stretch;
  gap: 24px;
}

.ref-report-pipeline {
  min-width: 0;
  height: 100%;
  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(5px, .8vh, 8px);
}

.ref-report-pipeline p {
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  gap: 10px;
  margin: 0 !important;
  line-height: 1.2;
  align-self: center;
}

.ref-report-pipeline p>i {
  height: 7px;
}

.ref-report-mix-inline {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #34373d;
  padding-left: 24px;
}

.ref-report-mix-inline>header {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.ref-report-mix-inline>header span {
  color: var(--ref-muted);
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.ref-report-mix-inline>header h4 {
  margin: 3px 0 0;
  color: var(--ref-ink);
  font-size: 12px;
}

.ref-report-mix-inline .ref-ov-donut {
  min-height: 0;
  height: auto;
  justify-content: flex-start;
  gap: 12px;
}

.ref-report-mix-inline .ref-ov-donut-ring {
  width: clamp(78px, 10vh, 98px);
  height: clamp(78px, 10vh, 98px);
}

.ref-report-mix-inline .ref-ov-donut-center {
  gap: 3px;
}

.ref-report-mix-inline .ref-ov-donut-center strong {
  font-size: clamp(15px, 2.1vh, 20px);
}

.ref-report-mix-inline .ref-ov-donut-center span {
  margin: 0;
  font-size: 6px;
  line-height: 1;
}

.ref-report-mix-inline .ref-ov-donut-legend {
  gap: 7px;
}

.ref-report-mix-inline .ref-ov-donut-legend li {
  grid-template-columns: 9px minmax(0, 1fr) auto 30px;
  gap: 7px;
  font-size: 8.5px;
}

.ref-report-mix-inline .ref-ov-donut-legend li i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.ref-report-mix-inline .ref-ov-donut-legend li b,
.ref-report-mix-inline .ref-ov-donut-legend li em {
  font-size: 8px;
}

.ref-report-demand--compact {
  border-radius: 19px;
}

.ref-report-demand--compact>header {
  padding-inline: 17px !important;
}

.ref-report-demand--compact .ref-demand-compact-table {
  margin-inline: 12px;
  margin-bottom: 11px;
}

@media (max-width: 1250px) {
  .ref-report-operations-body {
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 16px;
  }

  .ref-report-mix-inline {
    padding-left: 16px;
  }

  .ref-report-mix-inline .ref-ov-donut {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .ref-report-mix-inline .ref-ov-donut-legend {
    width: 100%;
  }
}

@media (max-width: 1099px) {
  .ref-reports .ref-report-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  .ref-report-operations-body {
    height: auto;
    grid-template-columns: 1fr;
  }

  .ref-report-mix-inline {
    border-top: 1px solid #2d3036;
    border-left: 0;
    padding: 14px 0 0;
  }
}

@media (min-width: 1100px) and (max-width: 1500px) {
  .ref-demand-matrix>button {
    grid-template-columns: 16px 26px minmax(62px, 1fr) 25px 48px 13px;
    gap: 5px;
  }

  .ref-demand-matrix .ref-demand-tag {
    display: none;
  }

  .ref-demand-matrix .delivery {
    grid-template-columns: 1fr;
  }

  .ref-demand-matrix .delivery>i {
    display: none;
  }

  .ref-demand-compact-head,
  .ref-demand-compact-body>button {
    grid-template-columns: 20px minmax(105px, 1fr) 42px 60px 14px;
    gap: 7px;
  }

  .ref-demand-compact-head>span:nth-child(5),
  .ref-demand-compact-body .ref-demand-tag {
    display: none;
  }

  .ref-demand-compact-body .delivery {
    grid-template-columns: 1fr;
  }

  .ref-demand-compact-body .delivery>i {
    display: none;
  }
}

/*
   Desktop viewport fit for operational tabs.
   These rules are deliberately view-scoped: Overview and Reports keep their
   independent kiosk layouts. At normal browser zoom the primary workspace
   consumes the exact space left below the shared header and filters.
*/
@media (min-width: 960px) and (min-height: 500px) {
  :is(.ref-view-requests, .ref-view-customers, .ref-view-engineers) .reference-content {
    min-height: 0;
    overflow: hidden;
  }

  .ref-view-map .reference-content {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) clamp(154px, 20vh, 176px);
    overflow: hidden;
  }

  .ref-view-map .ref-map-workspace {
    min-height: 0;
    height: 100%;
    align-items: stretch !important;
  }

  .ref-view-map .ref-map-stage,
  .ref-view-map .ref-map-stage iframe {
    min-height: 0 !important;
    height: 100% !important;
  }

  .ref-view-map .ref-map-workspace>aside {
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  .ref-view-map .ref-map-analytics,
  .ref-view-map .ref-analytic-charts {
    min-height: 0;
    height: 100%;
    margin-top: 0;
  }

  .ref-view-map .ref-map-analytics {
    align-items: stretch;
    overflow: hidden;
  }

  .ref-view-map .ref-analytic-card {
    min-height: 0;
    height: 100%;
  }

  :is(.ref-view-requests, .ref-view-customers) .reference-content {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ref-view-engineers .reference-content {
    grid-template-rows: minmax(0, 1fr);
  }

  :is(.ref-view-requests, .ref-view-customers) .ref-filterbar {
    min-height: 0;
    height: 54px;
  }

  /* Requests: fixed chrome, fluid split workspace, internal list overflow only. */
  .ref-view-requests .ref-workspace {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ref-view-requests .ref-workspace-body {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .ref-view-requests .ref-workspace-body>aside,
  .ref-view-requests .ref-request-list,
  .ref-view-requests .ref-request-detail,
  .ref-view-requests .ref-detail-body,
  .ref-view-requests .ref-detail-overview,
  .ref-view-requests .ref-detail-left {
    min-height: 0;
  }

  .ref-view-requests .ref-request-list {
    max-height: none;
    height: 100%;
  }

  .ref-view-requests .ref-request-detail {
    height: 100%;
  }

  .ref-view-requests .ref-request-detail>header>div:first-child {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    justify-content: start;
    column-gap: 8px;
  }

  .ref-view-requests .ref-request-detail>header>div:first-child>span:first-child {
    grid-column: 1 / -1;
  }

  .ref-view-requests .ref-request-detail>header>div:first-child>h2 {
    max-width: 100%;
    margin-right: 0;
  }

  .ref-view-requests .ref-detail-body,
  .ref-view-requests .ref-detail-overview {
    height: 100%;
  }

  .ref-view-requests .ref-detail-items--2 article,
  .ref-view-requests .ref-detail-map,
  .ref-view-requests .ref-detail-map iframe {
    min-height: 0;
  }

  .ref-view-requests .ref-detail-map,
  .ref-view-requests .ref-detail-map iframe {
    height: 100%;
  }

  /* Directories: five rows are the density-safe default. Larger user-selected
     page sizes scroll inside the table body, never at document level. */
  :is(.ref-view-customers, .ref-view-engineers) .ref-directory-panel,
  :is(.ref-view-customers, .ref-view-engineers) .ref-data-panel {
    min-height: 0 !important;
    height: 100%;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-panel-header,
  :is(.ref-view-customers, .ref-view-engineers) .ref-data-head,
  :is(.ref-view-customers, .ref-view-engineers) .ref-pagination {
    flex: 0 0 auto;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-table {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body.ref-page-size-5 .ref-data-row {
    min-height: 52px;
    max-height: 84px;
    flex: 1 1 0;
  }
}

/* Short desktop displays get the same information density as browser zooming
   out, without changing browser zoom or affecting Overview/Reports. */
@media (min-width: 960px) and (min-height: 500px) and (max-height: 900px) {
  :is(.ref-view-requests, .ref-view-customers, .ref-view-engineers) .reference-shell {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  :is(.ref-view-requests, .ref-view-customers, .ref-view-engineers) .ref-header {
    min-height: 48px;
  }

  :is(.ref-view-requests, .ref-view-customers, .ref-view-engineers) .ref-page-heading {
    min-height: 72px;
    padding-top: 8px;
  }

  :is(.ref-view-requests, .ref-view-customers, .ref-view-engineers) .ref-page-title h1 {
    font-size: 30px;
  }

  :is(.ref-view-requests, .ref-view-customers) .ref-filterbar {
    height: 48px;
  }

  .ref-view-requests .ref-workspace-header {
    min-height: 54px;
  }

  .ref-view-requests .ref-request-row {
    min-height: 48px;
  }

  .ref-view-requests .ref-request-detail>header {
    min-height: 62px;
    padding-top: 9px;
  }

  .ref-view-requests .ref-detail-overview {
    gap: 10px;
    padding: 9px 12px 11px;
  }

  .ref-view-requests .ref-detail-left,
  .ref-view-requests .ref-detail-items--2 {
    gap: 8px !important;
  }

  .ref-view-requests .ref-detail-items--2 article {
    padding: 10px 30px 10px 13px;
  }

  .ref-view-requests .ref-detail-items--2 article>strong {
    margin-top: 6px;
    font-size: 16px;
  }

  .ref-view-requests .ref-detail-description {
    margin-top: 0;
  }

  .ref-view-requests .ref-request-detail>footer {
    min-height: 44px;
    padding-block: 4px;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-panel-header {
    padding-block: 13px;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-pagination {
    padding-block: 9px;
  }
}

/* Respect reduced-motion — kill the decorative animation, keep the layout */
@media (prefers-reduced-motion: reduce) {

  .ref-report-kpis article,
  .ref-demand-metrics>div,
  .ref-demand-row.is-click,
  .ref-demand-card,
  .ref-demand-live>i,
  .ref-acct-modal>section,
  .ref-acct-stats>div,
  .ref-acct-req-row,
  .ref-acct-emoji,
  .ref-acct-confetti span,
  .ref-report-status p em::after,
  .ref-demand-rate em::after {
    animation: none !important;
  }

  .ref-acct-confetti {
    display: none;
  }
}

/* ============================================================
   DEVICE FIT v9 — make the dashboard's own fit engine work in a
   MAXIMISED window (not just F11), by feeding it the real viewport
   height. A stray fixed height was leaking onto the wrapper chain and
   forcing the page taller than the window; pinning the whole frame to
   100dvh lets the shell compress everything to fit, full-screen or not.
   Appended last so it wins the cascade.
   ============================================================ */
body:has(.reference-dashboard) .container-scroller,
body:has(.reference-dashboard) .page-body-wrapper,
body:has(.reference-dashboard) .main-panel,
body:has(.reference-dashboard) .content-wrapper {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Safety net: if a very small window still can't compress everything, the view
   area scrolls inside itself (with the header pinned) rather than hiding cards. */
body:has(.reference-dashboard) .reference-content {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body:has(.reference-dashboard) .reference-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}


/* ---- Ring centre labels: crisp, never wrap, optically centred ---- */
.ref-ov-donut-center,
.ref-donut-center {
  line-height: 1.04;
}

.ref-ov-donut-center strong,
.ref-donut-center strong {
  line-height: 1;
}

.ref-ov-donut-center span,
.ref-donut-center span {
  white-space: nowrap;
  line-height: 1.12;
}

/* Short windows: trim the shell's own padding so the kiosk reclaims the last
   handful of pixels and every card fits without clipping. */
@media (min-width: 960px) and (max-height: 700px) {

  .reference-shell:has(.ref-ov-shell),
  .reference-shell:has(.ref-ov-scene--rich) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .ref-ov-head {
    padding-top: 0 !important;
  }

  .ref-ov-progress {
    margin: 5px 0 6px !important;
  }

  .ref-ov-scene--rich .ref-ov-kpis {
    gap: 6px !important;
  }

  .ref-ov-scene--rich {
    gap: 8px !important;
  }
}

@media (min-width: 960px) and (max-height: 600px) {

  .reference-shell:has(.ref-ov-shell),
  .reference-shell:has(.ref-ov-scene--rich) {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* ---- Calendar cells scale with viewport height (never giant, always fit) ----
   The old `aspect-ratio: 1` chained every cell's height to its width, so cells
   ballooned when the rail went full-width and could not shrink on short windows.
   Height-based rows keep the grid compact and let it fit a maximised window. */
.ref-ov-cal-grid {
  grid-auto-rows: clamp(22px, 4.7vh, 40px);
}

.ref-ov-cal-grid .empty,
.ref-ov-cal-day {
  aspect-ratio: auto;
}

/* Detail views (customer / engineer profile) are tall records — let them flow
   at full height so the view area (with its hidden scrollbar) reveals every
   section instead of clipping the bottom (photos, evidence, etc.). */
.ref-view-customers .ref-customer-profile,
.ref-view-engineers .ref-engineer-profile,
.ref-view-customers .ref-customer-profile.embedded,
.ref-view-engineers .ref-engineer-profile.embedded {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible !important;
}

/* Reports view is content-dense — on a short window let it flow at natural
   height and reveal via the hidden-scrollbar view area, so every card (pipeline,
   delivery mix, account table) shows in full instead of being squeezed/clipped. */
@media (max-height: 760px) {
  .ref-view-reports .ref-reports {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ref-view-reports .ref-report-grid {
    height: auto !important;
    align-items: start !important;
  }

  .ref-view-reports .ref-report-grid>article {
    height: auto !important;
    align-self: start !important;
    overflow: visible !important;
  }

  .ref-view-reports .ref-report-operations-body {
    height: auto !important;
  }

  .ref-view-reports .ref-report-pipeline {
    height: auto !important;
  }

  .ref-view-reports .ref-demand-compact-table {
    overflow: visible !important;
  }

  .ref-view-reports .ref-demand-compact-body {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================================
   Final viewport fit layer
   Every tab is a one-screen dashboard. No page scroll, no visible scrollbars,
   no narrow left-card layouts, and no bottom dead space in F11.
   ============================================================ */
body:has(.reference-dashboard),
body:has(.reference-dashboard) .container-scroller,
body:has(.reference-dashboard) .page-body-wrapper,
body:has(.reference-dashboard) .main-panel,
body:has(.reference-dashboard) .content-wrapper {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.reference-dashboard,
.reference-dashboard * {
  box-sizing: border-box !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard::-webkit-scrollbar,
.reference-dashboard *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.reference-shell {
  width: calc(100vw - 20px) !important;
  max-width: none !important;
  height: calc(100dvh - 20px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: clamp(10px, 1.55vh, 18px) clamp(16px, 2.15vw, 30px) !important;
}

.ref-header,
.ref-page-heading,
.ref-filterbar {
  flex: 0 0 auto !important;
}

.ref-page-heading {
  min-height: 0 !important;
  padding: clamp(6px, 1.05vh, 12px) 0 clamp(7px, 1.1vh, 12px) !important;
}

.ref-page-title h1 {
  font-size: clamp(24px, 3vh, 34px) !important;
}

.ref-page-title p {
  font-size: clamp(9px, 1.15vh, 12px) !important;
}

.reference-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  gap: clamp(7px, 1vh, 12px) !important;
  overflow: hidden !important;
}

.reference-content>section {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.ref-view-overview .ref-page-heading {
  display: none !important;
}

.ref-view-map .reference-content,
.ref-view-requests .reference-content,
.ref-view-customers .reference-content {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.ref-view-engineers .reference-content,
.ref-view-reports .reference-content,
.ref-view-profile .reference-content {
  grid-template-rows: minmax(0, 1fr) !important;
}

.ref-filterbar {
  height: clamp(40px, 5.35vh, 54px) !important;
  min-height: 0 !important;
}

@media (max-height: 700px) and (min-width: 960px) {
  .ref-header {
    min-height: 42px !important;
  }

  .ref-page-heading {
    padding-block: 5px !important;
  }

  .ref-page-title p {
    display: none !important;
  }
}

/* Overview: keep the working kiosk behavior. */
.ref-view-overview .reference-content,
.ref-view-overview .ref-ov-shell,
.ref-view-overview .ref-ov-main,
.ref-view-overview .ref-ov-stage,
.ref-view-overview .ref-ov-scene,
.ref-view-overview .ref-ov-grid,
.ref-view-overview .ref-ov-rail {
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-overview .ref-ov-shell {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.ref-view-overview .ref-ov-main {
  flex: 1 1 auto !important;
  display: flex !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

.ref-view-overview .ref-ov-stage {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ref-view-overview .ref-ov-rail {
  flex: 0 0 clamp(220px, 19vw, 292px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(7px, 1vh, 12px) !important;
}

.ref-view-overview .ref-ov-agenda-list {
  overflow: hidden !important;
}

/* Requests: two-column detail view, fully contained. */
.ref-view-requests .ref-workspace {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-workspace-header {
  min-height: 0 !important;
  padding: clamp(8px, 1.25vh, 13px) clamp(12px, 1.5vw, 18px) !important;
}

.ref-view-requests .ref-workspace-body {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(292px, 33%) minmax(0, 1fr) !important;
  gap: clamp(9px, 1.2vw, 15px) !important;
  padding: 0 clamp(10px, 1.3vw, 16px) clamp(9px, 1.2vh, 15px) !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-workspace-body>aside,
.ref-view-requests .ref-request-list,
.ref-view-requests .ref-request-detail,
.ref-view-requests .ref-detail-body,
.ref-view-requests .ref-detail-overview,
.ref-view-requests .ref-detail-left,
.ref-view-requests .ref-detail-items--2,
.ref-view-requests .ref-detail-map {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-list {
  height: 100% !important;
  display: grid !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(4px, .7vh, 7px) !important;
  padding-right: 0 !important;
}

.ref-view-requests .ref-request-row {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: 32px minmax(0, 1fr) max-content !important;
  padding: clamp(4px, .65vh, 7px) 10px !important;
}

.ref-view-requests .ref-request-row>b {
  display: none !important;
}

.ref-view-requests .ref-request-id strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-view-requests .ref-request-detail {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.ref-view-requests .ref-request-detail>header {
  min-height: 0 !important;
  padding: clamp(8px, 1.2vh, 13px) clamp(14px, 1.6vw, 20px) !important;
}

.ref-view-requests .ref-detail-overview {
  height: 100% !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(245px, .88fr) !important;
  gap: clamp(8px, 1vw, 13px) !important;
  padding: clamp(8px, 1.2vh, 13px) clamp(11px, 1.3vw, 16px) !important;
}

.ref-view-requests .ref-detail-items--2 {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(7px, .95vh, 11px) !important;
}

.ref-view-requests .ref-detail-items--2 article {
  min-height: 0 !important;
  padding: clamp(9px, 1.2vh, 13px) clamp(30px, 2.2vw, 40px) clamp(9px, 1.2vh, 13px) clamp(12px, 1.4vw, 16px) !important;
}

.ref-view-requests .ref-detail-map,
.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.ref-view-requests .ref-request-detail>footer {
  min-height: 0 !important;
  padding: clamp(6px, .9vh, 10px) clamp(14px, 1.6vw, 20px) !important;
}

@media (max-height: 700px) and (min-width: 960px) {

  .ref-view-requests .ref-detail-description,
  .ref-view-requests .ref-request-detail footer>span:nth-child(2),
  .ref-view-requests .ref-request-detail footer>span:nth-child(3) {
    display: none !important;
  }
}

/* Map: full-width, full-height map surface. */
.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: clamp(190px, 18vw, 250px) minmax(420px, 1fr) clamp(260px, 25vw, 340px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(8px, 1vw, 14px) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-stage iframe,
.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-sr-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-stage iframe {
  border: 0 !important;
}

.ref-view-map .ref-map-analytics {
  display: none !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  height: 100% !important;
  display: grid !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 3px !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-request-list>button {
  min-height: 0 !important;
  padding-block: clamp(3px, .72vh, 8px) !important;
}

.ref-view-map .ref-map-sr-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, 1vh, 14px) !important;
  padding: clamp(12px, 1.6vh, 18px) clamp(12px, 1.4vw, 16px) !important;
}

.ref-view-map .ref-sr-activity {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  .ref-view-map .ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 330px) !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }
}

/* Customer and Engineer directories: full-width table fitted into the shell. */
.ref-view-customers .ref-directory-panel,
.ref-view-engineers .ref-directory-panel,
.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.ref-view-customers .ref-data-panel-header,
.ref-view-engineers .ref-data-panel-header,
.ref-view-customers .ref-data-head,
.ref-view-engineers .ref-data-head,
.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  flex: 0 0 auto !important;
}

.ref-view-customers .ref-data-panel-header,
.ref-view-engineers .ref-data-panel-header {
  padding: clamp(11px, 1.55vh, 18px) clamp(16px, 1.8vw, 22px) !important;
}

.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  padding: clamp(8px, 1.15vh, 14px) clamp(16px, 1.8vw, 22px) !important;
}

.ref-view-customers .ref-data-table,
.ref-view-engineers .ref-data-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-head,
.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-head,
.ref-view-engineers .ref-data-row {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.ref-view-customers .ref-cust-cols {
  grid-template-columns: 38px minmax(260px, 1.9fr) minmax(120px, .9fr) 68px 68px 132px 46px !important;
}

.ref-view-engineers .ref-eng-cols {
  grid-template-columns: 38px minmax(260px, 1.65fr) 112px 72px 92px 72px minmax(170px, 1fr) 46px !important;
}

.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: clamp(7px, 1.15vh, 14px) !important;
  padding-bottom: clamp(7px, 1.15vh, 14px) !important;
  align-self: stretch !important;
}

.ref-view-customers .ref-data-name>i,
.ref-view-engineers .ref-data-name>i {
  width: clamp(30px, 4vh, 38px) !important;
  height: clamp(30px, 4vh, 38px) !important;
  flex-basis: clamp(30px, 4vh, 38px) !important;
}

/* Reports: one-screen BI card. */
.ref-view-reports .ref-reports {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-reports>header {
  min-height: 0 !important;
  padding: clamp(13px, 1.8vh, 20px) clamp(18px, 2vw, 26px) !important;
}

.ref-view-reports .ref-report-controls {
  min-height: 0 !important;
  padding-block: clamp(7px, 1vh, 11px) !important;
}

.ref-view-reports .ref-report-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(6px, .85vh, 10px) !important;
  padding: 0 clamp(14px, 1.6vw, 20px) clamp(8px, 1.1vh, 14px) !important;
}

.ref-view-reports .ref-report-kpis article {
  min-height: 0 !important;
  padding: clamp(8px, 1vh, 12px) !important;
}

.ref-view-reports .ref-report-grid,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  padding: 0 clamp(14px, 1.6vw, 20px) clamp(12px, 1.5vh, 20px) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.ref-view-reports .ref-report-grid>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid>article {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-report-operations-body {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .75fr) !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
}

.ref-view-reports .ref-report-pipeline {
  min-height: 0 !important;
  gap: clamp(4px, .7vh, 8px) !important;
}

.ref-view-reports .ref-report-demand--compact {
  display: flex !important;
  flex-direction: column !important;
}

.ref-view-reports .ref-demand-compact-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-demand-compact-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  flex: 1 1 0 !important;
  min-height: 24px !important;
}

@media (max-width: 1220px) {
  .ref-view-reports .ref-report-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Hidden inner-scroll model
   The dashboard page itself never scrolls. Long content areas may scroll inside
   their own panels, with the scrollbar hidden.
   ============================================================ */
body:has(.reference-dashboard),
.reference-dashboard,
.reference-shell,
.reference-content {
  overflow: hidden !important;
}

.reference-dashboard .ref-request-list,
.reference-dashboard .ref-map-browse>.ref-map-request-list,
.reference-dashboard .ref-map-sr-panel,
.reference-dashboard .ref-data-body,
.reference-dashboard .ref-demand-compact-body,
.reference-dashboard .ref-demand-body,
.reference-dashboard .ref-sr-activity,
.reference-dashboard .ref-profile-requests>div,
.reference-dashboard .ref-profile-timeline>div,
.reference-dashboard .ref-engineer-profile-history>div,
.reference-dashboard .ref-sr-modal-panel,
.reference-dashboard .ref-acct-modal>section,
.reference-dashboard .ref-acct-req-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard .ref-request-list::-webkit-scrollbar,
.reference-dashboard .ref-map-browse>.ref-map-request-list::-webkit-scrollbar,
.reference-dashboard .ref-map-sr-panel::-webkit-scrollbar,
.reference-dashboard .ref-data-body::-webkit-scrollbar,
.reference-dashboard .ref-demand-compact-body::-webkit-scrollbar,
.reference-dashboard .ref-demand-body::-webkit-scrollbar,
.reference-dashboard .ref-sr-activity::-webkit-scrollbar,
.reference-dashboard .ref-profile-requests>div::-webkit-scrollbar,
.reference-dashboard .ref-profile-timeline>div::-webkit-scrollbar,
.reference-dashboard .ref-engineer-profile-history>div::-webkit-scrollbar,
.reference-dashboard .ref-sr-modal-panel::-webkit-scrollbar,
.reference-dashboard .ref-acct-modal>section::-webkit-scrollbar,
.reference-dashboard .ref-acct-req-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Requests: page locked, list/detail can use hidden internal movement. */
.ref-view-requests .reference-content,
.ref-view-requests .ref-workspace,
.ref-view-requests .ref-workspace-body,
.ref-view-requests .ref-request-detail {
  overflow: hidden !important;
}

.ref-view-requests .ref-request-list {
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(4px, .7vh, 7px) !important;
}

.ref-view-requests .ref-request-row {
  flex: 0 0 auto !important;
  min-height: clamp(46px, 6.2vh, 58px) !important;
  height: auto !important;
}

.ref-view-requests .ref-detail-body,
.ref-view-requests .ref-detail-overview {
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Map: fixed full page, side rails scroll invisibly, map remains full-height. */
.ref-view-map .reference-content,
.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  overflow: hidden !important;
}

.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-stage iframe {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-sr-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list,
.ref-view-map .ref-map-sr-panel {
  height: 100% !important;
  max-height: none !important;
}

/* Directories: page locked, table body can page/scroll invisibly. */
.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body {
  display: block !important;
  height: 100% !important;
  max-height: none !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row {
  height: auto !important;
  min-height: clamp(48px, 8.3vh, 74px) !important;
}

/* Reports: no document/page scroll; the account table body may scroll hidden. */
.ref-view-reports .ref-demand-compact-body {
  display: block !important;
  height: 100% !important;
  max-height: none !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  min-height: clamp(28px, 4.7vh, 42px) !important;
}

/* ============================================================
   Restore Map page
   The generic fit layer must not collapse the live map. Map gets a dedicated
   shell: filters on top, full map workspace below, hidden side-panel scroll.
   ============================================================ */
.ref-view-map .reference-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, 1vh, 12px) !important;
  overflow: hidden !important;
}

.ref-view-map .ref-filterbar {
  flex: 0 0 auto !important;
}

.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.ref-view-map .ref-map-stage {
  position: relative !important;
  min-width: 0 !important;
  min-height: 360px !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #1e2024 !important;
}

.ref-view-map .ref-map-stage iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  display: block !important;
  border: 0 !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-sr-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list,
.ref-view-map .ref-map-sr-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list::-webkit-scrollbar,
.ref-view-map .ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  height: 100% !important;
  display: block !important;
}

.ref-view-map .ref-map-sr-panel {
  display: block !important;
}

.ref-view-map .ref-map-analytics {
  display: none !important;
}

@media (max-width: 1200px) {
  .ref-view-map .ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }
}

/* ============================================================
   Map resurrection fix
   FilterBar is a section element, so the generic full-height section rule was
   making it consume the map workspace. Keep filters fixed-height and give the
   real map section the remaining viewport.
   ============================================================ */
.reference-dashboard .reference-content>.ref-filterbar {
  width: 100% !important;
  height: clamp(40px, 5.35vh, 54px) !important;
  min-height: 0 !important;
  max-height: 54px !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

.ref-view-map .reference-content {
  display: grid !important;
  grid-template-rows: clamp(40px, 5.35vh, 54px) minmax(0, 1fr) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

.ref-view-map .reference-content>.ref-filterbar {
  grid-row: 1 !important;
}

.ref-view-map .reference-content>.ref-map-workspace {
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-sr-panel {
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ref-view-map .ref-map-stage iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list,
.ref-view-map .ref-map-sr-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 1200px) {
  .ref-view-map .ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }
}

/* ============================================================
   Seamless inner panels
   Stop stretching rows to create dead zones. Let rows keep natural height and
   hide-scroll the overflow inside each panel, with no half-visible fragments.
   ============================================================ */
.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel,
.ref-view-reports .ref-report-demand--compact {
  position: relative !important;
}

.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%) !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row {
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  min-height: 46px !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  background: #17191d !important;
}

.ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
.ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
  min-height: 54px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

/* Reports account table: no half rows, no bottom strip. */
.ref-view-reports .ref-demand-compact-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-demand-compact-body {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%) !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  min-height: 32px !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

.ref-view-reports .ref-demand-compact-pagination {
  flex: 0 0 30px !important;
  min-height: 30px !important;
  background: #202328 !important;
}

/* The panel should end cleanly, not show a clipped next component outside it. */
.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel,
.ref-view-reports .ref-report-grid>article {
  clip-path: inset(0 round 20px) !important;
}

/* ============================================================
   Restore Map analytics strip
   Bring back the three map cards under the map, fitted as a compact bottom row.
   ============================================================ */
.ref-view-map .reference-content {
  display: grid !important;
  grid-template-rows: clamp(40px, 5.2vh, 52px) minmax(0, 1fr) clamp(112px, 16vh, 154px) !important;
  gap: clamp(7px, .9vh, 10px) !important;
  overflow: hidden !important;
}

.ref-view-map .reference-content>.ref-filterbar {
  grid-row: 1 !important;
}

.ref-view-map .reference-content>.ref-map-workspace {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.ref-view-map .ref-map-analytics {
  grid-row: 3 !important;
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-charts,
.ref-view-map .ref-analytic-charts--row {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1vw, 12px) !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-card {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: clamp(10px, 1.2vh, 14px) !important;
}

.ref-view-map .ref-analytic-card header {
  margin-bottom: clamp(6px, .8vh, 10px) !important;
}

.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
}

@media (max-height: 700px) and (min-width: 960px) {
  .ref-view-map .reference-content {
    grid-template-rows: 42px minmax(0, 1fr) 112px !important;
  }

  .ref-view-map .ref-analytic-card {
    padding: 9px 11px !important;
  }
}

/* ============================================================
   Restore original Map composition
   Map returns to the original 440px workspace with full-size SR rows and the
   analytics section below. The page stays locked; only this content area can
   move, with scrollbars hidden.
   ============================================================ */
.ref-view-map .reference-content {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-map .reference-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-map .reference-content>.ref-filterbar,
.ref-view-map .reference-content>.ref-map-workspace,
.ref-view-map .reference-content>.ref-map-analytics {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
}

.ref-view-map .reference-content>.ref-filterbar {
  grid-row: 1 !important;
  height: 54px !important;
  max-height: 54px !important;
  overflow: visible !important;
}

.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  grid-row: 2 !important;
  width: 100% !important;
  height: 440px !important;
  min-height: 440px !important;
  max-height: 440px !important;
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
  grid-template-rows: 440px !important;
  gap: 12px !important;
  align-items: start !important;
  overflow: visible !important;
}

.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-stage iframe {
  width: 100% !important;
  height: 440px !important;
  min-height: 440px !important;
  max-height: 440px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-sr-panel {
  height: 440px !important;
  min-height: 440px !important;
  max-height: 440px !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-map .ref-map-browse::-webkit-scrollbar,
.ref-view-map .ref-map-sr-panel::-webkit-scrollbar,
.ref-view-map .ref-map-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  display: grid !important;
  grid-auto-rows: auto !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  padding-right: 2px !important;
  overflow: visible !important;
}

.ref-view-map .ref-map-request-list button {
  min-height: 43px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 7px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 9px !important;
  border-radius: 12px !important;
  padding: 5px 9px !important;
}

.ref-view-map .ref-map-request-list strong {
  font-size: 9px !important;
}

.ref-view-map .ref-map-request-list small {
  margin-top: 3px !important;
  font-size: 8px !important;
}

.ref-view-map .ref-map-analytics {
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.ref-view-map .ref-analytic-charts,
.ref-view-map .ref-analytic-charts--row {
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.ref-view-map .ref-analytic-card {
  height: auto !important;
  min-height: 118px !important;
  overflow: hidden !important;
  padding: 13px 15px !important;
}

.ref-view-map .ref-analytic-card>header {
  margin-bottom: 12px !important;
}

@media (max-width: 1200px) {
  .ref-view-map .ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }

  .ref-view-map .ref-analytic-charts,
  .ref-view-map .ref-analytic-charts--row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Map seamless fit v2
   No half-visible analytics, no oversized fixed map. The Map page fits as:
   filters / map workspace / analytics. Side rails keep hidden internal scroll.
   ============================================================ */
.ref-view-map .reference-shell {
  padding-top: clamp(8px, 1.1vh, 14px) !important;
  padding-bottom: clamp(8px, 1.1vh, 14px) !important;
}

.ref-view-map .ref-page-heading {
  padding-top: clamp(4px, .7vh, 8px) !important;
  padding-bottom: clamp(6px, .8vh, 9px) !important;
}

.ref-view-map .ref-page-title h1 {
  font-size: clamp(22px, 2.7vh, 30px) !important;
}

.ref-view-map .ref-page-title p {
  font-size: clamp(8px, 1vh, 10px) !important;
}

.ref-view-map .reference-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: clamp(38px, 5vh, 50px) minmax(0, 1fr) clamp(128px, 18vh, 168px) !important;
  gap: clamp(8px, 1vh, 12px) !important;
  overflow: hidden !important;
  align-content: stretch !important;
}

.ref-view-map .reference-content>.ref-filterbar {
  grid-row: 1 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 340px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-sr-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.ref-view-map .ref-map-stage,
.ref-view-map .ref-map-stage iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  border-radius: 22px !important;
}

.ref-view-map .ref-map-browse {
  padding: clamp(14px, 1.8vh, 20px) 14px !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 2px !important;
}

.ref-view-map .ref-map-request-list button {
  min-height: 43px !important;
  height: auto !important;
  padding: 5px 9px !important;
  grid-template-columns: 7px minmax(0, 1fr) 18px !important;
}

.ref-view-map .ref-map-request-list strong {
  font-size: 9px !important;
}

.ref-view-map .ref-map-request-list small {
  font-size: 8px !important;
}

.ref-view-map .ref-map-sr-panel {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: clamp(14px, 1.8vh, 18px) 16px !important;
}

.ref-view-map .reference-content>.ref-map-analytics {
  grid-row: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-charts.ref-analytic-charts--row {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-card {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  padding: clamp(10px, 1.25vh, 14px) 15px !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-card>header {
  margin-bottom: clamp(6px, .85vh, 10px) !important;
}

.ref-view-map .ref-analytic-card header h3 {
  font-size: clamp(12px, 1.55vh, 14px) !important;
}

@media (max-height: 700px) and (min-width: 960px) {
  .ref-view-map .reference-content {
    grid-template-rows: 40px minmax(0, 1fr) 126px !important;
    gap: 8px !important;
  }

  .ref-view-map .ref-analytic-card {
    padding: 9px 12px !important;
  }
}

@media (max-width: 1200px) {
  .ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }

  .ref-view-map .ref-analytic-charts.ref-analytic-charts--row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Map polish v3
   Bigger SR rail, no chopped half-items, softer hidden overflow. The page stays
   fixed; the rails can move internally without visible scrollbars.
   ============================================================ */
.ref-view-map .reference-content {
  grid-template-rows: clamp(38px, 5vh, 50px) minmax(0, 1fr) clamp(122px, 17vh, 154px) !important;
  gap: clamp(8px, 1vh, 12px) !important;
}

.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  grid-template-columns: clamp(260px, 20vw, 300px) minmax(0, 1fr) clamp(330px, 25vw, 370px) !important;
  gap: clamp(12px, 1.1vw, 16px) !important;
}

.ref-view-map .ref-map-browse,
.ref-view-map .ref-map-sr-panel,
.ref-view-map .ref-map-stage {
  border-radius: 24px !important;
}

.ref-view-map .ref-map-browse {
  padding: clamp(16px, 1.9vh, 22px) 16px !important;
  background: linear-gradient(155deg, #2b2c2f 0%, #1d1e1f 100%) !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  display: block !important;
  height: 100% !important;
  padding: 0 3px 22px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%) !important;
}

.ref-view-map .ref-map-request-list button {
  min-height: 56px !important;
  grid-template-columns: 9px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  border-radius: 15px !important;
  padding: 9px 12px !important;
  margin-bottom: 6px !important;
}

.ref-view-map .ref-map-request-list button>i {
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 0 5px rgba(238, 134, 82, .15) !important;
}

.ref-view-map .ref-map-request-list strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.ref-view-map .ref-map-request-list small {
  margin-top: 4px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

.ref-view-map .ref-map-request-list .material-symbols-rounded {
  font-size: 18px !important;
}

.ref-view-map .ref-map-sr-panel {
  padding: clamp(16px, 1.9vh, 22px) 18px 24px !important;
  background: linear-gradient(155deg, #27282a 0%, #1d1e1f 100%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%) !important;
}

.ref-view-map .ref-sr-head {
  margin-bottom: clamp(12px, 1.4vh, 16px) !important;
}

.ref-view-map .ref-sr-head h2 {
  font-size: clamp(20px, 2.4vh, 24px) !important;
}

.ref-view-map .ref-sr-progress-steps {
  margin-bottom: clamp(14px, 1.6vh, 18px) !important;
}

.ref-view-map .ref-sr-media,
.ref-view-map .ref-sr-engineers,
.ref-view-map .ref-sr-activity {
  margin-top: clamp(14px, 1.5vh, 18px) !important;
}

.ref-view-map .ref-sr-activity {
  padding-bottom: 18px !important;
}

.ref-view-map .ref-sr-activity>div {
  min-height: 42px !important;
  padding-block: 8px !important;
}

.ref-view-map .ref-analytic-charts.ref-analytic-charts--row {
  gap: clamp(10px, 1vw, 14px) !important;
}

.ref-view-map .ref-analytic-card {
  border-radius: 16px !important;
  padding: clamp(11px, 1.3vh, 15px) 16px !important;
}

.ref-view-map .ref-analytic-card>header {
  margin-bottom: clamp(8px, 1vh, 12px) !important;
}

.ref-view-map .ref-analytic-bars {
  gap: clamp(5px, .85vh, 8px) !important;
}

@media (max-height: 700px) and (min-width: 960px) {
  .ref-view-map .reference-content {
    grid-template-rows: 40px minmax(0, 1fr) 118px !important;
  }

  .ref-view-map .ref-map-request-list button {
    min-height: 52px !important;
    padding-block: 7px !important;
  }

  .ref-view-map .ref-map-request-list strong {
    font-size: 10.5px !important;
  }

  .ref-view-map .ref-map-request-list small {
    font-size: 8.5px !important;
  }
}

/* ============================================================
   Map SR cards v4
   Match the Requests page SR list and keep the Map page seamless.
   ============================================================ */
.ref-view-map .reference-content {
  grid-template-rows: 48px minmax(250px, 1fr) clamp(150px, 20vh, 178px) !important;
  gap: clamp(8px, 1vh, 12px) !important;
}

.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  grid-template-columns: clamp(330px, 25vw, 390px) minmax(0, 1fr) clamp(330px, 24vw, 370px) !important;
  gap: clamp(12px, 1.15vw, 16px) !important;
  min-height: 0 !important;
}

.ref-view-map .ref-map-browse {
  width: auto !important;
  min-width: 0 !important;
  padding: clamp(10px, 1.4vh, 16px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(155deg, #242528 0%, #1b1c1f 100%) !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 3px 28px 0 !important;
  margin: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%) !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-map .ref-map-request-card {
  width: 100% !important;
  min-height: clamp(60px, 7vh, 68px) !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 9px 12px !important;
  color: #dfe0e7 !important;
  background: #292a2d !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.ref-view-map .ref-map-request-card:hover {
  transform: translateX(2px) !important;
  background: #323438 !important;
}

.ref-view-map .ref-map-request-card.active {
  color: #fff !important;
  background: #25282e !important;
  box-shadow: inset 3px 0 0 var(--orange), 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.ref-view-map .ref-map-request-card.active .ref-request-id strong {
  color: var(--orange) !important;
}

.ref-view-map .ref-map-request-card .ref-request-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78) !important;
}

.ref-view-map .ref-map-request-card .ref-request-id {
  min-width: 0 !important;
}

.ref-view-map .ref-map-request-card .ref-request-id strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  color: #f0f1f6 !important;
}

.ref-view-map .ref-map-request-card .ref-request-id small {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: #9ea1ad !important;
}

.ref-view-map .ref-map-request-card .ref-status {
  justify-self: end !important;
  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  padding-inline: 10px !important;
}

.ref-view-map .ref-map-analytics {
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-charts--row,
.ref-view-map .ref-analytic-card {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-card {
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.4vw, 18px) !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-ring {
  width: clamp(74px, 10vh, 92px) !important;
  height: clamp(74px, 10vh, 92px) !important;
  min-width: clamp(74px, 10vh, 92px) !important;
}

@media (max-height: 720px) {
  .ref-view-map .reference-content {
    grid-template-rows: 42px minmax(220px, 1fr) 140px !important;
  }

  .ref-view-map .ref-map-request-card {
    min-height: 56px !important;
    padding-block: 8px !important;
  }

  .ref-view-map .ref-map-request-card .ref-request-id strong {
    font-size: 13px !important;
  }

  .ref-view-map .ref-map-request-card .ref-request-id small {
    font-size: 10px !important;
  }

  .ref-view-map .ref-analytic-card .ref-ov-donut-ring {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
  }
}

@media (max-width: 1200px) {
  .ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 360px) !important;
  }

  .ref-view-map .ref-map-browse {
    display: none !important;
  }
}

/* ============================================================
   Map SR cards v5 - specificity fix
   Older dot-list rules were still winning the grid columns.
   ============================================================ */
.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  min-height: clamp(64px, 7.4vh, 72px) !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: #292a2d !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card.active {
  background: #25282e !important;
  box-shadow: inset 3px 0 0 var(--orange), 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar {
  grid-column: 1 !important;
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  transform: none !important;
  z-index: 0 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-id {
  grid-column: 2 !important;
  position: static !important;
  min-width: 0 !important;
  transform: none !important;
  z-index: 0 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-status {
  grid-column: 3 !important;
  position: static !important;
  align-self: center !important;
  justify-self: end !important;
  transform: none !important;
  z-index: 0 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card small {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  gap: 8px !important;
  padding-bottom: 36px !important;
}

.ref-view-map .ref-map-analytics {
  grid-row: 3 !important;
  height: 100% !important;
  min-height: 0 !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut {
  height: calc(100% - 32px) !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-ring {
  width: clamp(56px, 8vh, 72px) !important;
  height: clamp(56px, 8vh, 72px) !important;
  min-width: clamp(56px, 8vh, 72px) !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-center strong {
  font-size: clamp(15px, 2vh, 18px) !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-center span {
  font-size: 6.5px !important;
  letter-spacing: .35px !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-legend {
  gap: 5px !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-legend li {
  grid-template-columns: 8px minmax(0, 1fr) auto 28px !important;
  gap: 6px !important;
  font-size: 8.5px !important;
}

@media (max-height: 720px) {
  .ref-view-map .ref-map-request-list>button.ref-map-request-card {
    min-height: 60px !important;
    grid-template-columns: 38px minmax(0, 1fr) max-content !important;
    padding: 8px 10px !important;
  }

  .ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .ref-view-map .ref-map-request-list>button.ref-map-request-card strong {
    font-size: 13px !important;
  }

  .ref-view-map .ref-map-request-list>button.ref-map-request-card small {
    font-size: 10px !important;
  }

  .ref-view-map .ref-analytic-card .ref-ov-donut-ring {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }
}

/* ============================================================
   Map balance v6
   Keep Requests-style SR cards, but sized for the 3-column map page.
   ============================================================ */
.ref-view-map .reference-content {
  grid-template-rows: 48px minmax(255px, 1fr) clamp(142px, 19vh, 166px) !important;
}

.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  grid-template-columns: clamp(292px, 22vw, 330px) minmax(0, 1fr) clamp(315px, 23vw, 350px) !important;
  gap: 14px !important;
}

.ref-view-map .ref-map-browse {
  padding: 12px !important;
  border-radius: 26px !important;
}

.ref-view-map .ref-map-browse>.ref-map-request-list {
  gap: 7px !important;
  padding: 0 2px 30px 0 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  min-height: clamp(54px, 6.35vh, 60px) !important;
  grid-template-columns: 36px minmax(0, 1fr) max-content !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 9px !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card strong {
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card small {
  margin-top: 3px !important;
  font-size: 10px !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-status {
  max-width: 82px !important;
  padding-inline: 9px !important;
  font-size: 8.5px !important;
}

.ref-view-map .ref-map-stage {
  border-radius: 24px !important;
}

.ref-view-map .ref-map-sr-panel {
  border-radius: 26px !important;
  padding: 16px 15px !important;
}

.ref-view-map .ref-map-analytics {
  gap: 12px !important;
}

.ref-view-map .ref-analytic-card {
  padding: 12px 15px !important;
}

.ref-view-map .ref-analytic-card>header {
  margin-bottom: 8px !important;
}

.ref-view-map .ref-analytic-card .ref-ov-donut-ring {
  width: clamp(62px, 8.8vh, 78px) !important;
  height: clamp(62px, 8.8vh, 78px) !important;
  min-width: clamp(62px, 8.8vh, 78px) !important;
}

@media (max-height: 720px) {
  .ref-view-map .reference-content {
    grid-template-rows: 42px minmax(230px, 1fr) 132px !important;
  }

  .ref-view-map .ref-map-request-list>button.ref-map-request-card {
    min-height: 52px !important;
  }

  .ref-view-map .ref-analytic-card .ref-ov-donut-ring {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }
}

/* ============================================================
   Map throughput donut v7
   Actual ref-donut selectors; keep the donut fully inside the card.
   ============================================================ */
.ref-view-map .ref-analytic-card.ref-analytic-donut-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 11px 14px !important;
}

.ref-view-map .ref-analytic-card.ref-analytic-donut-card>header {
  min-height: 0 !important;
  margin: 0 0 6px !important;
}

.ref-view-map .ref-analytic-card.ref-analytic-donut-card>header h3 {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-wrap {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-ring {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  align-self: center !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong {
  font-size: 20px !important;
  letter-spacing: 0 !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong small {
  font-size: 9px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center span {
  margin-top: 2px !important;
  font-size: 7px !important;
  letter-spacing: .55px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-legend {
  min-width: 0 !important;
  gap: 7px !important;
  align-content: center !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-legend li {
  min-width: 0 !important;
  gap: 7px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-legend li b {
  font-size: 11px !important;
}

@media (max-height: 720px) {
  .ref-view-map .ref-analytic-card.ref-analytic-donut-card {
    padding: 9px 12px !important;
  }

  .ref-view-map .ref-analytic-card.ref-analytic-donut-card>header {
    margin-bottom: 4px !important;
  }

  .ref-view-map .ref-analytic-donut-card .ref-donut-wrap {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .ref-view-map .ref-analytic-donut-card .ref-donut-ring {
    width: 66px !important;
    height: 66px !important;
    flex-basis: 66px !important;
  }

  .ref-view-map .ref-analytic-donut-card .ref-donut-center strong {
    font-size: 18px !important;
  }

  .ref-view-map .ref-analytic-donut-card .ref-donut-legend {
    gap: 5px !important;
  }
}

/* ============================================================
   Directory compact v8
   Customers and Engineers should not stretch five rows into huge empty bands.
   ============================================================ */
.ref-view-customers .reference-content,
.ref-view-engineers .reference-content {
  align-content: start !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-directory-panel,
.ref-view-engineers .ref-directory-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  align-self: start !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.ref-view-customers .ref-data-panel-header,
.ref-view-engineers .ref-data-panel-header {
  padding: 18px 24px !important;
}

.ref-view-customers .ref-data-table,
.ref-view-engineers .ref-data-table {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-head,
.ref-view-engineers .ref-data-head {
  min-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body,
.ref-view-customers .ref-data-body.ref-page-size-5,
.ref-view-engineers .ref-data-body.ref-page-size-5 {
  display: block !important;
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 390px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-customers .ref-data-body::-webkit-scrollbar,
.ref-view-engineers .ref-data-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row,
.ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
.ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  flex: 0 0 62px !important;
}

.ref-view-customers .ref-data-name,
.ref-view-engineers .ref-data-name {
  min-height: 0 !important;
  align-items: center !important;
}

.ref-view-customers .ref-data-name>i,
.ref-view-engineers .ref-data-name>i {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
}

.ref-view-customers .ref-data-name strong,
.ref-view-engineers .ref-data-name strong {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.ref-view-customers .ref-data-name small,
.ref-view-engineers .ref-data-name small {
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  flex: 0 0 auto !important;
  min-height: 54px !important;
  padding: 10px 24px !important;
  margin-top: 0 !important;
  border-top: 1px solid #292d33 !important;
  background: #17191d !important;
}

@media (min-width: 960px) and (max-height: 720px) {

  .ref-view-customers .ref-data-panel-header,
  .ref-view-engineers .ref-data-panel-header {
    padding: 14px 22px !important;
  }

  .ref-view-customers .ref-data-row,
  .ref-view-engineers .ref-data-row,
  .ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
  .ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    flex-basis: 56px !important;
  }

  .ref-view-customers .ref-pagination,
  .ref-view-engineers .ref-pagination {
    min-height: 50px !important;
    padding-block: 8px !important;
  }
}

/* ============================================================
   Directory full-frame v9
   Full-height Customers/Engineers panels, fixed clean rows, footer pinned.
   ============================================================ */
.ref-view-customers .reference-content,
.ref-view-engineers .reference-content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-filterbar,
.ref-view-engineers .ref-filterbar {
  grid-row: 1 !important;
  flex: 0 0 auto !important;
}

.ref-view-customers .ref-directory-panel,
.ref-view-engineers .ref-directory-panel {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #17191d !important;
}

.ref-view-customers .ref-data-panel-header,
.ref-view-engineers .ref-data-panel-header {
  grid-row: 1 !important;
  padding: clamp(14px, 2vh, 20px) 24px !important;
}

.ref-view-customers .ref-data-table,
.ref-view-engineers .ref-data-table {
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.ref-view-customers .ref-data-head,
.ref-view-engineers .ref-data-head {
  height: 40px !important;
  min-height: 40px !important;
  padding-block: 0 !important;
}

.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body,
.ref-view-customers .ref-data-body.ref-page-size-5,
.ref-view-engineers .ref-data-body.ref-page-size-5 {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row,
.ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
.ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
  height: clamp(58px, 7.4vh, 66px) !important;
  min-height: clamp(58px, 7.4vh, 66px) !important;
  max-height: clamp(58px, 7.4vh, 66px) !important;
  padding-block: 0 !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  grid-row: 3 !important;
  align-self: end !important;
  min-height: 54px !important;
  padding: 10px 24px !important;
  margin: 0 !important;
  border-top: 1px solid #292d33 !important;
  background: #17191d !important;
}

.ref-view-customers .ref-data-body::-webkit-scrollbar,
.ref-view-engineers .ref-data-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Map throughput final: make this card breathe without touching other analytics cards. */
.ref-view-map .ref-analytic-card.ref-analytic-donut-card {
  padding: 10px 14px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-wrap {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-ring {
  width: 68px !important;
  height: 68px !important;
  flex-basis: 68px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong {
  font-size: 18px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-legend li {
  font-size: 8.5px !important;
}

@media (min-width: 960px) and (max-height: 720px) {

  .ref-view-customers .ref-data-row,
  .ref-view-engineers .ref-data-row,
  .ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
  .ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

  .ref-view-customers .ref-data-panel-header,
  .ref-view-engineers .ref-data-panel-header {
    padding-block: 13px !important;
  }
}

/* Final sleekness pass: natural scrolling pages, tighter directories, calmer charts. */
.ref-rot,
.ref-ov-progress {
  display: none !important;
}

.reference-dashboard:not(.ref-view-overview):not(.ref-view-map) .reference-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard:not(.ref-view-overview):not(.ref-view-map) .reference-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard:not(.ref-view-overview):not(.ref-view-map) .reference-content>section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  overflow: visible !important;
}

.ref-view-map .ref-map-browse .ref-map-request-list {
  --sr-card-h: 58px;
  --sr-card-gap: 8px;
  height: calc((var(--sr-card-h) * 4) + (var(--sr-card-gap) * 3)) !important;
  max-height: calc((var(--sr-card-h) * 4) + (var(--sr-card-gap) * 3)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sr-card-gap) !important;
  padding: 0 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  scroll-snap-type: y proximity;
}

.ref-view-map .ref-map-browse .ref-map-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-map .ref-map-request-card {
  height: var(--sr-card-h) !important;
  min-height: var(--sr-card-h) !important;
  max-height: var(--sr-card-h) !important;
  flex: 0 0 var(--sr-card-h) !important;
  border-radius: 18px !important;
  background: #222429 !important;
  border: 1px solid rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
  scroll-snap-align: start;
}

.ref-view-map .ref-map-request-card.active {
  background: #2a2d33 !important;
  border-color: rgb(from var(--app-accent) r g b /.38) !important;
  box-shadow: inset 0 0 0 1px rgb(from var(--app-accent) r g b /.18) !important;
}

.ref-view-map .ref-analytic-card.ref-analytic-donut-card {
  background: #1b1d22 !important;
  border-color: #30343b !important;
  box-shadow: none !important;
}

.ref-view-map .ref-donut-track {
  stroke: #32363d !important;
}

.ref-view-map .ref-donut-arc {
  stroke: #f28b3c !important;
  filter: none !important;
  stroke-linecap: round !important;
}

.ref-view-map .ref-donut-center strong {
  color: #f4f6f8 !important;
}

.ref-view-map .ref-donut-center span,
.ref-view-map .ref-donut-legend li {
  color: #a8afba !important;
}

.ref-view-customers .ref-directory-panel,
.ref-view-engineers .ref-directory-panel,
.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: start !important;
}

.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  display: block !important;
  background: #15181c !important;
  border-color: #2b3037 !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

.ref-view-customers .ref-data-panel-header,
.ref-view-engineers .ref-data-panel-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid #2a2f36 !important;
}

.ref-view-customers .ref-data-panel-header h2,
.ref-view-engineers .ref-data-panel-header h2 {
  font-size: 22px !important;
  letter-spacing: 0 !important;
}

.ref-view-customers .ref-data-table,
.ref-view-engineers .ref-data-table {
  display: block !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
}

.ref-view-customers .ref-data-table::-webkit-scrollbar,
.ref-view-engineers .ref-data-table::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-customers .ref-data-body,
.ref-view-engineers .ref-data-body,
.ref-view-customers .ref-data-body.ref-page-size-5,
.ref-view-engineers .ref-data-body.ref-page-size-5 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.ref-view-customers .ref-data-row,
.ref-view-engineers .ref-data-row,
.ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
.ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding-block: 0 !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
}

.ref-view-customers .ref-data-row:nth-child(odd),
.ref-view-engineers .ref-data-row:nth-child(odd) {
  background: rgba(255, 255, 255, .012) !important;
}

.ref-view-customers .ref-data-row:hover,
.ref-view-engineers .ref-data-row:hover {
  background: #20242a !important;
}

.ref-view-customers .ref-pagination,
.ref-view-engineers .ref-pagination {
  min-height: 56px !important;
  padding: 10px 24px !important;
  margin: 0 !important;
  border-top: 1px solid #2a2f36 !important;
  background: #15181c !important;
}

.ref-view-reports .ref-reports {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border-color: #2b3037 !important;
  background: #15181c !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

.ref-view-reports .ref-reports>header {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, .9fr) minmax(280px, 1fr) auto;
  gap: 18px !important;
  align-items: center !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #2a2f36 !important;
}

.ref-view-reports .ref-report-headline h2 {
  font-size: 24px !important;
  line-height: 1.05 !important;
}

.ref-view-reports .ref-report-score,
.ref-view-reports .ref-report-hero-chart {
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
  border-radius: 18px !important;
  background: #1c2025 !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 24px 0 !important;
}

.ref-view-reports .ref-report-controls>div:first-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ref-view-reports .ref-report-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 16px 24px !important;
}

.ref-view-reports .ref-report-kpis article {
  min-height: 92px !important;
  border-radius: 18px !important;
  background: #1c2025 !important;
  border-color: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-kpis article b {
  font-size: 24px !important;
}

.ref-view-reports .ref-report-grid,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  grid-template-rows: auto !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 0 24px 24px !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-grid>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid>article {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible !important;
  border-radius: 20px !important;
  background: #1c2025 !important;
  border-color: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ref-view-reports .ref-report-operations-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.ref-view-reports .ref-report-pipeline p,
.ref-view-reports .ref-report-status p {
  grid-template-columns: 112px minmax(0, 1fr) 40px !important;
  min-height: 34px !important;
  margin: 7px 0 !important;
  font-size: 9px !important;
}

.ref-view-reports .ref-report-pipeline p>i,
.ref-view-reports .ref-report-status p>i {
  height: 8px !important;
  background: #2d3239 !important;
}

.ref-view-reports .ref-report-pipeline p>i em,
.ref-view-reports .ref-report-status p>i em {
  background: #f28b3c !important;
}

.ref-view-reports .ref-report-mix-inline {
  border-radius: 18px !important;
  background: #171a1f !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
}

.ref-view-reports .ref-report-demand--compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

@media (max-width: 1180px) {

  .ref-view-reports .ref-reports>header,
  .ref-view-reports .ref-report-grid,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid {
    grid-template-columns: 1fr !important;
  }

  .ref-view-reports .ref-report-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {

  .ref-view-reports .ref-report-controls,
  .ref-view-reports .ref-report-controls>div:first-child,
  .ref-view-reports .ref-report-kpis,
  .ref-view-reports .ref-report-operations-body {
    grid-template-columns: 1fr !important;
  }

  .ref-view-customers .ref-data-row,
  .ref-view-engineers .ref-data-row,
  .ref-view-customers .ref-data-body.ref-page-size-5 .ref-data-row,
  .ref-view-engineers .ref-data-body.ref-page-size-5 .ref-data-row {
    height: auto !important;
    min-height: 68px !important;
    max-height: none !important;
  }
}

/* Latest map polish: six calmer SR rows and a seamless completion donut. */
.ref-view-map .ref-map-browse>.ref-map-request-list,
.ref-view-map .ref-map-browse .ref-map-request-list {
  --sr-card-h: 64px;
  --sr-card-gap: 10px;
  height: calc((var(--sr-card-h) * 6) + (var(--sr-card-gap) * 5)) !important;
  min-height: calc((var(--sr-card-h) * 6) + (var(--sr-card-gap) * 5)) !important;
  max-height: calc((var(--sr-card-h) * 6) + (var(--sr-card-gap) * 5)) !important;
  gap: var(--sr-card-gap) !important;
  padding: 0 2px 0 0 !important;
  margin-top: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card,
.ref-view-map .ref-map-request-card {
  height: var(--sr-card-h) !important;
  min-height: var(--sr-card-h) !important;
  max-height: var(--sr-card-h) !important;
  flex: 0 0 var(--sr-card-h) !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 0 14px !important;
  border-radius: 20px !important;
  background: #24272d !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card:hover,
.ref-view-map .ref-map-request-card:hover,
.ref-view-map .ref-map-request-list>button.ref-map-request-card.active,
.ref-view-map .ref-map-request-card.active {
  background: #2b2f36 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar,
.ref-view-map .ref-map-request-card .ref-request-avatar {
  width: 42px !important;
  height: 42px !important;
  font-size: 10px !important;
  box-shadow: none !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card strong,
.ref-view-map .ref-map-request-card .ref-request-id strong {
  font-size: 13px !important;
  line-height: 1.12 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card small,
.ref-view-map .ref-map-request-card .ref-request-id small {
  margin-top: 5px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-status,
.ref-view-map .ref-map-request-card .ref-status {
  padding: 5px 9px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.ref-view-map .ref-analytic-card.ref-analytic-donut-card {
  background: var(--ref-surface, #1e2024) !important;
  border-color: var(--ref-border, #2b2e34) !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 13px 15px !important;
}

.ref-view-map .ref-analytic-card.ref-analytic-donut-card>header {
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-wrap {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-ring {
  width: 76px !important;
  height: 76px !important;
  flex-basis: 76px !important;
  filter: none !important;
}

.ref-view-map .ref-donut-track {
  stroke: #30343b !important;
  stroke-width: 3.2 !important;
}

.ref-view-map .ref-donut-arc {
  stroke: #f19952 !important;
  stroke-width: 3.6 !important;
  filter: none !important;
  stroke-linecap: round !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong {
  font-size: 18px !important;
  color: #f3f5f7 !important;
  text-shadow: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center span {
  font-size: 7px !important;
  color: #9098a4 !important;
}

/* Donut final correction: orange progress, zero glow, centered label. */
.ref-view-map .ref-analytic-donut-card .ref-donut-ring,
.ref-view-map .ref-analytic-donut-card .ref-donut-ring svg,
.ref-view-map .ref-analytic-donut-card .ref-donut-ring circle {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-track {
  stroke: #30343b !important;
  stroke-width: 3.7 !important;
  filter: none !important;
}

.ref-view-map .ref-analytic-donut-card svg .ref-donut-arc,
.ref-view-map .ref-analytic-donut-card .ref-donut-arc {
  stroke: #ff9747 !important;
  stroke-width: 3.7 !important;
  stroke-linecap: round !important;
  filter: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transform: none !important;
  text-align: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
  margin: 0 !important;
  color: #f4f6f8 !important;
  font-size: 19px !important;
  line-height: .95 !important;
  text-align: center !important;
  text-shadow: none !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center strong small {
  margin: 0 !important;
  color: #b4bac4 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.ref-view-map .ref-analytic-donut-card .ref-donut-center span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #9ca4af !important;
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: .7px !important;
  text-align: center !important;
}

/* Requests page repair: segment changes should not stretch or clip the detail card. */
.ref-view-requests .reference-content {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 14px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-requests .reference-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-requests .ref-filterbar {
  margin-bottom: 10px !important;
}

.ref-view-requests .ref-workspace,
.ref-view-requests .reference-content>.ref-workspace {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  border-radius: 22px !important;
}

.ref-view-requests .ref-workspace-header {
  min-height: 58px !important;
  padding: 12px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .85fr) auto auto !important;
  gap: 16px !important;
  align-items: center !important;
}

.ref-view-requests .ref-workspace-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 34%) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 0 16px 16px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-workspace-body>aside {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ref-view-requests .ref-request-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(560px, calc(100dvh - 238px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 2px 0 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-requests .ref-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-requests .ref-request-row {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  transform: none !important;
}

.ref-view-requests .ref-request-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 9px !important;
}

.ref-view-requests .ref-request-row>b {
  display: none !important;
}

.ref-view-requests .ref-request-row:hover,
.ref-view-requests .ref-request-row.active {
  transform: none !important;
}

.ref-view-requests .ref-request-detail {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}

.ref-view-requests .ref-request-detail>header {
  min-height: 80px !important;
  padding: 16px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(210px, .65fr) minmax(210px, .65fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

.ref-view-requests .ref-request-detail h2 {
  max-width: 100% !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.ref-view-requests .ref-detail-tabs {
  min-height: 34px !important;
}

.ref-view-requests .ref-detail-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-overview {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 16px 20px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-left {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-items--2 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(128px, auto) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  height: auto !important;
  min-height: 128px !important;
  max-height: none !important;
  padding: 18px 44px 18px 18px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-map {
  height: auto !important;
  min-height: 304px !important;
  max-height: none !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 304px !important;
}

.ref-view-requests .ref-detail-description {
  margin: 0 !important;
  min-height: 40px !important;
}

.ref-view-requests .ref-request-detail>footer {
  min-height: 52px !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-request-detail footer>span:nth-child(2),
.ref-view-requests .ref-request-detail footer>span:nth-child(3) {
  display: block !important;
}

@media (max-width: 1120px) {

  .ref-view-requests .ref-workspace-header,
  .ref-view-requests .ref-workspace-body,
  .ref-view-requests .ref-request-detail>header,
  .ref-view-requests .ref-detail-overview {
    grid-template-columns: 1fr !important;
  }

  .ref-view-requests .ref-request-list {
    max-height: 420px !important;
  }
}

/* Requests list density: show six SR rows, then hidden-scroll the rest. */
.ref-view-requests .ref-request-list {
  --request-row-h: 58px;
  --request-row-gap: 9px;
  height: calc((var(--request-row-h) * 6) + (var(--request-row-gap) * 5)) !important;
  min-height: calc((var(--request-row-h) * 6) + (var(--request-row-gap) * 5)) !important;
  max-height: calc((var(--request-row-h) * 6) + (var(--request-row-gap) * 5)) !important;
  gap: var(--request-row-gap) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-requests .ref-request-row {
  height: var(--request-row-h) !important;
  min-height: var(--request-row-h) !important;
  max-height: var(--request-row-h) !important;
  flex: 0 0 var(--request-row-h) !important;
}

/* Requests SR switching: smooth zoom into the newly selected request. */
@keyframes refSrDetailZoomIn {
  from {
    opacity: .18;
    transform: translateY(8px) scale(.982);
    filter: blur(2px);
  }

  70% {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.ref-view-requests .ref-detail-body {
  transform-origin: center center !important;
  animation: refSrDetailZoomIn .34s cubic-bezier(.2, .82, .2, 1) both !important;
  will-change: transform, opacity, filter;
}

.ref-view-requests .ref-request-detail>header,
.ref-view-requests .ref-request-detail>footer {
  transition: background-color .28s ease, border-color .28s ease !important;
}

.ref-view-requests .ref-request-row {
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.ref-view-requests .ref-request-row.active {
  box-shadow: inset 3px 0 0 #ff8b2f, 0 10px 22px rgba(0, 0, 0, .12) !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card,
.ref-view-requests .ref-detail-map {
  transition: transform .28s ease, background-color .28s ease, border-color .28s ease !important;
}

.ref-view-requests .ref-detail-body:hover .ref-detail-items--2 article,
.ref-view-requests .ref-detail-body:hover .ref-progress-card,
.ref-view-requests .ref-detail-body:hover .ref-detail-map {
  transform: translateY(-1px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ref-view-requests .ref-detail-body {
    animation: none !important;
  }

  .ref-view-requests .ref-request-row,
  .ref-view-requests .ref-detail-items--2 article,
  .ref-view-requests .ref-progress-card,
  .ref-view-requests .ref-detail-map {
    transition: none !important;
  }
}

/* Requests final pass: use the left panel better and make SR switching visible. */
.ref-view-requests .ref-request-list {
  --request-row-h: 52px;
  --request-row-gap: 7px;
  height: calc((var(--request-row-h) * 8) + (var(--request-row-gap) * 7)) !important;
  min-height: calc((var(--request-row-h) * 8) + (var(--request-row-gap) * 7)) !important;
  max-height: calc((var(--request-row-h) * 8) + (var(--request-row-gap) * 7)) !important;
  gap: var(--request-row-gap) !important;
}

.ref-view-requests .ref-request-row {
  height: var(--request-row-h) !important;
  min-height: var(--request-row-h) !important;
  max-height: var(--request-row-h) !important;
  flex-basis: var(--request-row-h) !important;
  border-radius: 17px !important;
  background: #26282e !important;
}

.ref-view-requests .ref-request-row.active {
  background: #2b2f37 !important;
  box-shadow: inset 4px 0 0 #ff8b2f, 0 10px 24px rgba(0, 0, 0, .16) !important;
}

.ref-view-requests .ref-request-id strong {
  font-size: 12px !important;
}

.ref-view-requests .ref-request-id small {
  font-size: 9px !important;
  margin-top: 3px !important;
}

@keyframes refRequestPanelZoomFresh {
  0% {
    opacity: .08;
    transform: scale(.955) translateY(14px);
  }

  58% {
    opacity: 1;
    transform: scale(1.012) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes refRequestContentLiftFresh {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ref-view-requests .ref-request-detail {
  transform-origin: 50% 44% !important;
  animation: refRequestPanelZoomFresh .42s cubic-bezier(.18, .86, .24, 1) both !important;
  will-change: transform, opacity !important;
}

.ref-view-requests .ref-request-detail>header,
.ref-view-requests .ref-detail-tabs,
.ref-view-requests .ref-detail-body,
.ref-view-requests .ref-request-detail>footer {
  animation: refRequestContentLiftFresh .34s cubic-bezier(.2, .8, .2, 1) both !important;
}

.ref-view-requests .ref-detail-tabs {
  animation-delay: .035s !important;
}

.ref-view-requests .ref-detail-body {
  animation-delay: .07s !important;
}

.ref-view-requests .ref-request-detail>footer {
  animation-delay: .1s !important;
}

.ref-view-requests .ref-detail-body:hover .ref-detail-items--2 article,
.ref-view-requests .ref-detail-body:hover .ref-progress-card,
.ref-view-requests .ref-detail-body:hover .ref-detail-map {
  transform: none !important;
}

@media (max-height: 720px) and (min-width: 960px) {
  .ref-view-requests .ref-request-list {
    --request-row-h: 50px;
    --request-row-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ref-view-requests .ref-request-detail,
  .ref-view-requests .ref-request-detail>header,
  .ref-view-requests .ref-detail-tabs,
  .ref-view-requests .ref-detail-body,
  .ref-view-requests .ref-request-detail>footer {
    animation: none !important;
  }
}

/* Requests true one-screen fit: no page scroll, clean compact detail, more SRs visible. */
.ref-view-requests .reference-content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 9px !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.ref-view-requests .ref-filterbar {
  height: 42px !important;
  min-height: 42px !important;
  margin-bottom: 0 !important;
}

.ref-view-requests .ref-workspace,
.ref-view-requests .reference-content>.ref-workspace {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

.ref-view-requests .ref-workspace-header {
  min-height: 52px !important;
  height: 52px !important;
  padding: 8px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .82fr) auto auto !important;
  gap: 16px !important;
  align-items: center !important;
}

.ref-view-requests .ref-workspace-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.ref-view-requests .ref-workspace-header span {
  font-size: 9px !important;
}

.ref-view-requests .ref-segmented-tabs {
  height: 38px !important;
  padding: 4px !important;
}

.ref-view-requests .ref-segmented-tabs button {
  min-height: 30px !important;
  padding: 0 18px !important;
}

.ref-view-requests .ref-workspace-body {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 35%) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 0 16px 14px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-workspace-body>aside {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-list {
  --request-row-gap: 7px;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: var(--request-row-gap) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 2px 0 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ref-view-requests .ref-request-row {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: initial !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  padding: 0 12px !important;
  border-radius: 17px !important;
}

.ref-view-requests .ref-request-avatar {
  width: 34px !important;
  height: 34px !important;
}

.ref-view-requests .ref-request-id strong {
  font-size: 12px !important;
  line-height: 1.08 !important;
}

.ref-view-requests .ref-request-id small {
  margin-top: 4px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

.ref-view-requests .ref-request-detail {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: 76px 34px minmax(0, 1fr) 50px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-detail>header {
  min-height: 76px !important;
  height: 76px !important;
  padding: 12px 20px !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .72fr) minmax(170px, .55fr) !important;
  gap: 16px !important;
  align-items: center !important;
}

.ref-view-requests .ref-request-detail h2 {
  margin-top: 4px !important;
  font-size: 23px !important;
  line-height: 1 !important;
}

.ref-view-requests .ref-detail-tabs {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 20px !important;
}

.ref-view-requests .ref-detail-tabs button {
  min-height: 28px !important;
  padding: 0 13px !important;
}

.ref-view-requests .ref-detail-body {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-overview {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, .98fr) minmax(300px, .82fr) !important;
  gap: 13px !important;
  align-items: stretch !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-left {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-items--2 {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 14px 38px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.ref-view-requests .ref-detail-items--2 article>span,
.ref-view-requests .ref-progress-card>span {
  font-size: 10px !important;
}

.ref-view-requests .ref-detail-items--2 article>strong,
.ref-view-requests .ref-progress-card>strong {
  margin-top: 7px !important;
  font-size: 18px !important;
  line-height: 1.08 !important;
}

.ref-view-requests .ref-detail-description {
  min-height: 34px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.ref-view-requests .ref-detail-description p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-view-requests .ref-detail-map {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.ref-view-requests .ref-request-detail>footer {
  min-height: 50px !important;
  height: 50px !important;
  padding: 8px 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(90px, auto)) minmax(150px, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-detail footer button {
  justify-self: end !important;
  min-height: 34px !important;
}

.ref-view-requests .ref-request-detail footer>span:nth-child(2),
.ref-view-requests .ref-request-detail footer>span:nth-child(3) {
  display: block !important;
}

@media (max-height: 720px) and (min-width: 960px) {
  .ref-view-requests .ref-filterbar {
    height: 38px !important;
    min-height: 38px !important;
  }

  .ref-view-requests .ref-workspace {
    grid-template-rows: 48px minmax(0, 1fr) !important;
  }

  .ref-view-requests .ref-workspace-header {
    height: 48px !important;
    min-height: 48px !important;
    padding-block: 6px !important;
  }

  .ref-view-requests .ref-request-detail {
    grid-template-rows: 68px 32px minmax(0, 1fr) 46px !important;
  }

  .ref-view-requests .ref-request-detail>header {
    height: 68px !important;
    min-height: 68px !important;
    padding-block: 9px !important;
  }

  .ref-view-requests .ref-detail-tabs {
    height: 32px !important;
    min-height: 32px !important;
  }

  .ref-view-requests .ref-detail-overview {
    padding-block: 10px !important;
  }

  .ref-view-requests .ref-detail-items--2 {
    gap: 8px !important;
  }

  .ref-view-requests .ref-detail-items--2 article,
  .ref-view-requests .ref-progress-card {
    padding-block: 11px !important;
  }

  .ref-view-requests .ref-request-detail>footer {
    height: 46px !important;
    min-height: 46px !important;
    padding-block: 6px !important;
  }
}

/* Stronger visible SR transition after one-screen fit. */
@keyframes refRequestDetailSnapZoom {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.965);
  }

  55% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.008);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ref-view-requests .ref-request-detail {
  animation: refRequestDetailSnapZoom .38s cubic-bezier(.18, .86, .22, 1) both !important;
  backface-visibility: hidden !important;
}

.ref-view-requests .ref-request-row.active {
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease !important;
}

/* Requests column alignment: SR list fills to the same bottom edge as detail card. */
.ref-view-requests .ref-workspace-body {
  align-items: stretch !important;
}

.ref-view-requests .ref-workspace-body>aside {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-list {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  padding-bottom: 0 !important;
}

.ref-view-requests .ref-request-row {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
}

@media (min-height: 780px) and (min-width: 960px) {
  .ref-view-requests .ref-request-list {
    grid-template-rows: repeat(9, minmax(0, 1fr)) !important;
  }
}

/* Requests repair v2: bigger SR rows, aligned column, no stretched empty detail cards. */
.ref-view-requests .ref-workspace-body {
  align-items: stretch !important;
}

.ref-view-requests .ref-workspace-body>aside {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 9px !important;
  align-content: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 2px 0 0 !important;
}

.ref-view-requests .ref-request-row {
  height: 100% !important;
  min-height: 58px !important;
  max-height: none !important;
  align-self: stretch !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 0 13px !important;
  border-radius: 18px !important;
}

.ref-view-requests .ref-request-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 10px !important;
}

.ref-view-requests .ref-request-id strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.ref-view-requests .ref-request-id small {
  font-size: 9.5px !important;
  margin-top: 4px !important;
}

.ref-view-requests .ref-request-detail {
  grid-template-rows: 74px 34px minmax(0, 1fr) 50px !important;
}

.ref-view-requests .ref-detail-body {
  display: grid !important;
  place-items: center stretch !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-overview {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, .98fr) minmax(300px, .82fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-left {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  align-content: center !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-items--2 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 104px) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  justify-content: center !important;
  padding: 14px 38px 14px 16px !important;
}

.ref-view-requests .ref-detail-map {
  height: clamp(228px, 30vh, 270px) !important;
  min-height: clamp(228px, 30vh, 270px) !important;
  max-height: clamp(228px, 30vh, 270px) !important;
  align-self: center !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.ref-view-requests .ref-detail-description {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  overflow: hidden !important;
}

@media (max-height: 720px) and (min-width: 960px) {
  .ref-view-requests .ref-request-list {
    grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .ref-view-requests .ref-request-row {
    min-height: 52px !important;
  }

  .ref-view-requests .ref-detail-items--2 {
    grid-template-rows: repeat(2, 92px) !important;
    gap: 9px !important;
  }

  .ref-view-requests .ref-detail-items--2 article,
  .ref-view-requests .ref-progress-card {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  .ref-view-requests .ref-detail-map {
    height: clamp(202px, 28vh, 238px) !important;
    min-height: clamp(202px, 28vh, 238px) !important;
    max-height: clamp(202px, 28vh, 238px) !important;
  }
}

/* ============================================================
   FINAL OVERRIDES  (appended last so they win over the earlier,
   iteratively-accumulated "fit" blocks above)
   1. Requests detail content must never be hidden by a stalled anim
   2. Requests view = one real screen, no page scroll, nothing clipped
   ============================================================ */

/* 1) ALWAYS-VISIBLE DETAIL CONTENT
   The detail header/tabs/body/footer and the detail panel run entrance
   keyframes that START at opacity 0 (.08 for the panel) with
   animation-fill-mode: both. If the animation is restarted by a live-data
   re-render — or its timeline stalls — the element is held at that opening
   frame and the content stays invisible. That is what made the Overview
   read as blank on All / Completed requests. Redefine the keyframes to
   animate transform only and pin opacity so content can never disappear. */
@keyframes refRequestContentLiftFresh {
  0% {
    transform: translateY(10px) scale(.99);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes refRequestPanelZoomFresh {
  0% {
    transform: scale(.965) translateY(12px);
  }

  58% {
    transform: scale(1.01) translateY(0);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

.ref-view-requests .ref-request-detail,
.ref-view-requests .ref-request-detail>header,
.ref-view-requests .ref-detail-tabs,
.ref-view-requests .ref-detail-body,
.ref-view-requests .ref-request-detail>footer {
  opacity: 1 !important;
}

/* 2) ONE-SCREEN FIT
   Earlier blocks size the workspace with height:100% inside a CSS grid whose
   row track is treated as indefinite in this engine, so height:100% collapses
   back to the content height and the panel overflows the shell (which has
   overflow:hidden) — the detail footer and lower content get clipped off the
   bottom instead of fitting. A flex column resolves against the shell's
   definite height and self-adapts to whatever chrome sits above it. */
@media (min-width: 960px) and (min-height: 500px) {
  .ref-view-requests .reference-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  .ref-view-requests .ref-filterbar {
    flex: 0 0 auto !important;
  }

  .ref-view-requests .ref-workspace,
  .ref-view-requests .reference-content>.ref-workspace {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* The list must show every SR as a full, evenly-separated row and SCROLL the
     overflow. The earlier `grid-template-rows: repeat(8, 1fr)` + `grid-auto-rows: 1fr`
     divided the fixed list height across ALL rows, so with many records (All = 47,
     Completed = 36) every row collapsed to a ~2px sliver — only Open (10) survived.
     A flex column with fixed-height rows keeps them readable and scrolls the rest. */
  .ref-view-requests .ref-request-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2px 4px 2px 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .ref-view-requests .ref-request-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .ref-view-requests .ref-request-row {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
  }

  /* Match the map to the 2x2 fact-card block: same top AND bottom edge. Promote
     the left column's children (cards grid + description) into the overview grid
     via `display:contents`, then place cards+map side by side on row 1 and let the
     description span full width on row 2. The map stretches to the card block's
     height, so it's the same size as the cards — not floated/centered, and no
     longer taller than them. */
  .ref-view-requests .ref-detail-left {
    display: contents !important;
  }

  .ref-view-requests .ref-detail-overview {
    grid-template-rows: auto auto !important;
    align-items: start !important;
    row-gap: 12px !important;
  }

  .ref-view-requests .ref-detail-items--2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .ref-view-requests .ref-detail-map {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Put the description label under the FIRST card column and the value under the
     SECOND — mirroring the 2x2 card grid. Confine it to the cards' overview column
     and reuse the same 2-column track + gap so the two align automatically; the
     16px inset matches the cards' inner padding so the text lines up with
     "Equipment"/"Service order" above. A long value can extend past its column
     into the empty space beneath the map (overflow visible). */
  .ref-view-requests .ref-detail-description {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 9px !important;
    align-items: start !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ref-view-requests .ref-detail-description>span {
    grid-column: 1 !important;
    padding-left: 16px !important;
    font-size: 11px !important;
    /* identical size + weight as the value */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  .ref-view-requests .ref-detail-description>p {
    grid-column: 2 !important;
    padding-left: 16px !important;
    padding-right: 12px !important;
    /* Left-align and WRAP inside the second card's width instead of running off
       into the map. Cap at 3 lines so a very long description can't break the
       one-screen fit. */
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    text-align: left !important;
    font-size: 11px !important;
    /* same size AND weight as the label — nothing looks bigger */
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* MAP view browse list: it was pinned to a fixed 6-card height (434px) that is
     taller than its column at shorter viewports, so it spilled past the screen
     and the last row got sliced in half. Fit it to the column instead and fade
     the top/bottom edges so the scroll ends seamlessly instead of on a hard cut. */
  .ref-view-map .ref-map-browse>.ref-map-request-list,
  .ref-view-map .ref-map-browse .ref-map-request-list {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-bottom: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%) !important;
  }

  .ref-view-map .ref-map-browse .ref-map-request-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Engineers / Customers directory: kill the dead space below the table. The
     panel would not stretch to fill (grid-% height doesn't resolve), so drive the
     whole chain with flex and let the 5 default rows grow to fill the height. */
  :is(.ref-view-customers, .ref-view-engineers) .reference-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-directory-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-table {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body.ref-page-size-5 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Fill on tall screens (rows grow), scroll on short ones instead of clipping
       the last row under the pagination. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body.ref-page-size-5::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  :is(.ref-view-customers, .ref-view-engineers) .ref-data-body.ref-page-size-5 .ref-data-row {
    flex: 1 1 0 !important;
    min-height: 46px !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Customer profile: make the two columns the same height so their bottoms line
     up. The timeline is the taller one; stretch the left column and let its Field
     Evidence card grow to meet it. */
  .ref-customer-profile-grid {
    align-items: stretch !important;
  }

  .ref-customer-profile-grid>.ref-profile-left {
    grid-template-rows: auto 1fr !important;
  }

  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>header {
    flex: 0 0 auto !important;
  }

  /* The photo grid fills the card and its rows grow so the images take up the
     space instead of leaving the card half empty. */
  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-auto-rows: 1fr !important;
    align-content: stretch !important;
  }

  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>div>figure {
    min-height: 0 !important;
    height: 100% !important;
  }

  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   REPORTS — richer, balanced chart layout (Pipeline · Delivery ·
   Engineer workload row, with the account table full-width below)
   ============================================================ */
.ref-report-grid--v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.ref-report-grid--v2>article {
  display: flex !important;
  flex-direction: column !important;
  min-height: 260px;
}

.ref-report-grid--v2>.ref-report-demand--compact {
  grid-column: 1 / -1 !important;
  min-height: 0;
}

.ref-report-grid--v2>article>header {
  flex: 0 0 auto;
}

/* Service order pipeline — bars breathe to fill the card height */
.ref-report-grid--v2 .ref-report-pipeline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.ref-report-grid--v2 .ref-report-pipeline p {
  margin: 6px 0 !important;
}

/* Delivery mix — centre the donut in its card */
.ref-report-delivery .ref-ov-donut {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.ref-report-delivery .ref-panel-empty {
  flex: 1 1 auto;
}

/* Engineer workload — split bars fill, with a small legend */
.ref-report-workload .ref-eng-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.ref-report-workload .ref-panel-empty {
  flex: 1 1 auto;
}

.ref-workload-legend {
  flex: 0 0 auto;
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--ref-border);
}

.ref-workload-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ref-muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.ref-workload-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ref-workload-legend i.done {
  background: linear-gradient(90deg, #34d399, #22c07f);
}

.ref-workload-legend i.act {
  background: linear-gradient(90deg, #f7a45a, var(--orange, var(--app-accent)));
}

@media (max-width: 1150px) {
  .ref-report-grid--v2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .ref-report-grid--v2>.ref-report-workload {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .ref-report-grid--v2 {
    grid-template-columns: 1fr !important;
  }
}

/* Beat the one-screen-fit rules (up to 4 classes) that force the reports grid to
   2 columns / a single clipped row. The enriched 3-chart layout flows naturally
   and the grid becomes the single scroll region for the page. */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2>article {
  height: auto !important;
  align-self: stretch !important;
  overflow: visible !important;
  min-height: 240px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2>.ref-report-demand--compact {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
}

@media (max-width: 1150px) {
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2>.ref-report-workload {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2 {
    grid-template-columns: 1fr !important;
  }
}

/* Restore Overview autoplay controls; only the noisy sentence stays hidden. */
.ref-view-overview .ref-header-tools .ref-rot {
  display: flex !important;
}

.ref-view-overview .ref-header-tools .ref-rot-popover {
  display: block !important;
}

/* Overview spacing repair: keep controls, restore breathing room, compact square calendar. */
.ref-view-overview .reference-shell {
  padding: 16px 30px 14px !important;
}

.ref-view-overview .ref-header {
  min-height: 52px !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}

.ref-view-overview .ref-nav {
  min-height: 44px !important;
  padding: 5px !important;
}

.ref-view-overview .ref-nav button {
  min-height: 34px !important;
}

.ref-view-overview .ref-header-tools {
  gap: 9px !important;
}

.ref-view-overview .ref-header-tools .ref-rot {
  height: 40px !important;
  padding: 4px !important;
  flex: 0 0 auto !important;
}

.ref-view-overview .ref-header-tools .ref-icon-button,
.ref-view-overview .ref-user {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

.ref-view-overview .reference-content {
  gap: 10px !important;
}

.ref-view-overview .ref-ov-head {
  padding-top: 2px !important;
  margin-bottom: 10px !important;
}

.ref-view-overview .ref-ov-main {
  gap: 14px !important;
}

.ref-view-overview .ref-ov-rail {
  flex: 0 0 clamp(258px, 20vw, 300px) !important;
  gap: 10px !important;
}

.ref-view-overview .ref-ov-rail .ref-ov-cal,
.ref-view-overview .ref-ov-cal {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 12px !important;
  gap: 7px !important;
  border-radius: 18px !important;
}

.ref-view-overview .ref-ov-cal-head {
  grid-template-columns: 31px minmax(0, 1fr) 31px !important;
  gap: 6px !important;
}

.ref-view-overview .ref-ov-cal-head>button {
  width: 31px !important;
  height: 31px !important;
}

.ref-view-overview .ref-ov-cal-head>button.ref-ov-cal-title,
.ref-view-overview .ref-ov-cal-title {
  height: 31px !important;
  font-size: 14px !important;
}

.ref-view-overview .ref-ov-cal-head>button.ref-ov-cal-title b,
.ref-view-overview .ref-ov-cal-title b {
  font-size: 14px !important;
}

.ref-view-overview .ref-ov-cal-dow {
  gap: 4px !important;
}

.ref-view-overview .ref-ov-cal-grid {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 4px !important;
}

.ref-view-overview .ref-ov-cal-grid .empty,
.ref-view-overview .ref-ov-cal-day {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 9px !important;
}

.ref-view-overview .ref-ov-cal-day em {
  font-size: 11px !important;
}

.ref-view-overview .ref-ov-cal-day i {
  top: 3px !important;
  right: 4px !important;
  font-size: 7px !important;
}

.ref-view-overview .ref-ov-cal-legend {
  margin-top: 5px !important;
}

.ref-view-overview .ref-ov-cal-foot {
  padding-top: 8px !important;
}

.ref-view-overview .ref-ov-rail .ref-ov-agenda {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

@media (max-height: 720px) and (min-width: 960px) {
  .ref-view-overview .reference-shell {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .ref-view-overview .ref-header {
    min-height: 48px !important;
    margin-bottom: 7px !important;
  }

  .ref-view-overview .ref-ov-head {
    margin-bottom: 7px !important;
  }

  .ref-view-overview .ref-ov-cal {
    padding: 10px !important;
    gap: 6px !important;
  }
}

/* Final request polish: restore overview progress, fix calendar title, align evidence, clean reports. */
.ref-view-overview .ref-ov-progress {
  display: block !important;
  height: 3px !important;
  margin: 8px 0 10px !important;
  border-radius: 999px !important;
  background: #2c3038 !important;
}

.ref-view-overview .ref-ov-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--app-accent-mid), var(--app-accent)) !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-dots button.active,
.ref-view-overview .ref-ov-periods button.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--app-accent-mid), #eb7438) !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-dots button.active .material-symbols-rounded,
.ref-view-overview .ref-ov-periods button.active .material-symbols-rounded {
  color: #fff !important;
}

.ref-view-overview .ref-header-tools .ref-rot,
.ref-view-overview .ref-header-tools .ref-rot.active {
  border-color: #383c43 !important;
  background: #1e2024 !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-rot-timing:hover {
  color: var(--app-accent) !important;
  background: #25282e !important;
}

.ref-view-overview .ref-ov-cal-head>button.ref-ov-cal-title,
.ref-view-overview .ref-ov-cal-title {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  padding-inline: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-view-overview .ref-ov-cal-head>button:not(.ref-ov-cal-title) {
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
}

.ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>div,
.ref-profile-evidence>div {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: 104px !important;
  gap: 9px !important;
  padding: 12px !important;
  align-content: start !important;
}

.ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>div>figure,
.ref-profile-evidence>div>figure {
  height: auto !important;
  min-height: 0 !important;
  grid-column: span 2 !important;
  grid-row: span 1 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
  background: #20242a !important;
}

.ref-profile-evidence>div>figure:nth-child(1) {
  grid-column: span 3 !important;
  grid-row: span 2 !important;
}

.ref-profile-evidence>div>figure:nth-child(2),
.ref-profile-evidence>div>figure:nth-child(3) {
  grid-column: span 3 !important;
}

.ref-profile-evidence img,
.ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.ref-profile-evidence figcaption {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  padding: 5px 8px !important;
  border-radius: 9px !important;
  background: linear-gradient(90deg, rgba(19, 21, 24, .88), rgba(19, 21, 24, .58)) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
}

@media (max-width: 820px) {

  .ref-profile-evidence>div,
  .ref-customer-profile-grid>.ref-profile-left>.ref-profile-evidence>div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 128px !important;
  }

  .ref-profile-evidence>div>figure,
  .ref-profile-evidence>div>figure:nth-child(1),
  .ref-profile-evidence>div>figure:nth-child(2),
  .ref-profile-evidence>div>figure:nth-child(3) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

.ref-view-reports .ref-reports {
  border-radius: 24px !important;
  background: #15181c !important;
  border-color: #2b3037 !important;
}

.ref-view-reports .ref-reports>header {
  display: grid !important;
  grid-template-columns: minmax(230px, 1fr) auto minmax(280px, .95fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid #2a2f36 !important;
  background: linear-gradient(180deg, #1b1f24 0%, #171a1f 100%) !important;
}

.ref-view-reports .ref-reports>header::after {
  content: none !important;
}

.ref-view-reports .ref-report-headline span {
  color: var(--app-accent) !important;
}

.ref-view-reports .ref-report-headline h2 {
  margin: 4px 0 3px !important;
  color: #f6f7f9 !important;
  font-size: 23px !important;
  letter-spacing: 0 !important;
}

.ref-view-reports .ref-report-headline p {
  color: #9aa0aa !important;
}

.ref-view-reports .ref-report-score {
  width: auto !important;
  min-width: 176px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: #20242a !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
}

.ref-view-reports .ref-report-score .ref-score-ring {
  filter: none !important;
}

.ref-view-reports .ref-report-hero-chart {
  min-height: 82px !important;
  padding: 9px 12px 7px !important;
  border-radius: 16px !important;
  background: #20242a !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart {
  height: 68px !important;
}

.ref-view-reports .ref-report-export {
  justify-self: end !important;
}

.ref-view-reports .ref-report-export button,
.ref-view-reports .ref-reports>header button {
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .ref-view-reports .ref-reports>header {
    grid-template-columns: 1fr 1fr !important;
  }

  .ref-view-reports .ref-report-export {
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .ref-view-reports .ref-reports>header {
    grid-template-columns: 1fr !important;
  }
}

/* Final overview blend polish: soften dark patches and center donut labels. */
.ref-view-overview .reference-shell {
  background: linear-gradient(180deg, #171a1f 0%, #15181d 100%) !important;
  border-color: #2b3037 !important;
  box-shadow: none !important;
}

.ref-view-overview .reference-content,
.ref-view-overview .ref-ov-shell,
.ref-view-overview .ref-ov-main,
.ref-view-overview .ref-ov-stage,
.ref-view-overview .ref-ov-scene,
.ref-view-overview .ref-ov-grid,
.ref-view-overview .ref-ov-rail {
  background: transparent !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-kpi,
.ref-view-overview .ref-ov-card,
.ref-view-overview .ref-ov-cal,
.ref-view-overview .ref-ov-agenda {
  background: linear-gradient(180deg, #20242b 0%, #1d2127 100%) !important;
  border-color: #303640 !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-scene--rich .ref-ov-card {
  transition: border-color .16s ease, background .16s ease !important;
}

.ref-view-overview .ref-ov-scene--rich .ref-ov-card:hover {
  transform: none !important;
  border-color: #3b424d !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-card>header>b,
.ref-view-overview .ref-ov-agenda>header>b {
  background: rgb(from var(--app-accent) r g b / .12) !important;
  border-color: rgb(from var(--app-accent) r g b / .26) !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-kpi-head i,
.ref-view-overview .ref-ov-bigstat>i,
.ref-view-overview .ref-ov-watch-row .ic,
.ref-view-overview .ref-ov-agenda>header>i {
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-watch-row,
.ref-view-overview .ref-ov-capacity-stats span,
.ref-view-overview .ref-ov-agenda-list>div,
.ref-view-overview .ref-panel-empty.compact {
  background: #22262d !important;
  border-color: #303640 !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-agenda-list .dt {
  background: #1f2329 !important;
  border-color: #343a44 !important;
}

.ref-view-overview .ref-ov-hbars p>i,
.ref-view-overview .ref-ov-cal-day,
.ref-view-overview .ref-ov-cal-head>button,
.ref-view-overview .ref-ov-cal-title:hover {
  background: #23272f !important;
  border-color: #303640 !important;
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-cal-day:hover,
.ref-view-overview .ref-ov-cal-day.selected {
  box-shadow: none !important;
}

.ref-view-overview .ref-ov-bigstat,
.ref-view-overview .ref-ov-hbars p+p,
.ref-view-overview .ref-ov-feed>div,
.ref-view-overview .ref-ov-cal-foot {
  border-color: #303640 !important;
}

.ref-view-overview .ref-ov-donut {
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.ref-view-overview .ref-ov-donut-ring {
  width: clamp(118px, 15vh, 152px) !important;
  height: clamp(118px, 15vh, 152px) !important;
  min-width: clamp(118px, 15vh, 152px) !important;
  filter: none !important;
}

.ref-view-overview .ref-ov-donut-ring svg {
  display: block !important;
  overflow: visible !important;
  filter: none !important;
}

.ref-view-overview .ref-ov-donut-track {
  stroke: #313741 !important;
  stroke-width: 4.4 !important;
}

.ref-view-overview .ref-ov-donut-arc {
  stroke-width: 4.8 !important;
  stroke-linecap: round !important;
  filter: none !important;
}

.ref-view-overview .ref-ov-donut-center {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
  transform: translateY(1px) !important;
  pointer-events: none !important;
}

.ref-view-overview .ref-ov-donut-center strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #f6f7f9 !important;
  font-size: clamp(23px, 3vh, 30px) !important;
  font-weight: 800 !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.ref-view-overview .ref-ov-donut-center span {
  display: block !important;
  width: min(72px, 62%) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  color: #aeb5c0 !important;
  font-size: clamp(7px, .95vh, 9px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: .45px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.ref-view-overview .ref-ov-donut-legend {
  gap: clamp(7px, 1.2vh, 11px) !important;
}

.ref-view-overview .ref-ov-donut-legend li {
  grid-template-columns: 11px minmax(0, 1fr) auto 38px !important;
  gap: 8px !important;
}

@media (max-width: 900px) {
  .ref-view-overview .ref-ov-donut-ring {
    width: 116px !important;
    height: 116px !important;
    min-width: 116px !important;
  }
}

/* Final overview calendar heat restore and donut color clarity. */
.ref-view-overview .ref-ov-cal-day.has {
  background: rgb(from var(--app-accent) r g b / var(--heat, .34)) !important;
  border-color: rgb(from var(--app-accent) r g b / .38) !important;
  color: #fff !important;
}

.ref-view-overview .ref-ov-cal-day.has em,
.ref-view-overview .ref-ov-cal-day.has i {
  color: #fff !important;
}

.ref-view-overview .ref-ov-cal-day.has:hover {
  background: rgb(from var(--app-accent) r g b / calc(var(--heat, .34) + .08)) !important;
  border-color: rgb(from var(--app-accent) r g b / .58) !important;
}

.ref-view-overview .ref-ov-cal-day.has.today {
  border-color: #34d399 !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .58) !important;
}

.ref-view-overview .ref-ov-cal-day.selected {
  outline-color: var(--app-accent) !important;
}

.ref-view-overview .ref-ov-donut-arc {
  transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1), stroke .18s ease !important;
}

/* Final overview watch-list interaction polish. */
.ref-view-overview button.ref-ov-watch-row {
  width: 100% !important;
  border: 1px solid #303640 !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable {
  grid-template-columns: 26px minmax(0, 1fr) auto 18px !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable>.material-symbols-rounded {
  justify-self: end !important;
  color: #8d95a3 !important;
  font-size: 16px !important;
  transition: color .16s ease, transform .16s ease !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover {
  background: #252a32 !important;
  border-color: rgb(from var(--app-accent) r g b / .42) !important;
  transform: translateX(2px) !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover>.material-symbols-rounded {
  color: var(--app-accent) !important;
  transform: translateX(2px) !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible {
  outline: 2px solid rgb(from var(--app-accent) r g b / .75) !important;
  outline-offset: 2px !important;
}

/* Final reports redesign: sleek intelligence dashboard, aligned cards, enhanced account performance. */
.ref-view-reports .reference-content {
  overflow: auto !important;
}

.ref-view-reports .ref-reports {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 1px solid #2f3540 !important;
  border-radius: 26px !important;
  background: #15181d !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-reports>header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1.1fr) minmax(210px, .72fr) minmax(310px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 126px !important;
  padding: 22px 24px 28px !important;
  overflow: hidden !important;
  border-bottom: 1px solid #2d333d !important;
  background:
    radial-gradient(circle at 78% 8%, rgb(from var(--app-accent) r g b / .24), transparent 34%),
    linear-gradient(118deg, #1a1e24 0%, #20252b 55%, #5f3519 140%) !important;
}

.ref-view-reports .ref-reports>header::after {
  content: "" !important;
  position: absolute !important;
  right: -64px !important;
  bottom: -104px !important;
  width: 210px !important;
  height: 210px !important;
  border: 1px solid rgb(from var(--app-accent) r g b / .28) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 34px rgb(from var(--app-accent) r g b / .055) !important;
  pointer-events: none !important;
}

.ref-view-reports .ref-report-headline,
.ref-view-reports .ref-report-score,
.ref-view-reports .ref-report-hero-chart,
.ref-view-reports .ref-report-export {
  position: relative !important;
  z-index: 2 !important;
}

.ref-view-reports .ref-report-headline span,
.ref-view-reports .ref-report-grid>article>header span,
.ref-view-reports .ref-demand-compact-head {
  color: #f58b3e !important;
  letter-spacing: .8px !important;
}

.ref-view-reports .ref-report-headline h2 {
  margin: 6px 0 5px !important;
  color: #f7f8fa !important;
  font-size: clamp(25px, 2.3vw, 34px) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.ref-view-reports .ref-report-headline p {
  max-width: 520px !important;
  color: #b4bac5 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.ref-view-reports .ref-report-score {
  min-height: 82px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 18px !important;
  background: rgba(19, 22, 27, .72) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-score .ref-score-ring {
  flex: 0 0 auto !important;
}

.ref-view-reports .ref-report-score>div>span {
  color: #8f96a4 !important;
}

.ref-view-reports .ref-report-score>div>b {
  font-size: 18px !important;
}

.ref-view-reports .ref-report-hero-chart {
  height: 88px !important;
  min-height: 88px !important;
  padding: 10px 13px 8px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 18px !important;
  background: rgba(20, 23, 28, .82) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart {
  height: 70px !important;
  align-items: end !important;
  gap: 10px !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart>span {
  border-radius: 8px !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart>span i {
  min-height: 4px !important;
  border-radius: 8px 8px 2px 2px !important;
  background: linear-gradient(180deg, #ff9b60, #c66d43) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart>span:nth-child(2n) i {
  opacity: .82 !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart.is-interactive>span:hover i {
  background: linear-gradient(180deg, #ffb076, var(--app-accent)) !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart.is-interactive>span.active i {
  background: linear-gradient(180deg, #ffd0ad, var(--app-accent)) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset !important;
  filter: none !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart.is-interactive:has(span.active)>span:not(.active) i {
  opacity: .42 !important;
  filter: saturate(.72) brightness(.78) !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart small {
  color: #9ea5b2 !important;
  font-size: 8px !important;
}

.ref-view-reports .ref-report-export {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.ref-view-reports .ref-report-export button {
  height: 38px !important;
  min-width: 82px !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  padding: 0 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--app-accent), #e1702a) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-controls {
  z-index: 5 !important;
  margin: -17px 22px 16px !important;
  padding: 11px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 168px auto !important;
  gap: 11px !important;
  align-items: center !important;
  border: 1px solid #303741 !important;
  border-radius: 20px !important;
  background: #1a1e24 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16) !important;
}

.ref-view-reports .ref-report-controls>div:first-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.ref-view-reports .ref-report-controls .ref-filter-control,
.ref-view-reports .ref-report-period .ref-filter-control {
  min-height: 40px !important;
  border-radius: 14px !important;
  background: #20242b !important;
  border-color: #333a45 !important;
}

.ref-view-reports .ref-report-controls>span {
  min-width: 132px !important;
  justify-content: flex-end !important;
  color: #9da4b1 !important;
  font-size: 9px !important;
}

.ref-view-reports .ref-report-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 24px 16px !important;
}

.ref-view-reports .ref-report-kpis article {
  min-height: 88px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid #303741 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #20242b 0%, #1c2026 100%) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-kpis article>.material-symbols-rounded {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgb(from var(--app-accent) r g b / .13) !important;
}

.ref-view-reports .ref-report-kpis span {
  color: #9da4b1 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

.ref-view-reports .ref-report-kpis strong {
  margin-top: 5px !important;
  color: #f4f6f8 !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

.ref-view-reports .ref-report-grid.ref-report-grid--v2,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 16px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 24px 24px !important;
  align-items: stretch !important;
}

.ref-view-reports .ref-report-grid.ref-report-grid--v2>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2>article {
  display: flex !important;
  flex-direction: column !important;
  min-height: 292px !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 18px !important;
  border: 1px solid #303741 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #20242b 0%, #1c2026 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ref-view-reports .ref-report-grid>article>header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.ref-view-reports .ref-report-grid>article>header h3 {
  margin: 4px 0 0 !important;
  color: #f5f7f9 !important;
  font-size: 16px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.ref-view-reports .ref-report-pipeline {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 9px !important;
}

.ref-view-reports .ref-report-pipeline p,
.ref-view-reports .ref-report-status p {
  grid-template-columns: minmax(82px, .75fr) minmax(0, 1.4fr) 34px !important;
  align-items: center !important;
  min-height: 28px !important;
  margin: 0 !important;
  color: #d9dde4 !important;
  font-size: 10px !important;
}

.ref-view-reports .ref-report-pipeline p>i,
.ref-view-reports .ref-report-status p>i {
  height: 8px !important;
  border-radius: 999px !important;
  background: #101318 !important;
}

.ref-view-reports .ref-report-pipeline p>i em,
.ref-view-reports .ref-report-status p>i em {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ff9b60, var(--app-accent)) !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut {
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 2vw, 28px) !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-ring {
  width: clamp(120px, 11vw, 156px) !important;
  height: clamp(120px, 11vw, 156px) !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1 !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-center strong {
  margin: 0 !important;
  font-size: clamp(23px, 2.2vw, 31px) !important;
  line-height: .95 !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-center span {
  margin: 0 !important;
  color: #aeb5c0 !important;
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: .45px !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-legend li {
  grid-template-columns: 11px minmax(0, 1fr) auto 36px !important;
  gap: 8px !important;
  font-size: 10px !important;
}

.ref-view-reports .ref-report-workload .ref-eng-bars {
  flex: 1 1 auto !important;
  justify-content: center !important;
  gap: 13px !important;
}

.ref-view-reports .ref-report-workload .ref-eng-bars p {
  min-height: 30px !important;
}

.ref-view-reports .ref-report-workload .ref-eng-name i {
  background: linear-gradient(145deg, #ff9b60, #9d5a2d) !important;
}

.ref-view-reports .ref-report-workload .ref-eng-bar {
  height: 9px !important;
  border-radius: 999px !important;
  background: #101318 !important;
}

.ref-view-reports .ref-report-demand--compact,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2>.ref-report-demand--compact {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 82% 0%, rgb(from var(--app-accent) r g b / .13), transparent 36%),
    linear-gradient(180deg, #20242b 0%, #1c2026 100%) !important;
}

.ref-view-reports .ref-report-demand--compact>header {
  min-height: 70px !important;
  padding: 17px 18px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid #303741 !important;
  background: linear-gradient(90deg, rgb(from var(--app-accent) r g b /.08), rgb(from var(--app-accent) r g b /0)) !important;
}

.ref-view-reports .ref-demand-summary {
  display: flex !important;
  gap: 8px !important;
}

.ref-view-reports .ref-demand-summary>span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 28px !important;
  padding: 0 11px !important;
  border: 1px solid rgb(from var(--app-accent) r g b /.24) !important;
  border-radius: 999px !important;
  color: #b9c0cc !important;
  background: rgb(from var(--app-accent) r g b /.07) !important;
  font-size: 10px !important;
}

.ref-view-reports .ref-demand-summary>span::before {
  content: none !important;
}

.ref-view-reports .ref-demand-summary b {
  color: #ff9b60 !important;
}

.ref-view-reports .ref-demand-compact-table {
  margin: 14px 16px 16px !important;
  overflow: hidden !important;
  border: 1px solid #303741 !important;
  border-radius: 16px !important;
  background: #191d23 !important;
}

.ref-view-reports .ref-demand-compact-head,
.ref-view-reports .ref-demand-compact-body>button {
  grid-template-columns: 34px minmax(210px, 1.8fr) 84px minmax(150px, .9fr) minmax(126px, .7fr) 24px !important;
  gap: 12px !important;
  align-items: center !important;
}

.ref-view-reports .ref-demand-compact-head {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #303741 !important;
  background: #20242b !important;
  color: #88909e !important;
  font-size: 8px !important;
}

.ref-view-reports .ref-demand-compact-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  min-height: 52px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #292f38 !important;
  color: inherit !important;
  background: transparent !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.ref-view-reports .ref-demand-compact-body>button:hover {
  background: rgb(from var(--app-accent) r g b /.065) !important;
  border-color: rgb(from var(--app-accent) r g b /.22) !important;
}

.ref-view-reports .ref-demand-compact-body .rank {
  color: #717987 !important;
  font-size: 10px !important;
  text-align: center !important;
}

.ref-view-reports .ref-demand-compact-body .account>i {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #ff9b60, #8e542f) !important;
  font-size: 8px !important;
}

.ref-view-reports .ref-demand-compact-body .account strong {
  color: #f4f6f8 !important;
  font-size: 11px !important;
}

.ref-view-reports .ref-demand-compact-body .account small {
  margin-top: 2px !important;
  color: #8e96a4 !important;
  font-size: 8px !important;
}

.ref-view-reports .ref-demand-compact-body .requests {
  color: #fff !important;
  font-size: 15px !important;
  text-align: center !important;
}

.ref-view-reports .ref-demand-compact-body .delivery {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 10px !important;
}

.ref-view-reports .ref-demand-compact-body .delivery>i {
  height: 7px !important;
  border-radius: 999px !important;
  background: #101318 !important;
}

.ref-view-reports .ref-demand-compact-body .delivery em {
  background: linear-gradient(90deg, #34d399, var(--app-accent)) !important;
}

.ref-view-reports .ref-demand-compact-body .delivery>b {
  color: #dfe3ea !important;
  font-size: 10px !important;
}

.ref-view-reports .ref-demand-compact-body .ref-demand-tag {
  justify-self: start !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 7px !important;
}

.ref-view-reports .ref-demand-compact-body>button>.material-symbols-rounded {
  color: #737b88 !important;
  font-size: 18px !important;
}

.ref-view-reports .ref-demand-compact-body>button:hover>.material-symbols-rounded {
  color: var(--app-accent) !important;
}

.ref-view-reports .ref-demand-compact-pagination {
  min-height: 48px !important;
  padding: 8px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 14px !important;
  border-top: 1px solid #303741 !important;
  background: #20242b !important;
}

.ref-view-reports .ref-demand-compact-pagination .sizes {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-demand-compact-pagination .sizes>span {
  color: #8d96a4 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-demand-compact-pagination button {
  height: 30px !important;
  min-width: 34px !important;
  border: 1px solid #3a414c !important;
  border-radius: 10px !important;
  color: #a9b0bd !important;
  background: #1a1e24 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-demand-compact-pagination button:hover:not(:disabled) {
  color: #fff !important;
  border-color: rgb(from var(--app-accent) r g b /.45) !important;
  background: #242932 !important;
}

.ref-view-reports .ref-demand-compact-pagination button.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--app-accent), #e1702a) !important;
}

.ref-view-reports .ref-demand-compact-pagination .range,
.ref-view-reports .ref-demand-compact-pagination nav>span {
  color: #8d96a4 !important;
  font-size: 10px !important;
}

@media (max-width: 1180px) {

  .ref-view-reports .ref-reports>header,
  .ref-view-reports .ref-report-grid.ref-report-grid--v2,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v2 {
    grid-template-columns: 1fr !important;
  }

  .ref-view-reports .ref-report-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {

  .ref-view-reports .ref-report-controls,
  .ref-view-reports .ref-report-controls>div:first-child,
  .ref-view-reports .ref-report-kpis {
    grid-template-columns: 1fr !important;
  }

  .ref-view-reports .ref-report-controls>span {
    justify-content: flex-start !important;
  }

  .ref-view-reports .ref-demand-compact-head,
  .ref-view-reports .ref-demand-compact-body>button {
    grid-template-columns: 28px minmax(130px, 1fr) 58px minmax(72px, .55fr) 20px !important;
  }

  .ref-view-reports .ref-demand-compact-head>span:nth-child(5),
  .ref-view-reports .ref-demand-compact-body .ref-demand-tag {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .ref-view-reports .ref-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ref-view-reports .ref-demand-compact-pagination {
    grid-template-columns: 1fr !important;
  }

  .ref-view-reports .ref-demand-compact-pagination .range,
  .ref-view-reports .ref-demand-compact-pagination nav {
    justify-self: start !important;
  }
}

/* Final reports slay pass: new interactive charts and premium health card. */
.ref-view-reports .ref-reports>header {
  grid-template-columns: minmax(280px, 1.05fr) minmax(300px, .95fr) minmax(330px, 1fr) auto !important;
  min-height: 140px !important;
  padding-bottom: 30px !important;
}

.ref-view-reports .ref-report-health-card {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(20, 23, 29, .92), rgba(29, 34, 41, .84)) !important;
  box-shadow: none !important;
}

.ref-view-reports .ref-report-health-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px auto 8px 8px !important;
  width: 92px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle, rgba(52, 211, 153, .16), transparent 64%) !important;
  pointer-events: none !important;
}

.ref-view-reports .ref-report-health-card .ref-score-ring {
  position: relative !important;
  z-index: 1 !important;
  filter: none !important;
}

.ref-view-reports .ref-report-health-copy {
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-copy span {
  display: block !important;
  color: #8e96a5 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .75px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-health-copy strong {
  display: block !important;
  margin: 5px 0 3px !important;
  color: #55e6a0 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.ref-view-reports .ref-report-health-copy strong.warn {
  color: #f2c94c !important;
}

.ref-view-reports .ref-report-health-copy strong.bad {
  color: #ff6b7a !important;
}

.ref-view-reports .ref-report-health-copy small {
  display: block !important;
  color: #c0c6d0 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-health-metrics {
  display: grid !important;
  gap: 6px !important;
  min-width: 74px !important;
}

.ref-view-reports .ref-report-health-metrics span {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: baseline !important;
  gap: 6px !important;
  padding: 5px 7px !important;
  border: 1px solid #343b46 !important;
  border-radius: 10px !important;
  background: #20252c !important;
}

.ref-view-reports .ref-report-health-metrics b {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.ref-view-reports .ref-report-health-metrics small {
  color: #8f97a5 !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-grid.ref-report-grid--v3,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 16px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 24px 24px !important;
}

.ref-view-reports .ref-report-grid--v3>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  min-height: 292px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid #303741 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #20242b 0%, #1c2026 100%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ref-view-reports .ref-report-grid--v3>article>header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.ref-view-reports .ref-report-grid--v3>article>header span {
  color: var(--app-accent) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .85px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-grid--v3>article>header h3 {
  margin: 4px 0 0 !important;
  color: #f5f7f9 !important;
  font-size: 16px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.ref-view-reports .ref-report-rhythm {
  grid-column: span 2 !important;
  min-height: 330px !important;
}

.ref-view-reports .ref-report-rhythm>header>button {
  height: 30px !important;
  min-width: 94px !important;
  border: 1px solid #3b4350 !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  color: #aeb6c4 !important;
  background: #1a1e24 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.ref-view-reports .ref-report-rhythm>header>button.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--app-accent), #e1702a) !important;
}

.ref-view-reports .ref-report-month-compare {
  flex: 1 1 auto !important;
  min-height: 190px !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 18px 8px 4px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) !important;
}

.ref-view-reports .ref-report-month-compare button {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 2px 4px !important;
  color: #8f97a5 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.ref-view-reports .ref-report-month-compare button:hover,
.ref-view-reports .ref-report-month-compare button.active {
  background: rgb(from var(--app-accent) r g b /.08) !important;
}

.ref-view-reports .ref-report-month-compare .bars {
  height: 100% !important;
  min-height: 150px !important;
  display: flex !important;
  align-items: end !important;
  justify-content: center !important;
  gap: 4px !important;
}

.ref-view-reports .ref-report-month-compare i {
  width: 10px !important;
  min-height: 5px !important;
  border-radius: 9px 9px 3px 3px !important;
}

.ref-view-reports .ref-report-month-compare i.total {
  background: linear-gradient(180deg, var(--app-accent), #b76037) !important;
}

.ref-view-reports .ref-report-month-compare i.done {
  background: linear-gradient(180deg, #60f0ad, #34d399) !important;
}

.ref-view-reports .ref-report-month-compare button:not(.active) i.done {
  opacity: .78 !important;
}

.ref-view-reports .ref-report-month-compare button.active i {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset !important;
}

.ref-view-reports .ref-report-month-compare small {
  color: inherit !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-rhythm>footer,
.ref-view-reports .ref-report-types-card>footer {
  display: flex !important;
  gap: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid #303741 !important;
}

.ref-view-reports .ref-report-rhythm>footer span,
.ref-view-reports .ref-report-types-card>footer span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #8f97a5 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-rhythm footer i,
.ref-view-reports .ref-report-types-card footer i {
  width: 10px !important;
  height: 10px !important;
  border-radius: 3px !important;
}

.ref-view-reports .ref-report-rhythm footer i.total {
  background: var(--app-accent) !important;
}

.ref-view-reports .ref-report-rhythm footer i.done,
.ref-view-reports .ref-report-types-card footer i.done {
  background: #34d399 !important;
}

.ref-view-reports .ref-report-types-card footer i.open {
  background: var(--app-accent) !important;
}

.ref-view-reports .ref-report-types-card footer i.cancelled {
  background: #ff6b7a !important;
}

.ref-view-reports .ref-report-ring-stat {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(130px, .95fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
}

.ref-view-reports .ref-report-ring-visual {
  position: relative !important;
  aspect-ratio: 1 !important;
  max-width: 190px !important;
  justify-self: center !important;
}

.ref-view-reports .ref-report-ring-visual svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-ring-visual circle {
  fill: none !important;
}

.ref-view-reports .ref-report-ring-visual .track {
  stroke: #303741 !important;
}

.ref-view-reports .ref-report-ring-visual .fill {
  stroke-linecap: round !important;
  transition: stroke-dashoffset .5s ease !important;
}

.ref-view-reports .ref-report-ring-visual>div {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-content: center !important;
  text-align: center !important;
}

.ref-view-reports .ref-report-ring-visual strong {
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.ref-view-reports .ref-report-ring-visual span {
  margin-top: 3px !important;
  color: #9aa3b1 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-ring-list {
  display: grid !important;
  gap: 10px !important;
}

.ref-view-reports .ref-report-ring-list p {
  display: grid !important;
  grid-template-columns: 11px minmax(0, 1fr) auto 38px !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid #303741 !important;
  border-radius: 12px !important;
  background: #1a1e24 !important;
}

.ref-view-reports .ref-report-ring-list i {
  width: 11px !important;
  height: 11px !important;
  border-radius: 4px !important;
}

.ref-view-reports .ref-report-ring-list span {
  color: #dce1e8 !important;
  font-size: 10px !important;
}

.ref-view-reports .ref-report-ring-list b {
  color: #fff !important;
  font-size: 13px !important;
}

.ref-view-reports .ref-report-ring-list small {
  color: #8f97a5 !important;
  font-size: 9px !important;
  text-align: right !important;
}

.ref-view-reports .ref-report-types-card {
  min-height: 292px !important;
}

.ref-view-reports .ref-report-type-stack {
  flex: 1 1 auto !important;
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
}

.ref-view-reports .ref-report-type-stack>div {
  display: grid !important;
  grid-template-columns: minmax(90px, .75fr) minmax(0, 1.35fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
}

.ref-view-reports .ref-report-type-stack span {
  min-width: 0 !important;
}

.ref-view-reports .ref-report-type-stack strong,
.ref-view-reports .ref-report-type-stack small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-type-stack strong {
  color: #f2f4f7 !important;
  font-size: 11px !important;
}

.ref-view-reports .ref-report-type-stack small {
  margin-top: 2px !important;
  color: #8f97a5 !important;
  font-size: 8px !important;
}

.ref-view-reports .ref-report-type-stack>div>i {
  display: flex !important;
  height: 12px !important;
  min-width: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #101318 !important;
}

.ref-view-reports .ref-report-type-stack em {
  height: 100% !important;
  min-width: 2px !important;
}

.ref-view-reports .ref-report-type-stack em.done {
  background: #34d399 !important;
}

.ref-view-reports .ref-report-type-stack em.open {
  background: var(--app-accent) !important;
}

.ref-view-reports .ref-report-type-stack em.cancelled {
  background: #ff6b7a !important;
}

.ref-view-reports .ref-report-type-stack b {
  color: #dfe4eb !important;
  font-size: 11px !important;
  text-align: right !important;
}

.ref-view-reports .ref-report-demand--compact {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1240px) {

  .ref-view-reports .ref-reports>header,
  .ref-view-reports .ref-report-grid.ref-report-grid--v3,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .ref-view-reports .ref-report-headline,
  .ref-view-reports .ref-report-rhythm,
  .ref-view-reports .ref-report-demand--compact {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {

  .ref-view-reports .ref-reports>header,
  .ref-view-reports .ref-report-grid.ref-report-grid--v3,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3,
  .ref-view-reports .ref-report-health-card,
  .ref-view-reports .ref-report-ring-stat {
    grid-template-columns: 1fr !important;
  }

  .ref-view-reports .ref-report-month-compare {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Reports v3 account summary pill correction. */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact>header .ref-demand-summary>span {
  color: #b9c0cc !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact>header .ref-demand-summary b {
  color: #ff9b60 !important;
  font-size: 11px !important;
}

/* Reports compact slay pass: stronger pop, less scroll, no behavior changes. */
.ref-view-reports .ref-reports {
  background: linear-gradient(180deg, #15181d 0%, #13161a 100%) !important;
}

.ref-view-reports .ref-reports>header {
  min-height: 120px !important;
  grid-template-columns: minmax(250px, 1fr) minmax(340px, .92fr) minmax(290px, .86fr) auto !important;
  gap: 16px !important;
  padding: 18px 24px 24px !important;
}

.ref-view-reports .ref-report-headline h2 {
  font-size: clamp(25px, 2vw, 30px) !important;
}

.ref-view-reports .ref-report-health-card {
  min-height: 78px !important;
  grid-template-columns: 74px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-color: rgba(52, 211, 153, .18) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(52, 211, 153, .18), transparent 38%),
    linear-gradient(135deg, #20262d 0%, #171b21 100%) !important;
}

.ref-view-reports .ref-report-health-card::before {
  width: 78px !important;
  inset: 6px auto 6px 6px !important;
}

.ref-view-reports .ref-report-health-card .ref-score-ring {
  width: 70px !important;
  height: 70px !important;
}

.ref-view-reports .ref-report-health-copy strong {
  font-size: 22px !important;
  color: #49f0a6 !important;
}

.ref-view-reports .ref-report-health-copy small {
  color: #d2d8e1 !important;
  font-size: 9.5px !important;
}

.ref-view-reports .ref-report-health-metrics {
  min-width: 78px !important;
}

.ref-view-reports .ref-report-health-metrics span {
  height: 25px !important;
  padding: 0 8px !important;
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.ref-view-reports .ref-report-hero-chart {
  height: 78px !important;
  min-height: 78px !important;
  padding: 8px 12px 7px !important;
}

.ref-view-reports .ref-report-hero-chart .ref-bar-chart {
  height: 60px !important;
  gap: 8px !important;
}

.ref-view-reports .ref-report-controls {
  margin: -15px 22px 14px !important;
  padding: 10px !important;
}

.ref-view-reports .ref-report-kpis {
  gap: 9px !important;
  padding: 0 24px 14px !important;
}

.ref-view-reports .ref-report-kpis article {
  min-height: 74px !important;
  padding: 12px !important;
  border-color: #323945 !important;
  background: linear-gradient(180deg, #20252d 0%, #1b2027 100%) !important;
}

.ref-view-reports .ref-report-kpis article>.material-symbols-rounded {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  color: #ff9b60 !important;
  background: rgb(from var(--app-accent) r g b / .15) !important;
}

.ref-view-reports .ref-report-kpis strong {
  font-size: clamp(20px, 1.7vw, 25px) !important;
}

.ref-view-reports .ref-report-grid.ref-report-grid--v3,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 24px 20px !important;
}

.ref-view-reports .ref-report-grid--v3>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  min-height: 236px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  border-color: #323945 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #20252d 0%, #1b2027 100%) !important;
}

.ref-view-reports .ref-report-grid--v3>article:hover {
  border-color: rgb(from var(--app-accent) r g b /.32) !important;
  background:
    linear-gradient(180deg, rgb(from var(--app-accent) r g b /.045), rgb(from var(--app-accent) r g b /0)),
    linear-gradient(180deg, #222832 0%, #1b2027 100%) !important;
}

.ref-view-reports .ref-report-grid--v3>article>header {
  margin-bottom: 10px !important;
}

.ref-view-reports .ref-report-grid--v3>article>header h3 {
  font-size: 15px !important;
}

.ref-view-reports .ref-report-rhythm {
  order: 1 !important;
  grid-column: span 2 !important;
  min-height: 256px !important;
}

.ref-view-reports .ref-report-rings {
  order: 2 !important;
  grid-column: span 1 !important;
}

.ref-view-reports .ref-report-types-card {
  order: 3 !important;
  grid-column: span 1 !important;
}

.ref-view-reports .ref-report-operations {
  order: 4 !important;
  grid-column: span 1 !important;
}

.ref-view-reports .ref-report-delivery {
  order: 5 !important;
  grid-column: span 1 !important;
}

.ref-view-reports .ref-report-workload {
  order: 6 !important;
  grid-column: span 2 !important;
}

.ref-view-reports .ref-report-demand--compact {
  order: 7 !important;
  grid-column: 1 / -1 !important;
}

.ref-view-reports .ref-report-month-compare {
  min-height: 150px !important;
  padding: 10px 6px 2px !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, .018) !important;
}

.ref-view-reports .ref-report-month-compare .bars {
  min-height: 118px !important;
  gap: 3px !important;
}

.ref-view-reports .ref-report-month-compare i {
  width: 8px !important;
}

.ref-view-reports .ref-report-rhythm>footer,
.ref-view-reports .ref-report-types-card>footer {
  padding-top: 9px !important;
}

.ref-view-reports .ref-report-ring-stat {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.ref-view-reports .ref-report-ring-visual {
  max-width: 128px !important;
}

.ref-view-reports .ref-report-ring-visual strong {
  font-size: 25px !important;
}

.ref-view-reports .ref-report-ring-list {
  gap: 7px !important;
}

.ref-view-reports .ref-report-ring-list p {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border-color: #323945 !important;
  background: #191e25 !important;
}

.ref-view-reports .ref-report-pipeline {
  gap: 6px !important;
}

.ref-view-reports .ref-report-pipeline p,
.ref-view-reports .ref-report-status p {
  grid-template-columns: minmax(72px, .8fr) minmax(0, 1.1fr) 30px !important;
  min-height: 24px !important;
  font-size: 9.5px !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut-ring {
  width: clamp(104px, 9vw, 130px) !important;
  height: clamp(104px, 9vw, 130px) !important;
}

.ref-view-reports .ref-report-delivery .ref-ov-donut {
  gap: 16px !important;
}

.ref-view-reports .ref-report-workload .ref-eng-bars {
  gap: 9px !important;
}

.ref-view-reports .ref-report-workload .ref-eng-bars p {
  min-height: 26px !important;
}

.ref-view-reports .ref-report-type-stack {
  gap: 11px !important;
}

.ref-view-reports .ref-report-type-stack>div {
  grid-template-columns: minmax(76px, .8fr) minmax(0, 1.25fr) 36px !important;
  gap: 10px !important;
}

.ref-view-reports .ref-report-type-stack strong {
  font-size: 10.5px !important;
}

.ref-view-reports .ref-report-type-stack small {
  font-size: 7.5px !important;
}

.ref-view-reports .ref-report-type-stack>div>i {
  height: 11px !important;
}

.ref-view-reports .ref-report-demand--compact>header {
  min-height: 58px !important;
  padding: 14px 18px 12px !important;
}

.ref-view-reports .ref-demand-compact-table {
  margin: 12px 16px 14px !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  min-height: 45px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.ref-view-reports .ref-demand-compact-pagination {
  min-height: 42px !important;
  padding: 6px 12px !important;
}

.ref-view-reports .ref-demand-compact-pagination button {
  height: 28px !important;
}

@media (max-width: 1240px) {

  .ref-view-reports .ref-report-grid.ref-report-grid--v3,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ref-view-reports .ref-report-rhythm,
  .ref-view-reports .ref-report-workload,
  .ref-view-reports .ref-report-demand--compact {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {

  .ref-view-reports .ref-report-grid.ref-report-grid--v3,
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
    grid-template-columns: 1fr !important;
  }
}

/* Reports command-deck polish: compact reference-inspired metrics and chart hierarchy. */
.ref-view-reports .ref-reports>header {
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
}

.ref-view-reports .ref-report-headline span,
.ref-view-reports .ref-report-grid--v3>article>header span {
  color: #ff8a3d !important;
  text-shadow: none !important;
}

.ref-view-reports .ref-report-health-card {
  overflow: hidden !important;
  min-height: 84px !important;
  grid-template-columns: 76px minmax(96px, 1fr) minmax(150px, auto) !important;
  border-color: rgba(52, 211, 153, .26) !important;
  background:
    linear-gradient(90deg, rgba(52, 211, 153, .16), transparent 34%),
    linear-gradient(135deg, #212730 0%, #171b20 100%) !important;
}

.ref-view-reports .ref-report-health-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 12px 8px 92px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #34d399, rgb(from var(--app-accent) r g b /.86), transparent) !important;
  opacity: .72 !important;
}

.ref-view-reports .ref-report-health-copy strong {
  margin-top: 4px !important;
  font-size: 23px !important;
  line-height: .95 !important;
}

.ref-view-reports .ref-report-health-copy small {
  max-width: 150px !important;
  white-space: normal !important;
}

.ref-view-reports .ref-report-health-metrics {
  min-width: 150px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.ref-view-reports .ref-report-health-metrics span {
  height: 42px !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  padding: 0 6px !important;
  border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(12, 15, 19, .34) !important;
}

.ref-view-reports .ref-report-health-metrics b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
}

.ref-view-reports .ref-report-health-metrics small {
  font-size: 6.7px !important;
  letter-spacing: .45px !important;
}

.ref-view-reports .ref-report-kpis article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 68px !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-report-kpis article::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  border-radius: 18px 0 0 18px !important;
  background: var(--kpi-accent, var(--app-accent)) !important;
  opacity: .78 !important;
}

.ref-view-reports .ref-report-kpis article.tone-orange {
  --kpi-accent: var(--app-accent);
}

.ref-view-reports .ref-report-kpis article.tone-green {
  --kpi-accent: #34d399;
}

.ref-view-reports .ref-report-kpis article.tone-red {
  --kpi-accent: #ff6b7a;
}

.ref-view-reports .ref-report-kpis article.tone-cyan {
  --kpi-accent: #22d3ee;
}

.ref-view-reports .ref-report-kpis article.tone-violet {
  --kpi-accent: #a78bfa;
}

.ref-view-reports .ref-report-kpis article.tone-amber {
  --kpi-accent: #f2c94c;
}

.ref-view-reports .ref-report-kpis article>.material-symbols-rounded {
  color: var(--kpi-accent, var(--app-accent)) !important;
  background: rgb(from var(--app-accent) r g b /.12) !important;
}

.ref-view-reports .ref-report-kpis article.tone-green>.material-symbols-rounded {
  background: rgba(52, 211, 153, .13) !important;
}

.ref-view-reports .ref-report-kpis article.tone-red>.material-symbols-rounded {
  background: rgba(255, 107, 122, .13) !important;
}

.ref-view-reports .ref-report-kpis article.tone-cyan>.material-symbols-rounded {
  background: rgba(34, 211, 238, .13) !important;
}

.ref-view-reports .ref-report-kpis article.tone-violet>.material-symbols-rounded {
  background: rgba(167, 139, 250, .13) !important;
}

.ref-view-reports .ref-report-kpis article.tone-amber>.material-symbols-rounded {
  background: rgba(242, 201, 76, .13) !important;
}

.ref-view-reports .ref-report-kpis span {
  min-width: 0 !important;
  color: #9aa3b1 !important;
  font-size: 8.2px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}

.ref-view-reports .ref-report-kpis strong {
  color: #f7f9fc !important;
  font-size: clamp(20px, 1.55vw, 24px) !important;
  line-height: 1 !important;
}

.ref-view-reports .ref-report-kpi-visual {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: end !important;
  gap: 3px !important;
}

.ref-view-reports .ref-report-sparkline {
  width: 62px !important;
  height: 23px !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-sparkline polygon {
  fill: var(--kpi-accent, var(--app-accent)) !important;
  opacity: .14 !important;
}

.ref-view-reports .ref-report-sparkline polyline {
  fill: none !important;
  stroke: var(--kpi-accent, var(--app-accent)) !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ref-view-reports .ref-report-kpi-visual em {
  min-width: 42px !important;
  height: 16px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #bac2cf !important;
  background: rgba(255, 255, 255, .035) !important;
  font-style: normal !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}

.ref-view-reports .ref-report-kpi-visual em.dir-up {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, .22) !important;
}

.ref-view-reports .tone-red .ref-report-kpi-visual em.dir-up {
  color: #ff8d8d !important;
  border-color: rgba(255, 107, 122, .24) !important;
}

.ref-view-reports .ref-report-kpi-visual em.dir-down {
  color: #ff9b60 !important;
  border-color: rgb(from var(--app-accent) r g b /.24) !important;
}

.ref-view-reports .ref-report-grid--v3>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  position: relative !important;
  isolation: isolate !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 24px rgba(0, 0, 0, .12) !important;
}

.ref-view-reports .ref-report-grid--v3>article::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgb(from var(--app-accent) r g b /.58), rgba(52, 211, 153, .28), transparent) !important;
  opacity: .62 !important;
  z-index: -1 !important;
}

.ref-view-reports .ref-report-rhythm {
  min-height: 244px !important;
}

.ref-view-reports .ref-report-month-compare {
  min-height: 138px !important;
}

.ref-view-reports .ref-report-month-compare .bars {
  min-height: 108px !important;
}

.ref-view-reports .ref-report-month-compare button.active small {
  color: #ffb27a !important;
}

.ref-view-reports .ref-report-month-compare button.active {
  outline: 1px solid rgb(from var(--app-accent) r g b /.22) !important;
}

.ref-view-reports .ref-report-types-card,
.ref-view-reports .ref-report-rings,
.ref-view-reports .ref-report-operations,
.ref-view-reports .ref-report-delivery {
  min-height: 226px !important;
}

.ref-view-reports .ref-report-workload {
  min-height: 226px !important;
}

.ref-view-reports .ref-report-type-stack {
  align-content: stretch !important;
}

.ref-view-reports .ref-report-type-stack>div {
  min-height: 42px !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
  border-radius: 12px !important;
  background: rgba(13, 16, 20, .26) !important;
}

.ref-view-reports .ref-report-type-stack>div>i {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

.ref-view-reports .ref-report-pipeline p,
.ref-view-reports .ref-report-status p,
.ref-view-reports .ref-eng-bars p {
  border-radius: 10px !important;
}

.ref-view-reports .ref-report-pipeline p:hover,
.ref-view-reports .ref-eng-bars p:hover,
.ref-view-reports .ref-report-ring-list p:hover,
.ref-view-reports .ref-report-type-stack>div:hover {
  background: rgb(from var(--app-accent) r g b /.055) !important;
}

.ref-view-reports .ref-report-demand--compact {
  min-height: 318px !important;
}

.ref-view-reports .ref-report-demand--compact>header {
  background:
    linear-gradient(90deg, rgb(from var(--app-accent) r g b /.09), rgba(255, 255, 255, .015) 48%, transparent) !important;
  border-bottom-color: rgba(255, 255, 255, .07) !important;
}

.ref-view-reports .ref-demand-summary span {
  background: rgb(from var(--app-accent) r g b /.09) !important;
  border-color: rgb(from var(--app-accent) r g b /.28) !important;
}

.ref-view-reports .ref-demand-compact-body>button {
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

.ref-view-reports .ref-demand-compact-body>button:hover {
  transform: translateX(3px) !important;
  background: rgb(from var(--app-accent) r g b /.07) !important;
  border-color: rgb(from var(--app-accent) r g b /.22) !important;
}

.ref-view-reports .ref-demand-compact-pagination .sizes button.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ff934a, var(--app-accent)) !important;
}

@media (max-width: 1240px) {
  .ref-view-reports .ref-report-health-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .ref-view-reports .ref-report-health-metrics {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 820px) {
  .ref-view-reports .ref-report-kpis article {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .ref-view-reports .ref-report-kpi-visual {
    display: none !important;
  }
}

/* ============================================================
   REPORTS v3 — COMPACT + ALIGNED (final override, wins over the
   earlier v3 block). Tight rows, uniform card heights, no dead space.
   Month-click filtering is untouched (pure JSX behaviour).
   ============================================================ */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 0 22px 20px !important;
}

.ref-view-reports .ref-report-grid--v3>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  min-height: 0 !important;
  padding: 14px 15px !important;
  border-radius: 16px !important;
  border: 1px solid #2c313a !important;
  background: linear-gradient(180deg, #1f2329 0%, #1b1f25 100%) !important;
}

.ref-view-reports .ref-report-grid--v3>article>header {
  margin-bottom: 10px !important;
}

.ref-view-reports .ref-report-grid--v3>article>header h3 {
  font-size: 14px !important;
  margin-top: 3px !important;
}

.ref-view-reports .ref-report-grid--v3>article>footer {
  padding-top: 9px !important;
  margin-top: 4px !important;
}

/* ---- placement: 3 tidy rows ---- */
.ref-view-reports .ref-report-grid--v3>.ref-report-rhythm {
  grid-column: span 7 !important;
  min-height: 208px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-rings {
  grid-column: span 5 !important;
  min-height: 208px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status {
  grid-column: span 4 !important;
  min-height: 190px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-delivery {
  grid-column: span 4 !important;
  min-height: 190px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-workload {
  grid-column: span 4 !important;
  min-height: 190px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card {
  grid-column: span 5 !important;
  min-height: 200px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
  grid-column: span 7 !important;
  min-height: 200px !important;
}

/* ---- compact the monthly bar chart ---- */
.ref-view-reports .ref-report-grid--v3 .ref-report-month-compare {
  min-height: 0 !important;
  padding: 8px 6px 2px !important;
}

.ref-view-reports .ref-report-grid--v3 .ref-report-month-compare .bars {
  min-height: 0 !important;
}

.ref-view-reports .ref-report-grid--v3 .ref-report-month-compare i {
  width: 8px !important;
}

/* ---- pipeline bars breathe to fill ---- */
.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  margin: 4px 0 !important;
}

/* ---- delivery donut + workload centre in the shorter card ---- */
.ref-view-reports .ref-report-grid--v3>.ref-report-delivery .ref-ov-donut {
  flex: 1 1 auto !important;
  align-items: center !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-workload .ref-eng-bars {
  flex: 1 1 auto !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* ---- account table: compact rows, no runaway height ---- */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  gap: 5px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  min-height: 40px !important;
  padding: 6px 10px !important;
}

@media (max-width: 1150px) {
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-rhythm {
    grid-column: span 6 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-rings,
  .ref-view-reports .ref-report-grid--v3>.ref-report-types-card {
    grid-column: span 3 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-status,
  .ref-view-reports .ref-report-grid--v3>.ref-report-delivery,
  .ref-view-reports .ref-report-grid--v3>.ref-report-workload {
    grid-column: span 2 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
    grid-column: span 6 !important;
  }
}

/* ---- Reports v3 compact: FORCE uniform heights + clean 3-row spans
        (full-specificity so it wins the earlier v3 min-height:292) ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  min-height: 0 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rhythm {
  grid-column: 1 / span 7 !important;
  height: 200px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rings {
  grid-column: 8 / span 5 !important;
  height: 200px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  grid-column: 1 / span 4 !important;
  height: 184px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-delivery {
  grid-column: 5 / span 4 !important;
  height: 184px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-workload {
  grid-column: 9 / span 4 !important;
  height: 184px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-types-card {
  grid-column: 1 / span 5 !important;
  height: 206px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  grid-column: 6 / span 7 !important;
  height: 206px !important;
}

/* content inside must fit the fixed height */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article>*:not(header):not(footer) {
  min-height: 0 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rhythm .ref-report-month-compare {
  min-height: 0 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rhythm .ref-report-month-compare .bars {
  min-height: 0 !important;
}

/* ---- Reports v3 compact: deterministic explicit row+column placement ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 200px 186px 208px !important;
  grid-auto-flow: row !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rhythm {
  grid-row: 1 !important;
  grid-column: 1 / span 7 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rings {
  grid-row: 1 !important;
  grid-column: 8 / span 5 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  grid-row: 2 !important;
  grid-column: 1 / span 4 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-delivery {
  grid-row: 2 !important;
  grid-column: 5 / span 4 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-workload {
  grid-row: 2 !important;
  grid-column: 9 / span 4 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-types-card {
  grid-row: 3 !important;
  grid-column: 1 / span 5 !important;
  height: auto !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  grid-row: 3 !important;
  grid-column: 6 / span 7 !important;
  height: auto !important;
}

/* ============================================================
   REPORTS v3 — FINAL compact layout (6 cards, rhythm removed)
   Row 1: distribution rings · engineer workload · delivery donut
   Row 2: service-order pipeline · customer-type delivery
   Row 3: account performance (full width). Varied chart shapes,
   uniform aligned rows, tight heights.
   ============================================================ */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: 194px 216px 214px !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 13px !important;
  padding: 2px 22px 20px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;
  border-radius: 17px !important;
  border: 1px solid #2c313a !important;
  background: linear-gradient(180deg, #1f2329 0%, #1a1e24 100%) !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article>header {
  margin-bottom: 8px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article>header h3 {
  font-size: 14px !important;
  margin-top: 3px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rings {
  grid-row: 1 !important;
  grid-column: 1 / span 4 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-workload {
  grid-row: 1 !important;
  grid-column: 5 / span 4 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-delivery {
  grid-row: 1 !important;
  grid-column: 9 / span 4 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  grid-row: 2 !important;
  grid-column: 1 / span 5 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-types-card {
  grid-row: 2 !important;
  grid-column: 6 / span 7 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  grid-row: 3 !important;
  grid-column: 1 / span 12 !important;
}

/* content fits the fixed heights */
.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  margin: 3px 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-delivery .ref-ov-donut {
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-workload .ref-eng-bars {
  flex: 1 1 auto !important;
  justify-content: center !important;
  gap: 9px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-table {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  gap: 5px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* ---------- OPERATIONAL HEALTH PANEL — clean, balanced ---------- */
.ref-view-reports .ref-report-health-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 66px 1fr auto !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #242a32 0%, #191d23 100%) !important;
}

.ref-view-reports .ref-report-health-card::before,
.ref-view-reports .ref-report-health-card::after {
  display: none !important;
}

.ref-view-reports .ref-report-health-card .ref-score-ring {
  width: 66px !important;
  height: 66px !important;
}

.ref-view-reports .ref-report-health-copy {
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-copy span {
  color: #9aa2ad !important;
  font-size: 8px !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-health-copy strong {
  display: block !important;
  margin: 3px 0 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ref-view-reports .ref-report-health-copy small {
  display: block !important;
  color: #9aa2ad !important;
  font-size: 9.5px !important;
}

.ref-view-reports .ref-report-health-metrics {
  display: flex !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-metrics span {
  width: 58px !important;
  height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .24) !important;
}

.ref-view-reports .ref-report-health-metrics b {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-family: var(--body, "Manrope") !important;
}

.ref-view-reports .ref-report-health-metrics small {
  font-size: 7px !important;
  color: #9aa2ad !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* ---- Reports v3: force cards to FILL their fixed track (beats align-self:start) ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  align-self: stretch !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* pipeline bars compress to fit */
.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  margin: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>i {
  height: 6px !important;
}

/* rings / donut / workload / type-stack fill remaining height cleanly */
.ref-view-reports .ref-report-grid--v3>.ref-report-rings>*:not(header),
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>*:not(header):not(footer) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>article>footer {
  flex: 0 0 auto !important;
}

/* ---- Reports v3: premium hover + cohesive polish (safe, matches Overview) ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  transform: none !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(from var(--app-accent) r g b /.42) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32) !important;
}

.ref-view-reports .ref-report-grid--v3>article>header span {
  color: #f5a15a !important;
  letter-spacing: .7px !important;
}

.ref-view-reports .ref-report-grid--v3>article>header h3 {
  color: #f4f6f8 !important;
  letter-spacing: -.2px !important;
}

/* ============================================================
   REPORTS v3 — BENTO layout (final). Row 1: four compact chart
   cards. Row 2: customer-type delivery + a TALL account table
   that shows its rows properly (no smushing). Aligned, no waste.
   ============================================================ */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: 180px 300px !important;
  grid-auto-flow: row !important;
  gap: 13px !important;
  align-items: stretch !important;
  padding: 2px 22px 22px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rings {
  grid-row: 1 !important;
  grid-column: 1 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-delivery {
  grid-row: 1 !important;
  grid-column: 4 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-workload {
  grid-row: 1 !important;
  grid-column: 7 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  grid-row: 1 !important;
  grid-column: 10 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-types-card {
  grid-row: 2 !important;
  grid-column: 1 / span 5 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  grid-row: 2 !important;
  grid-column: 6 / span 7 !important;
}

/* account table breathes: header + rows + pagination all visible */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  overflow-y: auto !important;
  gap: 4px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  min-height: 38px !important;
}

@media (max-width: 1150px) {
  .ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
    grid-template-rows: 176px 176px 300px !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-rings {
    grid-row: 1 !important;
    grid-column: 1 / span 6 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-delivery {
    grid-row: 1 !important;
    grid-column: 7 / span 6 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-workload {
    grid-row: 2 !important;
    grid-column: 1 / span 6 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-status {
    grid-row: 2 !important;
    grid-column: 7 / span 6 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-types-card {
    grid-row: 3 !important;
    grid-column: 1 / span 12 !important;
  }

  .ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
    grid-row: 3 !important;
    grid-column: 1 / span 12 !important;
  }
}

/* ---------- OPERATIONAL HEALTH — refined, less boxy ---------- */
.ref-view-reports .ref-report-health-card {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 3px 15px !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #21262e 0%, #191d23 100%) !important;
}

.ref-view-reports .ref-report-health-card::before,
.ref-view-reports .ref-report-health-card::after {
  display: none !important;
}

.ref-view-reports .ref-report-health-card .ref-score-ring {
  grid-row: 1 / 3 !important;
  width: 64px !important;
  height: 64px !important;
}

.ref-view-reports .ref-report-health-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-copy span {
  color: #9aa2ad !important;
  font-size: 8px !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-health-copy strong {
  display: block !important;
  margin: 2px 0 3px !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ref-view-reports .ref-report-health-copy small {
  display: block !important;
  color: #8b929c !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-health-metrics {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  gap: 18px !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-metrics span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

.ref-view-reports .ref-report-health-metrics b {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.ref-view-reports .ref-report-health-metrics small {
  font-size: 8px !important;
  color: #9aa2ad !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* ---- Reports v3 bento: account table shows all 5 rows (deterministic,
        not relying on grid-item flex-fill which stays indefinite) ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 204px 420px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 auto !important;
}

/* customer-type card: space its 3 bars to fill the taller row, no dead gap */
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>.ref-report-type-stack,
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>*:not(header):not(footer) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  min-height: 0 !important;
}

/* ============================================================
   REPORTS v3 — FINAL polish pass
   • header: operational-health card = month-graph card (equal size, aligned)
   • grid: 4 compact charts on top; pipeline + account below
   • account row AUTO-sizes to content → pagination never chops
   ============================================================ */
.ref-view-reports .ref-reports>header {
  align-items: center !important;
}

.ref-view-reports .ref-report-health-card {
  height: 106px !important;
  align-self: center !important;
}

.ref-view-reports .ref-report-hero-chart {
  height: 106px !important;
  align-self: center !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #21262e 0%, #191d23 100%) !important;
  padding: 12px 16px 8px !important;
}

/* ---- grid: row 1 = four compact charts, row 2 auto (account drives height) ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: 190px auto !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 13px !important;
  padding: 2px 22px 22px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-rings {
  grid-row: 1 !important;
  grid-column: 1 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-delivery {
  grid-row: 1 !important;
  grid-column: 4 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-workload {
  grid-row: 1 !important;
  grid-column: 7 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-types-card {
  grid-row: 1 !important;
  grid-column: 10 / span 3 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  grid-row: 2 !important;
  grid-column: 1 / span 5 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  grid-row: 2 !important;
  grid-column: 6 / span 7 !important;
}

/* types card in the compact row: 3 bars fill evenly, legend at the foot */
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>*:not(header):not(footer) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  min-height: 0 !important;
  gap: 6px !important;
}

/* account: natural-height rows, no internal scroll → row 2 grows to fit, never chops */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
  height: auto !important;
  align-self: stretch !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-table {
  flex: 0 0 auto !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 auto !important;
}

/* pipeline stretches to match the account's height, bars spread out */
.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  margin: 0 !important;
}

/* ---- Reports v3: compress pipeline so the ACCOUNT (not pipeline) sets row-2
        height — keeps the table tight with no sparse gaps ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 202px auto !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 0 0 auto !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 4px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  margin: 0 !important;
  min-height: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>i {
  height: 6px !important;
}

/* pipeline card: header top, bars centered in the remaining space */
.ref-view-reports .ref-report-grid--v3>.ref-report-status {
  justify-content: flex-start !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  margin: auto 0 !important;
}

/* ---- Reports v3: HARD-compress the pipeline bar rows so the account drives row-2 ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: auto 0 !important;
  overflow: hidden !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status {
  overflow: hidden !important;
}

/* account rows a touch tighter so 5 fit comfortably */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

/* ---- Reports v3: account locked to 5 rows → row 2 is a fixed, tidy height.
        Pipeline fills its card evenly; nothing chops, nothing sparse. ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 202px 380px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact {
  height: 100% !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 1 1 auto !important;
  justify-content: space-evenly !important;
  margin: 0 !important;
}

/* the leftover pagination row (now just a caption) sits clean at the bottom */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-pagination {
  justify-content: space-between !important;
  padding-top: 10px !important;
}

/* ============================================================
   REPORTS v3 — fix text collisions + card fit
   ============================================================ */
/* Operational distribution: ring list — no label/value overlap */
.ref-view-reports .ref-report-ring-list p {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.ref-view-reports .ref-report-ring-list p>i {
  flex: 0 0 9px !important;
}

.ref-view-reports .ref-report-ring-list p>span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-ring-list p>b {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.ref-view-reports .ref-report-ring-list p>small {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  text-align: right !important;
}

.ref-view-reports .ref-report-ring-stat {
  gap: 12px !important;
  align-items: center !important;
}

/* Customer type delivery: bars + footer legend fit, never overlap */
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card {
  overflow: hidden !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: 4px !important;
  min-height: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div {
  margin: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>footer {
  flex: 0 0 auto !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
}

/* Operational-health card: taller so DELIVERY/CLEAR labels aren't chopped
   (month graph matched to the same height) */
.ref-view-reports .ref-report-health-card {
  height: 118px !important;
}

.ref-view-reports .ref-report-hero-chart {
  height: 118px !important;
}

.ref-view-reports .ref-report-health-copy strong {
  font-size: 20px !important;
  margin: 1px 0 2px !important;
}

.ref-view-reports .ref-report-health-metrics {
  margin-top: 5px !important;
  padding-top: 7px !important;
}

/* ============================================================
   REPORTS v3 — row 2 auto-sizes to the 5-row account (pagination ">"
   always visible), pipeline rows fill evenly (no sparse spread)
   ============================================================ */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 202px auto !important;
}

/* account: natural height, no internal scroll, pagination fully visible */
.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact {
  height: auto !important;
  align-self: stretch !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-table {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-body button {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding-top: 10px !important;
  margin-top: auto !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-pagination nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-pagination nav button {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #3b4048 !important;
  border-radius: 9px !important;
  background: #22262c !important;
  color: #cfd4db !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-demand--compact .ref-demand-compact-pagination nav button:disabled {
  opacity: .4 !important;
}

/* pipeline: 7 rows fill the card evenly — clean, not spread thin */
.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

/* pipeline rows fill evenly (full specificity to beat the earlier 22px rule) */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  align-items: center !important;
}

/* Customer type delivery: legend now inline in the header (no footer overlap) */
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>header {
  align-items: center !important;
}

.ref-view-reports .ref-types-legend {
  display: flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

.ref-view-reports .ref-types-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #9aa2ad !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
}

.ref-view-reports .ref-types-legend i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
}

.ref-view-reports .ref-types-legend i.done {
  background: #34d399 !important;
}

.ref-view-reports .ref-types-legend i.open {
  background: var(--app-accent) !important;
}

.ref-view-reports .ref-types-legend i.cancelled {
  background: #ff6b7a !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  min-height: 0 !important;
}

/* ============================================================
   REPORTS v3 — pipeline bars fill full width (no wasted space) +
   clean card headers (kill the muddy orange gradient blend)
   ============================================================ */
/* pipeline: each row spans the full card width, bar fills the middle */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline {
  align-items: stretch !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 14px !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>span {
  color: #aeb4bd !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>i {
  width: 100% !important;
  height: 9px !important;
  border-radius: 6px !important;
  background: #14161a !important;
  overflow: hidden !important;
  display: block !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>i>em {
  display: block !important;
  height: 100% !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, var(--app-accent-soft), var(--app-accent)) !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-status .ref-report-pipeline p>b {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #eef0f3 !important;
  text-align: right !important;
}

/* clean card headers: no orange radial blend, flat dark */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact,
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact>header {
  background-image: none !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>article {
  background: #1b1f25 !important;
}

.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3>.ref-report-demand--compact>header {
  background: transparent !important;
}

/* Reports header: no banner card. The title, health card and month chart sit
   directly on the section's dark background (the health + chart keep their own
   card frames) instead of inside a big lighter wrapping panel. */
.ref-view-reports .reference-content>.ref-reports>header {
  background: transparent !important;
  border-bottom: 0 !important;
}

.ref-view-reports .reference-content>.ref-reports>header::before,
.ref-view-reports .reference-content>.ref-reports>header::after {
  display: none !important;
}

/* ============================================================
   REPORTS — operational health with mini ring gauges (eye-catching)
   ============================================================ */
.ref-view-reports .ref-report-health-card {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 16px !important;
  height: 118px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #232a32 0%, #191d23 100%) !important;
}

.ref-view-reports .ref-report-health-card::before,
.ref-view-reports .ref-report-health-card::after {
  display: none !important;
}

.ref-view-reports .ref-report-health-card .ref-score-ring {
  grid-row: auto !important;
  width: 80px !important;
  height: 80px !important;
}

.ref-view-reports .ref-report-health-copy {
  grid-column: 2 !important;
  grid-row: auto !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-report-health-copy span {
  color: #9aa2ad !important;
  font-size: 8px !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
}

.ref-view-reports .ref-report-health-copy strong {
  display: block !important;
  margin: 3px 0 5px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ref-view-reports .ref-report-health-copy small {
  display: block !important;
  color: #8b929c !important;
  font-size: 9.5px !important;
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-health-metrics {
  grid-column: 3 !important;
  grid-row: auto !important;
  display: flex !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.ref-view-reports .ref-health-gauge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.ref-view-reports .ref-health-gauge svg {
  width: 52px !important;
  height: 52px !important;
  overflow: visible !important;
}

.ref-view-reports .ref-health-gauge svg .track {
  stroke: rgba(255, 255, 255, .11) !important;
}

.ref-view-reports .ref-health-gauge svg text {
  fill: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  font-family: "Manrope", sans-serif !important;
}

.ref-view-reports .ref-health-gauge small {
  font-size: 8px !important;
  color: #9aa2ad !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-weight: 700 !important;
}

/* ---- Customer type delivery: fit all 3 bars, compact rows ---- */
.ref-view-reports .reference-content>.ref-reports>.ref-report-grid.ref-report-grid--v3 {
  grid-template-rows: 232px auto !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  margin: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div>span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div>span strong {
  font-size: 12px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div>span small {
  font-size: 8px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div>i {
  grid-column: 1 !important;
  grid-row: 2 !important;
  height: 9px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div>b {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* type card: compress header so all 3 bars fit */
.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>header {
  margin-bottom: 6px !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>header>div {
  min-width: 0 !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>header h3 {
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card>header span {
  white-space: nowrap !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack {
  justify-content: flex-start !important;
  gap: 10px !important;
}

.ref-view-reports .ref-report-grid--v3>.ref-report-types-card .ref-report-type-stack>div {
  height: 40px !important;
}

/* ============================================================================
   Overview · short-viewport fit
   The calendar day cells are aspect-ratio:1/1 (square, sized by the rail WIDTH),
   so the calendar keeps its full height regardless of viewport HEIGHT. On short
   screens that starved the "Upcoming visits" agenda below it and clipped its
   last row. Below 740px tall we let the day cells lose the square lock and
   shrink vertically, which frees height for the agenda, and we let the agenda
   list scroll so a row is never half-cut.
   ============================================================================ */
@media (max-height: 740px) {

  .ref-view-overview .ref-ov-cal-grid .empty,
  .ref-view-overview .ref-ov-cal-day {
    aspect-ratio: auto !important;
    height: clamp(20px, 3.6vh, 34px) !important;
    min-height: 0 !important;
  }

  .ref-view-overview .ref-ov-agenda-list {
    overflow-y: auto !important;
  }
}

/* Overview stage/volume bars: drop the orange glow (box-shadow + drop-shadow)
   under the bar fills — it read as an ugly halo, especially the orange cast
   beneath the cyan/purple bars. Flat, clean bars instead. */
.ref-col i {
  box-shadow: none !important;
  filter: none !important;
}

/* Customers & Engineers: one background card, like Reports.
   The whole app already sits in the .reference-shell card; these views added a
   second darker .ref-data-panel card inside it (a card-in-card). Flatten that
   panel so the directory toolbar + table sit straight on the shell, matching
   the Reports page. */
.ref-view-customers .ref-data-panel,
.ref-view-engineers .ref-data-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================================
   REQUESTS — energy pass (visual only; scoped to .ref-view-requests).
   Master-list rows + detail cards pick up the gradient surfaces, tone-coloured
   badges, a live progress bar and hover life of Overview/Reports. No markup or
   behaviour changes.
   ============================================================================ */

/* ---------- Master list rows ---------- */
.ref-view-requests .ref-request-row {
  position: relative !important;
  background: linear-gradient(150deg, #23262e 0%, #1b1e24 100%) !important;
  border: 1px solid #2c313a !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: transform .18s cubic-bezier(.2, .85, .25, 1), border-color .18s ease, box-shadow .18s ease !important;
}

.ref-view-requests .ref-request-row::after {
  /* tone accent rail */
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ffb989, var(--app-accent));
  opacity: 0;
  transition: opacity .18s ease;
}

.ref-view-requests .ref-request-row:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(from var(--app-accent) r g b /.35) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}

.ref-view-requests .ref-request-row:hover::after {
  opacity: .45;
}

.ref-view-requests .ref-request-row.active {
  background: linear-gradient(135deg, rgb(from var(--app-accent) r g b /.18) 0%, rgb(from var(--app-accent) r g b /.05) 42%, #1b1e24 100%) !important;
  border-color: rgb(from var(--app-accent) r g b /.55) !important;
  box-shadow: 0 8px 24px rgb(from var(--app-accent) r g b /.15) !important;
}

.ref-view-requests .ref-request-row.active::after {
  opacity: 1;
}

/* Avatars: only the 3 icon-tile tones (teal / violet / amber), dark-tinted
   tiles with bright initials — cohesive with the detail cards. The selected
   row's avatar lights up solid orange to mark the active request. */
.ref-view-requests .ref-request-avatar {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3) !important;
}

.ref-view-requests .ref-request-row:nth-child(3n+1) .ref-request-avatar {
  background: linear-gradient(145deg, #17323a 0%, #12232a 100%) !important;
  color: #63e6e6 !important;
  border-color: rgba(76, 227, 227, .28) !important;
}

.ref-view-requests .ref-request-row:nth-child(3n+2) .ref-request-avatar {
  background: linear-gradient(145deg, #2a2542 0%, #1c1930 100%) !important;
  color: #c3a8ff !important;
  border-color: rgba(167, 139, 250, .3) !important;
}

.ref-view-requests .ref-request-row:nth-child(3n+3) .ref-request-avatar {
  background: linear-gradient(145deg, #3a2f18 0%, #271f10 100%) !important;
  color: #ffd479 !important;
  border-color: rgba(255, 207, 107, .3) !important;
}

.ref-view-requests .ref-request-row.active .ref-request-avatar {
  background: linear-gradient(145deg, #ffb989 0%, #ef7d33 100%) !important;
  color: #241206 !important;
  border-color: rgb(from var(--app-accent) r g b /.45) !important;
  box-shadow: 0 4px 14px rgb(from var(--app-accent) r g b /.35) !important;
}

/* ---------- Detail: fact cards get gradient + tone icon badge ---------- */
.ref-view-requests .ref-detail-items article,
.ref-view-requests .ref-progress-card {
  position: relative !important;
  background: linear-gradient(160deg, #23272f 0%, #191c22 100%) !important;
  border: 1px solid #2c313a !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.ref-view-requests .ref-detail-items article:hover,
.ref-view-requests .ref-progress-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgb(from var(--app-accent) r g b /.4) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .3) !important;
}

/* Icon = a large squircle tile: dark tone-tinted fill with a bright tone icon
   (the app's KPI-tile look), top-right of each fact card. */
.ref-view-requests .ref-detail-items article>.material-symbols-rounded {
  position: absolute !important;
  top: 13px !important;
  right: 13px !important;
  bottom: auto !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  opacity: 1 !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.ref-view-requests .ref-detail-items article:nth-child(1)>.material-symbols-rounded {
  color: #63e6e6 !important;
  background: linear-gradient(150deg, #17323a 0%, #12232a 100%) !important;
  border-color: rgba(76, 227, 227, .28) !important;
}

.ref-view-requests .ref-detail-items article:nth-child(2)>.material-symbols-rounded {
  color: #c3a8ff !important;
  background: linear-gradient(150deg, #2a2542 0%, #1c1930 100%) !important;
  border-color: rgba(167, 139, 250, .3) !important;
}

.ref-view-requests .ref-detail-items article:nth-child(3)>.material-symbols-rounded {
  color: #ffd479 !important;
  background: linear-gradient(150deg, #3a2f18 0%, #271f10 100%) !important;
  border-color: rgba(255, 207, 107, .3) !important;
}

/* extra right padding so long values never slip under the bigger tile */
.ref-view-requests .ref-detail-items article {
  padding-right: 62px !important;
}

/* ---------- Live progress bar (was a flat dark sliver) ---------- */
.ref-view-requests .ref-progress-card {
  overflow: hidden !important;
}

.ref-view-requests .ref-progress-card::after {
  /* soft green corner glow (completion tone, from Reports) */
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(52, 211, 153, .2), transparent 70%);
  pointer-events: none;
}

.ref-view-requests .ref-progress-card strong {
  color: #5fe6b4 !important;
}

.ref-view-requests .ref-progress-card i {
  background: rgba(255, 255, 255, .09) !important;
  height: 7px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-progress-card em {
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, .45) !important;
  border-radius: 4px !important;
}

/* ---------- Segmented tabs: status-semantic, not one-note orange ----------
   All = slate, Open = orange, Completed = green. Count badges carry a matching
   tint even when inactive, so the control reads by meaning. */
.ref-view-requests .ref-segmented-tabs button.active {
  box-shadow: none !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(1).active {
  background: linear-gradient(135deg, #5c6673 0%, #3d444f 100%) !important;
  color: #fff !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(2).active {
  background: linear-gradient(135deg, #ffa64d 0%, #ef7d33 100%) !important;
  color: #fff !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(3).active {
  background: linear-gradient(135deg, #4ade80 0%, #22a866 100%) !important;
  color: #06251a !important;
}

/* count badges — subtle tone hint on the inactive tabs */
.ref-view-requests .ref-segmented-tabs button:nth-child(1)>span {
  background: rgba(255, 255, 255, .09) !important;
  color: #cfd4dc !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(2)>span {
  background: rgb(from var(--app-accent) r g b /.18) !important;
  color: #ffb27a !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(3)>span {
  background: rgba(52, 211, 153, .18) !important;
  color: #5fe6b4 !important;
}

/* active tab's badge flips to a solid chip for contrast on the coloured pill */
.ref-view-requests .ref-segmented-tabs button.active>span {
  background: rgba(255, 255, 255, .92) !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(1).active>span {
  color: #2a2f38 !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(2).active>span {
  color: #8a3d00 !important;
}

.ref-view-requests .ref-segmented-tabs button:nth-child(3).active>span {
  color: #0b3d29 !important;
}

/* ---------- Detail header + tabs polish ---------- */
.ref-view-requests .ref-detail-customer>p>i {
  background: linear-gradient(145deg, #ffb989, #ef7d33) !important;
  color: #241206 !important;
  box-shadow: 0 4px 12px rgb(from var(--app-accent) r g b /.3) !important;
}

.ref-view-requests .ref-detail-tabs button.active {
  color: #fff !important;
}

.ref-view-requests .ref-detail-tabs button {
  transition: color .15s ease !important;
}

/* ---------- Description: full-width panel below the cards + map ---------- */
.ref-view-requests .ref-detail-overview>.ref-detail-description {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  border: 1px solid #2a2f38 !important;
  background: linear-gradient(160deg, #20242b 0%, #191c22 100%) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}

.ref-view-requests .ref-detail-overview>.ref-detail-description>span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #f5a15a !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

.ref-view-requests .ref-detail-overview>.ref-detail-description>span::before {
  content: "notes";
  font-family: "Material Symbols Rounded" !important;
  font-size: 14px !important;
  color: var(--app-accent) !important;
}

.ref-view-requests .ref-detail-overview>.ref-detail-description>p {
  margin: 0 !important;
  color: #d3d7de !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* ---------- Fact cards: subtle tone accent so they don't read as dead space ---------- */
.ref-view-requests .ref-detail-items article {
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-items article::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  opacity: .9;
}

.ref-view-requests .ref-detail-items--2 article:nth-child(1)::before,
.ref-view-requests .ref-detail-items:not(.ref-detail-items--2) article:nth-child(1)::before {
  background: linear-gradient(90deg, #4ce3e3, transparent 85%);
}

.ref-view-requests .ref-detail-items--2 article:nth-child(2)::before,
.ref-view-requests .ref-detail-items:not(.ref-detail-items--2) article:nth-child(2)::before {
  background: linear-gradient(90deg, #a78bfa, transparent 85%);
}

.ref-view-requests .ref-detail-items--2 article:nth-child(3)::before,
.ref-view-requests .ref-detail-items:not(.ref-detail-items--2) article:nth-child(3)::before {
  background: linear-gradient(90deg, #ffcf6b, transparent 85%);
}

/* the fact value sits a touch bigger + brighter, filling the card */
.ref-view-requests .ref-detail-items article>strong {
  font-size: 15px !important;
  color: #f2f5f8 !important;
}

/* ---------- Detail panel header: cleaner, less muddy ---------- */
.ref-view-requests .ref-request-detail {
  background:
    radial-gradient(circle at 88% -20%, rgb(from var(--app-accent) r g b /.12), transparent 34%),
    linear-gradient(165deg, #1c2027 0%, #15181d 100%) !important;
}

.ref-view-requests .ref-request-detail>header {
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

/* ---------- Map card gets a soft frame + hover ---------- */
.ref-view-requests .ref-detail-map {
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.ref-view-requests .ref-detail-map:hover {
  border-color: rgb(from var(--app-accent) r g b /.35) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important;
}

/* ---------- Map card gets a soft frame + hover ---------- */
.ref-view-requests .ref-detail-map {
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

.ref-view-requests .ref-detail-map:hover {
  border-color: rgb(from var(--app-accent) r g b /.35) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important;
}

/* ============================================================================
   REQUESTS — detail tabs fill the tall body (fullscreen had big dead gaps).
   The body centres its single child, so short tab content floated with ~190px
   of empty space. Let each tab stretch to full height and give it real life.
   ============================================================================ */
.ref-view-requests .ref-detail-timeline,
.ref-view-requests .ref-assignee-grid,
.ref-view-requests .ref-detail-media {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* ---------- Timeline → vertical spine + distributed event cards ---------- */
.ref-view-requests .ref-detail-timeline {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: 10px !important;
  padding: 8px 4px 8px 30px !important;
}

.ref-view-requests .ref-detail-timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(from var(--app-accent) r g b /.95), rgb(from var(--app-accent) r g b /.2) 60%, #2b303a);
}

.ref-view-requests .ref-detail-timeline article {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  background: linear-gradient(160deg, #20242b 0%, #181b21 100%) !important;
  border: 1px solid #2a2f38 !important;
  border-radius: 13px !important;
  padding: 13px 15px !important;
  height: auto !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.ref-view-requests .ref-detail-timeline article:hover {
  transform: translateX(3px) !important;
  border-color: rgb(from var(--app-accent) r g b /.4) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3) !important;
}

.ref-view-requests .ref-detail-timeline article>i {
  position: absolute !important;
  left: -22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #ffc08a, var(--app-accent)) !important;
  border: 2px solid #14161a !important;
  box-shadow: 0 0 0 3px rgb(from var(--app-accent) r g b /.18) !important;
}

.ref-view-requests .ref-detail-timeline article>div {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.ref-view-requests .ref-detail-timeline article>div>strong {
  font-size: 12.5px !important;
  color: #f2f5f8 !important;
}

.ref-view-requests .ref-detail-timeline article>div>small {
  font-size: 10.5px !important;
  color: #9aa2ad !important;
  line-height: 1.45 !important;
}

.ref-view-requests .ref-detail-timeline article>span {
  grid-column: 2 !important;
  color: #f5a15a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
}

/* ---------- Assignment → rich cards, single one centres large ---------- */
.ref-view-requests .ref-assignee-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-content: center !important;
}

.ref-view-requests .ref-assignee-grid article {
  background: linear-gradient(160deg, #20242b 0%, #181b21 100%) !important;
  border: 1px solid #2a2f38 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  gap: 14px !important;
  align-items: center !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.ref-view-requests .ref-assignee-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: rgb(from var(--app-accent) r g b /.4) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32) !important;
}

.ref-view-requests .ref-assignee-grid article:only-child {
  grid-column: 1 / -1 !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 26px !important;
}

.ref-view-requests .ref-assignee-grid article>span {
  /* avatar */
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  font-size: 15px !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, #ffb989, #ef7d33) !important;
  color: #241206 !important;
  box-shadow: 0 6px 16px rgb(from var(--app-accent) r g b /.28) !important;
}

.ref-view-requests .ref-assignee-grid article strong {
  font-size: 14px !important;
  color: #f2f5f8 !important;
}

.ref-view-requests .ref-assignee-grid article small {
  font-size: 11px !important;
  color: #5fe6b4 !important;
  font-weight: 650 !important;
}

/* ---------- Media → big gallery tiles that fill the body ---------- */
.ref-view-requests .ref-detail-media {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 13px !important;
  align-content: stretch !important;
}

.ref-view-requests .ref-detail-media>button {
  position: relative !important;
  height: 100% !important;
  min-height: 150px !important;
  padding: 0 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  border: 1px solid #2a2f38 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .24) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.ref-view-requests .ref-detail-media>button>img,
.ref-view-requests .ref-detail-media>button>span {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
}

.ref-view-requests .ref-detail-media>button:hover {
  transform: translateY(-3px) !important;
  border-color: rgb(from var(--app-accent) r g b /.45) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .34) !important;
}

.ref-view-requests .ref-detail-media>button:hover>img {
  transform: scale(1.05);
  transition: transform .3s ease;
}

/* ============================================================================
   Customers & Engineers: proper TABLE structure (one background card only).
   With the wrapping panel flattened, the directory reads as a data table:
   fixed table-height rows (capped so they never balloon into tall blocks on
   large screens), thin dividers, subtle hover — not stretched card-blocks.
   High specificity to beat the earlier flex:1 1 0 row-stretch rule.
   ============================================================================ */
.ref-view-customers .ref-data-panel .ref-data-table .ref-data-body .ref-data-row,
.ref-view-engineers .ref-data-panel .ref-data-table .ref-data-body .ref-data-row {
  min-height: 56px !important;
  max-height: 72px !important;
  height: auto !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  transition: background .14s ease !important;
}

.ref-view-customers .ref-data-panel .ref-data-table .ref-data-body .ref-data-row:hover,
.ref-view-engineers .ref-data-panel .ref-data-table .ref-data-body .ref-data-row:hover {
  background: rgba(255, 255, 255, .035) !important;
}

/* Request timeline: shared card treatment for modal and page detail. */
.ref-request-detail .ref-detail-body:has(.ref-detail-timeline) {
  display: block !important;
  overflow: auto !important;
  padding: 16px 22px !important;
}

.ref-request-detail .ref-detail-timeline {
  position: relative !important;
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 0 36px !important;
}

.ref-request-detail .ref-detail-timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, var(--app-accent), rgb(from var(--app-accent) r g b / .72) 58%, rgb(from var(--app-accent) r g b / .24)) !important;
}

.ref-request-detail .ref-detail-timeline article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 64px !important;
  padding: 14px 18px !important;
  border: 1px solid #2a303a !important;
  border-radius: 12px !important;
  background: #1b1f26 !important;
  box-shadow: none !important;
}

.ref-request-detail .ref-detail-timeline article>i {
  position: absolute !important;
  left: -28px !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translateY(-50%) !important;
  border: 2px solid #262b33 !important;
  border-radius: 50% !important;
  background: var(--app-accent) !important;
  box-shadow: 0 0 0 2px rgb(from var(--app-accent) r g b / .34), 0 0 0 6px rgb(from var(--app-accent) r g b / .08) !important;
}

.ref-request-detail .ref-detail-timeline article>div {
  min-width: 0 !important;
}

.ref-request-detail .ref-detail-timeline article>div>strong,
.ref-request-detail .ref-detail-timeline article>div>small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-request-detail .ref-detail-timeline article>div>strong {
  color: #f3f5f8 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.ref-request-detail .ref-detail-timeline article>div>small {
  margin-top: 7px !important;
  color: #a9b0bb !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.ref-request-detail .ref-detail-timeline article>span {
  color: #f59a4d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .ref-request-detail .ref-detail-body:has(.ref-detail-timeline) {
    padding: 14px 16px !important;
  }

  .ref-request-detail .ref-detail-timeline {
    padding-left: 30px !important;
  }

  .ref-request-detail .ref-detail-timeline article {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .ref-request-detail .ref-detail-timeline article>span {
    justify-self: start !important;
  }
}

/* Request detail fixed shell + shared three-colour tab styling. */
:root {
  --req-orange: var(--app-accent);
  --req-bg: #111317;
  --req-header: #281b18;
  --req-tabbar: #27282d;
  --req-card: #1b1f26;
  --req-card-soft: #20242b;
  --req-border: #2a303a;
  --req-text: #f3f5f8;
  --req-muted: #a9b0bb;
  --req-cyan: #63e6e6;
  --req-purple: #c3a8ff;
  --req-gold: #ffd479;
  --req-green: #5fe6b4;
  --req-header-start: #121318;
  --req-header-border: rgba(255, 255, 255, .07);
  --req-footer-bg: rgba(17, 19, 23, .96);
  --req-footer-border: rgba(255, 255, 255, .13);
  --req-label: #d7d2ec;
}

/* The request shell resolves its palette in the base stylesheet. This prevents
   portal content from painting one dark frame before light-mode overrides run. */
html[data-theme="light"] {
  --req-bg: #ffffff;
  --req-header: #ffffff;
  --req-tabbar: #ffffff;
  --req-card: #f5f7fa;
  --req-card-soft: #ffffff;
  --req-border: #dbe2ea;
  --req-text: #202936;
  --req-muted: #687386;
  --req-header-start: #ffffff;
  --req-header-border: #dbe2ea;
  --req-footer-bg: #ffffff;
  --req-footer-border: #dbe2ea;
  --req-label: #667386;
}

.ref-sr-modal {
  padding: 18px !important;
}

.ref-sr-modal-panel {
  width: min(920px, calc(100vw - 40px)) !important;
  height: min(486px, calc(100vh - 36px)) !important;
  max-height: min(486px, calc(100vh - 36px)) !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 22px !important;
  background: var(--req-bg) !important;
}

.ref-sr-modal-panel .ref-request-detail {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 74px 34px minmax(0, 1fr) 50px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 88% -20%, rgb(from var(--app-accent) r g b / .12), transparent 34%), linear-gradient(165deg, var(--req-card-soft) 0%, var(--req-bg) 100%) !important;
}

.ref-sr-modal-panel .ref-request-detail>header {
  min-height: 74px !important;
  height: 74px !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) minmax(190px, .7fr) minmax(190px, .72fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 58px 12px 22px !important;
  border-bottom: 1px solid var(--req-header-border) !important;
  background: linear-gradient(90deg, var(--req-header-start) 0%, var(--req-header) 100%) !important;
}

.ref-sr-modal-panel .ref-request-detail h2 {
  margin: 4px 8px 0 0 !important;
  color: var(--req-text) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.ref-request-detail header span,
.ref-request-detail footer>span {
  color: var(--req-label) !important;
}

.ref-sr-modal-panel .ref-detail-customer p i,
.ref-view-requests .ref-detail-customer p i {
  border-color: rgba(255, 255, 255, .86) !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
  color: #241206 !important;
  box-shadow: 0 4px 12px rgb(from var(--app-accent) r g b / .3) !important;
}

.ref-sr-modal-panel .ref-detail-tabs {
  min-height: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 22px !important;
  background: var(--req-tabbar) !important;
}

.ref-sr-modal-panel .ref-detail-tabs button,
.ref-view-requests .ref-detail-tabs button {
  min-width: 66px !important;
  min-height: 28px !important;
  border-radius: 15px !important;
  padding: 0 13px !important;
  color: var(--req-label) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.ref-sr-modal-panel .ref-detail-tabs button.active,
.ref-view-requests .ref-detail-tabs button.active {
  color: #fff !important;
  background: var(--req-orange) !important;
  box-shadow: none !important;
}

.ref-sr-modal-panel .ref-detail-body {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-sr-modal-panel .ref-request-detail>footer {
  min-height: 50px !important;
  height: 50px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(90px, auto)) minmax(150px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 20px !important;
  overflow: hidden !important;
  border-top: 1px solid var(--req-footer-border) !important;
  background: var(--req-footer-bg) !important;
}

.ref-sr-modal-panel .ref-request-detail footer button {
  justify-self: end !important;
  min-height: 34px !important;
}

.ref-sr-modal-panel .ref-detail-body:has(.ref-detail-overview),
.ref-view-requests .ref-detail-body:has(.ref-detail-overview) {
  display: block !important;
  padding: 0 !important;
}

.ref-sr-modal-panel .ref-detail-overview,
.ref-view-requests .ref-detail-overview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .98fr) minmax(300px, .82fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 14px 18px 12px !important;
  overflow: hidden !important;
}

.ref-sr-modal-panel .ref-detail-left,
.ref-view-requests .ref-detail-left {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.ref-sr-modal-panel .ref-detail-items--2,
.ref-view-requests .ref-detail-items--2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 0 !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article,
.ref-sr-modal-panel .ref-progress-card,
.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 14px 62px 14px 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, var(--req-card-soft) 0%, var(--req-card) 100%) !important;
  box-shadow: none !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article>span,
.ref-sr-modal-panel .ref-progress-card>span,
.ref-view-requests .ref-detail-items--2 article>span,
.ref-view-requests .ref-progress-card>span {
  color: #d7d2ec !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article>strong,
.ref-sr-modal-panel .ref-progress-card>strong,
.ref-view-requests .ref-detail-items--2 article>strong,
.ref-view-requests .ref-progress-card>strong {
  margin-top: 9px !important;
  color: var(--req-text) !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article>.material-symbols-rounded,
.ref-view-requests .ref-detail-items--2 article>.material-symbols-rounded {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  opacity: 1 !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article:nth-child(1)>.material-symbols-rounded,
.ref-view-requests .ref-detail-items--2 article:nth-child(1)>.material-symbols-rounded {
  color: var(--req-cyan) !important;
  background: #17323a !important;
  border-color: rgba(99, 230, 230, .3) !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article:nth-child(2)>.material-symbols-rounded,
.ref-view-requests .ref-detail-items--2 article:nth-child(2)>.material-symbols-rounded {
  color: var(--req-purple) !important;
  background: #2a2542 !important;
  border-color: rgba(195, 168, 255, .3) !important;
}

.ref-sr-modal-panel .ref-detail-items--2 article:nth-child(3)>.material-symbols-rounded,
.ref-view-requests .ref-detail-items--2 article:nth-child(3)>.material-symbols-rounded {
  color: var(--req-gold) !important;
  background: #3a2f18 !important;
  border-color: rgba(255, 212, 121, .32) !important;
}

.ref-sr-modal-panel .ref-progress-card::after,
.ref-view-requests .ref-progress-card::after {
  content: "" !important;
  position: absolute !important;
  right: -28px !important;
  top: -28px !important;
  width: 92px !important;
  height: 92px !important;
  background: radial-gradient(circle, rgba(95, 230, 180, .22), transparent 70%) !important;
}

.ref-sr-modal-panel .ref-progress-card strong,
.ref-view-requests .ref-progress-card strong {
  color: var(--req-text) !important;
}

.ref-sr-modal-panel .ref-progress-card i,
.ref-view-requests .ref-progress-card i {
  height: 7px !important;
  margin-top: 9px !important;
  background: rgba(255, 255, 255, .09) !important;
}

.ref-sr-modal-panel .ref-progress-card em,
.ref-view-requests .ref-progress-card em {
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
}

.ref-sr-modal-panel .ref-detail-map,
.ref-view-requests .ref-detail-map {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 16px !important;
  background: var(--req-card) !important;
}

.ref-sr-modal-panel .ref-detail-map iframe,
.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.ref-sr-modal-panel .ref-detail-description,
.ref-view-requests .ref-detail-description {
  grid-column: 1 / -1 !important;
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 130px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background: var(--req-card) !important;
}

.ref-sr-modal-panel .ref-detail-description span,
.ref-view-requests .ref-detail-description span {
  color: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

.ref-sr-modal-panel .ref-detail-description p,
.ref-view-requests .ref-detail-description p {
  margin: 0 !important;
  overflow: hidden !important;
  color: #d6dbe2 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-sr-modal-panel .ref-detail-body:has(.ref-detail-timeline),
.ref-view-requests .ref-detail-body:has(.ref-detail-timeline),
.ref-sr-modal-panel .ref-detail-body:has(.ref-assignee-grid),
.ref-sr-modal-panel .ref-detail-body:has(.ref-detail-media) {
  display: block !important;
  padding: 16px 22px !important;
  overflow: hidden !important;
}

.ref-sr-modal-panel .ref-detail-timeline,
.ref-view-requests .ref-detail-timeline {
  position: relative !important;
  display: grid !important;
  grid-auto-rows: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 0 0 36px !important;
}

.ref-sr-modal-panel .ref-detail-timeline::before,
.ref-view-requests .ref-detail-timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 17px !important;
  bottom: 17px !important;
  width: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, var(--req-orange), rgb(from var(--app-accent) r g b / .72) 58%, rgb(from var(--app-accent) r g b / .24)) !important;
}

.ref-sr-modal-panel .ref-detail-timeline article,
.ref-view-requests .ref-detail-timeline article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 68px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 12px !important;
  background: var(--req-card) !important;
  box-shadow: none !important;
}

.ref-sr-modal-panel .ref-detail-timeline article>i,
.ref-view-requests .ref-detail-timeline article>i {
  position: absolute !important;
  left: -28px !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translateY(-50%) !important;
  border: 2px solid #262b33 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #ffc08a, var(--req-orange)) !important;
  box-shadow: 0 0 0 2px rgb(from var(--app-accent) r g b / .34), 0 0 0 6px rgb(from var(--app-accent) r g b / .08) !important;
}

.ref-sr-modal-panel .ref-detail-timeline article>div,
.ref-view-requests .ref-detail-timeline article>div {
  min-width: 0 !important;
}

.ref-sr-modal-panel .ref-detail-timeline article>div>strong,
.ref-view-requests .ref-detail-timeline article>div>strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--req-text) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-sr-modal-panel .ref-detail-timeline article>div>small,
.ref-view-requests .ref-detail-timeline article>div>small {
  display: block !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  color: var(--req-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-sr-modal-panel .ref-detail-timeline article>span,
.ref-view-requests .ref-detail-timeline article>span {
  color: var(--req-orange) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ref-sr-modal-panel .ref-assignee-grid,
.ref-view-requests .ref-assignee-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 66px !important;
  gap: 14px !important;
  align-content: start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.ref-sr-modal-panel .ref-assignee-grid article,
.ref-view-requests .ref-assignee-grid article {
  min-width: 0 !important;
  height: 66px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 12px !important;
  background: var(--req-card) !important;
  box-shadow: none !important;
}

.ref-sr-modal-panel .ref-assignee-grid article:only-child,
.ref-view-requests .ref-assignee-grid article:only-child {
  grid-column: 1 / -1 !important;
  max-width: none !important;
}

.ref-sr-modal-panel .ref-assignee-grid article>span,
.ref-view-requests .ref-assignee-grid article>span {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border: 2px solid rgba(255, 255, 255, .86) !important;
  border-radius: 50% !important;
  background: #2b2f37 !important;
  color: #fff !important;
  font-size: 10px !important;
}

.ref-sr-modal-panel .ref-assignee-grid article strong,
.ref-view-requests .ref-assignee-grid article strong {
  color: var(--req-text) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.ref-sr-modal-panel .ref-assignee-grid article small,
.ref-view-requests .ref-assignee-grid article small {
  color: var(--req-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.ref-sr-modal-panel .ref-detail-media,
.ref-view-requests .ref-detail-media {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 76px !important;
  gap: 12px !important;
  align-content: start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-sr-modal-panel .ref-detail-media>button,
.ref-view-requests .ref-detail-media>button {
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 12px !important;
  background: var(--req-card) !important;
  box-shadow: none !important;
}

.ref-sr-modal-panel .ref-detail-media img,
.ref-view-requests .ref-detail-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 720px) {
  .ref-sr-modal-panel {
    width: calc(100vw - 24px) !important;
    height: min(560px, calc(100vh - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .ref-sr-modal-panel .ref-request-detail {
    grid-template-rows: auto 34px minmax(0, 1fr) 50px !important;
  }

  .ref-sr-modal-panel .ref-request-detail>header {
    height: auto !important;
    min-height: 92px !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding-right: 52px !important;
  }

  .ref-sr-modal-panel .ref-detail-overview {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  .ref-sr-modal-panel .ref-assignee-grid,
  .ref-sr-modal-panel .ref-detail-media {
    grid-template-columns: 1fr !important;
  }
}

/* Assignment and media tabs: rich fixed-body layouts for modal and page detail. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-layout),
.ref-request-detail .ref-detail-body:has(.ref-media-board) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 16px 22px !important;
}

.ref-assignment-layout,
.ref-media-board {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  gap: 14px !important;
  color: var(--req-text) !important;
}

.ref-assignment-layout {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
}

.ref-assignment-lead,
.ref-assignment-status,
.ref-assignment-roster,
.ref-media-hero,
.ref-media-stats article,
.ref-media-latest,
.ref-media-strip>button {
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, var(--req-card-soft) 0%, var(--req-card) 100%) !important;
  box-shadow: none !important;
}

.ref-assignment-lead {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 14px !important;
  padding: 18px !important;
  overflow: hidden !important;
}

.ref-assignment-lead-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.ref-assignment-lead-head>i,
.ref-assignment-roster p>i {
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(255, 255, 255, .86) !important;
  border-radius: 50% !important;
  background: #2b2f37 !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.ref-assignment-lead-head>i {
  width: 56px !important;
  height: 56px !important;
  color: #241206 !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
}

.ref-assignment-lead-head div,
.ref-assignment-roster p span {
  min-width: 0 !important;
}

.ref-assignment-lead-head span,
.ref-assignment-status span,
.ref-assignment-roster header span,
.ref-media-stats span,
.ref-media-latest span,
.ref-media-hero div span {
  display: block !important;
  color: #d7d2ec !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
}

.ref-assignment-lead-head strong,
.ref-assignment-status strong,
.ref-assignment-roster p strong,
.ref-media-hero div strong,
.ref-media-latest strong,
.ref-media-stats strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--req-text) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-lead-head strong {
  margin-top: 5px !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.ref-assignment-lead-head small,
.ref-assignment-roster p small,
.ref-media-hero div small {
  display: block !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  color: var(--req-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-lead-head>b,
.ref-assignment-roster p>b {
  border-radius: 999px !important;
  padding: 6px 10px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.ref-assignment-contact {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: center !important;
}

.ref-assignment-contact span,
.ref-media-latest {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  color: var(--req-muted) !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.ref-assignment-contact span .material-symbols-rounded,
.ref-media-latest .material-symbols-rounded {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
}

.ref-assignment-contact span:nth-child(1) .material-symbols-rounded,
.ref-media-stats article:nth-child(1) .material-symbols-rounded {
  color: var(--req-cyan) !important;
  background: #17323a !important;
}

.ref-assignment-contact span:nth-child(2) .material-symbols-rounded,
.ref-media-stats article:nth-child(2) .material-symbols-rounded {
  color: var(--req-purple) !important;
  background: #2a2542 !important;
}

.ref-assignment-contact span:nth-child(3) .material-symbols-rounded,
.ref-media-stats article:nth-child(3) .material-symbols-rounded,
.ref-media-latest .material-symbols-rounded {
  color: var(--req-gold) !important;
  background: #3a2f18 !important;
}

.ref-assignment-progress {
  display: grid !important;
  gap: 8px !important;
}

.ref-assignment-progress span {
  display: flex !important;
  justify-content: space-between !important;
  color: var(--req-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.ref-assignment-progress span b {
  color: var(--req-green) !important;
}

.ref-assignment-progress i {
  height: 8px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .09) !important;
}

.ref-assignment-progress em {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
}

.ref-assignment-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 90px minmax(0, 1fr) !important;
  gap: 14px !important;
}

.ref-assignment-status {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.ref-assignment-status>.material-symbols-rounded {
  grid-row: 1 / 3 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  color: var(--req-cyan) !important;
  background: #17323a !important;
  font-size: 24px !important;
}

.ref-assignment-status strong {
  grid-column: 2 !important;
  margin-top: 4px !important;
  font-size: 18px !important;
}

.ref-assignment-status small {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  color: var(--req-orange) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.ref-assignment-roster {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.ref-assignment-roster header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ref-assignment-roster header strong {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 12px !important;
}

.ref-assignment-roster>div {
  min-height: 0 !important;
  display: grid !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.ref-assignment-roster p {
  min-width: 0 !important;
  height: 48px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  padding: 7px 10px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.ref-assignment-roster p>i {
  width: 34px !important;
  height: 34px !important;
  font-size: 9px !important;
}

.ref-media-board {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
}

.ref-media-hero {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  text-align: left !important;
}

.ref-media-hero img,
.ref-media-hero>span:first-child {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  object-fit: cover !important;
  background: #171b21 !important;
}

.ref-media-hero>span:first-child .material-symbols-rounded {
  color: var(--req-orange) !important;
  font-size: 52px !important;
}

.ref-media-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 48% !important;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)) !important;
  pointer-events: none !important;
}

.ref-media-hero div {
  position: absolute !important;
  z-index: 1 !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 15px !important;
  min-width: 0 !important;
}

.ref-media-hero div span {
  width: max-content !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
}

.ref-media-hero div strong {
  margin-top: 10px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.ref-media-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 76px minmax(0, 1fr) 54px !important;
  gap: 12px !important;
}

.ref-media-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ref-media-stats article {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.ref-media-stats article .material-symbols-rounded {
  grid-row: 1 / 3 !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}

.ref-media-stats strong {
  margin-top: 3px !important;
  font-size: 15px !important;
}

.ref-media-strip {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.ref-media-strip>button {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ref-media-strip img,
.ref-media-strip>button>span:first-child {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  object-fit: cover !important;
  background: #171b21 !important;
}

.ref-media-strip>button>span:first-child .material-symbols-rounded {
  color: var(--req-orange) !important;
  font-size: 30px !important;
}

.ref-media-strip small {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  padding: 5px 8px !important;
  color: #fff !important;
  background: rgba(17, 19, 23, .72) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-media-strip .ref-media-more {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  color: #241206 !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
}

.ref-media-strip .ref-media-more strong {
  font-size: 24px !important;
  line-height: 1 !important;
}

.ref-media-strip .ref-media-more small {
  position: static !important;
  color: #241206 !important;
  background: transparent !important;
}

.ref-media-latest {
  justify-content: flex-start !important;
}

.ref-media-latest strong {
  margin-left: auto !important;
  font-size: 12px !important;
}

@media (max-width: 720px) {

  .ref-assignment-layout,
  .ref-media-board {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  .ref-assignment-contact,
  .ref-media-stats,
  .ref-media-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Request detail tab separation: assignment and media need different compositions. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-layout) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px 20px !important;
}

.ref-request-detail .ref-detail-body:has(.ref-media-board) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 13px 20px !important;
}

.ref-assignment-layout {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .98fr) minmax(250px, .82fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.ref-assignment-lead {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, rgba(99, 230, 230, .1), transparent 44%),
    linear-gradient(160deg, var(--req-card-soft) 0%, var(--req-card) 100%) !important;
}

.ref-assignment-lead-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.ref-assignment-lead-head>i {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 50% !important;
  color: #241206 !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  box-shadow: 0 6px 15px rgb(from var(--app-accent) r g b / .26) !important;
}

.ref-assignment-lead-head strong {
  max-width: 100% !important;
  margin-top: 4px !important;
  color: var(--req-text) !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-assignment-lead-head small {
  margin-top: 4px !important;
  color: var(--req-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

.ref-assignment-lead-head>b {
  align-self: start !important;
  min-width: 72px !important;
  border-radius: 999px !important;
  padding: 7px 10px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.ref-assignment-contact {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: start !important;
}

.ref-assignment-contact span {
  min-width: 0 !important;
  height: 48px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  padding: 8px 9px !important;
  color: var(--req-muted) !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.ref-assignment-contact span .material-symbols-rounded {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  font-size: 17px !important;
}

.ref-assignment-progress {
  align-self: end !important;
  display: grid !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  padding-top: 12px !important;
}

.ref-assignment-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 82px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.ref-assignment-status {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 11px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, var(--req-card-soft) 0%, var(--req-card) 100%) !important;
}

.ref-assignment-status>.material-symbols-rounded {
  grid-row: 1 / 3 !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  color: var(--req-cyan) !important;
  background: #17323a !important;
  font-size: 22px !important;
}

.ref-assignment-status strong {
  grid-column: 2 !important;
  margin-top: 3px !important;
  color: var(--req-text) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-assignment-status small {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  color: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.ref-assignment-roster {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 30px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, rgba(195, 168, 255, .09), transparent 44%),
    linear-gradient(160deg, var(--req-card-soft) 0%, var(--req-card) 100%) !important;
}

.ref-assignment-roster>div {
  min-height: 0 !important;
  display: grid !important;
  grid-auto-rows: minmax(42px, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.ref-assignment-roster p {
  min-width: 0 !important;
  height: auto !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  padding: 6px 9px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.ref-media-board {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 14px !important;
  color: var(--req-text) !important;
}

.ref-media-hero {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
  background: #171b21 !important;
}

.ref-media-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 70px minmax(0, 1fr) 52px !important;
  gap: 11px !important;
}

.ref-media-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.ref-media-stats article {
  min-height: 0 !important;
  padding: 8px 10px !important;
}

.ref-media-strip {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 11px !important;
  overflow: hidden !important;
}

.ref-media-strip>button {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 14px !important;
}

.ref-view-requests .ref-detail-body:has(.ref-assignment-layout) {
  padding: 12px 18px !important;
}

.ref-view-requests .ref-assignment-layout {
  grid-template-columns: minmax(360px, 1.06fr) minmax(270px, .78fr) !important;
  gap: 12px !important;
}

.ref-view-requests .ref-assignment-lead {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  padding: 14px !important;
}

.ref-view-requests .ref-assignment-contact span {
  height: 44px !important;
}

.ref-view-requests .ref-assignment-side {
  grid-template-rows: 78px minmax(0, 1fr) !important;
}

.ref-view-requests .ref-detail-body:has(.ref-media-board) {
  padding: 12px 18px !important;
}

.ref-view-requests .ref-media-board {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: 12px !important;
}

.ref-view-requests .ref-media-side {
  grid-template-rows: 66px minmax(0, 1fr) 48px !important;
}

.ref-sr-modal-panel .ref-assignment-layout {
  grid-template-columns: minmax(360px, 1fr) minmax(270px, .8fr) !important;
}

.ref-sr-modal-panel .ref-media-board {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
}

@media (max-width: 760px) {

  .ref-assignment-layout,
  .ref-media-board {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }

  .ref-assignment-contact,
  .ref-media-stats,
  .ref-media-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Request detail timeline alignment lock: full width cards, attached spine. */
.ref-request-detail .ref-detail-body:has(.ref-detail-timeline) {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 16px 22px !important;
}

.ref-request-detail .ref-detail-timeline {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 0 0 0 34px !important;
  box-sizing: border-box !important;
}

.ref-request-detail .ref-detail-timeline::before {
  left: 14px !important;
  top: 16px !important;
  bottom: 16px !important;
}

.ref-request-detail .ref-detail-timeline article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 58px !important;
  max-height: none !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 12px 18px !important;
}

.ref-request-detail .ref-detail-timeline article>i {
  left: -27px !important;
}

.ref-view-requests .ref-detail-body:has(.ref-detail-timeline) {
  padding: 16px 20px !important;
}

.ref-view-requests .ref-detail-timeline {
  gap: 14px !important;
  padding-left: 34px !important;
}

.ref-sr-modal-panel .ref-detail-body:has(.ref-detail-timeline) {
  padding: 16px 22px !important;
}

.ref-sr-modal-panel .ref-detail-timeline {
  gap: 14px !important;
  padding-left: 34px !important;
}

/* Request detail v2: keep assignment/media aligned without clipped side panels. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-layout) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px 20px !important;
}

.ref-assignment-layout {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(134px, .86fr) minmax(96px, .56fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.ref-assignment-lead {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: stretch !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
}

.ref-assignment-lead-head {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 12px !important;
}

.ref-assignment-lead-head>i {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
}

.ref-assignment-lead-head strong {
  font-size: 18px !important;
  line-height: 1.08 !important;
}

.ref-assignment-lead-head>b {
  min-width: 0 !important;
  max-width: 112px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-assignment-contact {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ref-assignment-contact span {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ref-assignment-progress {
  align-self: end !important;
  padding-top: 10px !important;
}

.ref-assignment-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  grid-template-rows: 1fr !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.ref-assignment-status {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  row-gap: 3px !important;
  padding: 12px !important;
}

.ref-assignment-status>.material-symbols-rounded {
  grid-row: 1 / 4 !important;
  grid-column: 1 !important;
}

.ref-assignment-status span,
.ref-assignment-status strong,
.ref-assignment-status small {
  grid-column: 2 !important;
  grid-row: auto !important;
  min-width: 0 !important;
}

.ref-assignment-status small {
  color: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-roster {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px !important;
}

.ref-assignment-roster>div {
  min-height: 0 !important;
  display: grid !important;
  grid-auto-rows: minmax(38px, 1fr) !important;
  gap: 7px !important;
  overflow: hidden !important;
}

.ref-assignment-roster p {
  min-width: 0 !important;
  min-height: 38px !important;
  height: auto !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  padding: 5px 8px !important;
}

.ref-assignment-roster p>i {
  width: 30px !important;
  height: 30px !important;
}

.ref-request-detail .ref-detail-body:has(.ref-media-board) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 13px 20px !important;
}

.ref-media-board {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.ref-media-hero {
  display: none !important;
}

.ref-media-side {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 64px minmax(0, 1fr) 50px !important;
  gap: 11px !important;
  overflow: hidden !important;
}

.ref-media-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ref-media-stats article {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  padding: 8px 10px !important;
}

.ref-media-strip {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 11px !important;
  overflow: hidden !important;
}

.ref-media-strip>button {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ref-media-strip img,
.ref-media-strip>button>span:first-child {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ref-media-strip small:not(.ref-media-more small) {
  display: none !important;
}

.ref-media-latest {
  min-width: 0 !important;
  height: 50px !important;
  padding: 9px 12px !important;
}

.ref-view-requests .ref-assignment-layout,
.ref-sr-modal-panel .ref-assignment-layout,
.ref-view-requests .ref-media-board,
.ref-sr-modal-panel .ref-media-board {
  grid-template-columns: 1fr !important;
}

.ref-view-requests .ref-detail-body:has(.ref-assignment-layout),
.ref-view-requests .ref-detail-body:has(.ref-media-board) {
  padding: 12px 18px !important;
}

.ref-view-requests .ref-media-side {
  grid-template-rows: 60px minmax(0, 1fr) 48px !important;
}

.ref-view-requests .ref-media-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  .ref-assignment-side {
    grid-template-columns: 1fr !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
  }

  .ref-media-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Request media sizing: compact metrics, larger evidence photos. */
.ref-request-detail .ref-detail-body:has(.ref-media-board) {
  padding: 10px 20px 12px !important;
}

.ref-media-side {
  grid-template-rows: 46px minmax(0, 1fr) 42px !important;
  gap: 8px !important;
}

.ref-media-stats {
  gap: 8px !important;
}

.ref-media-stats article {
  min-height: 0 !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 8px !important;
}

.ref-media-stats article .material-symbols-rounded {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

.ref-media-stats span {
  font-size: 8px !important;
  line-height: 1 !important;
}

.ref-media-stats strong {
  margin-top: 3px !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
}

.ref-media-strip {
  gap: 10px !important;
}

.ref-media-strip>button {
  border-radius: 13px !important;
}

.ref-media-latest {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  padding: 7px 11px !important;
}

.ref-media-latest .material-symbols-rounded {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

.ref-media-latest span {
  font-size: 8px !important;
}

.ref-media-latest strong {
  font-size: 11px !important;
}

.ref-view-requests .ref-detail-body:has(.ref-media-board) {
  padding: 10px 18px 12px !important;
}

.ref-view-requests .ref-media-side {
  grid-template-rows: 44px minmax(0, 1fr) 40px !important;
  gap: 8px !important;
}

.ref-view-requests .ref-media-latest {
  height: 40px !important;
  min-height: 40px !important;
}

/* Request assignment v3: compact, aligned, no clipped team card. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-layout) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 20px !important;
}

.ref-assignment-layout {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 122px minmax(92px, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-lead,
.ref-assignment-status,
.ref-assignment-roster {
  border: 1px solid var(--req-border) !important;
  border-radius: 13px !important;
  background: linear-gradient(160deg, #1e2229 0%, #191d23 100%) !important;
  box-shadow: none !important;
}

.ref-assignment-lead {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .72fr) minmax(260px, 1fr) !important;
  grid-template-rows: 1fr 30px !important;
  align-items: center !important;
  gap: 10px 14px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(99, 230, 230, .055), transparent 48%),
    linear-gradient(160deg, #1e2229 0%, #191d23 100%) !important;
}

.ref-assignment-lead-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 11px !important;
}

.ref-assignment-lead-head>i {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 50% !important;
  color: #241206 !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  box-shadow: 0 5px 13px rgb(from var(--app-accent) r g b / .22) !important;
}

.ref-assignment-lead-head span {
  color: #d7d2ec !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
}

.ref-assignment-lead-head strong {
  max-width: 100% !important;
  margin-top: 3px !important;
  color: var(--req-text) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-lead-head small {
  margin-top: 3px !important;
  color: var(--req-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-lead-head>b {
  align-self: center !important;
  max-width: 96px !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 6px 9px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-contact {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ref-assignment-contact span {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  color: var(--req-muted) !important;
  background: rgba(255, 255, 255, .03) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-contact span .material-symbols-rounded {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

.ref-assignment-progress {
  grid-column: 1 / -1 !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, .065) !important;
  padding-top: 8px !important;
}

.ref-assignment-progress span {
  display: contents !important;
  color: var(--req-muted) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.ref-assignment-progress span b {
  grid-column: 3 !important;
  justify-self: end !important;
  color: var(--req-green) !important;
  font-size: 10px !important;
}

.ref-assignment-progress i {
  grid-column: 2 !important;
  height: 7px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
}

.ref-assignment-progress em {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
}

.ref-assignment-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .76fr) minmax(260px, 1fr) !important;
  grid-template-rows: 1fr !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-status {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  gap: 3px 10px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

.ref-assignment-status>.material-symbols-rounded {
  grid-row: 1 / 4 !important;
  grid-column: 1 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: var(--req-cyan) !important;
  background: #17323a !important;
  font-size: 20px !important;
}

.ref-assignment-status span {
  grid-column: 2 !important;
  color: #d7d2ec !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
}

.ref-assignment-status strong {
  grid-column: 2 !important;
  color: var(--req-text) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-status small {
  grid-column: 2 !important;
  color: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-roster {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: linear-gradient(160deg, #22222b 0%, #1b1d25 100%) !important;
}

.ref-assignment-roster header {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.ref-assignment-roster header span {
  color: #d7d2ec !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
}

.ref-assignment-roster header strong {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 11px !important;
}

.ref-assignment-roster>div {
  min-height: 0 !important;
  display: grid !important;
  grid-auto-rows: minmax(34px, max-content) !important;
  align-content: start !important;
  gap: 7px !important;
  overflow: auto !important;
  scrollbar-width: none !important;
}

.ref-assignment-roster>div::-webkit-scrollbar {
  display: none !important;
}

.ref-assignment-roster p {
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  background: rgba(255, 255, 255, .04) !important;
}

.ref-assignment-roster p>i {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(255, 255, 255, .86) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #2b2f37 !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.ref-assignment-roster p strong,
.ref-assignment-roster p small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-roster p strong {
  color: var(--req-text) !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
}

.ref-assignment-roster p small {
  margin-top: 3px !important;
  color: var(--req-muted) !important;
  font-size: 9px !important;
}

.ref-view-requests .ref-detail-body:has(.ref-assignment-layout) {
  padding: 11px 18px !important;
}

.ref-view-requests .ref-assignment-layout {
  grid-template-rows: 112px minmax(84px, 1fr) !important;
  gap: 10px !important;
}

.ref-view-requests .ref-assignment-lead {
  grid-template-rows: 1fr 28px !important;
  padding: 11px 14px !important;
}

.ref-view-requests .ref-assignment-contact span {
  height: 36px !important;
}

.ref-view-requests .ref-assignment-side {
  gap: 10px !important;
}

.ref-sr-modal-panel .ref-assignment-layout {
  grid-template-rows: 124px minmax(92px, 1fr) !important;
}

@media (max-width: 760px) {
  .ref-assignment-lead {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 28px !important;
  }

  .ref-assignment-side {
    grid-template-columns: 1fr !important;
    grid-template-rows: 76px minmax(0, 1fr) !important;
  }

  .ref-assignment-progress {
    grid-template-columns: 118px minmax(0, 1fr) 38px !important;
  }
}

/* Request assignment v4: single-owner layout, no duplicate team slab. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-main) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 13px 20px !important;
}

.ref-assignment-layout:has(.ref-assignment-main) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 112px minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-layout--team:has(.ref-assignment-main) {
  grid-template-rows: 106px minmax(70px, .72fr) minmax(48px, .5fr) !important;
}

.ref-assignment-main,
.ref-assignment-mini,
.ref-assignment-roster--extra {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 13px !important;
  background: linear-gradient(160deg, #1e2229 0%, #181c22 100%) !important;
  box-shadow: none !important;
}

.ref-assignment-main {
  display: grid !important;
  grid-template-columns: minmax(190px, .64fr) minmax(300px, 1fr) !important;
  grid-template-rows: 1fr 28px !important;
  align-items: center !important;
  gap: 8px 12px !important;
  padding: 11px 14px !important;
  background:
    linear-gradient(90deg, rgba(99, 230, 230, .06), transparent 48%),
    linear-gradient(160deg, #1e2229 0%, #181c22 100%) !important;
}

.ref-assignment-main .ref-assignment-lead-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
}

.ref-assignment-main .ref-assignment-lead-head>i {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 50% !important;
  color: #241206 !important;
  background: linear-gradient(145deg, #ffb989, var(--req-orange)) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  box-shadow: 0 5px 12px rgb(from var(--app-accent) r g b / .24) !important;
}

.ref-assignment-main .ref-assignment-lead-head span,
.ref-assignment-mini span {
  display: block !important;
  color: #d7d2ec !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .32px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.ref-assignment-main .ref-assignment-lead-head strong {
  display: block !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  color: var(--req-text) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-main .ref-assignment-lead-head small {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  color: var(--req-muted) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-main .ref-assignment-lead-head>b {
  align-self: center !important;
  max-width: 88px !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
  color: #241206 !important;
  background: var(--req-orange) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-main .ref-assignment-contact {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ref-assignment-main .ref-assignment-contact span {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  color: var(--req-muted) !important;
  background: rgba(255, 255, 255, .03) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

.ref-assignment-main .ref-assignment-progress {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  align-self: end !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  padding-top: 7px !important;
}

.ref-assignment-main .ref-assignment-progress span {
  display: contents !important;
  color: var(--req-muted) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

.ref-assignment-main .ref-assignment-progress span b {
  grid-column: 3 !important;
  justify-self: end !important;
  color: var(--req-green) !important;
  font-size: 9px !important;
}

.ref-assignment-main .ref-assignment-progress i {
  grid-column: 2 !important;
  height: 7px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
}

.ref-assignment-main .ref-assignment-progress em {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
}

.ref-assignment-summary-grid {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-mini {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  gap: 4px 10px !important;
  padding: 12px !important;
}

.ref-assignment-mini .material-symbols-rounded {
  grid-row: 1 / 4 !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  font-size: 19px !important;
}

.ref-assignment-mini:nth-child(1) .material-symbols-rounded {
  color: var(--req-cyan) !important;
  background: #17323a !important;
}

.ref-assignment-mini:nth-child(2) .material-symbols-rounded {
  color: var(--req-purple) !important;
  background: #2a2542 !important;
}

.ref-assignment-mini:nth-child(3) .material-symbols-rounded {
  color: var(--req-gold) !important;
  background: #3a2f18 !important;
}

.ref-assignment-mini strong,
.ref-assignment-mini small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-mini strong {
  color: var(--req-text) !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
}

.ref-assignment-mini small {
  color: var(--req-muted) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}

.ref-assignment-layout--single .ref-assignment-roster,
.ref-assignment-layout--single .ref-assignment-side,
.ref-assignment-layout--single .ref-assignment-status {
  display: none !important;
}

.ref-assignment-roster--extra {
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

.ref-view-requests .ref-detail-body:has(.ref-assignment-main) {
  padding: 11px 18px !important;
}

.ref-view-requests .ref-assignment-layout:has(.ref-assignment-main) {
  grid-template-rows: 104px minmax(0, 1fr) !important;
  gap: 9px !important;
}

.ref-view-requests .ref-assignment-main {
  grid-template-rows: 1fr 26px !important;
  padding: 10px 13px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-contact span {
  height: 34px !important;
}

.ref-view-requests .ref-assignment-mini {
  padding: 10px !important;
}

.ref-sr-modal-panel .ref-assignment-layout:has(.ref-assignment-main) {
  grid-template-rows: 110px minmax(0, 1fr) !important;
}

@media (max-width: 820px) {
  .ref-assignment-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 26px !important;
  }

  .ref-assignment-summary-grid {
    grid-template-columns: 1fr !important;
    overflow: auto !important;
  }
}

/* Request assignment v5: equal rows, centered icons, no progress divider crossing content. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-main) {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px 20px !important;
}

.ref-assignment-layout:has(.ref-assignment-main) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-layout--team:has(.ref-assignment-main) {
  grid-template-rows: minmax(0, .9fr) minmax(0, .9fr) minmax(0, .55fr) !important;
}

.ref-assignment-main {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .58fr) minmax(300px, 1fr) !important;
  grid-template-rows: minmax(42px, auto) minmax(24px, auto) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 10px 12px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--req-border) !important;
  border-radius: 13px !important;
  background: linear-gradient(160deg, #1e2229 0%, #181c22 100%) !important;
}

.ref-assignment-main .ref-assignment-lead-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
}

.ref-assignment-main .ref-assignment-contact {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: center !important;
}

.ref-assignment-main .ref-assignment-progress {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}

.ref-assignment-main .ref-assignment-progress::before,
.ref-assignment-main .ref-assignment-progress::after {
  display: none !important;
  content: none !important;
}

.ref-assignment-main .ref-assignment-progress span {
  display: contents !important;
  color: var(--req-muted) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

.ref-assignment-main .ref-assignment-progress span b {
  grid-column: 3 !important;
  justify-self: end !important;
  color: var(--req-green) !important;
  font-size: 9px !important;
}

.ref-assignment-main .ref-assignment-progress i {
  grid-column: 2 !important;
  width: 100% !important;
  height: 7px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
}

.ref-assignment-main .ref-assignment-progress em {
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #6ee7a8, #22a866) !important;
}

.ref-assignment-main .ref-assignment-lead-head>i,
.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-assignment-mini .material-symbols-rounded,
.ref-assignment-roster p>i {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

.ref-assignment-main .ref-assignment-lead-head>i {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

.ref-assignment-main .ref-assignment-contact span {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

.ref-assignment-summary-grid {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-assignment-mini {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 12px !important;
  border-radius: 13px !important;
}

.ref-assignment-mini .material-symbols-rounded {
  grid-row: 1 / 4 !important;
  grid-column: 1 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  font-size: 18px !important;
}

.ref-assignment-mini span,
.ref-assignment-mini strong,
.ref-assignment-mini small {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ref-assignment-mini span {
  font-size: 8px !important;
  line-height: 1 !important;
}

.ref-assignment-mini strong {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.ref-assignment-mini small {
  font-size: 9px !important;
  line-height: 1.15 !important;
}

.ref-view-requests .ref-detail-body:has(.ref-assignment-main) {
  padding: 11px 18px !important;
}

.ref-view-requests .ref-assignment-layout:has(.ref-assignment-main),
.ref-sr-modal-panel .ref-assignment-layout:has(.ref-assignment-main) {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.ref-view-requests .ref-assignment-main {
  padding: 12px 14px !important;
}

@media (max-width: 820px) {
  .ref-assignment-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 24px !important;
  }

  .ref-assignment-main .ref-assignment-contact {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .ref-assignment-main .ref-assignment-progress {
    grid-row: 3 !important;
  }

  .ref-assignment-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Overview row click polish: all action rows clickable, orange hover, no content shift. */
.ref-view-overview button.ref-ov-watch-row,
.ref-view-overview .ref-ov-agenda-list>button {
  width: 100% !important;
  border: 1px solid #303640 !important;
  color: inherit !important;
  background: #212429 !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible,
.ref-view-overview .ref-ov-agenda-list>button:hover,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible {
  border-color: rgb(from var(--app-accent) r g b / .78) !important;
  background: #252a32 !important;
  box-shadow: inset 0 0 0 1px rgb(from var(--app-accent) r g b / .32) !important;
  outline: 0 !important;
  transform: none !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable>.material-symbols-rounded,
.ref-view-overview .ref-ov-agenda-list>button>.material-symbols-rounded {
  transition: color .16s ease !important;
  transform: none !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover>.material-symbols-rounded,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible>.material-symbols-rounded,
.ref-view-overview .ref-ov-agenda-list>button:hover>.material-symbols-rounded,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible>.material-symbols-rounded {
  color: var(--orange) !important;
  transform: none !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover *,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible *,
.ref-view-overview .ref-ov-agenda-list>button:hover *,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible * {
  transform: none !important;
}

.ref-view-overview .ref-ov-agenda-list>button {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border-radius: 12px !important;
}

/* Request assignment v6: clean stacked top card alignment for modal and page. */
.ref-request-detail .ref-detail-body:has(.ref-assignment-main) {
  padding: 12px 20px !important;
}

.ref-assignment-layout:has(.ref-assignment-main),
.ref-view-requests .ref-assignment-layout:has(.ref-assignment-main),
.ref-sr-modal-panel .ref-assignment-layout:has(.ref-assignment-main) {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.ref-assignment-main,
.ref-view-requests .ref-assignment-main,
.ref-sr-modal-panel .ref-assignment-main {
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 46px 38px 24px !important;
  align-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 16px !important;
  overflow: hidden !important;
}

.ref-assignment-main .ref-assignment-lead-head,
.ref-view-requests .ref-assignment-main .ref-assignment-lead-head,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-lead-head {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
}

.ref-assignment-main .ref-assignment-lead-head>i,
.ref-view-requests .ref-assignment-main .ref-assignment-lead-head>i,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-lead-head>i {
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
}

.ref-assignment-main .ref-assignment-lead-head>div,
.ref-view-requests .ref-assignment-main .ref-assignment-lead-head>div,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-lead-head>div {
  grid-column: 2 !important;
  min-width: 0 !important;
  align-self: center !important;
}

.ref-assignment-main .ref-assignment-lead-head>b,
.ref-view-requests .ref-assignment-main .ref-assignment-lead-head>b,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-lead-head>b {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  max-width: 104px !important;
  min-width: 0 !important;
  height: 26px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 10px !important;
  line-height: 1 !important;
}

.ref-assignment-main .ref-assignment-contact,
.ref-view-requests .ref-assignment-main .ref-assignment-contact,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.ref-assignment-main .ref-assignment-contact span,
.ref-view-requests .ref-assignment-main .ref-assignment-contact span,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact span {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-view-requests .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded {
  justify-self: center !important;
  align-self: center !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.ref-assignment-main .ref-assignment-progress,
.ref-view-requests .ref-assignment-main .ref-assignment-progress,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-progress {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  align-self: center !important;
  border-top: 0 !important;
  padding: 0 !important;
}

.ref-assignment-summary-grid,
.ref-view-requests .ref-assignment-summary-grid,
.ref-sr-modal-panel .ref-assignment-summary-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.ref-assignment-mini,
.ref-view-requests .ref-assignment-mini,
.ref-sr-modal-panel .ref-assignment-mini {
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

.ref-assignment-mini .material-symbols-rounded,
.ref-view-requests .ref-assignment-mini .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-mini .material-symbols-rounded {
  justify-self: center !important;
  align-self: center !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

@media (max-width: 820px) {

  .ref-assignment-main,
  .ref-view-requests .ref-assignment-main,
  .ref-sr-modal-panel .ref-assignment-main {
    grid-template-rows: 46px 82px 24px !important;
  }

  .ref-assignment-main .ref-assignment-contact,
  .ref-view-requests .ref-assignment-main .ref-assignment-contact,
  .ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact {
    grid-template-columns: 1fr !important;
  }

  .ref-assignment-summary-grid,
  .ref-view-requests .ref-assignment-summary-grid,
  .ref-sr-modal-panel .ref-assignment-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Overview overdue/upcoming final interaction: clickable rows, orange outline, zero movement. */
.ref-view-overview .ref-ov-watch-row.is-clickable,
.ref-view-overview button.ref-ov-watch-row.is-clickable,
.ref-view-overview .ref-ov-agenda-list>button {
  transform: none !important;
  border: 1px solid #303640 !important;
  outline: 0 !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible,
.ref-view-overview .ref-ov-agenda-list>button:hover,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible {
  transform: none !important;
  border-color: var(--orange) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px rgb(from var(--app-accent) r g b / .42) !important;
  background: #252a32 !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover *,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible *,
.ref-view-overview .ref-ov-agenda-list>button:hover *,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible * {
  transform: none !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable>.material-symbols-rounded {
  opacity: 1 !important;
  transform: none !important;
  color: #8d95a3 !important;
}

.ref-view-overview .ref-ov-watch-row.is-clickable:hover>.material-symbols-rounded,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible>.material-symbols-rounded {
  transform: none !important;
  color: var(--orange) !important;
}

/* Final alignment + interaction repair: center icon glyphs and keep clickable overview rows still. */
.ref-assignment-lead-head>i,
.ref-assignment-roster p>i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-view-requests .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-assignment-mini .material-symbols-rounded,
.ref-view-requests .ref-assignment-mini .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-mini .material-symbols-rounded,
.ref-view-overview .ref-ov-watch-row .ic,
.ref-view-overview .ref-ov-watch-row .ic .material-symbols-rounded,
.ref-view-overview .ref-ov-agenda>header>i,
.ref-view-overview .ref-ov-agenda>header>i .material-symbols-rounded,
.ref-view-overview .ref-ov-agenda-list .dt,
.ref-view-overview .ref-ov-kpi>i,
.ref-view-overview .ref-ov-kpi>i .material-symbols-rounded {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transform: none !important;
  position: static !important;
  box-sizing: border-box !important;
}

.ref-assignment-main .ref-assignment-contact span,
.ref-view-requests .ref-assignment-main .ref-assignment-contact span,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact span {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 10px !important;
}

.ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-view-requests .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  font-family: "Material Symbols Rounded" !important;
  font-size: 14px !important;
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 20 !important;
  overflow: hidden !important;
}

.ref-assignment-mini .material-symbols-rounded,
.ref-view-requests .ref-assignment-mini .material-symbols-rounded,
.ref-sr-modal-panel .ref-assignment-mini .material-symbols-rounded {
  font-size: 18px !important;
  font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 22 !important;
}

.ref-view-overview .ref-ov-watch-row,
.ref-view-overview .ref-ov-watch-row.is-clickable,
.ref-view-overview button.ref-ov-watch-row.is-clickable,
.ref-view-overview .ref-ov-agenda-list>button {
  transform: none !important;
  border: 1px solid #303640 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease !important;
}

.ref-view-overview .ref-ov-watch-row:hover,
.ref-view-overview .ref-ov-watch-row.is-clickable:hover,
.ref-view-overview .ref-ov-watch-row.is-clickable:focus-visible,
.ref-view-overview .ref-ov-agenda-list>button:hover,
.ref-view-overview .ref-ov-agenda-list>button:focus-visible {
  transform: none !important;
  border-color: var(--orange) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px rgb(from var(--app-accent) r g b / .44) !important;
  background: #252a32 !important;
}

.ref-view-overview .ref-ov-watch-row *,
.ref-view-overview .ref-ov-agenda-list>button * {
  transform: none !important;
}

/* Requests embedded detail restore: this panel is not the modal, so it needs its own compact layout. */
.ref-view-requests .ref-workspace {
  min-height: 430px !important;
}

.ref-view-requests .ref-workspace-body {
  min-height: 365px !important;
  grid-template-columns: minmax(320px, 36%) minmax(0, 1fr) !important;
  gap: 0 !important;
}

.ref-view-requests .ref-request-detail {
  height: 100% !important;
  min-height: 365px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-detail>header {
  flex: 0 0 74px !important;
  min-height: 74px !important;
  grid-template-columns: minmax(210px, 1.1fr) minmax(190px, .95fr) minmax(160px, .8fr) !important;
  gap: 14px !important;
  padding: 12px 20px 8px !important;
}

.ref-view-requests .ref-request-detail h2 {
  max-width: 100% !important;
  margin: 4px 8px 0 0 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.ref-view-requests .ref-detail-customer p,
.ref-view-requests .ref-detail-company p {
  margin-top: 4px !important;
}

.ref-view-requests .ref-detail-tabs {
  flex: 0 0 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-tabs button {
  min-width: 70px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

.ref-view-requests .ref-detail-body {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-request-detail>footer {
  flex: 0 0 52px !important;
  min-height: 52px !important;
  height: 52px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(86px, auto)) minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 20px !important;
}

.ref-view-requests .ref-request-detail footer button {
  justify-self: end !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 16px !important;
}

/* Embedded Overview tab */
.ref-view-requests .ref-detail-body:has(.ref-detail-overview) {
  display: block !important;
  padding: 12px 18px !important;
}

.ref-view-requests .ref-detail-overview {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, .92fr) !important;
  grid-template-rows: minmax(0, 1fr) 72px !important;
  gap: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-left {
  display: contents !important;
}

.ref-view-requests .ref-detail-items--2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(64px, 1fr)) !important;
  gap: 10px !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  min-height: 64px !important;
  height: 100% !important;
  padding: 11px 48px 11px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-radius: 13px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-detail-items--2 article>span,
.ref-view-requests .ref-progress-card>span {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.ref-view-requests .ref-detail-items--2 article>strong,
.ref-view-requests .ref-progress-card>strong {
  margin-top: 7px !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
}

.ref-view-requests .ref-detail-items--2 article>.material-symbols-rounded {
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  border-radius: 12px !important;
}

.ref-view-requests .ref-progress-card i {
  height: 6px !important;
  margin-top: 8px !important;
}

.ref-view-requests .ref-detail-map {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 14px !important;
}

.ref-view-requests .ref-detail-map iframe {
  height: 100% !important;
  min-height: 0 !important;
}

.ref-view-requests .ref-detail-description {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 72px !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 13px !important;
}

.ref-view-requests .ref-detail-description p {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Embedded Timeline tab */
.ref-view-requests .ref-detail-body:has(.ref-detail-timeline) {
  display: block !important;
  padding: 14px 18px !important;
}

.ref-view-requests .ref-detail-timeline {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: minmax(48px, 1fr) !important;
  gap: 9px !important;
  padding-left: 32px !important;
  margin: 0 !important;
}

.ref-view-requests .ref-detail-timeline::before {
  left: 10px !important;
  top: 8px !important;
  bottom: 8px !important;
}

.ref-view-requests .ref-detail-timeline article {
  width: 100% !important;
  min-height: 48px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
}

.ref-view-requests .ref-detail-timeline article>i {
  left: -28px !important;
}

/* Embedded Assignment tab */
.ref-view-requests .ref-detail-body:has(.ref-assignment-layout) {
  display: block !important;
  padding: 12px 18px !important;
}

.ref-view-requests .ref-assignment-layout:has(.ref-assignment-main) {
  height: 100% !important;
  grid-template-rows: minmax(116px, 1fr) minmax(86px, .85fr) !important;
  gap: 10px !important;
}

.ref-view-requests .ref-assignment-main {
  grid-template-rows: 42px 34px 20px !important;
  gap: 7px !important;
  padding: 12px 14px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-lead-head {
  grid-template-columns: 42px minmax(0, 1fr) max-content !important;
  gap: 10px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-lead-head>i {
  width: 42px !important;
  height: 42px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-contact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-contact span {
  height: 34px !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 5px 9px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-contact span .material-symbols-rounded {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  font-size: 13px !important;
}

.ref-view-requests .ref-assignment-main .ref-assignment-progress {
  grid-template-columns: 126px minmax(0, 1fr) 38px !important;
  gap: 9px !important;
}

.ref-view-requests .ref-assignment-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ref-view-requests .ref-assignment-mini {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  padding: 11px !important;
  border-radius: 13px !important;
}

.ref-view-requests .ref-assignment-mini .material-symbols-rounded {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
}

/* Embedded Media tab */
.ref-view-requests .ref-detail-body:has(.ref-media-board) {
  display: block !important;
  padding: 12px 18px !important;
}

.ref-view-requests .ref-media-board {
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-media-side {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 46px minmax(0, 1fr) 40px !important;
  gap: 9px !important;
}

.ref-view-requests .ref-media-stats {
  height: 46px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.ref-view-requests .ref-media-stats article {
  min-height: 0 !important;
  height: 46px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

.ref-view-requests .ref-media-stats article .material-symbols-rounded {
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}

.ref-view-requests .ref-media-strip {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(64px, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.ref-view-requests .ref-media-strip>button {
  min-height: 64px !important;
  height: 100% !important;
  border-radius: 12px !important;
}

.ref-view-requests .ref-media-upload {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
}

@media (max-width: 1120px) {
  .ref-view-requests .ref-detail-overview {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(150px, 1fr) 120px 66px !important;
  }

  .ref-view-requests .ref-detail-items--2,
  .ref-view-requests .ref-detail-map,
  .ref-view-requests .ref-detail-description {
    grid-column: 1 !important;
  }

  .ref-view-requests .ref-detail-map {
    grid-row: 2 !important;
  }

  .ref-view-requests .ref-detail-description {
    grid-row: 3 !important;
    height: 66px !important;
  }
}

/* Requests embedded normal-window fit: keep the detail tabs usable without F11. */
.ref-view-requests .ref-detail-items--2 article>strong,
.ref-view-requests .ref-progress-card>strong {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(14px, 1.32vw, 18px) !important;
}

.ref-view-requests .ref-detail-overview {
  grid-template-columns: minmax(0, 1.28fr) minmax(230px, .72fr) !important;
}

.ref-view-requests .ref-detail-items--2 article,
.ref-view-requests .ref-progress-card {
  padding-right: 42px !important;
}

.ref-view-requests .ref-detail-items--2 article>.material-symbols-rounded {
  width: 32px !important;
  height: 32px !important;
  right: 10px !important;
  top: 10px !important;
  font-size: 16px !important;
}

@media (max-height: 740px) {
  .reference-dashboard.ref-view-requests .reference-shell {
    padding: 10px 30px 10px !important;
  }

  .ref-view-requests .reference-topbar {
    min-height: 74px !important;
  }

  .ref-view-requests .ref-page-heading {
    min-height: 54px !important;
    margin-bottom: 8px !important;
  }

  .ref-view-requests .ref-filterbar {
    min-height: 44px !important;
    margin-bottom: 8px !important;
  }

  .ref-view-requests .ref-workspace {
    min-height: 404px !important;
  }

  .ref-view-requests .ref-workspace-header {
    min-height: 46px !important;
  }

  .ref-view-requests .ref-workspace-body {
    min-height: 338px !important;
    padding-bottom: 10px !important;
  }

  .ref-view-requests .ref-request-list {
    gap: 5px !important;
  }

  .ref-view-requests .ref-request-row {
    min-height: 54px !important;
    padding-block: 8px !important;
  }

  .ref-view-requests .ref-request-detail {
    min-height: 338px !important;
  }

  .ref-view-requests .ref-request-detail>header {
    flex-basis: 64px !important;
    min-height: 64px !important;
    padding: 9px 20px 6px !important;
  }

  .ref-view-requests .ref-request-detail h2 {
    font-size: 20px !important;
  }

  .ref-view-requests .ref-detail-tabs {
    flex-basis: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .ref-view-requests .ref-detail-tabs button {
    height: 26px !important;
    min-height: 26px !important;
  }

  .ref-view-requests .ref-request-detail>footer {
    flex-basis: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 20px !important;
  }

  .ref-view-requests .ref-detail-body:has(.ref-detail-overview),
  .ref-view-requests .ref-detail-body:has(.ref-detail-timeline),
  .ref-view-requests .ref-detail-body:has(.ref-assignment-layout),
  .ref-view-requests .ref-detail-body:has(.ref-media-board) {
    padding: 10px 18px !important;
  }

  .ref-view-requests .ref-detail-overview {
    grid-template-rows: minmax(0, 1fr) 62px !important;
    gap: 10px !important;
  }

  .ref-view-requests .ref-detail-items--2 {
    gap: 8px !important;
  }

  .ref-view-requests .ref-detail-items--2 article,
  .ref-view-requests .ref-progress-card {
    min-height: 58px !important;
    padding: 9px 40px 9px 14px !important;
  }

  .ref-view-requests .ref-detail-description {
    height: 62px !important;
    grid-template-columns: 142px minmax(0, 1fr) !important;
    padding: 10px 16px !important;
  }

  .ref-view-requests .ref-detail-description p {
    -webkit-line-clamp: 1 !important;
  }

  .ref-view-requests .ref-detail-map-label {
    transform: scale(.92) !important;
    transform-origin: top left !important;
  }

  .ref-view-requests .ref-detail-timeline {
    gap: 7px !important;
    grid-auto-rows: minmax(44px, 1fr) !important;
  }

  .ref-view-requests .ref-detail-timeline article {
    min-height: 44px !important;
    padding: 7px 12px !important;
  }

  .ref-view-requests .ref-assignment-layout:has(.ref-assignment-main) {
    grid-template-rows: minmax(104px, 1fr) minmax(76px, .78fr) !important;
    gap: 8px !important;
  }

  .ref-view-requests .ref-assignment-main {
    grid-template-rows: 38px 31px 18px !important;
    gap: 6px !important;
    padding: 10px 13px !important;
  }

  .ref-view-requests .ref-assignment-main .ref-assignment-contact span {
    height: 31px !important;
  }

  .ref-view-requests .ref-assignment-mini {
    padding: 9px !important;
  }

  .ref-view-requests .ref-media-side {
    grid-template-rows: 40px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }

  .ref-view-requests .ref-media-stats,
  .ref-view-requests .ref-media-stats article {
    height: 40px !important;
  }

  .ref-view-requests .ref-media-strip>button {
    min-height: 58px !important;
  }

  .ref-view-requests .ref-media-upload {
    height: 36px !important;
    min-height: 36px !important;
  }
}


/* ============================================================================
   Unified Timeline workspace  engineers + customers under one roof.
   Axis toggle, engineer "accounts served" rail, customer-tagged timeline chips
   and the customer mini-dashboard popup.
   ========================================================================== */
.ref-timeline-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-tl-axisbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ref-tl-axis {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--ref-border);
  border-radius: 16px;
  background: #1e2024;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.ref-tl-axis button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  padding: 9px 16px;
  color: var(--ref-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s, background .18s, box-shadow .18s;
}

.ref-tl-axis button .material-symbols-rounded {
  font-size: 17px;
}

.ref-tl-axis button span {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: 9px;
  text-align: center;
}

.ref-tl-axis button:hover {
  color: #e7e3ff;
}

.ref-tl-axis button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--app-accent-mid-2), var(--app-accent-mid));
  box-shadow: 0 8px 18px rgba(238, 132, 79, .32);
}

.ref-tl-axis button.active span {
  background: rgba(255, 255, 255, .22);
}

.ref-tl-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ref-muted);
  font-size: 9px;
}

.ref-tl-hint .material-symbols-rounded {
  color: var(--ref-violet);
  font-size: 15px;
}

/* Engineer timeline: left column stacks the operations card + accounts rail */
.ref-eng-left {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.ref-eng-left>article {
  overflow: hidden;
  border: 1px solid #2b2e34;
  border-radius: 19px;
  background: #1e2024;
}

.ref-eng-left>article>header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid #2b2e34;
}

.ref-eng-left>article>header span {
  color: var(--ref-violet);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.ref-eng-left>article>header h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

.ref-eng-left>article>header b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 14px;
  color: var(--ref-violet);
  background: #212429;
  font-size: 9px;
}

.ref-eng-accounts>div {
  max-height: 340px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3d44 transparent;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.ref-eng-accounts button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  padding: 9px 11px;
  color: inherit;
  background: #1e2024;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, background .16s, transform .16s;
}

.ref-eng-accounts button:hover {
  border-color: var(--ref-violet);
  background: #212429;
  transform: translateY(-1px);
}

.ref-eng-accounts button>i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #2b2d31, #37393e);
  color: var(--app-accent-mid);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
}

.ref-eng-accounts button strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.ref-eng-accounts button small {
  display: block;
  margin-top: 2px;
  color: var(--ref-muted);
  font-size: 8px;
}

.ref-eng-accounts button .ref-eng-open {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(238, 132, 79, .16);
  color: var(--app-accent-mid);
  font-size: 9px;
}

.ref-eng-accounts button>.material-symbols-rounded {
  color: var(--ref-muted);
  font-size: 17px;
}

.ref-eng-accounts button:hover>.material-symbols-rounded {
  color: var(--ref-violet);
}

/* Customer + SR chips inside each timeline event */
.ref-tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ref-tl-cust,
.ref-tl-sr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #2b2e34;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  background: #212429;
}

.ref-tl-cust {
  color: var(--app-accent-mid);
}

.ref-tl-cust .material-symbols-rounded {
  font-size: 12px;
}

.ref-tl-cust:hover {
  border-color: var(--ref-violet);
  background: rgba(238, 132, 79, .12);
}

.ref-tl-cust.static {
  cursor: default;
}

.ref-tl-sr {
  color: #cfd0d6;
}

.ref-tl-sr:hover {
  border-color: #4a4d54;
  color: #fff;
}

.ref-engineer-profile-timeline>div {
  max-height: 560px;
}

/* Customer mini-dashboard popup (reuses CustomerProfile inside a modal shell) */
.ref-cust-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ref-cust-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 11, 13, .62);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.ref-cust-modal-panel {
  position: relative;
  width: min(1040px, 96vw);
  max-height: 92vh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3d44 transparent;
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  animation: ref-cust-pop .22s ease;
}

.ref-cust-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
}

.ref-cust-modal-close:hover {
  background: rgba(0, 0, 0, .5);
}

.ref-cust-modal-panel .ref-customer-profile {
  border-radius: 26px;
}

.ref-cust-modal-panel .ref-customer-profile>header {
  padding-right: 66px;
}

@keyframes ref-cust-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 820px) {
  .ref-timeline-workspace .ref-engineer-profile-grid {
    grid-template-columns: 1fr;
  }

  .ref-cust-modal {
    padding: 10px;
  }

  .ref-cust-modal-panel {
    width: 100%;
    max-height: 94vh;
  }

  .ref-tl-axis {
    width: 100%;
  }

  .ref-tl-axis button {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================================
   Timeline showcase — card gallery (clients & crew as cards you drop into).
   ========================================================================== */
.tl-galhead {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.tl-galhead h2 {
  font-size: 22px;
  letter-spacing: -.4px
}

.tl-galhead p {
  margin: 4px 0 0;
  color: var(--ref-muted);
  font-size: 12px
}

.tl-seg {
  margin-left: auto;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--ref-border);
  border-radius: 13px;
  background: #1e2024
}

.tl-seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ref-muted);
  font-weight: 700;
  font-size: 12.5px;
  padding: 9px 15px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .16s, background .16s
}

.tl-seg button .material-symbols-rounded {
  font-size: 17px
}

.tl-seg button b {
  font-family: inherit;
  font-size: 11px;
  opacity: .85;
  font-weight: 700
}

.tl-seg button:not(.on):hover {
  color: #e7e3ff
}

.tl-seg button.on {
  color: #1b130c;
  background: linear-gradient(135deg, var(--app-accent-mid-2), var(--app-accent-mid));
  box-shadow: 0 6px 16px rgba(238, 132, 79, .3)
}

.tl-grid {
  display: grid;
  gap: 16px
}

.tl-grid.cols4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.tl-grid.cols3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width:1200px) {
  .tl-grid.cols4 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:1024px) {

  .tl-grid.cols4,
  .tl-grid.cols3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {

  .tl-grid.cols4,
  .tl-grid.cols3 {
    grid-template-columns: 1fr
  }
}

.tl-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--ref-border);
  border-radius: 20px;
  padding: 0;
  color: inherit;
  background: linear-gradient(180deg, #212429, #1a1c1f);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s;
  opacity: 0;
  transform: translateY(14px);
  animation: tl-rise .5s cubic-bezier(.2, .7, .2, 1) forwards
}

@keyframes tl-rise {
  to {
    opacity: 1;
    transform: none
  }
}

.tl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  background: linear-gradient(135deg, var(--tint), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.tl-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .44), 0 0 40px -12px var(--tint)
}

.tl-card:hover::before {
  opacity: 1
}

.tl-wash {
  position: absolute;
  right: -40px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--tint), transparent 66%);
  opacity: .16;
  transition: opacity .2s
}

.tl-card:hover .tl-wash {
  opacity: .3
}

.tl-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid
}

.tl-badge .material-symbols-rounded {
  font-size: 12px
}

.tl-badge.live {
  color: #f2b84c;
  border-color: rgba(242, 184, 76, .4);
  background: rgba(242, 184, 76, .12)
}

.tl-badge.live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2b84c;
  box-shadow: 0 0 8px #f2b84c;
  animation: tl-pulse 2s infinite
}

.tl-badge.top {
  color: var(--ref-violet);
  border-color: rgba(238, 132, 79, .4);
  background: rgba(238, 132, 79, .1)
}

@keyframes tl-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 184, 76, .5)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(242, 184, 76, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(242, 184, 76, 0)
  }
}

.tl-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px
}

.tl-medal {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  font-style: normal;
  color: #12130f;
  background: linear-gradient(145deg, var(--tint), #e7e3da);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35)
}

.tl-cid {
  min-width: 0;
  flex: 1
}

.tl-cid strong {
  display: block;
  font-size: 16px;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tl-cid small {
  display: block;
  font-size: 10px;
  color: var(--ref-muted);
  letter-spacing: .03em;
  margin-top: 3px
}

.tl-ring {
  position: relative;
  width: 50px;
  height: 50px;
  flex: none
}

.tl-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.tl-trail {
  position: relative;
  height: 56px;
  margin: 2px 6px 0
}

.tl-trail svg {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible
}

.tl-cap {
  position: absolute;
  left: 14px;
  bottom: 0;
  font-size: 9px;
  font-style: normal;
  color: #6b6f78
}

.tl-cap.r {
  left: auto;
  right: 14px
}

.tl-pz {
  animation: tl-zap 2.4s infinite
}

@keyframes tl-zap {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.tl-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 12px;
  background: #2b2e34;
  border-top: 1px solid #2b2e34
}

.tl-stats>div {
  background: #1a1c1f;
  padding: 11px 6px;
  text-align: center
}

.tl-stats b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.tl-stats span {
  display: block;
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ref-muted);
  margin-top: 3px
}

.tl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ref-border);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ref-muted);
  transition: color .2s, background .2s
}

.tl-cta .material-symbols-rounded {
  font-size: 17px;
  transition: transform .2s, color .2s
}

.tl-card:hover .tl-cta {
  color: #f0ede6;
  background: linear-gradient(90deg, transparent, rgba(238, 132, 79, .06))
}

.tl-card:hover .tl-cta .material-symbols-rounded {
  transform: translateX(4px);
  color: var(--ref-violet)
}

/* engineer route reused inside the customer-modal shell */
.ref-cust-modal-panel .ref-engineer-profile {
  border-radius: 26px
}

.ref-cust-modal-panel .ref-engineer-profile>header {
  padding-right: 70px
}

@media (prefers-reduced-motion:reduce) {
  .tl-card {
    opacity: 1;
    transform: none;
    animation: none
  }

  .tl-pz,
  .tl-badge.live i {
    animation: none
  }
}

/* ---- Timeline cards: inline chips (rank + status), fixes badge/ring overlap ---- */
.tl-top {
  align-items: flex-start
}

.tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px
}

.tl-chips em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--ref-border);
  color: var(--ref-muted);
  background: #15181e
}

.tl-chips .material-symbols-rounded {
  font-size: 12px
}

.tl-rank.r1 {
  color: #12130f;
  background: linear-gradient(135deg, #ffd479, #f2a54f);
  border-color: transparent
}

.tl-rank.r2 {
  color: #dfe2e8;
  background: #2b2f36;
  border-color: #3a3f47
}

.tl-rank.r3 {
  color: #e6b58c;
  background: rgba(206, 142, 92, .16);
  border-color: rgba(206, 142, 92, .35)
}

.tl-live {
  color: #f2b84c;
  border-color: rgba(242, 184, 76, .4);
  background: rgba(242, 184, 76, .12)
}

.tl-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f2b84c;
  box-shadow: 0 0 6px #f2b84c;
  animation: tl-pulse 2s infinite
}

.tl-card.ranked {
  border-color: rgba(238, 132, 79, .32)
}

.tl-morewrap {
  display: flex;
  justify-content: center;
  margin-top: 20px
}

.tl-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid var(--ref-border);
  border-radius: 12px;
  background: #1e2024;
  color: #e8e5de;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: transform .16s, border-color .16s, background .16s
}

.tl-loadmore b {
  font-weight: 600;
  font-size: 11px;
  color: var(--ref-muted)
}

.tl-loadmore:hover {
  border-color: var(--ref-violet);
  background: #212429;
  transform: translateY(-1px)
}

/* ============================================================================
   Customer mini-dashboard modal (premium) — tld-* namespace.
   ========================================================================== */
.ref-cust-modal-panel.tld {
  background: #17191d;
  color: #eeece6;
  padding: 0
}

.tld-head {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 64px 22px 24px;
  color: #fff;
  background: linear-gradient(120deg, #20242c, #2b313a 62%, #15171b)
}

.tld-head::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tint), transparent 60%);
  opacity: .5;
  pointer-events: none
}

.tld-head>* {
  position: relative
}

.tld-medal {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  font-style: normal;
  color: #12130f;
  background: linear-gradient(145deg, var(--tint), #e7e3da);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
  border: 2px solid rgba(255, 255, 255, .8)
}

.tld-htxt {
  min-width: 0
}

.tld-eye {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f0cfb2;
  font-weight: 700
}

.tld-head h2 {
  margin: 5px 0 7px;
  font-size: 25px;
  letter-spacing: -.5px;
  color: #fff
}

.tld-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.tld-tags b {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .3);
  color: #e6d9cd
}

.tld-hero {
  display: grid;
  justify-items: center;
  gap: 5px
}

.tld-hero small {
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6d4c6
}

.tld-bigring {
  position: relative;
  width: 72px;
  height: 72px
}

.tld-bigring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff
}

.tld-bigring b small {
  font-size: 10px;
  color: #cfd0d6;
  font-weight: 700
}

.tld-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  padding: 16px 22px 6px
}

.tld-k {
  position: relative;
  border: 1px solid #2b2e34;
  border-radius: 13px;
  padding: 11px 12px 11px 15px;
  background: #1c1f24;
  overflow: hidden
}

.tld-k::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tint);
  opacity: .5
}

.tld-k.hi::before {
  opacity: 1
}

.tld-kl {
  display: block;
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8b8f99
}

.tld-kv {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  font-weight: 800;
  color: #f2efe9;
  font-variant-numeric: tabular-nums
}

.tld-k.hi .tld-kv {
  color: var(--tint)
}

.tld-pipe {
  margin: 8px 22px 4px;
  border: 1px solid #2b2e34;
  border-radius: 14px;
  background: #1c1f24;
  padding: 13px 16px
}

.tld-pipe-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

.tld-pipe-h b {
  font-size: 11px;
  color: #8b8f99;
  font-weight: 600
}

.tld-bar {
  display: flex;
  height: 12px;
  border-radius: 7px;
  overflow: hidden;
  background: #12141a;
  gap: 2px
}

.tld-bar i {
  display: block;
  height: 100%;
  min-width: 3px
}

.tld-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px
}

.tld-leg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #b9bcc4
}

.tld-leg i {
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.tld-leg b {
  color: #fff;
  font-weight: 700
}

.tld-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 12px;
  padding: 8px 22px 22px
}

.tld-card {
  border: 1px solid #2b2e34;
  border-radius: 16px;
  background: #1c1f24;
  overflow: hidden
}

.tld-card>h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid #2b2e34;
  color: #f2efe9
}

.tld-card>h3 .tld-eye {
  display: block;
  margin-bottom: 3px;
  color: var(--tint)
}

.tld-card>h3 b {
  font-size: 11px;
  color: var(--tint);
  background: #17191d;
  padding: 3px 9px;
  border-radius: 8px;
  font-weight: 700
}

.tld-list,
.tld-tl {
  max-height: 344px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a404a transparent
}

.tld-sr {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #22262e;
  background: transparent;
  color: inherit;
  padding: 11px 15px;
  cursor: pointer
}

.tld-sr:last-child {
  border-bottom: 0
}

.tld-sr:hover {
  background: #20242c
}

.tld-sr>i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-style: normal;
  background: rgba(91, 177, 230, .14);
  color: #5bb1e6
}

.tld-sr>i.complete {
  background: rgba(84, 200, 121, .14);
  color: #54c879
}

.tld-sr>i.progress {
  background: rgba(242, 184, 76, .14);
  color: #f2b84c
}

.tld-sr>i.cancelled {
  background: rgba(130, 130, 140, .14);
  color: #8b8f99
}

.tld-sr>span {
  min-width: 0
}

.tld-sr strong {
  display: block;
  font-size: 12px;
  font-weight: 700
}

.tld-sr small {
  display: block;
  font-size: 10.5px;
  color: #8b8f99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tld-srt {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px
}

.tld-tl {
  padding: 6px 4px
}

.tld-ev {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 11px;
  padding: 11px 15px
}

.tld-ev::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 27px;
  bottom: -4px;
  width: 1px;
  background: #2b2e34
}

.tld-ev:last-child::before {
  display: none
}

.tld-bud {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05)
}

.tld-ev strong {
  display: block;
  font-size: 12px;
  font-weight: 700
}

.tld-ds {
  display: block;
  font-size: 10.5px;
  color: #8b8f99;
  margin-top: 2px
}

.tld-ref {
  display: block;
  font-size: 9.5px;
  color: #5c616b;
  margin-top: 3px
}

.tld-ev time {
  font-size: 10px;
  color: #8b8f99;
  white-space: nowrap
}

@media(max-width:820px) {
  .tld-head {
    grid-template-columns: auto 1fr;
    padding-right: 56px
  }

  .tld-hero {
    display: none
  }

  .tld-kpis {
    grid-template-columns: repeat(3, 1fr)
  }

  .tld-grid {
    grid-template-columns: 1fr
  }
}

/* ---- Global "back to top" (all routes except /dashboard) ---- */
.app-gotop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #1b130c;
  background: linear-gradient(145deg, var(--app-accent-mid-2), var(--app-accent-mid));
  box-shadow: 0 12px 26px rgba(238, 132, 79, .4), 0 2px 6px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .2s
}

.app-gotop svg {
  width: 22px;
  height: 22px
}

.app-gotop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto
}

.app-gotop:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px rgba(238, 132, 79, .5), 0 2px 6px rgba(0, 0, 0, .3)
}

.app-gotop:active {
  transform: translateY(0) scale(.96)
}

@media (prefers-reduced-motion:reduce) {
  .app-gotop {
    transition: opacity .2s ease
  }

  .app-gotop.show {
    transform: none
  }

  .app-gotop:hover {
    transform: none
  }
}

/* ---- Pop-up dashboards: fixed size, no internal scrolling ---- */
.ref-cust-modal-panel {
  overflow: hidden
}

.tld-list,
.tld-tl {
  max-height: none;
  overflow: hidden
}

.ref-cust-modal-panel .ref-eng-accounts>div,
.ref-cust-modal-panel .ref-profile-timeline>div,
.ref-cust-modal-panel .ref-engineer-profile-timeline>div {
  max-height: none;
  overflow: hidden
}

.tld-more {
  padding: 9px 15px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ref-muted);
  border-top: 1px solid var(--line-soft)
}

/* ---- Engineer drill-down: clickable account chips + rows (reuses acct card) ---- */
.ref-acct-eng-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  color: #ffce9e;
  background: rgb(from var(--app-accent) r g b /.14);
  border: 1px solid rgb(from var(--app-accent) r g b /.28);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s
}

.ref-acct-eng-chip:hover {
  background: rgb(from var(--app-accent) r g b /.24);
  border-color: rgb(from var(--app-accent) r g b /.5);
  transform: translateY(-1px)
}

.ref-acct-eng-chip em {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .28);
  color: #ffd9b3;
  font-size: 8px
}

.ref-acct-req-row[role="button"] {
  cursor: pointer
}

.ref-acct-req-row[role="button"]:hover {
  background: rgba(255, 255, 255, .035)
}

/* ============================================================================
   In-app report preview (PDF viewer / Excel data preview) with Download action.
   ========================================================================== */
.ref-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px
}

.ref-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(9, 10, 13, .7);
  backdrop-filter: blur(4px);
  cursor: pointer
}

.ref-preview-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 96vw);
  height: min(880px, 92vh);
  border: 1px solid var(--ref-border);
  border-radius: 18px;
  background: #17191d;
  box-shadow: 0 44px 100px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: ref-cust-pop .22s ease
}

.ref-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ref-border);
  background: linear-gradient(180deg, #20242c, #1a1c1f)
}

.ref-preview-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}

.ref-preview-title>i {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px
}

.ref-preview-title>i .material-symbols-rounded {
  font-size: 20px
}

.ref-preview-title>i.pdf {
  color: #ff6b6b;
  background: rgba(255, 107, 107, .13)
}

.ref-preview-title>i.xls {
  color: #54c879;
  background: rgba(84, 200, 121, .13)
}

.ref-preview-title span {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ref-muted)
}

.ref-preview-title h3 {
  margin: 3px 0 0;
  font-size: 15px;
  color: #f2efe9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw
}

.ref-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none
}

.ref-preview-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--app-accent-mid-2), var(--app-accent-mid));
  color: #1b130c;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(238, 132, 79, .3)
}

.ref-preview-download:hover {
  filter: brightness(1.06)
}

.ref-preview-download .material-symbols-rounded {
  font-size: 17px
}

.ref-preview-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ref-border);
  border-radius: 11px;
  background: #1e2024;
  color: #c7c4d2;
  cursor: pointer
}

.ref-preview-close:hover {
  background: #262a30
}

.ref-preview-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #0f1113;
  display: flex
}

.ref-preview-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #525659
}

.ref-preview-loading {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ref-muted);
  font-size: 11px
}

.ref-preview-loading span {
  width: 26px;
  height: 26px;
  border: 3px solid #2b2e34;
  border-top-color: var(--ref-violet);
  border-radius: 50%;
  animation: ref-spin .8s linear infinite
}

.ref-xlsp {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #17191d
}

.ref-xlsp-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  background: #1a1c1f;
  border-bottom: 1px solid var(--ref-border);
  overflow-x: auto;
  scrollbar-width: thin
}

.ref-xlsp-tabs button {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  padding: 8px 14px;
  background: transparent;
  color: var(--ref-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer
}

.ref-xlsp-tabs button.on {
  color: #f2efe9;
  background: #20242c;
  border-color: var(--ref-border)
}

.ref-xlsp-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: #3a404a transparent
}

.ref-xlsp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px
}

.ref-xlsp-kpis>div {
  border: 1px solid var(--ref-border);
  border-left: 3px solid var(--ref-violet);
  border-radius: 11px;
  padding: 10px 12px;
  background: #1c1f24
}

.ref-xlsp-kpis span {
  display: block;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ref-muted)
}

.ref-xlsp-kpis strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  font-weight: 800;
  color: #f2efe9
}

.ref-xlsp-sec {
  margin-bottom: 18px
}

.ref-xlsp-sec h5 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ref-violet)
}

.ref-xlsp-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ref-border);
  border-radius: 10px;
  scrollbar-width: thin
}

.ref-xlsp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: auto
}

.ref-xlsp-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 9px 12px;
  background: #1e2430;
  color: #e7e4de;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--ref-border)
}

/* wrap long text so wide sheets (e.g. Assessment) fit instead of overflowing */
.ref-xlsp-table td {
  padding: 8px 12px;
  color: #cfccd6;
  border-bottom: 1px solid #22262e;
  white-space: normal;
  vertical-align: top;
  max-width: 260px;
  overflow-wrap: anywhere;
  line-height: 1.4
}

.ref-xlsp-table td:first-child,
.ref-xlsp-table th:first-child {
  white-space: nowrap;
  color: #8a8896;
  width: 34px
}

.ref-xlsp-table tbody tr:nth-child(even) {
  background: #1b1e23
}

.ref-xlsp-table .ref-xlsp-bar {
  white-space: nowrap
}

.ref-xlsp-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 130px
}

.ref-xlsp-bar>i {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: #2b2e34;
  overflow: hidden
}

.ref-xlsp-bar em {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--app-accent-mid-2), var(--app-accent-mid))
}

.ref-xlsp-bar b {
  font-size: 10px;
  color: var(--ref-muted);
  font-variant-numeric: tabular-nums
}

@media(max-width:700px) {
  .ref-preview-title h3 {
    max-width: 38vw
  }

  .ref-preview-download {
    padding: 9px 12px
  }
}

.ref-acct-eng-more {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ref-muted);
  background: #212429;
  border: 1px solid #2b2e34
}

/* Keep the drill-down header/stats from being flex-shrunk (which clipped the name) */
.ref-acct-modal>section>header,
.ref-acct-modal>section>.ref-acct-stats {
  flex-shrink: 0;
}

/* PDF preview rendered as a site-themed document (matches the Excel preview) */
.ref-docp .ref-xlsp-body {
  padding: 0
}

.ref-docp-sheet {
  padding: 18px 20px
}

.ref-docp-sheet:not(:last-child) {
  border-bottom: 1px solid var(--ref-border)
}

.ref-docp-band {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  padding: 12px 15px;
  border-radius: 13px;
  background: linear-gradient(120deg, #20242c, #2a2f37);
  border: 1px solid var(--ref-border)
}

.ref-docp-band>i {
  width: 4px;
  align-self: stretch;
  min-height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--app-accent-mid-2), var(--app-accent-mid))
}

.ref-docp-band h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #f2efe9;
  letter-spacing: -.2px
}

/* Compact Timeline cards so two rows (8 cards) fit on one screen */
.tl-top {
  padding: 13px 15px 8px
}

.tl-medal {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 12px
}

.tl-cid strong {
  font-size: 14.5px
}

.tl-trail {
  height: 40px;
  margin-top: 0
}

.tl-trail svg {
  height: 40px
}

.tl-cap {
  font-size: 8.5px
}

.tl-stats>div {
  padding: 7px 6px
}

.tl-stats b {
  font-size: 15px
}

.tl-stats span {
  font-size: 8px;
  margin-top: 2px
}

.tl-cta {
  padding: 8px 15px
}

.tl-grid {
  gap: 14px
}

/* Tighten so 8 cards + "Load more" all fit on first screen */
.tl-galhead {
  margin-bottom: 8px
}

.tl-morewrap {
  margin-top: 10px
}

.tl-top {
  padding: 11px 15px 7px
}

.tl-trail {
  height: 34px
}

.tl-trail svg {
  height: 34px
}

.tl-stats>div {
  padding: 6px 6px
}

.tl-cta {
  padding: 7px 15px
}

/* Field crew (3-up) has fewer cards — let them breathe and fill the page,
   while Client sites (4-up) stay compact so 8 fit on one screen. */
.tl-grid.cols3 .tl-top {
  padding: 18px 18px 12px
}

.tl-grid.cols3 .tl-medal {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 13px
}

.tl-grid.cols3 .tl-cid strong {
  font-size: 16px
}

.tl-grid.cols3 .tl-trail {
  height: 60px
}

.tl-grid.cols3 .tl-trail svg {
  height: 60px
}

.tl-grid.cols3 .tl-stats>div {
  padding: 13px 8px
}

.tl-grid.cols3 .tl-stats b {
  font-size: 17px
}

.tl-grid.cols3 .tl-stats span {
  font-size: 8.5px;
  margin-top: 3px
}

.tl-grid.cols3 .tl-cta {
  padding: 13px 16px
}

/* Field crew: dial back to a comfortable middle size (was too tall) */
.tl-grid.cols3 .tl-top {
  padding: 15px 16px 9px
}

.tl-grid.cols3 .tl-medal {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 12.5px
}

.tl-grid.cols3 .tl-trail {
  height: 46px
}

.tl-grid.cols3 .tl-trail svg {
  height: 46px
}

.tl-grid.cols3 .tl-stats>div {
  padding: 10px 8px
}

.tl-grid.cols3 .tl-stats b {
  font-size: 16px
}

.tl-grid.cols3 .tl-cta {
  padding: 10px 16px
}

/* Map selected-request: show each stage's date on the progress graph */
.ref-sr-progress-steps--timed span time {
  display: block;
  margin-top: 2px;
  font-size: 6.5px;
  line-height: 1.2;
  color: var(--ref-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-height: 8px
}

.ref-sr-progress-steps--timed span.done time {
  color: #c6b09a
}

/* Map SR list: show ~5 at first, scroll for the rest (seamless) */
.ref-map-request-list {
  max-height: 236px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: #3a3d44 transparent
}

.ref-map-request-list::-webkit-scrollbar {
  width: 6px
}

.ref-map-request-list::-webkit-scrollbar-thumb {
  background: #3a3d44;
  border-radius: 6px
}

/* Map SR list: fixed card height so exactly 5 show (no 6th sliver), scroll for rest */
.ref-map-request-list {
  max-height: 270px
}

.ref-map-request-list button {
  min-height: 50px;
  height: 50px
}

/* Selected-request: details grid fills the card after removing the activity feed */
.ref-map-sr-panel .ref-sr-details {
  margin-top: 16px
}

.ref-sr-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px
}

.ref-sr-detail-grid>div {
  min-width: 0;
  border: 1px solid #2b2e34;
  border-radius: 11px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, .025)
}

.ref-sr-detail-grid small {
  display: block;
  color: var(--ref-muted);
  font-size: 7.5px;
  letter-spacing: .04em;
  text-transform: uppercase
}

.ref-sr-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ref-map-sr-panel .ref-sr-media,
.ref-map-sr-panel .ref-sr-engineers {
  margin-top: 16px
}

/* Map SR list: hard-lock to exactly 5 cards (48px each), no 6th sliver */
.reference-dashboard .ref-map-request-list {
  gap: 6px !important;
  max-height: 264px !important
}

.reference-dashboard .ref-map-request-list>button {
  height: 48px !important;
  min-height: 48px !important
}

/* Selected-request: 4 detail boxes, tightened so the card fits with no scroll */
.ref-map-sr-panel {
  overflow: hidden
}

.ref-map-sr-panel .ref-sr-media,
.ref-map-sr-panel .ref-sr-engineers,
.ref-map-sr-panel .ref-sr-details {
  margin-top: 13px
}

.ref-sr-detail-grid {
  margin-top: 8px
}

.ref-sr-detail-grid>div {
  padding: 8px 10px
}

/* ===== FINAL map SR-list lock: exactly 5 cards, no 6th sliver =====
   Beats the earlier clamp(64px) / flex:1 rules via higher specificity. */
.reference-dashboard.ref-view-map .ref-map-browse {
  align-self: start !important;
  height: auto !important;
  max-height: none !important
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list {
  flex: none !important;
  gap: 8px !important;
  max-height: 332px !important;
  padding-bottom: 0 !important;
  overflow-y: auto !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  box-sizing: border-box !important;
  min-height: 60px !important;
  height: 60px !important
}

/* Show the full status label in the selected-request header (was capped at 76px) */
.ref-map-sr-panel .ref-sr-head .ref-status {
  max-width: none !important;
  overflow: visible !important
}

/* Restore the SR list to its natural, good-looking fill with a hidden (seamless) scroll */
.reference-dashboard.ref-view-map .ref-map-browse {
  align-self: stretch !important;
  height: auto !important;
  max-height: none !important
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list {
  flex: 1 1 auto !important;
  gap: 8px !important;
  max-height: none !important;
  padding-bottom: 6px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  height: auto !important;
  min-height: 64px !important;
  box-sizing: border-box !important
}

/* FINAL: exactly 5 whole SR cards, no partial, no scroll — normal & fullscreen.
   Card locked to 64px (overrides the vh-based clamp), list capped to 5*64 + 4*8 = 352. */
.reference-dashboard.ref-view-map .ref-map-browse {
  align-self: start !important;
  height: auto !important;
  max-height: none !important
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list {
  flex: none !important;
  gap: 8px !important;
  max-height: 352px !important;
  overflow: hidden !important;
  padding-bottom: 0 !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  box-sizing: border-box !important
}

/* Keep the clean 5-card window, but allow seamless scrolling to the rest.
   Hidden scrollbar + scroll-snap so it always rests on whole cards. */
.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: y proximity !important;
  overscroll-behavior: contain !important
}

.reference-dashboard.ref-view-map .ref-map-browse .ref-map-request-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  scroll-snap-align: start !important
}

/* Selected SR card: normal look (no lighter "glow" wash) + a crisp accent bar */
.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card.active {
  background: #222429 !important;
  border: 1px solid rgba(255, 255, 255, .05) !important;
  box-shadow: inset 3px 0 0 var(--app-accent-mid) !important;
  transform: none !important;
}

/* Give the SR number room to show in full (was ellipsis-clipped) */
.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 9px 12px !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card>.ref-request-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card strong {
  font-size: 12px !important;
  letter-spacing: -.2px !important
}

.reference-dashboard.ref-view-map .ref-map-request-list>button.ref-map-request-card small {
  font-size: 10px !important
}

.reference-dashboard.ref-view-map .ref-map-request-card .ref-status {
  max-width: none !important;
  font-size: 8px !important;
  padding: 4px 7px !important
}

/* Selected-request: field media in a single row of 4, so no section gets half-cut */
.ref-map-sr-panel .ref-sr-media-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important
}

.ref-map-sr-panel .ref-sr-media-grid>button {
  height: 60px !important;
  position: relative
}

.ref-sr-media-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 9px;
  letter-spacing: .02em
}

/* seamless: fits with no scroll; if it ever overflows, hidden-scroll instead of a chopped section */
.ref-map-sr-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important
}

.ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important
}

/* Brighter filter text (triggers + dropdown options) — all pages */
.reference-dashboard .ref-filter-trigger {
  color: #e4e5ec
}

.reference-dashboard .ref-filter-trigger .material-symbols-rounded {
  color: #c4c6d1
}

.reference-dashboard .ref-filter-menu>div>button {
  color: #dcdde5
}

.reference-dashboard .ref-filter-menu>div>button strong {
  color: #f1f2f6
}

.reference-dashboard .ref-filter-menu>div>button small {
  color: #adaeba
}

.reference-dashboard .ref-filter-menu>div>button:hover,
.reference-dashboard .ref-filter-menu>div>button.selected,
.reference-dashboard .ref-filter-menu>div>button:hover strong,
.reference-dashboard .ref-filter-menu>div>button.selected strong {
  color: var(--ref-violet)
}

.reference-dashboard .ref-filter-menu>label input {
  color: #e6e7ef
}

.reference-dashboard .ref-filter-menu>label input::placeholder {
  color: #9a9caa
}

/* Timeline: move the Client sites / Field crew toggle up next to the filters
   (reserve room on the filter row, pull the toggle onto it) */
.reference-dashboard.ref-view-timeline .ref-filterbar {
  margin-right: 270px
}

.reference-dashboard.ref-view-timeline .tl-galhead {
  margin-top: -50px;
  margin-bottom: 16px;
  min-height: 40px;
  align-items: center
}

@media(max-width:1040px) {
  .reference-dashboard.ref-view-timeline .ref-filterbar {
    margin-right: 0
  }

  .reference-dashboard.ref-view-timeline .tl-galhead {
    margin-top: 10px
  }
}

/* Revert the toggle-into-filterbar move (it hid the Client/Field toggle) */
.reference-dashboard.ref-view-timeline .ref-filterbar {
  margin-right: 0 !important
}

.reference-dashboard.ref-view-timeline .tl-galhead {
  margin-top: 10px !important;
  margin-bottom: 12px !important
}

/* Timeline filters: place Client sites / Field crew inline with the three filters. */
.reference-dashboard.ref-view-timeline .reference-content>.ref-filterbar.ref-filterbar--timeline {
  grid-template-columns: max-content minmax(140px, .85fr) minmax(220px, 1.25fr) minmax(170px, .9fr) max-content !important;
  column-gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  height: clamp(40px, 5.35vh, 54px) !important;
  max-height: 54px !important;
  margin-right: 0 !important;
}

.reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs {
  justify-self: end !important;
  align-self: stretch !important;
  height: 100% !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

.reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs button {
  height: 100% !important;
  padding: 0 13px !important;
  white-space: nowrap !important;
}

.reference-dashboard.ref-view-timeline .tl-galhead {
  display: none !important;
}

@media (max-width: 1180px) {
  .reference-dashboard.ref-view-timeline .reference-content>.ref-filterbar.ref-filterbar--timeline {
    grid-template-columns: max-content minmax(120px, .75fr) minmax(175px, 1fr) minmax(145px, .8fr) max-content !important;
  }

  .reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs button {
    gap: 5px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 920px) {
  .reference-dashboard.ref-view-timeline .reference-content>.ref-filterbar.ref-filterbar--timeline {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    max-height: none !important;
  }

  .reference-dashboard.ref-view-timeline .ref-filterbar--timeline>strong,
  .reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs {
    grid-column: 1 / -1 !important;
  }

  .reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs {
    justify-self: stretch !important;
  }

  .reference-dashboard.ref-view-timeline .ref-filterbar--timeline>.ref-filter-tabs button {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-height: 36px !important;
  }
}

/* Timeline full-frame fit: cards use the available shell height after the inline filters. */
@media (min-width: 960px) and (min-height: 620px) {
  .reference-dashboard.ref-view-timeline .reference-content {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(8px, 1vh, 10px) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    align-content: stretch !important;
  }

  .reference-dashboard.ref-view-timeline .reference-content>.ref-filterbar.ref-filterbar--timeline {
    flex: 0 0 clamp(40px, 5.35vh, 54px) !important;
  }

  .reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: clamp(8px, 1.2vh, 12px) !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid {
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(12px, 1.7vh, 16px) !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols3 {
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .reference-dashboard.ref-view-timeline .tl-card {
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .reference-dashboard.ref-view-timeline .tl-top,
  .reference-dashboard.ref-view-timeline .tl-stats,
  .reference-dashboard.ref-view-timeline .tl-cta {
    flex: 0 0 auto !important;
  }

  .reference-dashboard.ref-view-timeline .tl-trail {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
  }

  .reference-dashboard.ref-view-timeline .tl-trail svg {
    height: 100% !important;
    min-height: 34px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-morewrap {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 960px) and (min-height: 760px) {
  .reference-dashboard.ref-view-timeline .tl-top {
    padding: 14px 16px 8px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-stats>div {
    padding: 8px 6px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-cta {
    padding: 8px 15px !important;
  }
}

/* Timeline client cards: make the visible 8 cards larger so the gallery fills the page. */
@media (min-width: 960px) and (min-height: 620px) {
  .reference-dashboard.ref-view-timeline .tl-grid.cols4 {
    grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-card {
    min-height: 220px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-top {
    padding: clamp(13px, 1.8vh, 17px) 16px 8px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-medal {
    width: clamp(40px, 5.7vh, 46px) !important;
    height: clamp(40px, 5.7vh, 46px) !important;
    border-radius: 13px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-trail {
    min-height: clamp(44px, 7vh, 70px) !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-stats>div {
    padding: clamp(7px, 1.2vh, 10px) 6px !important;
  }

  .reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-cta {
    padding: clamp(8px, 1.35vh, 11px) 15px !important;
  }
}

/* Timeline cards: remove the stretched decorative backing so each item is a single clean card. */
.reference-dashboard.ref-view-timeline .tl-card {
  background: #1a1d21 !important;
  background-image: none !important;
}

.reference-dashboard.ref-view-timeline .tl-card::before,
.reference-dashboard.ref-view-timeline .tl-wash {
  display: none !important;
}

/* Timeline workspace: no wrapper/card behind the 8 cards. */
.reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

.reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace::before,
.reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace::after {
  display: none !important;
  content: none !important;
}

/* Timeline load-more: keep the action, remove the extra card-looking pill. */
.reference-dashboard.ref-view-timeline .tl-morewrap {
  margin-top: 0 !important;
  padding-top: 2px !important;
}

.reference-dashboard.ref-view-timeline .tl-loadmore {
  background: #1e2024 !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 10px 20px !important;
  color: #f2efe9 !important;
}

.reference-dashboard.ref-view-timeline .tl-loadmore:hover {
  background: #212429 !important;
  border-color: var(--ref-violet) !important;
  transform: translateY(-1px) !important;
  color: var(--orange) !important;
}

/* Timeline: remove the full-height backing panel; only the 8 cards should occupy this area. */
.reference-dashboard.ref-view-timeline .reference-content {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
}

.reference-dashboard.ref-view-timeline .reference-content>.ref-filterbar.ref-filterbar--timeline {
  margin-bottom: 10px !important;
}

.reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.reference-dashboard.ref-view-timeline .tl-grid {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-content: start !important;
}

.reference-dashboard.ref-view-timeline .tl-grid.cols4 {
  grid-template-rows: none !important;
  grid-auto-rows: minmax(208px, auto) !important;
}

.reference-dashboard.ref-view-timeline .tl-grid.cols4 .tl-card {
  height: auto !important;
  min-height: 208px !important;
}

/* Timeline cards: ranked items should not get a special orange outline. */
.reference-dashboard.ref-view-timeline .tl-card.ranked,
.reference-dashboard.ref-view-timeline .tl-card:hover {
  border-color: var(--ref-border) !important;
}

/* Timeline card hover: give the glow room, but keep the content scrollable so
   the last row + Load-more button are never clipped by the page shell. */
.reference-dashboard.ref-view-timeline .reference-content>.ref-timeline-workspace,
.reference-dashboard.ref-view-timeline .tl-grid {
  overflow: visible !important;
}

.reference-dashboard.ref-view-timeline .reference-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 12px !important;
}

.reference-dashboard.ref-view-timeline .tl-grid {
  padding: 8px 10px 14px !important;
  margin: -8px -10px -4px !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover {
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38), 0 0 34px -10px var(--tint) !important;
}

/* Timeline hover polish: no colored glow blocks, just a clean neutral lift. */
.reference-dashboard.ref-view-timeline .tl-grid {
  padding: 0 !important;
  margin: 0 !important;
}

.reference-dashboard.ref-view-timeline .tl-card,
.reference-dashboard.ref-view-timeline .tl-card:hover {
  border-color: var(--ref-border) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover {
  transform: translateY(-2px) !important;
  background: #1b1e22 !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover .tl-cta {
  background: transparent !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover .tl-cta .material-symbols-rounded {
  color: var(--orange) !important;
}

/* Timeline hover: restore a clean contained glow without the clipped outside block. */
.reference-dashboard.ref-view-timeline .tl-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--tint) 42%, var(--ref-border)) !important;
  background: #1b1e22 !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .34),
    inset 0 0 0 1px color-mix(in srgb, var(--tint) 28%, transparent),
    inset 0 -34px 44px -38px color-mix(in srgb, var(--tint) 70%, transparent),
    inset 0 28px 42px -40px color-mix(in srgb, var(--tint) 58%, transparent) !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover .tl-cta {
  color: #f0ede6 !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tint) 10%, transparent)) !important;
}

.reference-dashboard.ref-view-timeline .tl-card:hover .tl-cta .material-symbols-rounded {
  color: var(--tint) !important;
}

/* Account/engineer request rows: clean contained glow instead of harsh orange outline. */
.reference-dashboard .ref-acct-requests {
  overflow: visible !important;
}

.reference-dashboard .ref-acct-req-body {
  display: grid !important;
  gap: 8px !important;
  padding: 2px 2px 8px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

.reference-dashboard .ref-acct-req-row {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #2b2e34 !important;
  border-radius: 14px !important;
  background: #1b1e23 !important;
  box-shadow: none !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.reference-dashboard .ref-acct-req-row::before,
.reference-dashboard .ref-acct-req-row::after {
  display: none !important;
  content: none !important;
}

.reference-dashboard .ref-acct-req-row[role="button"]:hover,
.reference-dashboard .ref-acct-req-row[role="button"]:focus-visible {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--orange) 42%, #2b2e34) !important;
  background: #1d2025 !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .24),
    inset 0 0 0 1px rgb(from var(--app-accent) r g b /.16),
    inset 0 -24px 34px -30px rgb(from var(--app-accent) r g b /.68) !important;
}

.reference-dashboard .ref-acct-req-row[role="button"]:focus-visible {
  outline: 2px solid rgb(from var(--app-accent) r g b /.28) !important;
  outline-offset: 2px !important;
}

.reference-dashboard .ref-acct-req-row[role="button"]:hover>strong,
.reference-dashboard .ref-acct-req-row[role="button"]:focus-visible>strong {
  color: #ff9b58 !important;
}

/* Map selected request: make the details area fully reachable when the panel scrolls. */
.reference-dashboard.ref-view-map .ref-map-sr-panel {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-bottom: 34px !important;
  scroll-padding-bottom: 34px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  flex: 0 0 auto !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 15px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  padding-bottom: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  min-height: 50px !important;
  padding: 10px 11px !important;
  box-sizing: border-box !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.2 !important;
}

/* Map selected request v2: top page first, details page after scroll. */
.reference-dashboard.ref-view-map .ref-map-workspace.ref-map-workspace--3col {
  align-items: start !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel {
  --selected-request-viewport: clamp(390px, 53vh, 430px);
  align-self: start !important;
  height: min(100%, var(--selected-request-viewport)) !important;
  min-height: min(100%, var(--selected-request-viewport)) !important;
  max-height: min(100%, var(--selected-request-viewport)) !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 18px 16px 28px !important;
  scroll-padding-bottom: 28px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head {
  margin-bottom: 15px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps {
  margin-bottom: 17px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers {
  margin-top: 17px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid>button {
  height: 58px !important;
  border-radius: 11px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers {
  padding-bottom: 2px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 26px !important;
  padding-bottom: 12px !important;
  scroll-margin-top: 16px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  min-height: 56px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (min-height: 820px) {
  .reference-dashboard.ref-view-map .ref-map-sr-panel {
    --selected-request-viewport: 440px;
  }
}

@media (max-height: 700px) {
  .reference-dashboard.ref-view-map .ref-map-sr-panel {
    --selected-request-viewport: clamp(360px, 58vh, 400px);
    padding-top: 16px !important;
  }

  .reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
    margin-top: 22px !important;
  }
}

/* Live Tracker focused SR: default map stays compact; clicked SR becomes the zoomed scroll card. */
.reference-dashboard.ref-view-map .ref-map-workspace.ref-map-workspace--3col:not(.ref-map-workspace--focused) {
  align-items: stretch !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace.ref-map-workspace--3col:not(.ref-map-workspace--focused) .ref-map-sr-panel {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: clamp(16px, 1.9vh, 22px) 18px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace.ref-map-workspace--focused {
  grid-template-columns: clamp(330px, 25vw, 390px) minmax(0, 1fr) clamp(390px, 29vw, 430px) !important;
  align-items: stretch !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-sr-panel {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 20px 20px 34px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-padding-bottom: 34px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: linear-gradient(155deg, #292a2d 0%, #1c1d20 100%) !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head {
  margin-bottom: 18px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head span,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-subtitle {
  font-size: 9px !important;
  letter-spacing: .075em !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head h2 {
  font-size: 26px !important;
  line-height: 1.02 !important;
  margin: 5px 0 6px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head small {
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps {
  margin-bottom: 22px !important;
  gap: 5px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps span>i {
  width: 14px !important;
  height: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps small {
  font-size: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps--timed span time {
  font-size: 7px !important;
  min-height: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers {
  margin-top: 22px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid>button {
  height: 68px !important;
  border-radius: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div {
  gap: 12px !important;
  padding: 10px 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div>i {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers strong {
  font-size: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers small,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-empty {
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
  margin-top: 38px !important;
  padding-bottom: 18px !important;
  scroll-margin-top: 18px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid {
  gap: 12px !important;
  margin-top: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid>div {
  min-height: 68px !important;
  padding: 13px 14px !important;
  border-radius: 13px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid small {
  font-size: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid strong {
  font-size: 14px !important;
  line-height: 1.18 !important;
}

/* Focused Live Tracker SR: keep the first viewport clean; details should appear only after scroll. */
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
  margin-top: clamp(72px, 9vh, 96px) !important;
}

@media (max-height: 700px) {
  .reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
    margin-top: 64px !important;
  }
}

/* Focused Live Tracker SR v3: fit the full selected request card without scrolling. */
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-sr-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 18px 18px 18px !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head {
  margin-bottom: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head h2 {
  font-size: 24px !important;
  line-height: 1 !important;
  margin: 4px 0 5px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head small {
  font-size: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps {
  margin-bottom: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers {
  margin-top: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-subtitle {
  margin-bottom: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-empty {
  margin: 0 !important;
  line-height: 1.25 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid {
  gap: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid>button {
  height: 58px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div {
  padding: 8px 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div>i {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
  margin-top: 16px !important;
  padding-bottom: 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid {
  gap: 9px !important;
  margin-top: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid>div {
  min-height: 53px !important;
  padding: 10px 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid strong {
  font-size: 13px !important;
}

/* Focused Live Tracker SR v4: clicked SR owns the full tracker height, no bottom clipping. */
.reference-dashboard.ref-view-map .reference-content:has(> .ref-map-workspace--focused) {
  grid-template-rows: 48px minmax(0, 1fr) !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace--focused {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused+.ref-map-analytics {
  display: none !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-browse,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-stage,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-stage iframe,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-sr-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-sr-panel {
  overflow: hidden !important;
  padding: 18px 18px 20px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head {
  margin-bottom: 11px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps {
  margin-bottom: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers {
  margin-top: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
  margin-top: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid>div {
  min-height: 52px !important;
}

/* Live Tracker focused SR v5: restore the normal dashboard layout, fit details inside the rail. */
.reference-dashboard.ref-view-map .reference-content:has(> .ref-map-workspace--focused) {
  grid-template-rows: 48px minmax(255px, 1fr) clamp(142px, 19vh, 166px) !important;
  gap: clamp(8px, 1vh, 12px) !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace--focused {
  grid-row: 2 !important;
  grid-template-columns: clamp(330px, 25vw, 390px) minmax(0, 1fr) clamp(330px, 24vw, 370px) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: stretch !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused+.ref-map-analytics {
  grid-row: 3 !important;
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-map-sr-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 15px 15px 14px !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head {
  margin-bottom: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head span,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-subtitle {
  font-size: 8px !important;
  line-height: 1.1 !important;
  margin-bottom: 7px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head h2 {
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 3px 0 4px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-head small {
  font-size: 8.5px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-status {
  font-size: 8px !important;
  padding: 5px 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps {
  margin-bottom: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps span {
  gap: 4px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps span>i {
  width: 12px !important;
  height: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps small {
  font-size: 6.5px !important;
  line-height: 1.05 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-progress-steps--timed span time {
  font-size: 6px !important;
  min-height: 7px !important;
  margin-top: 1px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers {
  margin-top: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-media-grid>button {
  height: 50px !important;
  border-radius: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-empty {
  font-size: 8.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div {
  gap: 9px !important;
  padding: 6px 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers>div>i {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 10px !important;
  font-size: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers strong {
  font-size: 9.5px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-engineers small {
  font-size: 7.5px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-details {
  margin-top: 11px !important;
  padding-bottom: 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 7px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid>div {
  min-height: 45px !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid small {
  font-size: 7px !important;
}

.reference-dashboard.ref-view-map .ref-map-workspace--focused .ref-sr-detail-grid strong {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

@media (max-height: 720px) {
  .reference-dashboard.ref-view-map .reference-content:has(> .ref-map-workspace--focused) {
    grid-template-rows: 42px minmax(230px, 1fr) 140px !important;
  }
}

/* Live Tracker reset: restore stable map dashboard layout after focused-panel experiment. */
.reference-dashboard.ref-view-map .reference-content {
  display: grid !important;
  grid-template-rows: 48px minmax(255px, 1fr) clamp(142px, 19vh, 166px) !important;
  gap: clamp(8px, 1vh, 12px) !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col {
  grid-row: 2 !important;
  grid-template-columns: clamp(292px, 22vw, 330px) minmax(0, 1fr) clamp(315px, 23vw, 350px) !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-browse,
.reference-dashboard.ref-view-map .ref-map-stage,
.reference-dashboard.ref-view-map .ref-map-stage iframe,
.reference-dashboard.ref-view-map .ref-map-sr-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel {
  align-self: stretch !important;
  display: block !important;
  border-radius: 26px !important;
  padding: 16px 15px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-analytics,
.reference-dashboard.ref-view-map .ref-map-analytics {
  grid-row: 3 !important;
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 12px !important;
}

.reference-dashboard.ref-view-map .ref-sr-head {
  margin-bottom: 12px !important;
}

.reference-dashboard.ref-view-map .ref-sr-head h2 {
  font-size: 22px !important;
  line-height: 1.05 !important;
  margin: 4px 0 4px !important;
}

.reference-dashboard.ref-view-map .ref-sr-head small {
  font-size: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps {
  margin-bottom: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid>button {
  height: 52px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid {
  gap: 8px !important;
  margin-top: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  min-height: 48px !important;
  padding: 8px 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid strong {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

@media (max-height: 720px) {
  .reference-dashboard.ref-view-map .reference-content {
    grid-template-rows: 42px minmax(230px, 1fr) 140px !important;
  }
}

/* Live Tracker selected request: shrink the right card to its content, not the full map height. */
.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col .ref-map-sr-panel {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding-bottom: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Live Tracker selected request: keep the full-height card and use larger readable content. */
.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col .ref-map-sr-panel {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px 18px 20px !important;
  overflow: hidden !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head {
  margin-bottom: 16px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head span,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-subtitle {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head h2 {
  font-size: 26px !important;
  line-height: 1.02 !important;
  margin: 5px 0 6px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head small {
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-status {
  font-size: 9px !important;
  padding: 6px 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps {
  margin-bottom: 17px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps span {
  gap: 5px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps span>i {
  width: 14px !important;
  height: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps small {
  font-size: 8.5px !important;
  line-height: 1.1 !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps--timed span time {
  font-size: 8px !important;
  min-height: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 15px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-subtitle {
  margin-bottom: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-empty {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid {
  gap: 8px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid>button {
  height: 62px !important;
  border-radius: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers>div {
  gap: 12px !important;
  padding: 9px 0 !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers>div>i {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers strong {
  font-size: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers small {
  font-size: 9px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 16px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid {
  gap: 10px !important;
  margin-top: 10px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  min-height: 58px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid small {
  font-size: 9px !important;
  letter-spacing: .06em !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid strong {
  font-size: 13px !important;
  line-height: 1.18 !important;
}

/* Live Tracker selected request repair: scroll works, long IDs stay clean. */
.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col .ref-map-sr-panel {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 17px 16px 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.reference-dashboard.ref-view-map .reference-content>.ref-map-workspace.ref-map-workspace--3col .ref-map-sr-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head {
  position: relative !important;
  display: block !important;
  margin-bottom: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head>div {
  min-width: 0 !important;
  padding-right: 96px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head .ref-status {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  max-width: 92px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head h2 {
  display: block !important;
  max-width: 100% !important;
  font-size: clamp(15px, 1.8vw, 19px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  margin: 5px 0 5px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-head small {
  display: block !important;
  max-width: 100% !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-progress-steps {
  margin-bottom: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers,
.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-details {
  margin-top: 14px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-media-grid>button {
  height: 56px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-engineers>div>i {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid>div {
  min-height: 54px !important;
}

.reference-dashboard.ref-view-map .ref-map-sr-panel .ref-sr-detail-grid strong {
  font-size: 12px !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Requests list click repair: keep every SR row above neighboring surfaces and fully clickable. */
.reference-dashboard.ref-view-requests .ref-workspace-body>aside {
  position: relative !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}

.reference-dashboard.ref-view-requests .ref-request-list {
  position: relative !important;
  z-index: 9 !important;
  pointer-events: auto !important;
}

.reference-dashboard.ref-view-requests .ref-request-row {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.reference-dashboard.ref-view-requests .ref-request-row::before,
.reference-dashboard.ref-view-requests .ref-request-row::after {
  pointer-events: none !important;
}

.reference-dashboard.ref-view-requests .ref-request-row>* {
  pointer-events: none !important;
}

.reference-dashboard.ref-view-requests .ref-request-detail {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   Field Crew kiosk scene — auto-scrolling wall of engineer cards
   ============================================================ */
.ref-crew-scene {
  height: 100%;
  min-height: 0;
}

.ref-crew-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 8px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgb(from var(--app-accent) r g b /.5) transparent;
  scroll-behavior: auto;
  /* JS drives the scroll; no smooth easing fighting it */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.ref-crew-scroll::-webkit-scrollbar {
  width: 8px;
}

.ref-crew-scroll::-webkit-scrollbar-thumb {
  background: rgb(from var(--app-accent) r g b /.45);
  border-radius: 999px;
}

.ref-crew-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ref-crew-grid {
  gap: 12px;
  align-content: start;
  padding-bottom: 4px;
}

@media (max-width: 1200px) {
  .ref-crew-grid.tl-grid.cols3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* SR chooser overlay (inside the account modal section) */
.ref-acct-chooser {
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ref-acct-chooser-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 12, 16, .62);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.ref-acct-chooser-card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: 100%;
  overflow: auto;
  background: linear-gradient(180deg, #22262d, #191b20);
  border: 1px solid #33373f;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.ref-acct-chooser-card>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ref-acct-chooser-card>header span {
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--app-accent);
  font-weight: 700;
}

.ref-acct-chooser-card>header h4 {
  margin: 3px 0 0;
  font-size: 17px;
  color: #f4f5f7;
}

.ref-acct-chooser-card>header button {
  border: 0;
  background: #2c313a;
  color: #cfd3da;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ref-acct-chooser-all {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 13px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  color: #fff;
  border: 1px solid rgb(from var(--app-accent) r g b /.5);
  background: linear-gradient(120deg, rgb(from var(--app-accent) r g b /.22), rgb(from var(--app-accent) r g b /.06));
}

.ref-acct-chooser-all i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(160deg, #f5a24e, var(--app-accent));
  color: #241200;
  flex: 0 0 auto;
}

.ref-acct-chooser-all span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ref-acct-chooser-all strong {
  font-size: 14px;
}

.ref-acct-chooser-all small {
  font-size: 11.5px;
  color: #c7ccd4;
}

.ref-acct-chooser-card>header h4 em {
  font-style: normal;
  font-size: 12px;
  color: #8a9099;
  font-weight: 500;
}

.ref-acct-chooser-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #33373f;
  background: #1a1c22;
}

.ref-acct-chooser-search .material-symbols-rounded {
  font-size: 18px;
  color: #8a9099;
}

.ref-acct-chooser-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #e7e9ee;
  font-size: 13px;
  outline: none;
}

.ref-acct-chooser-search input::placeholder {
  color: #6b7078;
}

.ref-acct-chooser-search button {
  border: 0;
  background: transparent;
  color: #8a9099;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ref-acct-chooser-empty {
  color: #8a9099;
  font-size: 12.5px;
  text-align: center;
  padding: 14px 0;
}

.ref-acct-chooser-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 10px;
  color: #8a9099;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.ref-acct-chooser-sep::before,
.ref-acct-chooser-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #33373f;
}

.ref-acct-chooser-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.ref-acct-chooser-item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #33373f;
  background: #1e2127;
  color: #e7e9ee;
  transition: border-color .15s, background .15s;
}

.ref-acct-chooser-item:hover {
  border-color: #4a4f59;
  background: #23262d;
}

.ref-acct-chooser-item.on {
  border-color: var(--app-accent);
  background: rgb(from var(--app-accent) r g b /.10);
}

.ref-acct-chooser-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ref-acct-chooser-item .chk {
  display: grid;
  place-items: center;
  color: #8a9099;
}

.ref-acct-chooser-item.on .chk {
  color: var(--app-accent);
}

.ref-acct-chooser-item .chk .material-symbols-rounded {
  font-size: 20px;
}

.ref-acct-chooser-item strong {
  font-size: 13px;
  font-weight: 700;
}

.ref-acct-chooser-item small {
  font-size: 11px;
  color: #9aa0aa;
}

.ref-acct-chooser-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #33373f;
}

.ref-acct-chooser-foot .all-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c7ccd4;
  cursor: pointer;
}

.ref-acct-chooser-foot .count {
  color: #9aa0aa;
  font-size: 12px;
}

.ref-acct-chooser-foot .gen {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: 600 13px/1 inherit;
  color: #fff;
  background: linear-gradient(180deg, #17a79b, #0e8e86);
  box-shadow: 0 8px 20px -8px rgba(14, 142, 134, .7);
}

.ref-acct-chooser-foot .gen .material-symbols-rounded {
  font-size: 18px;
}

.ref-acct-chooser-foot .gen:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.ref-acct-chooser-foot .gen:not(:disabled):hover {
  transform: translateY(-1px);
}

.ref-acct-chooser-list--legacy button {
  display: flex;
}

.ref-acct-chooser-list button {
  display: grid;
  grid-template-columns: 1fr auto auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #33373f;
  background: #1e2127;
  color: #e7e9ee;
  transition: border-color .15s, background .15s, transform .1s;
}

.ref-acct-chooser-list button:hover {
  border-color: var(--app-accent);
  background: #23262d;
  transform: translateX(2px);
}

.ref-acct-chooser-list strong {
  font-size: 13px;
  font-weight: 700;
}

.ref-acct-chooser-list small {
  font-size: 11px;
  color: #9aa0aa;
}

.ref-acct-chooser-list .material-symbols-rounded {
  font-size: 18px;
  color: #8a9099;
}

/* Generation loading overlay */
.ref-acct-genoverlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: rgba(12, 14, 18, .72);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}

.ref-acct-genoverlay>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 22px 30px;
}

.ref-acct-genoverlay b {
  color: #f4f5f7;
  font-size: 15px;
}

.ref-acct-genoverlay small {
  color: #aeb3bc;
  font-size: 12px;
  max-width: 320px;
}

.ref-acct-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgb(from var(--app-accent) r g b /.25);
  border-top-color: var(--app-accent);
  animation: ref-acct-spin .8s linear infinite;
}

/* Full-page overlay while the Reports page builds a detailed customer PDF */
.ref-report-genoverlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 16, .72);
  backdrop-filter: blur(3px);
}

.ref-report-genoverlay>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 28px 36px;
  border-radius: 16px;
  background: linear-gradient(180deg, #22262d, #191b20);
  border: 1px solid #33373f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.ref-report-genoverlay b {
  color: #f4f5f7;
  font-size: 15px;
}

.ref-report-genoverlay small {
  color: #aeb3bc;
  font-size: 12px;
  max-width: 320px;
}

.ref-report-export button.busy .material-symbols-rounded {
  animation: ref-acct-spin 1s linear infinite;
}

.ref-report-export button:disabled {
  opacity: .75;
  cursor: progress;
}